이전에 벨로그를 사용할 때는 시리즈를 구현할 수 있었습니다. 예를 들어 같은 주제의 글을 1편, 2편,... n 편 이런 식으로 시리즈물로 만들 수 있는 것이죠. 하지만 티스토리에서는 관련 기능이 없는 것으로 보입니다. 그래서 어떻게 하면 시리즈로 글을 작성해야 할 때 시리즈 글 목록을 보여줄 수 있는 방법에 대해 고민해 보았고 약간의 꼼수를 부려보아 해결해 보았습니다.
태그를 시리즈로
티스토리에서는 태그 기능을 제공합니다. 저는 이 기능을 활용해 시리즈 기능을 흉내 내면 좋을 것 같다고 생각했습니다. 예를 들어 '티스토리 커스텀' 관련 시리즈 글들을 작성한다고 가정합시다. 그러면 해당 글들을 작성할 때는 태그에 '티스토리 커스텀'을 추가합니다. 이러면 '티스토리 커스텀' 태그를 조회해 글에서 목록으로 보여주면 시리즈 글들을 모두 표현해 줄 수 있겠죠?
글에서 태그 검색 결과 보여주는 방법은?
iframe 이용하기
이 부분이 문제였습니다. 티스토리에서 관련 api를 제공하지 않을까 싶어 알아본 결과 이미 api 서비스를 종료했다는 사실을 알 수 있었습니다. 그래서 조금 투박할 순 있지만 다른 방법이 없었기에 iframe을 이용해 구현하기로 결정했습니다.
즉 블로그 글 작성 시 html 편집 화면에서 <iframe src="태그 검색 url"> 이런 식으로 html 화면 안에 태그 검색 html을 보여주는 것이죠. 하지만 단순하게 iframe을 사용했을 때 생기는 문제가 조금 있었습니다.
iframe 문제점
- 디자인
먼저 웹 페이지 안에 다른 웹 페이지가 떠 있는 디자인은 굉장히 별로였습니다. 마치 오류가 난 것처럼 보여서 오히려 글의 퀄리티를 떨어뜨렸습니다. - 링크 동작
iframe 속 검색된 글을 클릭해 해당 글을 보고자 했습니다. 하지만 iframe 내의 화면에서 화면이 이동하는 문제가 발생했습니다.
최종 해결 방법
iframe을 통해 볼 수 있는 html dom 요소를 이용해 다시 현재 페이지(블로그 글)에 추가하도록 자바스크립트 코드를 작성해 해결했습니다. 그리고 이 부분을 티스토리 서식으로 설정해 쉽게 불러와 사용할 수 있게 했습니다. 코드는 다음과 같습니다.
<div id="seriesArticles"> </div>
<p><iframe src="https://sparkit.tistory.com/tag/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%BB%A4%EC%8A%A4%ED%85%80" id="seriesIframe" width="1000" height="500"></iframe></p>
<script>
const iframe = document.getElementById('seriesIframe');
iframe.onload = () => {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const desiredSections = iframeDoc.querySelectorAll('.area-main > .area-common > article');
const seriesArticles = document.getElementById('seriesArticles');
if (desiredSections.length > 0) {
desiredSections.forEach((section) => {
seriesArticles.appendChild(section.cloneNode(true));
});
}
};
</script>또한 티스토리 스킨 편집 기능을 이용해 css 파일 속에 iframe 스타일 관련 설정을 추가했습니다. ( 보이지 않게 )
#seriesIframe {
display: none;
}
결과적으로 이런 화면을 보여줄 수 있었습니다.
