美文网首页极客Hexo
(收录)为Hexo博客添加目录

(收录)为Hexo博客添加目录

作者: 偷天神猫 | 来源:发表于2015-10-21 08:46 被阅读5605次

    博文原地址:The Bloom of Youth | 锦瑟华年

    Hexo博客系统的核心支持生成目录(Table of Contents),但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。

    修改Landscape主题的ejs文件

    我们首先要编辑文章显示页面的模板,也就是
    <code>themes/landscape/layout/_partial/article.ejs</code>文件。为了将目录生成在正文之前,我们首先在这个文件中找到<code><%- post.content %></code>,并在<strong>这一行之前</strong>加入如下代码:

    <!-- Table of Contents -->
    <% if (!index && post.toc){ %>
    <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
    </div>
    <% } %>
    

    这段代码的含义清晰明了,<code>if</code>语句中有两个条件,<code>!index</code>是为了不在首页的文章摘要中生成目录,<code>post.toc</code>确保了只在显式地标记了<code>toc: true</code>的文章中生成目录。若这两个条件满足,则创建一个目录的<code>div</code>。

    修改完这个文件之后,找一篇包含了多个子标题的文章,并在文章开头的<code>front-matter</code>中添加一句<code>toc: true</code>,在浏览器中访问这篇文章,应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看,我们还需要添加相应的CSS来将其指定为我们想要的样式。

    为目录编写CSS文件

    要指定目录的样式,我们要修改的文件是
    <code>themes/landscape/source/css/_partial/article.styl</code>。在文件的最后,添加如下代码:

    /*toc*/
    .toc-article
    background #eee
    border 1px solid #bbb
    border-radius 10px
    margin 1.5em 0 0.3em 1.5em
    padding 1.2em 1em 0 1em
    max-width 28%
    
    .toc-title
    font-size 120%
    
    #toc
    line-height 1em
    font-size 0.9em
    float right
    .toc
    padding 0
    margin 1em
    line-height 1.8em
    li
    list-style-type none
    
    .toc-child 
    margin-left 1em
    

    第一段的<code>toc-article</code>指定了目录整个<code>div</code>的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度,我将其设为了28%,也就是文章正文那个框的宽度的28%,也可以设为一个固定的长度,比如在笔记本电脑上<code>16em</code>就是个不错的宽度,但为了能适配各种不同尺寸的屏幕,最好还是设置为百分比。如果不指定最大宽度,遇到比较长的标题时,生成的目录会非常难看。这个最大宽度的设置是我在网上其他添加目录的方法中没有见到的。

    第二段的<code>toc-title</code>指的就是“文章目录”那四个字,这四个字要比其他字大一些,将其字号设为其他字的120%。

    第三段的<code>#toc.toc</code>指定了目录列表的一些细节,将<code>font-size</code>设为<code>0.9em</code>会让目录的字比文章的字稍小一些。最后的<code>.toc-child</code>指定了二级目录的缩进量。

    再次生成页面,应该已经可以显示比较美观的目录了。

    收尾工作

    通常情况下我们不需要为每一篇文章都添加目录,因为大部分文章的长度还是相对较短,或者结构简单而没有添加小标题。在我的博客上,需要添加目录的长文还是相对较少的。因为我选择了默认不生成目录,而手动为需要目录的文章添加显式地标记。

    下面我就需要编辑每一篇需要添加目录的文章,在文章开头的<code>front-matter</code>中加入<code>toc: true</code>。


    toctoc

    效果图:


    summysummy

    相关文章

      网友评论

      • 3b6cad963298:本文的CSS部分有点问题啊,设置完成后,页面变成纯文字了.,下面是我的环境
        hexo -V
        hexo: 3.3.7
        hexo-cli: 1.0.2
        os: Linux 4.10.13-1-ARCH linux x64
        http_parser: 2.7.1
        node: 7.10.0
        v8: 5.5.372.43
        uv: 1.11.0
        zlib: 1.2.11
        ares: 1.12.0
        modules: 51
        openssl: 1.0.2k
        icu: 59.1
        unicode: 9.0
        cldr: 31.0.1
        tz: 2017b
        3b6cad963298:哦,错误代码是这个.

        ERROR Asset render failed: css/style.css
        ParseError: expected "indent", got "outdent"
        at Parser.error (/home/hexo/node_modules/stylus/lib/parser.js:259:11)
        at Parser.expect (/home/hexo/node_modules/stylus/lib/parser.js:287:12)
        at Parser.block (/home/hexo/node_modules/stylus/lib/parser.js:845:12)
        at Parser.media (/home/hexo/node_modules/stylus/lib/parser.js:1151:24)
        at Parser.stmt (/home/hexo/node_modules/stylus/lib/parser.js:778:26)
        at Parser.statement (/home/hexo/node_modules/stylus/lib/parser.js:685:21)
        at Parser.block (/home/hexo/node_modules/stylus/lib/parser.js:865:21)
        at Parser.selector (/home/hexo/node_modules/stylus/lib/parser.js:1555:24)
        at Parser.stmt (/home/hexo/node_modules/stylus/lib/parser.js:778:26)
        at Parser.statement (/home/hexo/node_modules/stylus/lib/parser.js:685:21)
        at Parser.parse (/home/hexo/node_modules/stylus/lib/parser.js:236:25)
        at Evaluator.importFile (/home/hexo/node_modules/stylus/lib/visitor/evaluator.js:78:20)
        at Evaluator.visitImport (/home/hexo/node_modules/stylus/lib/visitor/evaluator.js:920:27)
        at Evaluator.Visitor.visit (/home/hexo/node_modules/stylus/lib/visitor/index.js:28:40)
        at Evaluator.visit (/home/hexo/node_modules/stylus/lib/visitor/evaluator.js:160:18)
        at Evaluator.visitRoot (/home/hexo/node_modules/stylus/lib/visitor/evaluator.js:707:27)
        at Evaluator.Visitor.visit (/home/hexo/node_modules/stylus/lib/visitor/index.js:28:40)
        at Evaluator.visit (/home/hexo/node_modules/stylus/lib/visitor/evaluator.js:160:18)
        at Evaluator.evaluate (/home/hexo/node_modules/stylus/lib/visitor/evaluator.js:247:15)
        at Renderer.render (/home/hexo/node_modules/stylus/lib/renderer.js:86:26)
        at Hexo.module.exports (/home/hexo/node_modules/hexo-renderer-stylus/lib/renderer.js:53:6)
        at Hexo.tryCatcher (/home/hexo/node_modules/bluebird/js/release/util.js:16:23)
        3b6cad963298:theme用的是 landscape原版,版本号用说吗 ,我是今天新git clone 的,今天日期是2017年5月30日

      本文标题:(收录)为Hexo博客添加目录

      本文链接:https://www.haomeiwen.com/subject/isxthttx.html