嘘~ 正在从服务器偷取页面 . . .

Matery手机端TOC适配


参考文档1:hexo-theme-matery/post.ejs

参考文档2:hexo-theme-matery/post-detail-toc.ejs

参考文档3:hexo-theme-matery/post-detail.ejs

参考文档4:hexo-toc 插件

前言

这篇文章是对于个人修改 Matery 主题的一个尝试,因为 Matery 的 Toc 模块是默认开启(在 pc 端,移动端未知)单独跟文章内容分了两个不同的地方来渲染,然后移动端因为窗口比例原因,无法实现跟 pc 端一样的分块,所以 Matery 主题干脆把移动端的 Toc 给忽略了(也不知道是不是隐藏了),但是对于有目录需求的人来说这就很不方便。

因此,我这篇文章所尝试的,是通过取消移动端对于 Toc 的渲染,使得文章的 Toc 跟 md 文件的 Toc 表现形式一样,出现在文章开头,用来导航定位。

个人能力有限,能做到哪一步,只有做了才知道。

相关文件

首先很明确的是,跟文章渲染相关的最直接的文件,themes\hexo-theme-matery\layout\post.ejs,在其中寻找跟 toc 有关的代码,我发现了这一段:

<%
    var isTocEnable = theme.toc.enable && String(page.toc) !== 'false';
    var containerClass = isTocEnable ? 'post-container' : 'container';
%>

<main class="<%- containerClass %> content">

    <% if (isTocEnable) { %>
    <%- partial('_partial/post-detail-toc.ejs') %>
    <% } else { %>
    <%- partial('_partial/post-detail.ejs') %>
    <% } %>

</main>

很明显, pc 端的在 themes\hexo-theme-matery\layout\_partial\post-detail-toc.ejs文件里,而 移动端的则在 themes\hexo-theme-matery\layout\_partial\post-detail.ejs 文件中。

对比两个文件,可以发现,post-detail-toc.ejs是有对于 post-detail.ejs 的引用的:

<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <%- partial('_partial/post-detail.ejs') %>
    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;<%- __('toc') %>
            </div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

Hexo-toc 插件

其实这算是一个折中的方案,既然没办法让移动端专门取消 toc ,那就让博客内容一开始就有 toc 。

安装插件

npm install hexo-toc --save

使用方式

<!--下面代码里的 * 其实就是空格,即' ',但是因为插件本身的原因,直接输入的话会出现渲染错误,不理解的可以去文首的参考文档4那边查看插件说明文档-->

<!--*toc*-->

相关配置

其实安装完插件就能直接拿来用了,但是根据插件的说明文档,还需要做一个事情。

站点配置文件 中添加如下代码段:

toc:
  maxdepth: 3
  class: toc
  slugify: transliteration
  decodeEntities: false
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

上面的几个属性说明:

  • maxdepth: Use headings whose depth is at most maxdepth.

  • class: The CSS Class for the toc. (Default is false)

  • slugify: Choose which slugify function you want to use. Currently support uslug (Default) and transliteration.

  • decodeEntities: Select whether to enable decode entities. ( Default is false and please see #15).

  • anchor: Whether should have an anchor for each headings. (Default is false)

  • position: Where should the anchor be, before the title, or after the title. (Default is after);
    • symbol: Which symbol you want the anchor be. (Default is #);
  • style: The CSS class for the anchor, (Default is header-anchor);

解决插件未点击跳转问题

解决移动端 Post TOC 显示问题。


文章作者: 目棃
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 目棃 !
评论
  目录