티스토리, 태그 검색 기능 만들기..

포스트 개수가 많은 블로그의 현실에 신경 1도 쓰지 않는 티스토리를 위해서..

티스토리 블로그 내 검색 기능의 한계..

포스트 개수가 많은 키워드를 입력하면 이런 생뚱맞은 화면을 보여준다.. (ex - D700, 갈매기)

서버에 부하를 주는 것이 그 이유라면,

"키워드를 포함하는 태그를 가진 포스트가 xxxx개 있습니다"라는 문구와 함께

해당 태그를 출력해 주는 것이 더 보기 좋지 않을까.. 아니면 기본 검색에 필터링 기능을 넣어주던가.....

티스토리에서 태그 검색은, '/tag/키워드'를 붙여서 주소를 입력하던,

스크립트 처리를 하던 기록된 태그와 같은 단어를 키워드로 삼아야 검색이 된다..

포스트 개수가 많고 태그를 많이 쓰는 블로그에선 이건 검색이 아니라 단어 맞추기 게임이 되는.....

포스트 개수는 많고.. 기본 검색 기능은 답답하고.. 내가 쓰기에 너무 불편해서 태그 검색 기능을 만들었다..

시간이 지날수록 포스팅이 쌓일수록 이렇게 찾아 들어가는 것이 그나마 편하다..

Demo & Code

[Demo] 티스토리, 태그 검색 만들기

S t a r t

dd-stuff.tistory.com

<!-- HTML -->

<!-- 스킨에 태그 검색창 링크 만들기 -->
<div id="schTagBtn">태그 검색</div>

/* Javascript */

// 사용자 설정
// 일치하는 태그가 없을 때 보여줄 레이어에 들어갈 이미지 - 필요 없으면 따옴표 안의 링크를 지울 것.
const noImg = "https://t1.daumcdn.net/keditor/emoticon/friends2/small/044.png";

// 일치하는 태그가 없을 때 보여줄 레이어에 들어갈 문구 - 필수
const noText = "키워드를 포함하는 태그가 없습니다.";

// 태그 클라우드 페이지에서 태그 클라우드의 요소명 - 필수
// 아래는 Poster 스킨의 요소명이며, 사용중인 스킨에 따라 수정되어야 함.
const tagPos = ".tags .items";

