JavaScript로 티스토리에 내비게이션 바(Breadcrumbs) 만들기

2014. 4. 29. 22:50ㆍIT/Tistory Tips

Breadcrumbs Navigation

Breadcrumbs Navigation Breadcrumbs Navigation2

얼마 전 블로그를 구경하다가 Breadcrumbs(Breadcrumb Trail)이란 게 눈에 들어왔다. 블로그 대문에서 현재 게시글까지 각 카테고리를 링크로 표시한 것으로, 헨젤과 그레텔의 빵부스러기에서 이름을 따왔다고 한다. 워낙 많은 웹사이트에서 사용하는 것이라 당연하다고만 생각했지 눈여겨 본적이 없었다. 왠지 좋아 보여서 간단한 스크립트로 따라 해봤다. 그나저나 한국어로는 뭐라고 하면 좋을까? '카테고리 내비게이션 메뉴' 또는 '내비게이션 바'라고 하면 이건 그냥 영어인 거겠지?

skin.html 수정하기

...
<div class="titleWrap">
    <h2>
        <a id="postTitle" href="[##_article_rep_link_##]">[##_article_rep_title_##]</a>
    </h2>
    <div id="category_info">
        <a id="cat_loc" href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a>
    </div>
...

일단 [티스토리 관리] - [HTML/CSS 편집] - [skin.html]로 가서 [##_article_rep_category_##]를 찾는다. 스킨에 따라 조금씩 차이가 있겠지만, .titleWrap처럼 게시글 제목 부분(글 제목, 작성 날짜, 작성자, 카테고리 등이 포함된 부분)에 포함되어 있을 것이다. 이 치환자를 찾았으면 스킨 구조를 다음과 같이 수정한다.

...
<div class="titleWrap">
    <div id="category_info">
        <a id="cat_loc" href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a>
    </div>
    <h2>
        <a id="postTitle" href="[##_article_rep_link_##]">[##_article_rep_title_##]</a>
    </h2>
...

짠! 그냥 div id="category_info"와 h2 요소의 위치만 바꿨다. Breadcrumbs가 글 제목보다 위에 나오도록 하기 위한 과정으로, 상황에 따라서는 HTML을 수정하지 않고 내비게이션 바를 제목 아래에 표시하거나 CSS에서 위치를 조정해도 상관없다.

JavaScript 코드 작성하기

이제 본격적으로 JavaScript 코드를 추가할 차례다. 일단 아래의 코드를 복사한다.

<script>
var a="[##_article_rep_category_##]".split("/");
var b=document.getElementById("category_info");

var c=document.createElement('a');
c.className="cat_home";
c.href="[##_blog_link_##]";
c.innerHTML="Home";
b.appendChild(c);

var d=document.createElement('a');
d.className="cat_lev1";
d.href="[##_blog_link_##]category/"+a[0];
d.innerHTML=a[0];
if(a[0]=="분류없음"){d.href="[##_blog_link_##]category/";d.innerHTML="All"};
b.appendChild(d);

var e=document.createElement('a');
e.className="cat_lev2";
e.href="[##_blog_link_##]category/"+a[0]+"/"+a[1];
e.innerHTML=a[1];
b.appendChild(e);
if(typeof a[1]=="undefined"){e.style.display="none"};

var f=document.getElementById("postTitle");
var g=document.createElement('span');
g.className="cat_post";
g.innerHTML=f.innerHTML;
b.appendChild(g);
</script>
  1. "문자열".split("/") : "/"를 기준으로 '문자열'을 잘라 배열(array)화 한다.
  2. createElement('요소') : '요소'를 생성한다.
  3. innerHTML : '요소' 안에 들어가는 텍스트
    예) <a href="#">innerHTML</a> 에서 innerHTML 부분
  4. getElementById("id") : id="id"로 지정된 요소에 접근
  5. 부모 요소.appendChild(변수) : '변수'로 지정한 요소를 '부모 요소'의 하위요소로 넣는다.
  6. typeof 변수=="undefined" : typeof는 변수의 데이터 형식을 반환한다. '변수'에 값이 할당되지 않았을 때 "undefined"를 반환하므로, 위의 코드는 2단계 카테고리를 지정하지 않은 (b[1] 변수에 값이 할당되지 않았을 때) 글에 변수 d의 스타일 속성을 display:none으로 지정하라는 의미다.

기본적인 설명은 위의 1~6을 참고한다. 전체 코드 내용은 다음과 같다. 먼저 카테고리 문자("카테고리1/카테고리2")를 표시하는 [##_article_rep_category_##] 치환자를 "/"(슬래쉬) 기준으로 잘라서 b[0], b[1]로 배열화한다. 그다음 [Home, 카테고리1, 카테고리2, 게시글] 네 단계를 차례로 'a' 요소에 담아서 div id="category_info"의 하위 요소로 넣는다. 이때 카테고리가 설정되지 않은 글은 b[0] 변수에 "분류없음"이 할당되는데, "분류없음"이라는 단어를 "All"로 바꾸고 링크(href)를 [블로그주소/category/]로 수정한다. 또 카테고리가 1단계까지만 설정된 글은 b[1] 변수에 값이 할당되지 않아서 "undefined"가 반환되는데, 이때는 두 번째 카테고리 링크를 생성하는 d 변수에 display:none 스타일을 지정해서 화면에 표시되지 않도록 한다.

위 스크립트를 복사한 다음 앞에서 수정한 skin.html의 마지막 부분(</h2>) 뒤에 붙여넣는다.

Breadcrumbs Navigation에 스타일 적용하기

이제 JavaScript로 생성한 내비게이션 바에 스타일을 지정할 차례다. style.css 부분에 아래의 코드를 참고해서 원하는 스타일을 입력한다.

...
.titleWrap div#category_info {
    display:block;
}
.titleWrap div#category_info a, span.cat_post {
    display:inline-block;
    padding:3px 20px;
    height:18px;
    line-height:18px;
    text-align:center;
    background:#eee;
    position:relative
}
.titleWrap div#category_info a:hover {
    color:#666;
    text-decoration:underline
}
.titleWrap div#category_info a:before, span.cat_post:before {
    content:"";
    position:absolute;
    border-style:solid;
    border-color:#fff #eee;
    border-width:12px 0 12px 12px;
    bottom:0;
    right:0;
    display:inline-block;
    width:0
}
.titleWrap div#category_info a.cat_lev1:after, .titleWrap div#category_info a.cat_lev2:after, span.cat_post:after {
    content:"";
    position:absolute;
    border-style:solid;
    border-color:#eee #fff;
    border-width:12px 0 12px 12px;
    bottom:0;
    left:0;
    display:inline-block;
    width:0
}
#cat_loc {
    display:none!important
}
...

