hexo-blog-encrypt目录消失

发表于 分类于 本文字数： 1.5k 阅读时长 ≈ 1 分钟

使用 hexo-blog-encrypt 对文章进行加密，解密后发现目录消失，本文将介绍如何通过修改 NexT 主题的源码来实现加密文章的目录显示。

本教程针对 hexo 下的 NexT 主题

原因

从插件的 github issues 中我找到了相关的讨论：解密后目录不会更新 · Issue #16 · D0n9X1n/hexo-blog-encrypt

原因是：

加密的时候，post.content 会变成加密后的串，所以原来的 TOC 生成逻辑就会针对加密后的内容。 所以这边我只能把原来的内容存进 post.origin 字段。

优化代码

打开 /thems/next/layout/_micro/sidebar.njk文件，进行如下修改

找到包含 set toc = toc(page.content... 的代码段，将其中的内容替换为如下代码：

1
2
3
4
5
6
7
8
{%- if display_toc %}
  {%- if (page.encrypt) %}
    {%- set toc = toc(page.origin, { class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
  {%- else %}
    {%- set toc = toc(page.content, { class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
  {%- endif %}
  {%- set display_toc = toc.length > 1 and display_toc %}
{%- endif %}

上述代码的作用是当有加密时，从 page.origin 中读取目录信息。

找到包含 <div class="post-toc-wrap sidebar-panel"> 的代码段，将其修改为：

1
2
3
4
5
6
7
8
9
10
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
  {%- if display_toc %}
    {%- if (page.encrypt) %}
      <div id="toc-div" class="post-toc animated" style="display:none">{{ toc }}</div>
    {%- else %}
      <div class="post-toc animated">{{ toc }}</div>
    {%- endif %}
  {%- endif %}
</div>

上述代码的原理是：在文章加密的前提下，通过将目录部分加入到一个 不可见的div 中来实现 隐藏目录 的效果。在 hexo-blog-encrypt/lib/hbe.js 源码中，我们可以看到解密后会修改 id 值为 toc-div 的元素为 display:inline 来显示内容。

参考

本文参考以下文章，在此致以诚挚谢意！

Hexo博客文章加密