const _0x1da8b4=_0x1e7a;(function(_0x1844ed,_0x2baba2){const _0x5402bf=_0x1e7a,_0x280bd2=_0x1844ed();while(!![]){try{const _0x20e0b3=-parseInt(_0x5402bf(0xea))/0x1+parseInt(_0x5402bf(0xd9))/0x2*(-parseInt(_0x5402bf(0xdf))/0x3)+-parseInt(_0x5402bf(0xd4))/0x4+parseInt(_0x5402bf(0xce))/0x5*(-parseInt(_0x5402bf(0xc7))/0x6)+-parseInt(_0x5402bf(0xd1))/0x7*(-parseInt(_0x5402bf(0xd0))/0x8)+parseInt(_0x5402bf(0xe5))/0x9*(parseInt(_0x5402bf(0xcd))/0xa)+parseInt(_0x5402bf(0xca))/0xb;if(_0x20e0b3===_0x2baba2)break;else _0x280bd2['push'](_0x280bd2['shift']());}catch(_0x56659a){_0x280bd2['push'](_0x280bd2['shift']());}}}(_0x1713,0x436f1));let schKey=location['search'];schKey!=''&&(schKey=schKey[_0x1da8b4(0xd2)]('='));if(document[_0x1da8b4(0xde)]('body')['id']=='tt-body-tag'&&location[_0x1da8b4(0xc0)]!=''&&schKey[0x0]=='?schTagKey'){schKey=schKey[0x1],history[_0x1da8b4(0xd5)](null,null,location[_0x1da8b4(0xe6)]+_0x1da8b4(0xdd));let tags=document[_0x1da8b4(0xde)](tagPos)[_0x1da8b4(0xeb)],kv;tags[_0x1da8b4(0xc9)]()[_0x1da8b4(0xc5)](schKey)==-0x1?kv=0x0:kv=0x1;if(kv==0x0)document[_0x1da8b4(0xde)](tagPos)[_0x1da8b4(0xe8)]='',noImg==''?document[_0x1da8b4(0xde)](tagPos)[_0x1da8b4(0xdb)](_0x1da8b4(0xc6),'<div\x20class=\x27noTag\x27><p>'+noText+_0x1da8b4(0xc4)):document['querySelector'](tagPos)[_0x1da8b4(0xdb)](_0x1da8b4(0xc6),'<div\x20class=\x27noTag\x27><img\x20src=\x27https://t1.daumcdn.net/keditor/emoticon/friends2/small/044.png\x27><p>'+noText+_0x1da8b4(0xc4)),setTimeout(()=>{const _0x37febb=_0x1da8b4;document['querySelector'](_0x37febb(0xd8))['insertAdjacentHTML'](_0x37febb(0xe1),_0x37febb(0xcb));},0x3de),setTimeout(()=>{const _0x3f035e=_0x1da8b4;document[_0x3f035e(0xde)](_0x3f035e(0xd7))[_0x3f035e(0xda)]();},0x3e8);else{let etag=[];document[_0x1da8b4(0xc3)](tagPos+'\x20a')[_0x1da8b4(0xcf)](function(_0x22a4b8,_0x28a8ce){const _0x28f0c6=_0x1da8b4;_0x22a4b8['innerText']['toLowerCase']()[_0x28f0c6(0xc5)](schKey)!=-0x1&&etag[_0x28f0c6(0xd3)](_0x22a4b8);}),document['querySelector'](tagPos)[_0x1da8b4(0xe8)]='';for(let i=0x0;i<etag[_0x1da8b4(0xe7)];i++){document[_0x1da8b4(0xde)](tagPos)[_0x1da8b4(0xe0)](etag[i]);}}}function _0x1e7a(_0x5cdf80,_0xf49db2){const _0x17136c=_0x1713();return _0x1e7a=function(_0x1e7abe,_0x179755){_0x1e7abe=_0x1e7abe-0xc0;let _0x5b9d33=_0x17136c[_0x1e7abe];return _0x5b9d33;},_0x1e7a(_0x5cdf80,_0xf49db2);}function _0x1713(){const _0x1c1594=['#dimmed','/tag','querySelector','46911pDWQGr','appendChild','beforebegin','click','href','remove','12447pCCjYJ','origin','length','innerHTML','/tag?schTagKey=','490282nhhWnr','innerText','search','classList','.mobile-menu','querySelectorAll','</p></div>','indexOf','beforeend','354jzxajM','.menu','toLowerCase','6138121ZiiQUN','<div\x20id=\x27schTag\x27><div><input\x20type=\x27text\x27\x20placeholder=\x27(ex)\x20fuji\x20or\x20kodak\x27\x20onkeypress=\x27if\x20(event.keyCode\x20==\x2013)\x20{\x20schTag(this.value)\x20}\x27></div><button\x20onclick=\x27this.parentNode.remove()\x27>닫기</button></div>','#schTagBtn','3110LgYZEP','23470FWjFaq','forEach','1079128aenaSH','28vpbHfg','split','push','1123880ThXaKT','pushState','addEventListener','#schTag\x20input','body','26CrGtmn','focus','insertAdjacentHTML'];_0x1713=function(){return _0x1c1594;};return _0x1713();}document[_0x1da8b4(0xde)](_0x1da8b4(0xcc))[_0x1da8b4(0xd6)](_0x1da8b4(0xe2),function(){const _0x4ad321=_0x1da8b4;document[_0x4ad321(0xde)](_0x4ad321(0xc2))['classList'][_0x4ad321(0xe4)]('on'),document[_0x4ad321(0xde)](_0x4ad321(0xc8))[_0x4ad321(0xc1)]['remove']('on'),document['querySelector'](_0x4ad321(0xdc))['remove'](),document[_0x4ad321(0xde)](_0x4ad321(0xd8))[_0x4ad321(0xdb)]('beforebegin',_0x4ad321(0xcb)),setTimeout(()=>{const _0x2e41ce=_0x4ad321;document[_0x2e41ce(0xde)]('#schTag\x20input')['focus']();},0x64);});function schTag(_0x50c131){const _0x2254d7=_0x1da8b4;_0x50c131=_0x50c131['toLowerCase'](),location[_0x2254d7(0xe3)]=_0x2254d7(0xe9)+_0x50c131;}

/* CSS */

/* 태그 검색 버튼 */
#schTagBtn { width:fit-content; height:fit-content; padding-14px; cursor:pointer }

/* 태그 검색창 */
#schTag { width:100%; height:100%; position:fixed; background-color:#151515; color:#fff; ; display:flex; justify-content:center; align-items:center; z-index:9999 !important }
#schTag div { width:400px; height:70px; text-align:center }
#schTag input { width:360px; height:70px; background-color:#222; border:2px solid #fff; color:#fff; font-size:24px;text-align:center }
#schTag button { width:120px; height:70px; border-radius:3px; background-color:rgba(255,255,255,.8); color:#000; font-size:24px }

/* 일치하는 태그가 없을 때 보여줄 레이어 */
/* .tags .items는 사용중인 스킨에 맞게 수정되어야 함 */
.tags .items .noTag { width:100%; height:auto; text-align:center }
.tags .items .noTag p { text-align:center; font-size:18px; color:#151515; margin-top:30px }

<!-- 설치법 -->


'관리자 페이지 - 스킨 편집 - html 편집 - HTML'로 이동,
</body> (닫는) 태그 윗쪽 언저리에 아래의 구문을 추가.
<script src="./images/searchTag4Tistory.js"></script>



'관리자 페이지 - 스킨 편집 - html 편집 - CSS'로 이동,
맨 아래쪽에 위 두번째 코드블럭의 CSS 구문을 복붙.



'관리자 페이지 - 스킨 편집 - html 편집 - 파일업로드'로 이동,
searchTag4Tistory.js 파일을 업로드.




저장 버튼 클릭!!

사용중인 스킨에서, 태그 클라우드의 요소명을 찾는 법..

태그 클라우드에서 태그 하나를 우클릭 후 검사 메뉴 클릭..

<a> 태그들을 감싸고 있는 부모 태그의 요소명을 가져오면 됨..

id이면 속성값 앞에 #, class이면 속성값 앞에 .을 붙여서 사용..

Poster 스킨에서 태그 클라우드의 요소명은 ".tags .items"