중요한 부분은 div id="category_info" 에 새로 생성한 a, span 요소에 display:inline-block 속성을 부여해서 순서대로 가로로 배열하는 것과 치환자를 사용한 카테고리 이름을 표시하는 #cat_loc 의 'a' 요소를 숨기는 것이다. 그 외 스타일은 자유롭게 수정한다. :before와 :after 부분은 화살표 모양을 만들기 위한 부분이니 디자인에 따라 삭제해도 상관없다.

기타

위의 JavaScript 코드는 마지막에 생성되는 게시글 제목 부분은 링크가 생성되지 않는다. 이 부분에도 게시글 주소 링크를 연결하려면 아래와 같이 코드를 수정한다. 물론 그에 맞게 CSS도 수정한다.

원본 코드

var f=document.getElementById("postTitle");
var g=document.createElement('span');
g.className="cat_post";
g.innerHTML=f.innerHTML;
b.appendChild(g);
</script>

수정 코드

var f=document.getElementById("postTitle");
var g=document.createElement('a');
g.className="cat_post";
var h=f.href.split("/");
g.href="[##_blog_link_##]"+h[3];
g.innerHTML=f.innerHTML;
b.appendChild(g);
</script>

CSS만 잘 작성하면 IE7, 8에서도 사용할 수 있다. 별것 아닌 내비게이션 바 만들기 끝.

관련글


관련글

댓글 4

티스토리툴바