openipc.kr

티스토리 블로그 꾸미기 외부 글 리스트 자동으로 표시하는 방법

by

티스토리 블로그에 외부 글 리스트 꾸미기

티스토리 블로그에 외부 또는 같이 운영중인 다른 블로그의 최신글을 이용해 티스토리 블로그 꾸미기 작업을 하는 방법입니다. 외부 콘텐츠를 공유하는것은 방문자의 체류 시간 늘리는 것과 정보 제공 차원에서 중요한 역할을 합니다. 아래는 그러한 방법중 다른 블로그및 사이트에서 최신글의 제목과 간략한 내용을 티스토리 블로그에 정보를 제공하는 방법중 하나입니다.

티스토리 블로그 꾸미기

블로그에 외부 글 리스트 꾸미기 코드

티스토리 블로그에서는 다양한 방법으로 티스토리 블로그 꾸미기를 할수 있습니다. 예로 ,외부 글을 불러오고, 그 리스트를 꾸밀 수 있습니다. RSS 피드를 활용하여 외부 사이트의 최신 글들을 자동으로 가져와 블로그에 표시하는 방법을 사용하는 방법입니다. 이를 통해 블로그 방문자에게 다른 블로그와 다른 사이트의 정보를 손쉽게 제공할 수 있습니다.

이번 글에서는 외부 RSS 피드에서 데이터를 가져와 티스토리 블로그에 표시하는 방법과, 해당 글 리스트를 HTML과 CSS로 꾸미는 방법에 대해 다뤄보겠습니다.

RSS 피드 가져오기

먼저, 외부 RSS 피드를 가져와 티스토리 블로그에 표시할 수 있도록 합니다. 이를 위해 JavaScript의 fetch()를 사용하여 데이터를 비동기적으로 가져오고, HTML에 동적으로 추가하는 방식으로 사용할 수 있습니다.

아래와 같은 JavaScript 코드를 사용하면 외부 RSS 에서 데이터를 가져와 리스트로 표시할 수 있습니다:

티스토리 블로그 꾸미기

티스토리 블로그 꾸미기 HTML 코드

기존 티스토리 블로그의 COVER-LIST 코드를 아래 코드로 변경하면 됩니다. 또한 불러올 사이트나 블로그의 주소를 변경해서 사용하면 됩니다.

 <script defer="defer">
    async function fetchRSS() {
        const rssUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https://everydayhub.tistory.com/rss';

        try {
            const response = await fetch(rssUrl);
            const { items } = await response.json();

            const coverItemsList = document.getElementById('cover-items');
            const limitedItems = items.slice(0, 5);

            limitedItems.forEach(item => {
                const coverItem = document.createElement('div');
                coverItem.className = 'cover-item';
                const listItem = document.createElement('li');
                const link = document.createElement('a');
                link.href = item.link;
                link.target = '_blank';

                const titleDiv = document.createElement('div');
                titleDiv.className = 'title';
                titleDiv.innerHTML = item.title;

                const excerptDiv = document.createElement('div');
                excerptDiv.className = 'excerpt';
                excerptDiv.innerHTML = item.description;

                if (excerptDiv.innerHTML.length > 200) {
                    excerptDiv.innerHTML = excerptDiv.innerHTML.substring(0, 200) + '...';
                }

                const dateDiv = document.createElement('div');
                dateDiv.className = 'date';
                dateDiv.innerHTML = new Date(item.pubDate).toLocaleDateString();

                const articleInfo = document.createElement('div');
                articleInfo.className = 'article-info';
                const dateSpan = document.createElement('span');
                dateSpan.appendChild(dateDiv);
                articleInfo.appendChild(dateSpan);

                link.appendChild(titleDiv);
                link.appendChild(excerptDiv);
                link.appendChild(articleInfo);

                listItem.appendChild(link);
                coverItem.appendChild(listItem);
                coverItemsList.appendChild(coverItem);
            });
        } catch (error) {
            console.error('RSS 데이터를 가져오는 중 오류 발생:', error);
        }
    }

    fetchRSS();
    </script>

홈 커버 스킨의 기본 리스트 기본 CSS

티스토리 기본 리스트에서 기본적으로 제공하는 CSS 입니다. 추가 수정하거나 변경해서 사용하시며 됩니다.

.cover-list {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 42px;
}

.cover-list h2 {
    margin-bottom: 35px;
    padding-bottom: 19px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
    font-size: 1em;
    color: #555;
}

.cover-list ul li {
    overflow: hidden;
    margin-bottom: 33px;
}

