티스토리 목차 자동 생성 프로젝트 사용 가이드
1. 项目介绍
tistory-table-of-contents 是一个为티스토리博客设计的开源项目，旨在自动生成文章的目录（TOC）。该项目基于티스토리的#1皮肤开发，但可以根据不同皮肤进行调整。通过自动提取文章中的标题标签（h1, h2, h3, h4），该项目能够动态生成目录，提升阅读体验。
2. 项目快速启动
2.1 下载项目文件
首先，从GitHub仓库下载项目文件：
git clone https://github.com/wbluke/tistory-table-of-contents.git
2.2 配置项目
-
打开
toc.js文件，找到CLASS_OF_MAIN_CONTENTS变量，设置为你的博客内容区域的类名。默认值为area_view。 -
将
toc.css和toc.js文件上传到你的티스토리博客的文件管理器中。
2.3 修改博客模板
-
进入티스토리的“设置”页面，选择“꾸미기” > “스킨편집”。
-
在HTML编辑器中，找到
<head>标签，添加以下内容：
<link rel="stylesheet" href="path_to_your_toc.css">
<script src="path_to_your_toc.js"></script>
- 在HTML编辑器的适当位置添加以下代码，用于显示目录：
<div id="toc-elements"></div>
3. 应用案例和最佳实践
3.1 案例一：技术博客
在技术博客中，文章通常包含多个章节和子章节。使用tistory-table-of-contents可以方便读者快速跳转到感兴趣的部分，提高阅读效率。
3.2 案例二：教程文档
对于教程类文档，目录可以帮助读者了解整个教程的结构，并快速定位到具体的步骤或章节。
3.3 最佳实践
- 保持标题层次清晰：确保文章中的标题层次分明，便于目录生成。
- 定期更新目录：随着文章内容的更新，定期检查并更新目录，确保其准确性。
4. 典型生态项目
4.1 Tocbot
Tocbot 是一个用于生成静态网站目录的JavaScript库，可以与tistory-table-of-contents结合使用，提供更丰富的目录功能。
4.2 티스토리 스킨
티스토리 스킨是티스토리博客的皮肤系统，可以根据不同需求定制博客外观。tistory-table-of-contents可以与各种스킨结合使用，提升用户体验。
通过以上步骤，你可以轻松地在티스토리博客中实现自动生成目录的功能，提升博客的阅读体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
