이번 포스트에서는 티스토리의 링크 기능을 카테고리화 하는 방법에 관한 내용입니다.
티스토리의 링크 설정에는 카테고리(그룹) 설정이 있으니 블로그에 적용 시에는 그냥 나열식이라 분리할 필요성이 있어 그 방법에 대하여 생각해 보았습니다.
준비사항
jQuery를 사용할 수 있도록 정의 하셔야 합니다.
특징
목록 관리는 티스토리 관리페이지에서 기존과 같이 합니다.
카테고리 형식처럼 접었다 펼쳤다 할 수 있습니다.
Javascript (jQuery) 1
아래의 자바스크립트를 상단의 <head></head> 사이에 삽입합니다.
이 Javascript (jQuery) 1는 List 재설정을 위한 스크립트 입니다.
function split_list(s,e,index) {
if (e == "all") { var e = $('.link > .link-items > li.link-item').length; }
var nHtml='';
nHtml += '' + index + '';
for(s; s < e; s++) {
nHtml += '- ';
nHtml += $('.link > .link-items > li.link-item:eq(' + s + ')').html(); // 이곳에 링크 위치를 지정한다.
nHtml += '
';
}
nHtml += '
';
document.write(nHtml);
}
html & Javascript
아래의 HTML 과 Javascript를 링크가 위치할 사이드바에 적용합니다.
부트스트랩 설정도 함께 있으니 부트 스트랩을 쓰실경우 그대로 적용하셔되 됩니다.
스크립트는 반드시 </s_link_rep> 아래에 위치하도록 하세요.
<s_sidebar_element>
<!-- 링크 -->
<div class="panel panel-default">
<div class="link panel-body">
<h4 class="margin-t-0 margin-b-h">링크</h4>
<ul class="link-items">
<s_link_rep>
<li class="link-item">
<a href="" onclick="window.open(this.href); return false" title=""></a>
</li>
</s_link_rep>
<script>
split_list(0, 1, '티스토리');
split_list(1, 'all', 'Total Fix');
</script>
</ul>
</div>
</div>
</s_sidebar_element>
split_list(시작번호, 끝나는 번호, 제목)
split_list(시작번호, 끝나는 번호, 제목)
시작 번호 : 시작번호는 가장 첫 줄이 0입니다.
끝나는 번호 : 끝나는 번호는 실제 번호라 생각해도 됩니다. ( all을 입력하면 마지막까지를 의미합니다.)
제목 : 제목은 카테고리(그룹) 이름입니다.
split_list(0, 2, '테스트 - 1') 은 리스트의 첫 번째와 두 번째를 테스트 - 1 카테고리의 서브로 설정합니다.
split_list(2, 'all', '테스트 - 2') 은 리스트의 세 번째와 나머지 모두를 테스트 - 2 카테고리의 서브로 설정합니다.
주의
입력 시 숫자는 따옴표로 묶으시면 안 되며 문자는 반드시 따옴표로 묶어 주셔야 합니다.
시작번호와 끝나는 번호를 조절하시어 여러개의 카테고리로 만들 수 있습니다.
Javascript (jQuery) 2
아래의 자바스크립트를 최 하단의 </body> 위에 삽입합니다.
이 Javascript (jQuery) 2는 List를 드롭 다운 하도록 설정합니다.
var link_item=$('.link > .link-items > li');
link_item.each(function(){
$(this).on('click', function() {
$(this).toggleClass('open');
$(this).children('ul.link_items').slideToggle('fast');
});
});
CSS
CSS는 기존의 리스트를 숨겨 주고 리스트 앞의 라인을 처리 합니다.
/* 링크 */
.link > .link-items > .link-item,
.link > .link-items .link_items { display: none; }
.link > .link-items > li { cursor: pointer; }
.link ul {
margin: 0;
padding: 0;
list-style: none;
color: #369;
position: relative;
}
.link ul.link-items,
.link ul.link-items ul.link_items { margin-left: .5em; }
.link ul.link-items:before,
.link ul.link-items ul.link_items:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.link ul.link-items li,
.link ul.link-items li li.link_item {
display: block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0 1em;
line-height: 1.6em;
font-weight: bold;
position: relative;
}
.link ul.link-items li:before,
.link ul.link-items li li.link_item:before {
content: "";
display: block;
width: .625em;
height: 0;
margin-top: -1px;
position: absolute;
top: .8em;
left: 0;
}
.link ul.link-items li:last-child:before,
.link ul.link-items li li.link_item:last-child:before {
height: auto;
top: .8em;
bottom: 0;
background: #fff; /* 배경색과 동일하게 설정 합니다. */
}
.link ul.link-items:before { border-left: 1px solid LightCoral; }
.link ul.link-items li:before { border-top: 1px solid LightCoral; }
.link ul.link-items ul.link_items:before { border-left: 1px solid LightSeaGreen; }
.link ul.link-items li li.link_item:before { border-top: 1px solid LightSeaGreen; }'WebProgram > Tistory' 카테고리의 다른 글
| [애드센스] 광고 본문 중간에 자동으로 삽입하기 (서식 지정 없음) (0) | 2018.05.20 |
|---|---|
| [Tistory] 티스토리 블로그 공감 버튼 변경 (1) | 2018.05.17 |
| [Tistory] 티스토리 블로그 공감 버튼아래 클릭 유도 글귀 넣는 방법 (6) | 2017.03.14 |
| [ jQuery / CSS ] 제이쿼리와 CSS를 이용한 반응형 유튜브 플레이어 (0) | 2016.05.16 |
| [ Tistory ] 사이드바용 달력 위젯 (0) | 2016.04.04 |
| [ Tistory ] 블로그 단축키 설정하기 (0) | 2016.03.31 |
| [ Tistory ] 페이지네이션 만들기 (0) | 2016.03.28 |
| [ Tistory ] Bootstrap 및 CSS를 이용한 댓글 설정 및 사용자 아이콘 처리 (1) | 2016.03.27 |