.cover-list ul li a {
    display: block;
    text-decoration: none;
}

.cover-list ul li .title {
    display: block;
    overflow: hidden;
    max-width: 95%;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25em;
    line-height: 1.4;
}

.cover-list ul li .excerpt {
    display: block;
    overflow: hidden;
    max-width: 95%;
    margin-bottom: 18px;
    text-overflow: ellipsis;
    font-size: 0.875em;
    line-height: 1.5rem;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cover-list ul li .date {
    display: block;
    font-size: 0.75em;
    color: #999;
}
 

CSS 적용 코드

티스토리 블로그 리스트 코드에 적용되는 CSS 입니다. 사용하는 블로그에 맞게 수정해서 사용하거나 추가하시면 됩니다.

 <script defer="defer">
    async function fetchRSS() {
        const rssUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https://everydayhub.tistory.com/rss';

        try {
            const response = await fetch(rssUrl);
            const { items } = await response.json();

            const coverItemsList = document.getElementById('cover-items');
            const limitedItems = items.slice(0, 5);

            limitedItems.forEach(item => {
                const coverItem = document.createElement('div');
                coverItem.className = 'cover-item';
                const listItem = document.createElement('li');
                const link = document.createElement('a');
                link.href = item.link;
                link.target = '_blank';

                const titleDiv = document.createElement('div');
                titleDiv.className = 'title';
                titleDiv.innerHTML = item.title;

                const excerptDiv = document.createElement('div');
                excerptDiv.className = 'excerpt';
                excerptDiv.innerHTML = item.description;

                if (excerptDiv.innerHTML.length > 200) {
                    excerptDiv.innerHTML = excerptDiv.innerHTML.substring(0, 200) + '...';
                }

                const dateDiv = document.createElement('div');
                dateDiv.className = 'date';
                dateDiv.innerHTML = new Date(item.pubDate).toLocaleDateString();

                const articleInfo = document.createElement('div');
                articleInfo.className = 'article-info';
                const dateSpan = document.createElement('span');
                dateSpan.appendChild(dateDiv);
                articleInfo.appendChild(dateSpan);

                link.appendChild(titleDiv);
                link.appendChild(excerptDiv);
                link.appendChild(articleInfo);

                listItem.appendChild(link);
                coverItem.appendChild(listItem);
                coverItemsList.appendChild(coverItem);
            });
        } catch (error) {
            console.error('RSS 데이터를 가져오는 중 오류 발생:', error);
        }
    }

    fetchRSS();
    </script>

홈 커버 스킨의 기본 리스트 기본 CSS

티스토리 기본 리스트에서 기본적으로 제공하는 CSS 입니다. 추가 수정하거나 변경해서 사용하시며 됩니다.

.cover-list {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 42px;
}

.cover-list h2 {
    margin-bottom: 35px;
    padding-bottom: 19px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
    font-size: 1em;
    color: #555;
}

.cover-list ul li {
    overflow: hidden;
    margin-bottom: 33px;
}

.cover-list ul li a {
    display: block;
    text-decoration: none;
}

.cover-list ul li .title {
    display: block;
    overflow: hidden;
    max-width: 95%;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25em;
    line-height: 1.4;
}

.cover-list ul li .excerpt {
    display: block;
    overflow: hidden;
    max-width: 95%;
    margin-bottom: 18px;
    text-overflow: ellipsis;
    font-size: 0.875em;
    line-height: 1.5rem;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cover-list ul li .date {
    display: block;
    font-size: 0.75em;
    color: #999;
}
 

스타일 설명

  • .cover-item: 각 글을 감싸는 카드의 스타일입니다.
  • .title: 글 제목에 대한 스타일을 지정합니다.
  • .excerpt: 글의 요약 내용이나 설명 부분을 스타일입니다.
  • .article-info: 날짜를 표시하는 부분입니다.

적용 방법

티스토리 블로그에서는 HTML, CSS, JavaScript를 <head>나 <body>에 삽입하여 외부 글 리스트를 표시할 수 있습니다. fetchRSS() 함수는 티스토리 블로그의 페이지에 삽입되어, 방문자가 페이지를 로드할 때 외부 RSS 피드의 최신 글들이 자동으로 가져옵니다.

  • HTML/JavaScript 코드는 티스토리 블로그의 HTML 편집에서 삽입합니다.
  • CSS는 블로그의 스타일 관리에서 추가하거나, HTML <style> 태그 안에 또는 CSS 란에 삽입합니다.

Leave a Comment