위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다.
워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다.
getPostsByTag = (tag, target, elem) => {
const ajax = new XMLHttpRequest;
let parser, e;
document.querySelector(target) === null || (
ajax.open("GET", `/tag/${encodeURI(tag)}`),
ajax.send(null),
ajax.onreadystatechange = () => {
(4 === ajax.readyState) && (
parser = new DOMParser().parseFromString(ajax.responseText, "text/html"),
e = parser.querySelectorAll(elem),
e.length === 0
? target.innerText = "해당 태그의 글을 찾을 수 없습니다."
: (
Array.from(e).forEach(a => {
document.querySelector(target).append(a)
})
)
)
}
)
}
위 스크립트를 추가하신 다음
getPostsByTag("태그 이름", "컨테이너 선택자", "포스트 선택자")
위와 같이 함수를 호출하시면 됩니다.
컨테이너 선택자, 포스트 선택자 모두 CSS 선택자처럼 작성하시면 됩니다.
eg) #elem, .elem
만들어주신 묘힌스킨은 태그로 검색을 하니 알아서 되던데요 ㅋㅋ
아 전 그냥 BLOG.tistory.com/tag 이 경로에서 썸네일 불러오는 거 말씀하시는 줄 알았네요.
/tag/태그 에선 되는 게 기본입니다 ㅋㅋㅋ
또 해당 스크립트는 커버 화면 등에서 특정 태그로 작성한 글 불러올 때 쓰는 스크립트라, 그것과는 크게 관련이 있진 않습니다..ㅎㅎ
/tag 해보고 이해했습니다.
저는 처음에 글을 읽고 /tag 하면 썸네일 처럼 나온다고 생각했는데...,
덕분에 좋은 팁을 알게되었네요 ㅎㅎ
/tag에 썸네일이 나오게도 가능하지만, 요청이 엄청나게 많아져서 아마 티스토리에서 트래픽 차단을 걸어버리지 않을까 싶습니다...ㅋㅋㅋ