티스토리 오디세이 스킨에 자동목차 (TOC)넣기
반응형
티스토리 블로그 북클럽(Book Club) 스킨에 자동 목차(TOC) 넣기
티스토리 글을 작성할 때 자동으로 목차를 적용할 수 있습니다. 제목 1(H2), 제목 2(H3), 제목 2(H4)를 이용해 글의 목차를 쉽게 작성할 수 있습니다. 이미 작성된 글이라면, H 태그를 이용해 목차(TOC)
blog.steamedu123.com
일단 로니킴님께서 포스팅해주신 글을 보시고 그대로 하신다음에 다음에 따라서 진행해주세요.
자세히 설명 잘 해주셔서 로니킴님 블로그 먼저 들러서 보신 후 따라서 진행해주시면 됩니다
목차
오디세이 (Oddysey) 스킨에 자동목차 넣기
로니킴님께서 유용한 자료 공유해주신것을 보고 저도 자동목차에 목마르던 터에 똑같이 적용하였습니다.
근데 결국 안되더라구요.
오디세이 스킨에서도 자동목차를 이용해봅시다.
헤더<header>와 바디<body> 그리고 CSS 추가
<!-- 목차 커스텀 스크립트 시작-->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차 커스텀 스크립트 끝 -->헤더쪽은 다른내용 없습니다.
<!-- 목차 커스텀 스크립트 시작-->
<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".area-view", headings: "h3" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) });
</script>
<!-- 목차 커스텀 스크립트 끝-->
바디쪽 다른부분은 .area-view 입니다. 오디세이 스킨에서 포스팅이 보이는 부분의 아이디값은 .area-view이기때문에 바꿔줍니다.
/* 티스토리 북클럽 스킨 목차 - TOC */
.book-toc {
border: 1px solid #ccc;
padding: 10px 10px 0px 15px;
background-color: #f5f5f5;
}
.book-toc ul {
list-style-type: decimal;
}
.book-toc p {
font-weight: 550;
margin-bottom: 7px;
}
#toc * {
font-size: 17px;
color: #676767;
}
#toc a:hover {
color: #f00;
}
#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}
#toc > li {
margin-bottom: 15px;
}
#toc {
margin-left: 10px;
}
#toc > li > ul li {
margin-bottom: 5px !important;
}
파일업로드
나머지부분 article 부분안에 H3로 선언돼 있는 부분들은 H4로 바꿔주셔야 목차에 자동으로 들어가지 않아요
마무리
끝
완성
반응형
'컴퓨터 > CSS+HTML' 카테고리의 다른 글
| Expo yarn 기반으로 운영되므로 얀으로 다운로드해야함 (0) | 2022.02.17 |
|---|---|
| UI 키트 공부. Shoutem .스터디 (0) | 2022.02.17 |
| Kotlin 배우기 3주차 (0) | 2021.04.29 |
| awesome 사용 (0) | 2021.03.10 |
| pycham - 로컬서버돌리기 (0) | 2021.02.18 |
댓글