티스토리를 통한 블로그 포스팅 글이 검색엔진에 잘 나타나고 또한 방문자들도 포스팅된 글을 더 쉽게 이해하고 읽을 수 있다면 좋을 것입니다. 내가 쓰는 포스팅 글에 대한 목차가 자동으로 생성하고 삽입된다면 검색엔진에도 방문자에도 많은 도움이 될 것입니다. 오늘은 이렇게 내가 작성한 포스팅 글의 '제목1', '제목2', '제목3'으로 설정된 부분을 기반으로 목차를 자동 생성하고 삽입해주는 방법에 대해 알아보겠습니다.
[ 목차 ]
1. 목차 생성을 위한 준비 - 파일 다운로드 및 압축해제
위 파일을 다운받고 압축을 풀어주세요. 압축을 풀면 'jquery.toc.js', 'jquery.toc.min.js' 이 두개의 파일 나타납니다.
2. 다운로드된 파일을 내 티스토리 스킨에 업로드하기
'블로그관리 홈 > 꾸미기 - 스킨편집'을 선택한다.
선택화면의 상단에 'HTML | CSS | 파일업로드' 탭이 있고 여기서 '파일업로드'(위 사진의 빨간글씨)클릭한다. 클릭된 화면의 하단에 '+추가'(위 사진의 빨간박스) 버튼을 눌러 다운로드하여 압축을 해제한 두개의 파일을 선택하여 업로드 합니다. 업로드하고 위 사진의 파란 점선박스처럼 업로드된 파일이 볼드체로 반영됨을 확인합니다. 확인 후 업로드된 파일을 스킨에 적용시키기 위해 본 화명 상단 우측의 '적용' 버튼을 눌러 스킨에 적용시킵니다.
이제 목차를 생성해주는 소스코드 파일 2개를 내 티스토리에 저장이 완료된 것입니다. 이것은 '목차를 생성해주는 소스코드 자체를 내 컴퓨터로 복사됐다.'라는 것과 유사한 의미로 이해사히면 됩니다. 다음으로 해야 할 일은 이 소스코드가 잘 작동되도록 내 티스토리에 HTML과 CSS 2곳에 약간의 편집을 해주고 그후 본 작업이 반영된 즉, 목차를 생성해주는 기능의 템플릿을 만들면 모든 작업이 완료됩니다.
프로그래밍을 모르시더라도 HTML, CSS를 전혀 모르시더라도 아무 어려움은 없습니다. 앞으로 3가지만 더 적용하면 됩니다.
3. HTML 코드 편집 및 적용하기
위 2번 작업을 진행한 화면의 상단에는 'HTML | CSS | 파일업로드' 3개의 탭이 있었습니다. 그중 'HTML'을 선택하고 '</head>' 위에 빨간 점선박스의 내용을 '</body>' 위에는 파란 점선박스의 내용을 복사한 후 변경된 내용을 적용하기위해 2번에서 했던 것과 마찬가지로 '적용' 버튼을 눌러 내 티스토리의 스킨 HTML에 적용시킵니다.
- '</head>' 위에 추가되는 빨간박스의 내용 복붙 : 아래의 내용을 복사하여 위 사진의 빨간박스 부분에 붙여 넣는다.
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
- '</body>' 위에 추가되는 파란박스의 내용 복붙 : 아래의 내용을 복사하여 위 사진의 파란박스 부분에 붙여 넣는다.
<script>
$(document).ready(function() {
var $toc = $("#toc");
$toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
});
</script>
위 2가지 추가된 부분에 대해 '적용' 버튼을 눌러 내 티스토리의 스킨 HTML 파일에 적용시킵니다.
4. CSS 편집 및 적용하기
이제 같은 화면의 상단에 'HTML | CSS | 파일업로드' 3개의 탭이 있었습니다. 그중 'CSS'을 선택하고 다음의 작업을 진행 합니다.
.index_toc a:link{color:000;border:none;}
.index_toc {
border: 1px solid #cccccc;
background-color: #F2F4F7;
font-weight: bold;
padding: 5px;
}
#toc {padding-left:25px;}
#toc li > ul > li {list-style-type: none;}
#toc li > ul {padding: 5px 0 20px 0;}
위 내용 복사하여 CSS 파일의 맨 아래 줄에 붙여넣어 추가하고 추가된 부분을 저장하기 위해 '적용' 버튼을 눌러 내 티스토리의 스킨 CSS 파일에 적용시킵니다.
5. 새로운 서식 생성하여 글쓰기할 때 원하는 위치에 목차 삽입하기
포스팅하는 글에 대한 목차를 생성하는 여러 방법이 있지만 본 글에서는 티스토리의 서식 기능을 이용합니다. 티스토리에서 새로운 글을 작성할 때 이미 만들어진 서식을 불러올 수 있습니다. 우리는 이제 '자동으로 삽입되는 목차 서식'을 만들고 이 서식을 불러들여 새로운 글을 작성하면 목차가 자동으로 생성됩니다.
'블로그관리 홈 > 콘텐츠 > 서실관리'를 선택하고 '글쓰기'버튼을 클릭합니다.
글쓰기에서 'HTML'모드를 선택하고 노란색 화살표로 표시된 박스에 '서식'을 확인하고 파란색 점선박스의 내용을 복붙 합니다. 복사할 내용은 아래의 내용을 드래그앤드롭해서 사용하면 됩니다.
<div class="index_toc">
<p data-ke-size="size16">[ 목차 ]</p>
<ul id="toc" style="list-style-type: none;" data-ke-list-type="none"></ul>
</div>
위 사진은 서식에서 '서식-목차넣기' 서식이 선택되어 생성된 목차 내용입니다. 이제 우리는 글쓰기 시 원하는 위치에 목차를 자동을 생성할 수 있습니다. 이 글이 티스토리 이용 시 도움이 되었으면 좋겠습니다.