github博客

hexo添加文章目录模块

目录
  1. 1. 第一步：添加文章目录模块到文章模板中
  2. 2. 第二步：添加CSS样式
  3. 3. 第三步：添加文章目录模块的背景颜色

在文章中使用目录还是挺好的,通过查看目录,可以更加清晰地了解文章的总体结体,读者可以很方便的进行选择性跳跃去阅读感兴趣的文章部分。

因此，折腾了一个午休时间，终于在landscape+主题里加入了文章目录模块。以下是瞎折腾的步骤。

第一步：添加文章目录模块到文章模板中

打开 \landscape-plus\layout_partial 目录下的 article.ejs 文件
找到相应的位置，加入以下文章目录那一块的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 文章内容 -->
<div class="article-entry" itemprop="articleBody">
  <% if (post.excerpt && index){ %>
	<%- post.excerpt %>
	<% if (theme.excerpt_link){ %>
	  <p class="article-more-link">
		<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
	  </p>
	<% } %>
  <% } else { %>

<!-- 文章目录开始 -->
<% if (!index){ %>
<div id="toc" class="toc-article">
<strong class="toc-title"><%= __('contents') %></strong>
<%- toc(page.content) %>
</div>
<% } %>
<!-- 文章目录结束 -->

	<%- post.content %>
  <% } %>
</div>

第二步：添加CSS样式

打开 landscape-plus\source\css_partial 目录下的 article.styl 文件
在最后加入以下样式(必须严格遵守缩进样式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//toc
.toc-article
  background color-toc-bg
  border-radius: 4px;
  border: 1px solid #DDD;
  margin 2em 0 0 0.5em
  padding 1em
  strong
    padding 0.3em 0
#toc
  line-height 1em
  font-size 0.9em
  float right // 如果想在左边，则把这里改成left即可
  .toc
    padding 0
    li
      list-style-type none

.toc-child
  padding-left 0.7em

第三步：添加文章目录模块的背景颜色

打开 landscape-plus\source\css 目录下的 _variables.styl文件
任意一个位置添加以下颜色变量

color-toc-bg = #eee

通过以上三步，即可在每一篇文章的右上角添加目录结构。还挺漂亮实用的
以上是个人瞎弄，欢迎留言指教或共同摸索。^_^

转自：只需三步，添加文章目录模块