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