jekyll-theme-chirpier 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e289a09b372a29246cc5b098e91cf463d7973f47f0fa9afab254248813860918
4
- data.tar.gz: 9d7e4d1fac850cdbdb8765a42266f35cca421a44445bf8731813e119ced88562
3
+ metadata.gz: c1075de16890756422938f5472bfe5f2e80ff7e9b890dd5b9c53454dc6e1b6db
4
+ data.tar.gz: 04f4a7c8fb82ae43ecc5241ccabf51078e735f9b337df5503c022f8f25a96e78
5
5
  SHA512:
6
- metadata.gz: 35acb06736b295d5289f67d8bc82c2d7e41b76f1bb75c41de857bc4f4bf68d9e64634315b16202524b225f374e6458e9ecae7930b4e520ae2efeac96774922d8
7
- data.tar.gz: d31ea6b9704c8c760d6ef4934ff42a80dcef6e48fa058c48a92be2ff94063cdaf11af8a9cdbbac89abb89b593551859ca026d0c7bff304b615c3f1aebcb90cb6
6
+ metadata.gz: 7d02da48024f2318372fe1f6914da8983d20f8badb3ea5d2cb18218fe32e31bc439a557a3b04f5cba53d537060ca70c70e09a7b3141817d8e0954781c6642645
7
+ data.tar.gz: 9265d27aea88a33f4a462a45af006d86912179ffbbb7236f4b2c836acf1dc1b3ff5b8682f7795e0abe071606e3ad6eff9d1cab0278e278a4d2ef9cf17003e959
@@ -2,6 +2,8 @@
2
2
  {% assign main_category = page.categories | first %}
3
3
  {% assign all_posts = site.posts | where_exp: "post", "post.categories.first == main_category" %}
4
4
 
5
+ <script defer src="{{ '/assets/js/data/category-article-tree.js' | relative_url }}"></script>
6
+
5
7
  <div id="category-article-tree">
6
8
  <!-- 显示/隐藏按钮 -->
7
9
  <aside class="category-tree-toggle-container">
@@ -57,176 +59,3 @@
57
59
  {% endfor %}
58
60
  </div>
59
61
  </div>
