0%

【Hexo】如何在使用hexo-blog-encrypt的同时显示toc?

相关的原因和解决方法在下面的链接可以找到:

hexo-blog-encrypt目录消失 | 星辰大海

但是已经有些过时,我做一些补充

方法

修改themes\next\layout\_macro\sidebar.swig文件,除了上链所作出的修改外,还增加了一段JS代码,目的是处理已经解密后的文章在使用localStorage里的密钥自动解密后,无法自动重新渲染toc的问题。完整代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
{% macro render(display_toc) %}
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>

<aside class="sidebar">
<div class="sidebar-inner">

{%- set display_toc = page.toc.enable and display_toc %}

{%- 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 %}
{#
{%- if display_toc %}
{%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
{%- set display_toc = toc.length > 1 and display_toc %}
{%- endif %}
#}

<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
{{ __('sidebar.toc') }}
</li>
<li class="sidebar-nav-overview">
{{ __('sidebar.overview') }}
</li>
</ul>

<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
{#
{%- if display_toc %}
<div class="post-toc motion-element">{{ toc }}</div>
{%- endif %}
#}
{%- 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>
<!--/noindex-->

<div class="site-overview-wrap sidebar-panel">
{{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

{{- next_inject('sidebar') }}
</div>

{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top motion-element">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
{%- endif %}

</div>
</aside>
{# --- 插入以下 JS 补丁 --- #}
<script>
(function() {
var checkToc = setInterval(function() {
// 检查加密容器是否存在
var content = document.getElementById('hexo-blog-encrypt');
var toc = document.getElementById('toc-div');

if (content) {
// 如果内容容器存在,且不是隐藏状态(即已解密)
if (content.style.display !== 'none') {
if (toc) {
toc.style.display = 'block';
// 同时触发 NexT 的侧边栏标签切换逻辑,确保 TOC 标签是激活状态
var tocLi = document.querySelector('.sidebar-nav-toc');
if (tocLi) tocLi.click();
}
clearInterval(checkToc);
}
} else {
// 如果根本没有加密容器(普通文章),停止检查
clearInterval(checkToc);
}
}, 500);
setTimeout(function() { clearInterval(checkToc); }, 8000); // 8秒后自动停止
})();
</script>
{# --- 结束插入 --- #}
<div id="sidebar-dimmer"></div>
{% endmacro %}