[티스토리] 태그로 글 가져오기

최종 수정일 : 2021-01-13 19:56 (1주 전)

위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다.

워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다.

1. Array를 반환하는 버전

async function getPostsByTag({ tag, selector, title, date, desc }) {
    const isArray = Array.isArray(tag);
    const isString = typeof tag === "string";

    if (!isArray && !isString)
        return console.error("올바르지 않은 태그입니다.");

    if (isArray) {
        const tagArray = [];

        await Promise.all(
            tag.map((tagString) =>
                getThePosts({
                    tag: tagString,
                    selector,
                    title,
                    date,
                    desc,
                })
            )
        ).then((tags) => {
            tags.forEach((tags) => {
                tagArray.push(...tags);
            });
        });

        if (date && new Date(tagArray[0].date).getTime) {
            tagArray.sort(
                (tag1, tag2) => new Date(tag1.date) - new Date(tag2.date)
            );
        }

        return tagArray;
    } else if (isString) {
        const tags = await getThePosts(tag, selector);

        return tags;
    }
}

async function getThePosts({ tag, selector, title, date, desc }) {
    try {
        const response = await fetch(`/tag/${encodeURI(tag)}`);
        const html = await response.text();
        const domParser = new DOMParser().parseFromString(html, "text/html");
        const array = [].map.call(
            domParser.querySelectorAll(selector),
            (element) => {
                const titleElem = title && element.querySelector(title);
                const dateElem = date && element.querySelector(date);
                const descElem = desc && element.querySelector(desc);

                return {
                    uri: `${element.href || element.querySelector("a").href}`,
                    title: `${titleElem ? titleElem.innerHTML : ""}`,
                    date: `${dateElem ? dateElem.innerHTML : ""}`,
                    desc: `${descElem ? descElem.innerHTML : ""}`,
                };
            }
        );

        return array;
    } catch (error) {
        console.error(error);
        return [];
    }
}

Array를 반환하는 버전입니다.

코드 예시

getPostsByTag({
    tag: ["티스토리", "제작일지"],
    selector: ".indexArticle",
    title: ".tit_post",
    date: ".date",
    desc: ".desc",
}).then((tags) => {
    console.log(tags);
});

tag 이외의 옵션에 들어가는 문자열(String)은 모두 CSS 선택자입니다.
어떤 것의 선택자를 넣어야 하는지만 적어뒀으니 참고해주세요.

tag(Array or String, 필수) : 포스트를 가져올 태그(여러 개를 가져오려면 Array 사용)
selector(String, 필수) : 인덱스 페이지에 표시되는 아이템
title(String) : 글의 제목([##_article_rep_title_##])이 들어간 요소
date(String) : 글의 발행 날짜([##_article_rep_date_##])가 들어간 요소, 이 요소가 없으면 여러 개의 태그를 가져왔을 때 시간순으로 정렬하지 못합니다.
desc(String) : 글의 내용 요약([##_article_rep_summary_##])이 들어간 요소

[
    {
        uri: "https://marshall-ku.tistory.com/172",
        title: "티스토리 404 페이지에서 메인 화면으로 리다이렉트",
        date: "2018. 10. 12. 13:08",
        desc:
            "404 페이지 확인 이 글 뒤에 이어서 작성하는 글입니다. 404 페이지를 꾸미는 방법은 …게 하는 스크립트입니다.5000을 수정하시면 리다이렉션되는 시간을 조절하실 수 있습니다.",
    },
];

이런 Array가 반환되니, 참고하셔서 활용하시면 됩니다.

2. 원본 형태로 특정 요소에 아이템들 추가하는 버전

async function getPostsByTag({ tag, selector, appendTo, restrict = 0 }) {
    const isArray = Array.isArray(tag);
    const isString = typeof tag === "string";

    if (!isArray && !isString)
        return console.error("올바르지 않은 태그입니다.");

    const container = document.querySelector(appendTo);
    const fragment = document.createDocumentFragment();

    if (!container) return console.error("아이템을 추가할 요소가 필요합니다.");

    let tagArray = [];

    if (isArray) {
        await Promise.all(
            tag.map((tagString) =>
                getThePosts({
                    tag: tagString,
                    selector,
                })
            )
        ).then((tags) => {
            tags.forEach((tags) => {
                tagArray.push(...tags);
            });
        });

        if (tagArray[0].querySelector("time")) {
            tagArray.sort(
                (tag1, tag2) =>
                    new Date(tag1.querySelector("time").innerText) -
                    new Date(tag2.querySelector("time").innerText)
            );
        }
    } else if (isString) {
        tagArray = await getThePosts(tag, selector);
    }

    if (restrict) {
        tagArray = tagArray.slice(0, restrict);
    }

    tagArray.forEach((element) => {
        fragment.append(element);
    });

    container.append(fragment);
}

async function getThePosts({ tag, selector }) {
    try {
        const response = await fetch(`/tag/${encodeURI(tag)}`);
        const html = await response.text();
        const domParser = new DOMParser().parseFromString(html, "text/html");

        return domParser.querySelectorAll(selector);
    } catch (error) {
        console.error(error);
        return [];
    }
}

크게 손댈 필요 없이 자동으로 글 목록을 추가해주는 버전입니다.

코드 예시

getPostsByTag({
    tag: ["티스토리", "제작일지"],
    selector: ".indexArticle",
    appendTo: ".postList",
    restrict: 4,
});

tag(Array or String, 필수) : 포스트를 가져올 태그(여러 개를 가져오려면 Array 사용)
selector(String, 필수) : 인덱스 페이지에 표시되는 아이템
appendTo(String, 필수) : 아이템을 추가할 요소
restrict(Number) : 글 목록 개수 제한

1. Array를 반환하는 버전

코드 예시

2. 원본 형태로 특정 요소에 아이템들 추가하는 버전

코드 예시

답글 취소하기

워드프레스 포스트 조회수 확인하기

티스토리 썸네일에 유튜브 썸네일 불러오기

Tips 카테고리 다른 글

바닐라에서 jQuery slideToggle 구현하기

[자바스크립트] 기기 방향 감지하기

JS 없이 더보기 / 접기 구현하기

워드프레스 댓글 템플릿 만들기

사파리 그래디언트 오류 수정하기

반응형 유튜브 비디오 만들기