返回

高效为Typecho添加文章目录，轻松提升阅读体验

前端

众所周知，长篇博文阅读起来比较吃力，容易让人失去耐心。为了改善这种体验，许多网站和博客平台都引入了文章目录功能，方便读者快速浏览和定位感兴趣的内容。Typecho作为一个颇受欢迎的博客平台，自然也需要这样一个功能来提升用户体验。

不幸的是，Typecho的插件生态相对贫乏，缺乏类似掘金那样的文章目录插件。但这并不意味着我们无法为Typecho添加文章目录功能。事实上，我们可以通过一些简单的技巧来实现这一目的。

首先，我们需要创建一个文章目录模板文件。这个文件将包含文章目录的HTML代码，并被插入到文章页面的适当位置。

<div class="article-directory">
  <ul>
    {% for chapter in .Content.chapters %}
      <li><a href="#{{ chapter.id }}">{{ chapter.title }}</a></li>
    {% endfor %}
  </ul>
</div>

接下来，我们需要修改主题的模板文件，将文章目录模板文件插入到合适的位置。在Typecho默认的主题中，这个位置通常是header.php文件中的<body>标签之后。

<?php include $this->path('header.php'); ?>

<body>

<div class="article-directory">
  <ul>
    {% for chapter in .Content.chapters %}
      <li><a href="#{{ chapter.id }}">{{ chapter.title }}</a></li>
    {% endfor %}
  </ul>
</div>

<div class="container">
  <div class="row">

    <div class="col-md-8">
      <?php $this->content(); ?>
    </div>

    <div class="col-md-4">
      <?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10'); ?>
    </div>

  </div>
</div>

<?php include $this->path('footer.php'); ?>

</body>

最后，我们需要为文章添加章节标记。这可以通过在文章编辑器中使用<!--more-->标签来实现。

## 章节一

内容

<!--more-->

## 章节二

内容

保存文章后，刷新页面即可看到文章目录已经显示在文章页面的顶部。

除了上述方法，我们还可以使用一些第三方插件来为Typecho添加文章目录功能。其中比较受欢迎的插件有：

  • Tocify.js：一个轻量级的JavaScript插件，可以自动为文章生成目录。
  • Table of Contents Plus：一个功能强大的Typecho插件，不仅可以添加文章目录，还可以生成面包屑导航和相关文章列表。
  • TOC for Typecho：一个简单的Typecho插件，可以为文章生成目录和锚点链接。

这些插件的安装和使用都比较简单，感兴趣的朋友可以自行尝试。

希望本教程对您有所帮助。如果您有任何问题或建议，请随时给我留言。