프로그래밍/블로그

[티스토리 스킨] '연관글'('시리즈') 구현하기

당근천국 2022. 10. 12. 15:30

티스토리에서는 '연관글' 혹은 '시리즈' 등을 구현하는 방법은 수동으로 작성하는 방법뿐입니다.

저도 수작업으로 연관글을 작성하고 있는데요....

서너 개만 되도 모든 포스트에 들어가서 수정하는 게 큰일이 돼버립니다.

 

7번째 글을 쓰려면 6개를 수정해야 한다....

 

일반적인 사이트에서는 별도의 파일을 생성하거나

연관글을 관리할 수 있는 인터페이스가 재공되지만, 티스토리는 그런 게 없습니다.

 

그래서 저는 별도의 파일을 불러오도록 작업을 하고 

'images'에 업로드하여 구현하여 사용하고 있었습니다.

 

그런데 이 방법은 스킨을 백업할 때 같이 백업된다는 문제와

내용을 수정하려면 'HTML'파일을 다운받아서 다시 업로드해야 하는 불편함이 있습니다.

 

 

 

1. 아이디어

티스토리 안에서 뭔가 할 수 없나 해서 이것저것 해봤지만.....

안 됩니다.

대신 쓸만한 기능이 없습니다.

 

그래서 생각한 방법은 2가지입니다.

 

'페이지' 기능을 쓰지 않는다면

1) '페이지'에 연관글을 작성하고

2) Ajax로 '페이지'의 Html을 읽어 들인 후

3) 본문 영역만 추출해서

4) 지정된 공간에 바인딩하는 방법

 

 

숨겨진 카테고리를 이용하여

1) 포스팅에 연관글을 작성하고

2) Ajax로 포스트의 Html을 읽어 들인 후

3) 본문 영역만 추출해서

4) 지정된 공간에 바인딩하는 방법

 

 

전자는 티스토리 태그에서 '페이지' 부분을 간략하게 작성하면 용량이 많이 줄어든다는 장점이 있습니다.

후자는 '페이지' 기능을 사용하는 분도 사용할 수 있습니다.

 

둘 다 필요 없는 부분까지 불러온다는 단점이 있습니다.

그리고 '모바일 웹'기능이 활성화 되어있다면 스크립트가 동작하지 않아 보이지 않는다는 단점도 있습니다.

 

 

2. 구현

두 가지 방식 다 포스팅 주소만 있으면 되므로 구현은 똑같습니다.

 

2-1. 스크립트 추가

티스토리 스크립트에 아래 코드를 추가합니다.

('JQuery'를 기반으로 작성되었습니다.)

/** 지정된 태그를 찾아 지정된 html을 로드하여 내용물로 넣어준다. */
function funInsertHtmlFile()
{

	//대상 전체 검색
	let arrTarget = $(".InsertHtml");

	for (let i = 0; i < arrTarget.length; ++i)
	{
		let item = $(arrTarget[i]);

		//대상 파일 주소
		let sTargetFileUrl
			= item.attr("data-target-file-url");

		if (undefined !== sTargetFileUrl
			&& "" !== sTargetFileUrl)
		{
			$.ajax({
				url: sTargetFileUrl
				, dataType: "html"
				, success: function (sHtml)
				{
					//임시 돔 생성
					let findDiv = $(sHtml).find("div.tt_article_useless_p_margin");
					//필요없는 내용 지우기
					findDiv.children("div.container_postbtn").remove();

					//대상에 html 주입
					item.html(findDiv.html());
				}
			});
		}
	}
}

 

6번 줄 : 'class'에 '.InsertHtml'가 들어있는 모든 태그를 대상으로 합니다.

 

13번 줄 : '.InsertHtml' 개체의 'data-target-file-url'속성에 대상 포스트의 주소를 넣을 예정입니다.

이 코드는 이 주소를 읽어서 사용합니다.

 

19번 줄 : ajax로 대상 포스트의 'HTML'을 비동기로 읽어 들입니다.

 

27번 줄 : 티스토리에서 자동으로 본문에 삽입하는 내용(여기서는 공유 기능)을 제거합니다.

 

30번 줄 : 읽어들인 'HTML'을 '.InsertHtml' 개체의 내용물로 넣습니다.

 

 

2-2. 대상 포스트 작성

이제 연관글로 사용할 포스트를 작성합니다.

저는 '페이지'로 만들었으므로 페이지에 작성했습니다.

 

 

2-3. 본문에서 사용

이제 클래스에 'InsertHtml'를 사용하는 태그를 만들고

'data-target-file-url'속성에 대상 주소를 넣으면 

대상을 읽어서 본문에 표시하게 됩니다.

<div class="InsertHtml" data-target-file-url="./pages/%EC%B2%B4%EC%A4%91%EA%B3%84-%EC%8B%9C%EB%A6%AC%EC%A6%88">
	연관글 영역
</div>

 

아래는 위 코드를 넣은 공간입니다.

연관글 영역

 

이제 연관글을 수정하면 적용된 모든 페이지에서 자동으로 수정됩니다.

연관글 영역

 

 

2022-11-04 추가

카카오 서버가 복구된 이후로 크로스 도메인 오류가 나는 것을 확인했습니다.

'data-target-file-url'을 절대주소가 아닌 상대주소로 넣어 자신의 URL로 요청해야 이 오류를 막을 수 있습니다.

 

 

마무리

이게 제공하기 어려운 기능도 아닌데 아직도 안 넣는 거보면 넣을 생각이 없다고 봐야겠죠?

 

티스토리 에디터의 고질적인 문제인 링크 복사 시 '새 창으로 열림' 속성이 날아가는 문제 때문에 수작업하면 일이 엄청 많아지는데도 이 기능이 없다는 게 좀 웃깁니다.

저작자표시