다른 사이트, 블로그 최신글을 이용해서 리스트 형태로 표시하기

티스토리 블로그에 최신글 목록 추가하는 방법

다른 블로그의 최신글을 불러와서 블로그의 메인 화면을 꾸미는 방법은 여러가지가 있습니다. 특히 이미지, 동영상, 최근 글 목록 등을 통해 블로그를 더욱 풍성 다채롭게 꾸밀 수 있습니다. 다른 사이트나 서브 블로그의 최신 글 목록을 표시해 주면 방문자가 쉽게 다른 블로그로 안내를 해줄수 있습니다. 또한 방문자의 체류 시간을 늘려줄수 있고 더불어 백링크의 효과도 볼수 있습니다.

아래 내용은 쉽게 티스토리 블로그 기본 스킨을 활용해서 다른 사이트나 블로그의 최신글 목록을 표시해 주는 방법입니다.

티스토리 메인 리스트 꾸미기

다른 블로그 또는 사이트의 RSS 정보를 이용해서 간단하게 메인 화면의 꾸밀 수 있습니다. 아래는 기존의 티스토리 BOOK 스킨의 기본 리스트 코드를 활용해서 제목과 글내용 .글 날짜를 메인 화면에 최신글 목록 형태로 노출시킬수 있습니다.

최신글 목록 코드

티스토리 홈페이지 기본 리스트 형태 글 목록

홈 커버 기본 리스트 기본 코드

티스토 스킨에서 기본적으로 제공하는 기본 리스트 HTML 코드입니다.

<s_cover name='cover-list'>
 <div class="cover-list">
 <h2></h2>
 <ul>
 <s_cover_item>
 <li>
 <a href="">
 <span class="title"></span> <span class="excerpt"></span> <s_cover_item_article_info>
 <span class="date"></span> </s_cover_item_article_info>
 </a>
 </li>
 </s_cover_item>
 </ul>
 </div>
 </s_cover>

홈 커버 기본 리스트 수정 코드

티스토리 기본 스킨을 변경해서 아래 코드로 사용합니다. 아래 코드는 기본적으로 RSS 정보를 이용해서 기본 리스트 형태로 출력해 줍니다.

<s_cover name='cover-list'>
    <div class="cover-list">
        <ul id="cover-items">
        </ul>
    </div>
</s_cover>

홈 커버 기본 리스트 RSS 스크립트 코드

이 코드는 RSS 주소를 통해 다른 사이트나 블로그의 최신 글을 자동으로 불러오는 JavaScript입니다. RSS URL을 수정하여 원하는 블로그의 최신 글을 표시할 수 있습니다.

    <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;
}