[티꾸]글쓰기 목차

0. 서론

블로그에서 글을 쓰다가 목차가 있으면 좋겠다고 생각하던 와중에 방법을 찾아서 글을 쓰게 되었다!

 

들어가기에 앞서 저는 오디세이 스킨을 사용하고 있습니다. 

스킨마다 html과 css 코드가 약간씩 다르니 참고해주세요. 

 

 

1. 해결방법

1.  jquery.toc.min.js 다운로드 및 업로드

1. jquery.toc.min.js 다운로드

jquery.toc.min.js

0.00MB

 

2. 파일 업로드

• 블로그 관리 페이지 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가 버튼 클릭

-> js파일 올리기

 

 

2. 자동 목록을 위해 HTML 및 CSS 수정

1. HTML 수정 -> 목차를 만들기 위해

• 블로그 관리 페이지 -> 스킨 편집 -> html편집

• </head>라는 코드를 찾아서 그 위에 아래와 같은 코드 삽입!

  <!--  스크립트 시작-->
  <script type="text/javascript" src="./images/jquery.toc.min.js"></script>
  <!--  스크립트 끝 -->
  </head>

 

• </body>라는 코드를 찾아서 그 위에 아래와 같은 코드 삽입!

<!--스크립트 시작-->
<script src="./images/jquery.toc.min.js"></script>
<script>
    // 목차 생성
    $(document).ready(function() {
        var $toc = $("#toc");
        $toc.toc({content: ".article-view", headings: "h2,h3,h4"});
        
        // 추가된 부분입니다
        if($('.another_category').length > 0) {
            $toc.find('li:last').remove();
        }
    });
</script>
<!--스크립트 끝-->
</body>
</html>

📌스킨에 따라 content 다음에 나오는 클래스 이름이 다릅니다. 

    오디세이는 '.article-view'로 쓰면 됩니다.

    반응형#2  '.area_view'로 쓰면 됩니다.

 

📌 h2 - 제목 1 / h3 - 제목 2 / h4 - 제목 3 이므로 내가 목차로 삼고 싶은 것만 코드를

      쓰면 됩니다. 

      예를 들어 목차로 제목 1만 목차로 하고 싶다면 headings : "h2"라고 적으면 됩니다. 

 

📌 카테고리 플러그인을 사용+나는  h4까지 목차로 하고 싶은 사람이다!면 위 코드로 쓰기.

     그렇지 않으면 아래 사진과 같은 오류가 난다. 참고블로그 1님의 첫 번째 코드를

     썼더니 나타나는 일...... 

     카테고리의 다른 글을 목차로 받아들이는..... 그러니 참고블로그 1님의 두 번째 코드 사용하기!

 

 

2. CSS 수정 -> 디자인 수정을 위해

• 블로그 관리 페이지 -> 스킨 편집 -> CSS 편집

 

• css 가장 마지막 코드에 아래와 같은 코드 삽입! 

📌 아래의 코드는 목차의 디자인을 꾸미는 코드

/* 목차 디자인 */
.book-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #219dff;
    padding: 10px 20px 10px 15px;
    z-index: 1;
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #219dff;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #1b3461;
}
#toc * {
    font-size: 20px;
    color: #000 !important;
}
#toc {
    margin-bottom: 0;
}
#toc a:hover {
    color: #000;
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 10px;
}
#toc > li > a {
    text-decoration:none;
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}

 

📌 아래의 코드는 제목의 디자인을 꾸미는 코드

 

/*제목 디자인*/
.article_view h2 {
	text-align: left;
	border-left: #1478ff 12px solid;
	border-bottom: 1px solid #1478ff;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
}
.article_view h3 {
	text-align: left;
	border-left: #28a0ff 8px solid;
	border-bottom: 1px solid #28a0ff;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}
.article_view h4 {
	text-align: left;
	border-left: #aadbff 6px solid;
	border-bottom: 1px solid #aadbff;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}

 

 

3. 목차 서식 만들기

• 블로그 관리 페이지 -> 서식 관리 -> 서식 쓰기 -> html 변환

 

• 창에 아래와 같은 코드 입력 -> 완성 클릭하여 서식 생성하기

<div class="book-toc">
  <p>목차</p>
  <ul id="toc"></ul>
</div>

 

그렇다면 준비 사항은 다 끝났다!

이제 글에 실제로 적용하기만 하면 된다.

 

 

4. 실제 적용

글쓰기 -> 서식 -> 만들어 놓은 '목차 서식' 클릭!

그러면 아래 그림과 같이 목차라는 글이 등장한다. 

---

여기에 이제 글을 써내려 가면 된다.

예를 들어 아래와 같은 형식으로 말이다. 

각각의 글자에 맞게 크기를 조정해주었다. 

2. 결과

따란~ 완성🎉

 

3. comment

 

 

ㅎ 나도 이제 자동 목록으로 글을 편하게 쓸 수 있다~

 

 

4. 참고 블로그

첫 번째 블로그님의 글 도움을 많이 받았다. 

참고블로그 1

참고블로그 2

참고블로그 3