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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
@@ -1,11 +1,16 @@
{% macro render(display_toc) %}
<aside class="sidebar">
+ {%- set encrypted_toc = page.encrypt %}
{%- 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 %}
+ {%- if encrypted_toc %}
+ {%- set toc = '' %}
+ {%- else %}
+ {%- 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 %}
{%- endif %}
- <div class="sidebar-inner {% if display_toc %}sidebar-nav-active sidebar-toc-active{% else %}sidebar-overview-active{% endif %}">
+ <div class="sidebar-inner {% if display_toc and not encrypted_toc %}sidebar-nav-active sidebar-toc-active{% else %}sidebar-overview-active{% endif %}">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
{{ __('sidebar.toc') }}
@@ -19,7 +24,7 @@
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
{%- if display_toc %}
- <div class="post-toc animated">{{ toc }}</div>
+ <div class="post-toc animated{% if encrypted_toc %} placeholder-toc{% endif %}"{% if encrypted_toc %} hidden aria-hidden="true" data-toc-number="{{ page.toc.number }}" data-toc-max-depth="{{ page.toc.max_depth }}"{% endif %}>{{ toc }}</div>
{%- endif %}
</div>
<!--/noindex-->
@@ -71,6 +71,99 @@ NexT.boot.refresh = function() {
NexT.utils.registerVideoIframe();
};
+NexT.boot.buildEncryptedTOC = function(toc) {
+ const postBody = document.querySelector('.post-body');
+ if (!postBody) return false;
+
+ const maxDepth = parseInt(toc.dataset.tocMaxDepth, 10) || 6;
+ const numbered = toc.dataset.tocNumber !== 'false';
+ const headings = [...postBody.querySelectorAll('h1, h2, h3, h4, h5, h6')].filter(heading => {
+ const level = parseInt(heading.tagName.substring(1), 10);
+ return level <= maxDepth && heading.textContent.trim();
+ });
+
+ if (headings.length === 0) return false;
+
+ const levels = headings.map(heading => parseInt(heading.tagName.substring(1), 10));
+ const rootLevel = Math.min(...levels) - 1;
+ const root = document.createElement('ol');
+ const counters = Array(7).fill(0);
+ const stack = [{ level: rootLevel, list: root, item: null }];
+
+ root.className = 'nav';
+ toc.textContent = '';
+
+ headings.forEach((heading, index) => {
+ const level = parseInt(heading.tagName.substring(1), 10);
+ if (!heading.id) heading.id = `encrypted-heading-${index + 1}`;
+
+ while (stack.length > 1 && level <= stack[stack.length - 1].level) {
+ stack.pop();
+ }
+
+ let parent = stack[stack.length - 1];
+ let list = parent.list;
+ if (level > parent.level && parent.item) {
+ list = parent.item.querySelector(':scope > .nav-child');
+ if (!list) {
+ list = document.createElement('ol');
+ list.className = 'nav-child';
+ parent.item.appendChild(list);
+ }
+ }
+
+ counters[level]++;
+ for (let i = level + 1; i < counters.length; i++) counters[i] = 0;
+
+ const item = document.createElement('li');
+ const link = document.createElement('a');
+ const text = document.createElement('span');
+ const clone = heading.cloneNode(true);
+
+ clone.querySelectorAll('.headerlink, .anchor').forEach(element => element.remove());
+ item.className = `nav-item nav-level-${level}`;
+ link.className = 'nav-link';
+ link.href = `#${encodeURI(heading.id)}`;
+
+ if (numbered) {
+ const number = document.createElement('span');
+ number.className = 'nav-number';
+ number.textContent = counters.slice(rootLevel + 1, level + 1).filter(Boolean).join('.') + '.';
+ link.appendChild(number);
+ link.appendChild(document.createTextNode(' '));
+ }
+
+ text.className = 'nav-text';
+ text.textContent = clone.textContent.trim();
+ link.appendChild(text);
+ item.appendChild(link);
+ list.appendChild(item);
+ stack.push({ level, list, item });
+ });
+
+ toc.appendChild(root);
+ return true;
+};
+
+NexT.boot.activateEncryptedTOC = function() {
+ const toc = document.querySelector('.post-toc.placeholder-toc');
+ if (!toc) return;
+
+ if (!NexT.boot.buildEncryptedTOC(toc)) return;
+
+ toc.classList.remove('placeholder-toc');
+ toc.hidden = false;
+ toc.removeAttribute('aria-hidden');
+
+ const sidebar = document.querySelector('.sidebar-inner');
+ if (!sidebar) return;
+
+ sidebar.classList.add('sidebar-nav-active');
+ NexT.utils.registerSidebarTOC();
+ NexT.utils.activateSidebarPanel(0);
+ NexT.utils.updateSidebarPosition();
+};
+
NexT.boot.motion = function() {
// Define Motion Sequence & Bootstrap Motion.
if (CONFIG.motion.enable) {
@@ -89,3 +182,5 @@ document.addEventListener('DOMContentLoaded', () => {
NexT.boot.refresh();
NexT.boot.motion();
});
+
+window.addEventListener('hexo-blog-decrypt', NexT.boot.activateEncryptedTOC);
|