사용기를 쓰면서 저렇게 한땀한땀 소제목을 찾으며, 멍청하게 붙여쓰고 앉아 있는 나 자신을 발견했다. 심지어 저건 클릭하면 되지도 않음. 내가 말한 목차 생성기라하믄 저렇게 뇌빼고 서식만 제목으로 쓰다보면 알아서, 이렇게 테이블이 만들어지는 것을 의미한다 위에서 불평했던 클릭하면 해당 위치로 가는것도 괜찮다.
포스팅 자동 목차 생성기를 만들어 보자
크게는 3가지 스텝이 있고, 세부적으로는 도합 15가지 스텝이 있는데 바로 아래나오는 저거 클릭이 1 스텝임
중간에 복사 + 붙여넣기도, html편집 클릭하는것도 각각 1 스텝임ㅋㅋ 아주 쉽다는 뜻.
step1. jquery.toc.zip 파일 다운
이걸 다운로드 하면 아래 두 파일이 나온다.
step2. jquery.toc.zip 파일 티스토리로 업로드
티스토리 블로그 관리 홈으로 들어가, 1) 스킨편집을 누른 뒤
2) 오른쪽 상단에 있는 html 편집 클릭
3) 그럼 상단에 HTML, CSS, 파일업로드 세개가 보일텐데 마지막꺼 클릭 ㅇㅋ
4) 하단에 보이는 +추가 클릭
5) 아까 압축 풀었던거 두개 드레그하고 열기
6) 그러면 저 두개가 업로드 되는데 올린 두개중에 .min 들어가는거(=파일명 더 긴 놈) 우클릭하고 링크주소 복사해서 메모장같은곳에 적어다가 보관해놓기. (당장은 안씀)
님들아 거의 다 왓습니다 힘내쇼
7) 상단 저 메뉴에서 HTML로 이동 - 3)에서 했슴.
8) 위에서부터 눈을 크게 뜨며 </head>를 찾는다. <head>말고 슬레시가 있는 헤드여야됨. 눈이 침침하신분은 컨트롤+f 누른다음에 </head> 하시면 됩니다.
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
9) 쟤를 복사해서,
10) 아까찾았던 </head>위에 붙이고 오른쪽 상단에 적용버튼 클릭.
아 언제끝나~ 싶죠..? ㄹㅇ찐막이니까 좀만 더 힘내보쇼
step3. HTML 삽입해서 서식 만들기
11) 블로그 관리 -> 서식관리 ㄱㄱ
12) 새 서식 쓰기 클릭. - 아 진짜 친절하다 나는.
13) 기본모드 -> HTML로 바꿈.
<script type="text/javascript" src="아까 5번에서 했던 images/jquery.toc.js 링크 주소 넣기"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>
14) 이거를 복붙하는데, 제일 윗줄에 src = 부분 있죠?? 그거 5번에서 했던 그 주소를 저따가 집어처넣어줍니다.
그럼 이렇게 되것죠?? 아래 완료 누르면 이제 끝입니당 허허.
저도 만들었으니까 함 써봐야겟죠?
글쓰기 누르고 도구 주르르륵 훑다보면 서식이란게 있는데, 저거를 누르면?
이게 뜨지만 무시하고 아래에다가 이렇게 글씨 크기 제목1부터 본문3까지 바꿔가며 글을 써보면
이렇게 목차가 나타나는 것을 볼 수 있다. 근데 개인적으론 제목3부턴 목차치고 드러워지므로 2까지만 쓰는거 ㅊㅊ 그리고 /목차는 내가 쓴거라 그렇고 고정 아님 걍 본인 원하는대로 쓰면 된다. 참고로 저 하이퍼링크된 거 클릭하면 해당하는 줄로 넘어간다. 이상, 티스토리 포스팅 자동 목차 생성 하는 방법을 줄입니다. 다들 ㅂㅂ.
'그 외 경험기' 카테고리의 다른 글
| 보스 QC45 (2) 사용기 (0) | 2024.05.19 |
|---|---|
| 해외 직구 규제 (0) | 2024.05.18 |
| 보스 QC45 (1) 구매기 (0) | 2024.05.18 |
| 카멜 가성비 모니터암 BMA2 실사용기 (0) | 2024.05.17 |
| 첫 블로그 글 (0) | 2024.05.17 |
