Posts List
  1. 第一步:添加文章目录模块到文章模板中
  2. 第二步:添加CSS样式
  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
<!-- 文章内容 -->
<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
本文链接:http://www.alzz.me/posts/2014/08/03/05_只需三步,添加文章目录模块/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

有问题?
微信。◕‿◕。