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

최종 수정일 : (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) : 글 목록 개수 제한

profile

이메일 주소를 발행하지 않을 것입니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
카카오페이 qr코드 모바일이시라면 클릭