WebProgram/Tistory

[ Tistory ] 링크를 카테고리화하는 방법

Total Fix! 2016. 4. 6. 15:06

이번 포스트에서는 티스토리의 링크 기능을 카테고리화 하는 방법에 관한 내용입니다.

 

 

 

티스토리의 링크 설정에는 카테고리(그룹) 설정이 있으니 블로그에 적용 시에는 그냥 나열식이라 분리할 필요성이 있어 그 방법에 대하여 생각해 보았습니다.

 

준비사항

jQuery를 사용할 수 있도록 정의 하셔야 합니다.

 

 

특징

목록 관리는 티스토리 관리페이지에서 기존과 같이 합니다.

카테고리 형식처럼 접었다 펼쳤다 할 수 있습니다.

 

 

 

 

Javascript (jQuery) 1

 

아래의 자바스크립트를 상단의 <head></head> 사이에 삽입합니다.

이 Javascript (jQuery) 1는 List 재설정을 위한 스크립트 입니다.

 

 

 

Javascript (jQuery) 1
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> 아래에 위치하도록 하세요.

     

    html & Javascript
    <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를 드롭 다운 하도록 설정합니다.

     

     

    Javascript (jQuery) 2
    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는 기존의 리스트를 숨겨 주고 리스트 앞의 라인을 처리 합니다.

     

     

    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; }