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

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

更新于 2014.08.03 JeremyHe Hexo

在文章中使用目录还是挺好的
通过查看目录,

  • 可以更加清晰地了解文章的总体结体,
  • 读者可以很方便的进行选择性跳跃去阅读感兴趣的文章部分。
  • 快速阅读文章内容

因此，折腾了一个午休时间，终于在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
<!-- 文章内容 -->
<div class="article-entry" itemprop="articleBody">
  <% if (post.excerpt && index){ %>
	<%- post.excerpt %>
	<% if (theme.excerpt_link){ %>
	  <p class="article-more-link">
		<a href="<%- config.root %><%- post.path %>#more"><%= __('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
.toc-article
  background color-toc-bg
  margin 2em 0 0 0.5em
  padding 1em
  strong
    padding 0.3em 0
#toc
  line-height 1em
  font-size 0.8em
  float right // 如果想在左边，则把这里改成left即可
  .toc
    padding 0
    li
      list-style-type none
      
  .toc-child 
    padding-left 0.7em

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

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

1
color-toc-bg = #eee

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

本文作者：JeremyHe
本文链接：https://alzz.me/posts/2014/08/03/05_只需三步，添加文章目录模块/
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

联系作者
微信｡◕‿◕｡