60
-
61
- <script>
62
- document.addEventListener('DOMContentLoaded', function() {
63
- /*************** 文章列表功能 ***************/
64
- // 获取所有折叠切换按钮
65
- const collapseToggles = document.querySelectorAll('.collapse-toggle');
66
-
67
- // 为每个按钮添加点击事件
68
- collapseToggles.forEach(toggle => {
69
- toggle.addEventListener('click', function() {
70
- const categoryGroup = this.closest('.category-group');
71
- const isCollapsed = categoryGroup.classList.contains('collapsed');
72
-
73
- // 切换折叠状态
74
- if (isCollapsed) {
75
- categoryGroup.classList.remove('collapsed');
76
- this.setAttribute('aria-expanded', 'true');
77
- } else {
78
- categoryGroup.classList.add('collapsed');
79
- this.setAttribute('aria-expanded', 'false');
80
- }
81
- });
82
- });
83
-
84
- // 保存折叠状态的函数
85
- function saveCollapseState() {
86
- const states = {};
87
- document.querySelectorAll('.category-group').forEach(group => {
88
- const category = group.dataset.category;
89
- states[category] = group.classList.contains('collapsed');
90
- });
91
- localStorage.setItem('categoryCollapseStates', JSON.stringify(states));
92
- }
93
-
94
- // 恢复折叠状态的函数
95
- function restoreCollapseState() {
96
- const savedStates = localStorage.getItem('categoryCollapseStates');
97
- if (savedStates) {
98
- const states = JSON.parse(savedStates);
99
- document.querySelectorAll('.category-group').forEach(group => {
100
- const category = group.dataset.category;
101
- if (states[category]) {
102
- group.classList.add('collapsed');
103
- const toggle = group.querySelector('.collapse-toggle');
104
- toggle.setAttribute('aria-expanded', 'false');
105
- }
106
- });
107
- }
108
- }
109
-
110
- // 为每个折叠组添加状态变化监听
111
- document.querySelectorAll('.category-group').forEach(group => {
112
- group.addEventListener('transitionend', saveCollapseState);
113
- });
114
-
115
- // 页面加载时恢复状态
116
- restoreCollapseState();
117
-
118
- // 添加键盘支持
119
- collapseToggles.forEach(toggle => {
120
- toggle.addEventListener('keydown', function(e) {
121
- if (e.key === 'Enter' || e.key === ' ') {
122
- e.preventDefault();
123
- this.click();
124
- }
125
- });
126
- });
127
-
128
- /*************** 显示/隐藏整个文章列表的功能 ***************/
129
- const categoryTreeToggle = document.getElementById('category-tree-toggle');
130
- const categoryArticleTree = document.getElementById('posts-list');
131
- const categoryTreeToggleIcon = document.getElementById('category-tree-toggle-icon');
132
-
133
- // 初始化状态
134
- let isTreeVisible = false;
135
-
136
- // 切换显示/隐藏状态
137
- function toggleCategoryTree() {
138
- isTreeVisible = !isTreeVisible;
139
-
140
- if (isTreeVisible) {
141
- categoryArticleTree.classList.add('category-tree-visible');
142
- categoryArticleTree.classList.remove('category-tree-hidden');
143
- categoryTreeToggle.setAttribute('aria-expanded', 'true');
144
- categoryTreeToggleIcon.classList.add('fa-times');
145
- categoryTreeToggleIcon.classList.remove('fa-bars');
146
- } else {
147
- categoryArticleTree.classList.add('category-tree-hidden');
148
- categoryArticleTree.classList.remove('category-tree-visible');
149
- categoryTreeToggle.setAttribute('aria-expanded', 'false');
150
- categoryTreeToggleIcon.classList.add('fa-bars');
151
- categoryTreeToggleIcon.classList.remove('fa-times');
152
- }
153
- }
154
-
155
- // 绑定点击事件
156
- categoryTreeToggle.addEventListener('click', toggleCategoryTree);
157
-
158
- // 添加键盘支持
159
- categoryTreeToggle.addEventListener('keydown', function(e) {
160
- if (e.key === 'Enter' || e.key === ' ') {
161
- e.preventDefault();
162
- toggleCategoryTree();
163
- }
164
- });
165
-
166
- /*************** 滚动到当前文章的功能 ***************/
167
- function scrollToCurrentArticle() {
168
- const currentArticle = document.querySelector('.current-article');
169
- const postsList = document.getElementById('posts-list');
170
-
171
- if (!currentArticle || !postsList) return;
172
-
173
- // 检查是否需要滚动(列表是否超过最大高度)
174
- const hasScrollbar = postsList.scrollHeight > postsList.clientHeight;
175
-
176
- if (!hasScrollbar) {
177
- // 如果没有滚动条,不需要滚动
178
- return;
179
- }
180
-
181
- // 计算当前文章在列表中的位置
182
- const articleRect = currentArticle.getBoundingClientRect();
183
- const listRect = postsList.getBoundingClientRect();
184
-
185
- // 计算当前文章相对于列表的顶部位置
186
- const articleTopRelative = articleRect.top - listRect.top + postsList.scrollTop;
187
-
188
- // 计算列表的可视区域高度
189
- const listHeight = postsList.clientHeight;
190
-
191
- // 计算目标滚动位置(使当前文章位于列表中部)
192
- const targetScrollTop = articleTopRelative - (listHeight / 2) + (articleRect.height / 2);
193
-
194
- // 限制滚动范围
195
- const maxScrollTop = postsList.scrollHeight - listHeight;
196
- const boundedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
197
-
198
- // 平滑滚动到目标位置
199
- postsList.scrollTo({
200
- top: boundedScrollTop,
201
- behavior: 'smooth'
202
- });
203
- }
204
-
205
- // 页面加载时自动滚动到当前文章(如果文章列表可见)
206
- setTimeout(() => {
207
- if (categoryArticleTree.classList.contains('category-tree-visible')) {
208
- scrollToCurrentArticle();
209
- }
210
- }, 500);
211
-
212
- // 监听文章列表的显示状态变化
213
- const observer = new MutationObserver((mutations) => {
214
- mutations.forEach((mutation) => {
215
- if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
216
- if (categoryArticleTree.classList.contains('category-tree-visible')) {
217
- // 给一点延迟确保CSS过渡完成
218
- setTimeout(() => {
219
- scrollToCurrentArticle();
220
- }, 100);
221
- }
222
- }
223
- });
224
- });
225
-
226
- observer.observe(categoryArticleTree, {
227
- attributes: true,
228
- attributeFilter: ['class']
229
- });
230
-
231
- });
232
- </script>
@@ -0,0 +1,173 @@
1
+ function initCategoryArticleTree(){
2
+ // document.addEventListener('DOMContentLoaded', function() {
3
+ /*************** 文章列表功能 ***************/
4
+ // 获取所有折叠切换按钮
5
+ const collapseToggles = document.querySelectorAll('.collapse-toggle');
6
+
7
+ // 为每个按钮添加点击事件
8
+ collapseToggles.forEach(toggle => {
9
+ toggle.addEventListener('click', function() {
10
+ const categoryGroup = this.closest('.category-group');
11
+ const isCollapsed = categoryGroup.classList.contains('collapsed');
12
+
13
+ // 切换折叠状态
14
+ if (isCollapsed) {
15
+ categoryGroup.classList.remove('collapsed');
16
+ this.setAttribute('aria-expanded', 'true');
17
+ } else {
18
+ categoryGroup.classList.add('collapsed');
19
+ this.setAttribute('aria-expanded', 'false');
20
+ }
21
+ });
22
+ });
23
+
24
+ // 保存折叠状态的函数
25
+ function saveCollapseState() {
26
+ const states = {};
27
+ document.querySelectorAll('.category-group').forEach(group => {
28
+ const category = group.dataset.category;
29
+ states[category] = group.classList.contains('collapsed');
30
+ });
31
+ localStorage.setItem('categoryCollapseStates', JSON.stringify(states));
32
+ }
33
+
34
+ // 恢复折叠状态的函数
35
+ function restoreCollapseState() {
36
+ const savedStates = localStorage.getItem('categoryCollapseStates');
37
+ if (savedStates) {
38
+ const states = JSON.parse(savedStates);
39
+ document.querySelectorAll('.category-group').forEach(group => {
40
+ const category = group.dataset.category;
41
+ if (states[category]) {
42
+ group.classList.add('collapsed');
43
+ const toggle = group.querySelector('.collapse-toggle');
44
+ toggle.setAttribute('aria-expanded', 'false');
45
+ }
46
+ });
47
+ }
48
+ }
49
+
50
+ // 为每个折叠组添加状态变化监听
51
+ document.querySelectorAll('.category-group').forEach(group => {
52
+ group.addEventListener('transitionend', saveCollapseState);
53
+ });
54
+
55
+ // 页面加载时恢复状态
56
+ restoreCollapseState();
57
+
58
+ // 添加键盘支持
59
+ collapseToggles.forEach(toggle => {
60
+ toggle.addEventListener('keydown', function(e) {
61
+ if (e.key === 'Enter' || e.key === ' ') {
62
+ e.preventDefault();
63
+ this.click();
64
+ }
65
+ });
66
+ });
67
+
68
+ /*************** 显示/隐藏整个文章列表的功能 ***************/
69
+ const categoryTreeToggle = document.getElementById('category-tree-toggle');
70
+ const categoryArticleTree = document.getElementById('posts-list');
71
+ const categoryTreeToggleIcon = document.getElementById('category-tree-toggle-icon');
72
+
73
+ // 初始化状态
74
+ let isTreeVisible = false;
75
+
76
+ // 切换显示/隐藏状态
77
+ function toggleCategoryTree() {
78
+ isTreeVisible = !isTreeVisible;
79
+
80
+ if (isTreeVisible) {
81
+ categoryArticleTree.classList.add('category-tree-visible');
82
+ categoryArticleTree.classList.remove('category-tree-hidden');
83
+ categoryTreeToggle.setAttribute('aria-expanded', 'true');
84
+ categoryTreeToggleIcon.classList.add('fa-times');
85
+ categoryTreeToggleIcon.classList.remove('fa-bars');
86
+ } else {
87
+ categoryArticleTree.classList.add('category-tree-hidden');
88
+ categoryArticleTree.classList.remove('category-tree-visible');
89
+ categoryTreeToggle.setAttribute('aria-expanded', 'false');
90
+ categoryTreeToggleIcon.classList.add('fa-bars');
91
+ categoryTreeToggleIcon.classList.remove('fa-times');
92
+ }
93
+ }
94
+
95
+ // 绑定点击事件
96
+ categoryTreeToggle.addEventListener('click', toggleCategoryTree);
97
+
98
+ // 添加键盘支持
99
+ categoryTreeToggle.addEventListener('keydown', function(e) {
100
+ if (e.key === 'Enter' || e.key === ' ') {
101
+ e.preventDefault();
102
+ toggleCategoryTree();
103
+ }
104
+ });
105
+
106
+ /*************** 滚动到当前文章的功能 ***************/
107
+ function scrollToCurrentArticle() {
108
+ const currentArticle = document.querySelector('.current-article');
109
+ const postsList = document.getElementById('posts-list');
110
+
111
+ if (!currentArticle || !postsList) return;
112
+
113
+ // 检查是否需要滚动(列表是否超过最大高度)
114
+ const hasScrollbar = postsList.scrollHeight > postsList.clientHeight;
115
+
116
+ if (!hasScrollbar) {
117
+ // 如果没有滚动条,不需要滚动
118
+ return;
119
+ }
120
+
121
+ // 计算当前文章在列表中的位置
122
+ const articleRect = currentArticle.getBoundingClientRect();
123
+ const listRect = postsList.getBoundingClientRect();
124
+
125
+ // 计算当前文章相对于列表的顶部位置
126
+ const articleTopRelative = articleRect.top - listRect.top + postsList.scrollTop;
127
+
128
+ // 计算列表的可视区域高度
129
+ const listHeight = postsList.clientHeight;
130
+
131
+ // 计算目标滚动位置(使当前文章位于列表中部)
132
+ const targetScrollTop = articleTopRelative - (listHeight / 2) + (articleRect.height / 2);
133
+
134
+ // 限制滚动范围
135
+ const maxScrollTop = postsList.scrollHeight - listHeight;
136
+ const boundedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
137
+
138
+ // 平滑滚动到目标位置
139
+ postsList.scrollTo({
140
+ top: boundedScrollTop,
141
+ behavior: 'smooth'
142
+ });
143
+ }
144
+
145
+ // 页面加载时自动滚动到当前文章(如果文章列表可见)
146
+ setTimeout(() => {
147
+ if (categoryArticleTree.classList.contains('category-tree-visible')) {
148
+ scrollToCurrentArticle();
149
+ }
150
+ }, 500);
151
+
152
+ // 监听文章列表的显示状态变化
153
+ const observer = new MutationObserver((mutations) => {
154
+ mutations.forEach((mutation) => {
155
+ if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
156
+ if (categoryArticleTree.classList.contains('category-tree-visible')) {
157
+ // 给一点延迟确保CSS过渡完成
158
+ setTimeout(() => {
159
+ scrollToCurrentArticle();
160
+ }, 100);
161
+ }
162
+ }
163
+ });
164
+ });
165
+
166
+ observer.observe(categoryArticleTree, {
167
+ attributes: true,
168
+ attributeFilter: ['class']
169
+ });
170
+ console.log('initCategoryArticleTree');
171
+ // });
172
+ }
173
+ initCategoryArticleTree();
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-chirpier
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.4
4
+ version: 1.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Cotes Chung
@@ -242,6 +242,7 @@ files:
242
242
  - assets/img/favicons/favicon.ico
243
243
  - assets/img/favicons/mstile-150x150.png
244
244
  - assets/img/favicons/site.webmanifest
245
+ - assets/js/data/category-article-tree.js
245
246
  - assets/js/data/mathjax.js
246
247
  - assets/js/data/search.json
247
248
  - assets/js/data/swconf.js