jekyll-theme-chirpier 1.0.1 → 1.0.3
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 +4 -4
- data/README.md +24 -0
- data/_data/locales/en.yml +3 -0
- data/_data/locales/zh-CN.yml +3 -0
- data/_includes/category-article-tree.html +231 -0
- data/_includes/footer.html +2 -2
- data/_includes/sidebar.html +12 -0
- data/_layouts/post.html +3 -0
- data/_sass/pages/_category-article-tree.scss +230 -0
- data/_sass/pages/_index.scss +1 -0
- data/_sass/themes/_dark.scss +13 -1
- data/_sass/themes/_light.scss +13 -1
- metadata +5 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f18ef18dcb6e5dd82149e6fa83268b1d218cea0ddc0dbe2b1c9e036d55638c13
|
|
4
|
+
data.tar.gz: 46d8c1cdd91adeb417a21de2eff44c5b872227e46f599874832fc21fd6f1d062
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9b69a31bc6128a7eb6f4622915b1e97386b9b3162340f905119fb12182dc84b7288e32b753e1220e03998b0dbda8cd21b327f3e9988c6608f35a1aaec7ca3fdb
|
|
7
|
+
data.tar.gz: aec22eacfbbc0cea06c497df966d9c659b0dd9d3e7905d9bc0fe96844d9494a6920c324203a7f3d526eeef4682923eeb7b6054dccf8cc0d210e2589bf726b47e
|
data/README.md
CHANGED
|
@@ -1,2 +1,26 @@
|
|
|
1
1
|
# jekyll-theme-chirpier
|
|
2
2
|
jekyll-theme-chirpy的自定义
|
|
3
|
+
|
|
4
|
+
# 新特性
|
|
5
|
+
- 代码片段左上角的三个圆点使用不同的颜色。
|
|
6
|
+
- 优化单行代码颜色。
|
|
7
|
+
- 增加显示： 文章数、类别数、标签数。
|
|
8
|
+
- 增加分类文章树: 可以在浏览文章时，显示`文章列表`，点击按钮可以显示或隐藏文章列表。
|
|
9
|
+
|
|
10
|
+
# 模板
|
|
11
|
+
|
|
12
|
+
[**jekyll-theme-chirpier 主题模板 chirpier-starter**](https://github.com/JiuYu77/chirpier-starter)
|
|
13
|
+
|
|
14
|
+
# 构建&发布
|
|
15
|
+
|
|
16
|
+
## 构建（npm + gem）
|
|
17
|
+
|
|
18
|
+
```shell
|
|
19
|
+
bash tools/release.sh -p
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## 发布（gem）
|
|
23
|
+
|
|
24
|
+
```shell
|
|
25
|
+
gem push 定义的主题名-版本号.gem
|
|
26
|
+
```
|
data/_data/locales/en.yml
CHANGED
data/_data/locales/zh-CN.yml
CHANGED
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
{% assign current_url = page.url %}
|
|
2
|
+
{% assign main_category = page.categories | first %}
|
|
3
|
+
{% assign all_posts = site.posts | where_exp: "post", "post.categories.first == main_category" %}
|
|
4
|
+
|
|
5
|
+
<div id="category-article-tree">
|
|
6
|
+
<!-- 显示/隐藏按钮 -->
|
|
7
|
+
<aside class="category-tree-toggle-container">
|
|
8
|
+
<button id="category-tree-toggle" class="category-tree-toggle-btn" type="button" aria-expanded="true" aria-controls="posts-list">
|
|
9
|
+
<i id="category-tree-toggle-icon" class="fas fa-bars"></i>
|
|
10
|
+
</button>
|
|
11
|
+
</aside>
|
|
12
|
+
|
|
13
|
+
<div class="posts-list category-tree-hidden" id="posts-list">
|
|
14
|
+
<h3>{{ site.data.locales[lang].post.list.posts_list }}</h3>
|
|
15
|
+
|
|
16
|
+
<!-- 按主类别分组 -->
|
|
17
|
+
{% assign sub_categories = all_posts | map: "categories" | uniq %}
|
|
18
|
+
|
|
19
|
+
<h4>{{main_category}}</h4>
|
|
20
|
+
|
|
21
|
+
{% for cat in sub_categories %}
|
|
22
|
+
{% if cat == main_category %}
|
|
23
|
+
{% continue %} <!-- 过滤主类别 -->
|
|
24
|
+
{% endif %}
|
|
25
|
+
|
|
26
|
+
{% assign category_posts = all_posts | where_exp: "post", "post.categories contains cat" %}
|
|
27
|
+
|
|
28
|
+
<div class="category-group" data-category="{{ cat | slugify }}">
|
|
29
|
+
<div class="category-header">
|
|
30
|
+
<button class="collapse-toggle" type="button" aria-expanded="true" aria-controls="category-{{ forloop.index }}">
|
|
31
|
+
<span class="toggle-icon">▼</span>
|
|
32
|
+
<h5 class="category-title">{{ cat }}</h5>
|
|
33
|
+
<span class="article-count">({{ category_posts | size }} {{site.data.locales[lang].post.list.pian}})</span>
|
|
34
|
+
</button>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="category-content" id="category-{{ forloop.index }}">
|
|
38
|
+
<ul class="article-list">
|
|
39
|
+
{% for post in category_posts %}
|
|
40
|
+
<li class="article-item {% if post.url == current_url %}current-article{% endif %}">
|
|
41
|
+
<a href="{{ post.url }}" class="article-link">
|
|
42
|
+
{{ post.title }}
|
|
43
|
+
{% if post.categories.size > 1 %}
|
|
44
|
+
<span class="subcategory-badge">
|
|
45
|
+
{% for subcat in post.categories offset:1 %}
|
|
46
|
+
{{ subcat }}{% unless forloop.last %}, {% endunless %}
|
|
47
|
+
{% endfor %}
|
|
48
|
+
</span>
|
|
49
|
+
{% endif %}
|
|
50
|
+
</a>
|
|
51
|
+
<span class="article-date">{{ post.date | date: "%Y-%m-%d" }}</span>
|
|
52
|
+
</li>
|
|
53
|
+
{% endfor %}
|
|
54
|
+
</ul>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
{% endfor %}
|
|
58
|
+
</div>
|
|
59
|
+
</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
|
+
function scrollToCurrentArticle() {
|
|
130
|
+
const currentArticle = document.querySelector('.current-article');
|
|
131
|
+
const postsList = document.getElementById('posts-list');
|
|
132
|
+
|
|
133
|
+
if (!currentArticle || !postsList) return;
|
|
134
|
+
|
|
135
|
+
// 检查是否需要滚动（列表是否超过最大高度）
|
|
136
|
+
const hasScrollbar = postsList.scrollHeight > postsList.clientHeight;
|
|
137
|
+
|
|
138
|
+
if (!hasScrollbar) {
|
|
139
|
+
// 如果没有滚动条，不需要滚动
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// 计算当前文章在列表中的位置
|
|
144
|
+
const articleRect = currentArticle.getBoundingClientRect();
|
|
145
|
+
const listRect = postsList.getBoundingClientRect();
|
|
146
|
+
|
|
147
|
+
// 计算当前文章相对于列表的顶部位置
|
|
148
|
+
const articleTopRelative = articleRect.top - listRect.top + postsList.scrollTop;
|
|
149
|
+
|
|
150
|
+
// 计算列表的可视区域高度
|
|
151
|
+
const listHeight = postsList.clientHeight;
|
|
152
|
+
|
|
153
|
+
// 计算目标滚动位置（使当前文章位于列表中部）
|
|
154
|
+
const targetScrollTop = articleTopRelative - (listHeight / 2) + (articleRect.height / 2);
|
|
155
|
+
|
|
156
|
+
// 限制滚动范围
|
|
157
|
+
const maxScrollTop = postsList.scrollHeight - listHeight;
|
|
158
|
+
const boundedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
|
|
159
|
+
|
|
160
|
+
// 平滑滚动到目标位置
|
|
161
|
+
postsList.scrollTo({
|
|
162
|
+
top: boundedScrollTop,
|
|
163
|
+
behavior: 'smooth'
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// 页面加载时自动滚动到当前文章（如果文章列表可见）
|
|
168
|
+
setTimeout(() => {
|
|
169
|
+
if (categoryArticleTree.classList.contains('category-tree-visible')) {
|
|
170
|
+
scrollToCurrentArticle();
|
|
171
|
+
}
|
|
172
|
+
}, 500);
|
|
173
|
+
|
|
174
|
+
// 监听文章列表的显示状态变化
|
|
175
|
+
const observer = new MutationObserver((mutations) => {
|
|
176
|
+
mutations.forEach((mutation) => {
|
|
177
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
178
|
+
if (categoryArticleTree.classList.contains('category-tree-visible')) {
|
|
179
|
+
// 给一点延迟确保CSS过渡完成
|
|
180
|
+
setTimeout(() => {
|
|
181
|
+
scrollToCurrentArticle();
|
|
182
|
+
}, 100);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
observer.observe(categoryArticleTree, {
|
|
189
|
+
attributes: true,
|
|
190
|
+
attributeFilter: ['class']
|
|
191
|
+
});
|
|
192
|
+
});
|
|
193
|
+
|
|
194
|
+
/*************** 显示/隐藏整个文章列表的功能 ***************/
|
|
195
|
+
const categoryTreeToggle = document.getElementById('category-tree-toggle');
|
|
196
|
+
const categoryArticleTree = document.getElementById('posts-list');
|
|
197
|
+
const categoryTreeToggleIcon = document.getElementById('category-tree-toggle-icon');
|
|
198
|
+
|
|
199
|
+
// 初始化状态
|
|
200
|
+
let isTreeVisible = false;
|
|
201
|
+
|
|
202
|
+
// 切换显示/隐藏状态
|
|
203
|
+
function toggleCategoryTree() {
|
|
204
|
+
isTreeVisible = !isTreeVisible;
|
|
205
|
+
|
|
206
|
+
if (isTreeVisible) {
|
|
207
|
+
categoryArticleTree.classList.add('category-tree-visible');
|
|
208
|
+
categoryArticleTree.classList.remove('category-tree-hidden');
|
|
209
|
+
categoryTreeToggle.setAttribute('aria-expanded', 'true');
|
|
210
|
+
categoryTreeToggleIcon.classList.add('fa-times');
|
|
211
|
+
categoryTreeToggleIcon.classList.remove('fa-bars');
|
|
212
|
+
} else {
|
|
213
|
+
categoryArticleTree.classList.add('category-tree-hidden');
|
|
214
|
+
categoryArticleTree.classList.remove('category-tree-visible');
|
|
215
|
+
categoryTreeToggle.setAttribute('aria-expanded', 'false');
|
|
216
|
+
categoryTreeToggleIcon.classList.add('fa-bars');
|
|
217
|
+
categoryTreeToggleIcon.classList.remove('fa-times');
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
// 绑定点击事件
|
|
222
|
+
categoryTreeToggle.addEventListener('click', toggleCategoryTree);
|
|
223
|
+
|
|
224
|
+
// 添加键盘支持
|
|
225
|
+
categoryTreeToggle.addEventListener('keydown', function(e) {
|
|
226
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
227
|
+
e.preventDefault();
|
|
228
|
+
toggleCategoryTree();
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
</script>
|
data/_includes/footer.html
CHANGED
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
data-bs-toggle="tooltip"
|
|
39
39
|
data-bs-placement="top"
|
|
40
40
|
title="v{{ theme.version }}"
|
|
41
|
-
href="https://github.com/
|
|
41
|
+
href="https://github.com/JiuYu77/jekyll-theme-chirpier"
|
|
42
42
|
target="_blank"
|
|
43
43
|
rel="noopener"
|
|
44
|
-
>
|
|
44
|
+
>Chirpier</a>
|
|
45
45
|
{%- endcapture -%}
|
|
46
46
|
|
|
47
47
|
{{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
|
data/_includes/sidebar.html
CHANGED
|
@@ -13,6 +13,18 @@
|
|
|
13
13
|
|
|
14
14
|
<a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a>
|
|
15
15
|
<p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
|
|
16
|
+
|
|
17
|
+
</br>
|
|
18
|
+
<table style="text-align:center;">
|
|
19
|
+
<tr>
|
|
20
|
+
<th style="padding-right:10px;">{{ site.posts | size }}</th>
|
|
21
|
+
<th>{{ site.categories | size }}</th>
|
|
22
|
+
<th style="padding-left:10px;">{{ site.tags | size }}</th></tr>
|
|
23
|
+
<tr>
|
|
24
|
+
<td style="padding-right:10px;">{{ site.data.locales[include.lang].layout.post }}</td>
|
|
25
|
+
<td>{{ site.data.locales[include.lang].tabs.categories }}</td>
|
|
26
|
+
<td style="padding-left:10px;">{{ site.data.locales[include.lang].tabs.tags }}</td></tr>
|
|
27
|
+
</table>
|
|
16
28
|
</header>
|
|
17
29
|
<!-- .profile-wrapper -->
|
|
18
30
|
|
data/_layouts/post.html
CHANGED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
#category-article-tree {
|
|
2
|
+
.posts-list {
|
|
3
|
+
margin: 0rem 0;
|
|
4
|
+
padding: 0rem 1rem;
|
|
5
|
+
border: 1px solid var(--article-tree-border-color);
|
|
6
|
+
border-radius: 0.375rem;
|
|
7
|
+
background-color: var(--article-tree-bg);
|
|
8
|
+
|
|
9
|
+
position: fixed;
|
|
10
|
+
max-height: 80vh; /* 最大高度为视口的80% */
|
|
11
|
+
overflow-y: auto; /* 内容过多时显示滚动条 */
|
|
12
|
+
z-index: 1000; /* 确保在其他内容之上 */
|
|
13
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 添加阴影增强漂浮感 */
|
|
14
|
+
right: 20px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.posts-list h3 {
|
|
18
|
+
margin-bottom: 1rem;
|
|
19
|
+
margin-top: 1.5rem;
|
|
20
|
+
color: #495057;
|
|
21
|
+
border-bottom: 2px solid var(--article-tree-posts-list-title-border);
|
|
22
|
+
padding-bottom: 0.5rem;
|
|
23
|
+
font-size: 1.1rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.posts-list h4 {
|
|
27
|
+
margin-bottom: 1rem;
|
|
28
|
+
margin-top: 0.7rem;
|
|
29
|
+
color: #495057;
|
|
30
|
+
font-size: 1rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.category-group {
|
|
34
|
+
margin-bottom: 0.7rem;
|
|
35
|
+
border: 1px solid var(--article-tree-innerborder);
|
|
36
|
+
border-radius: 0.375rem;
|
|
37
|
+
background-color: var(--article-tree-bg);
|
|
38
|
+
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.category-header {
|
|
43
|
+
border-bottom: 1px solid var(--article-tree-innerborder);
|
|
44
|
+
background-color: var(--article-tree-bg);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.collapse-toggle {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
width: 100%;
|
|
51
|
+
padding: 0.4rem 0.6rem;
|
|
52
|
+
background: none;
|
|
53
|
+
border: none;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
text-align: left;
|
|
56
|
+
transition: background-color 0.2s ease;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.collapse-toggle:hover {
|
|
60
|
+
background-color: var(--article-tree-collapse-toggle-hover-color);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.toggle-icon {
|
|
64
|
+
margin-right: 0.5rem;
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
transition: transform 0.3s ease;
|
|
67
|
+
min-width: 16px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.category-group.collapsed .toggle-icon {
|
|
71
|
+
transform: rotate(-90deg);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.category-title {
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
color: #495057;
|
|
77
|
+
margin: 0;
|
|
78
|
+
flex-grow: 1;
|
|
79
|
+
font-size: 0.9rem;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.article-count {
|
|
83
|
+
font-size: 0.875rem;
|
|
84
|
+
color: #6c757d;
|
|
85
|
+
margin-left: 0.5rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.category-content {
|
|
89
|
+
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
background-color: var(--article-tree-category-content-bg);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.category-group.collapsed .category-content {
|
|
95
|
+
max-height: 0;
|
|
96
|
+
opacity: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.category-group:not(.collapsed) .category-content {
|
|
100
|
+
max-height: 1000px; /* 足够大的值容纳内容 */
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.article-list {
|
|
105
|
+
list-style: none;
|
|
106
|
+
padding: 0.2rem 1rem; /* 上和下为0.2rem，右和左为1rem */
|
|
107
|
+
margin: 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.article-item {
|
|
111
|
+
display: flex;
|
|
112
|
+
justify-content: space-between;
|
|
113
|
+
align-items: center;
|
|
114
|
+
padding: 0.2rem 0;
|
|
115
|
+
border-bottom: 1px solid var(--article-tree-border-color);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.article-item:last-child {
|
|
119
|
+
border-bottom: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.article-item.current-article {
|
|
123
|
+
background-color: var(--article-tree-current-article-bg);
|
|
124
|
+
border-radius: 0.25rem;
|
|
125
|
+
margin: 0 -0.5rem;
|
|
126
|
+
padding: 0.2rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.article-item.current-article .article-link {
|
|
130
|
+
color: white;
|
|
131
|
+
font-weight: 600;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.article-item.current-article .subcategory-badge {
|
|
135
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
136
|
+
color: white;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.article-link {
|
|
140
|
+
text-decoration: none;
|
|
141
|
+
color: #495057;
|
|
142
|
+
flex-grow: 1;
|
|
143
|
+
font-size: 0.85rem; /* 减小链接字体大小 */
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.article-link:hover {
|
|
147
|
+
color: #007acc;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.subcategory-badge {
|
|
151
|
+
background-color: var(--article-tree-subcategory-bg);
|
|
152
|
+
color: #6c757d;
|
|
153
|
+
padding: 0.125rem 0.375rem;
|
|
154
|
+
border-radius: 0.25rem;
|
|
155
|
+
margin-left: 0.5rem;
|
|
156
|
+
font-size: 0.7rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.article-date {
|
|
160
|
+
color: #6c757d;
|
|
161
|
+
white-space: nowrap;
|
|
162
|
+
font-size: 0.75rem;
|
|
163
|
+
margin-left: 0.5rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* 显示/隐藏按钮容器 */
|
|
167
|
+
.category-tree-toggle-container{
|
|
168
|
+
z-index: 1001; /* 确保按钮在文章列表之上 */
|
|
169
|
+
position: fixed;
|
|
170
|
+
// bottom: 2rem;
|
|
171
|
+
top: 2rem;
|
|
172
|
+
right: 2rem;
|
|
173
|
+
}
|
|
174
|
+
/* 显示/隐藏按钮样式 */
|
|
175
|
+
.category-tree-toggle-btn {
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
padding: 0.5rem 1rem;
|
|
179
|
+
background-color: var(--button-bg);
|
|
180
|
+
border: none;
|
|
181
|
+
border: 1px solid var(--article-tree-toggle-btn-border-color);
|
|
182
|
+
width: 50px;
|
|
183
|
+
height: 50px;
|
|
184
|
+
width: 3rem;
|
|
185
|
+
height: 3rem;
|
|
186
|
+
border-radius: 50%;
|
|
187
|
+
cursor: pointer;
|
|
188
|
+
font-size: 0.9rem;
|
|
189
|
+
font-weight: 600;
|
|
190
|
+
transition: all 0.3s ease;
|
|
191
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
192
|
+
}
|
|
193
|
+
.category-tree-toggle-btn:hover {
|
|
194
|
+
transform: translateY(-1px);
|
|
195
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
196
|
+
background-color: var(--article-tree-toggle-btn-hover-color);
|
|
197
|
+
}
|
|
198
|
+
.category-tree-toggle-btn:active {
|
|
199
|
+
transform: translateY(0);
|
|
200
|
+
}
|
|
201
|
+
/* 显示状态 */
|
|
202
|
+
.category-tree-visible {
|
|
203
|
+
opacity: 1;
|
|
204
|
+
visibility: visible;
|
|
205
|
+
transform: translateY(0);
|
|
206
|
+
}
|
|
207
|
+
/* 隐藏状态 */
|
|
208
|
+
.category-tree-hidden {
|
|
209
|
+
opacity: 0;
|
|
210
|
+
visibility: hidden;
|
|
211
|
+
transform: translateY(-10px);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* 响应式设计 */
|
|
215
|
+
@media (max-width: 768px) {
|
|
216
|
+
.article-item {
|
|
217
|
+
flex-direction: column;
|
|
218
|
+
align-items: flex-start;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.article-date {
|
|
222
|
+
margin-top: 0.25rem;
|
|
223
|
+
font-size: 0.8rem;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.collapse-toggle {
|
|
227
|
+
// padding: 0.75rem;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
} /* #category-article-tree */
|
data/_sass/pages/_index.scss
CHANGED
data/_sass/themes/_dark.scss
CHANGED
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
/* Code highlight colors */
|
|
102
102
|
--language-border-color: #2d2d2d;
|
|
103
103
|
--highlight-bg-color: #151515;
|
|
104
|
-
--highlighter-rouge-color:
|
|
104
|
+
--highlighter-rouge-color: rgb(12, 163, 12);
|
|
105
105
|
--highlight-lineno-color: #808080;
|
|
106
106
|
--inline-code-bg: rgba(255, 255, 255, 0.05);
|
|
107
107
|
--code-color: #b0b0b0;
|
|
@@ -114,6 +114,18 @@
|
|
|
114
114
|
--clipboard-checked-color: #2bcc2b;
|
|
115
115
|
--filepath-text-color: #cacaca;
|
|
116
116
|
|
|
117
|
+
// category-article-tree
|
|
118
|
+
--article-tree-bg: #1e1e1e;
|
|
119
|
+
--article-tree-posts-list-title-border: #dddddd;
|
|
120
|
+
--article-tree-collapse-toggle-hover-color: #2e2e2e;
|
|
121
|
+
--article-tree-current-article-bg: #444444;
|
|
122
|
+
--article-tree-border-color: #3b3b3b;
|
|
123
|
+
--article-tree-innerborder: #424242;
|
|
124
|
+
--article-tree-category-content-bg: #1e1e1e;
|
|
125
|
+
--article-tree-toggle-btn-hover-color: #2e2e2e;
|
|
126
|
+
--article-tree-toggle-btn-border-color: #3b3b3b;
|
|
127
|
+
--article-tree-subcategory-bg: rgba(199, 233, 241, 0.2);
|
|
128
|
+
|
|
117
129
|
.light {
|
|
118
130
|
display: none;
|
|
119
131
|
}
|
data/_sass/themes/_light.scss
CHANGED
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
/* --- Custom code light mode colors --- */
|
|
102
102
|
--language-border-color: #ececec;
|
|
103
103
|
--highlight-bg-color: #f6f8fa;
|
|
104
|
-
--highlighter-rouge-color:
|
|
104
|
+
--highlighter-rouge-color: rgb(199, 37, 78);
|
|
105
105
|
--highlight-lineno-color: #9e9e9e;
|
|
106
106
|
--inline-code-bg: rgba(25, 25, 28, 0.05);
|
|
107
107
|
--code-color: #3a3a3a;
|
|
@@ -113,6 +113,18 @@
|
|
|
113
113
|
--code-header-icon-color: #c9c8c8;
|
|
114
114
|
--clipboard-checked-color: #43c743;
|
|
115
115
|
|
|
116
|
+
// category-article-tree
|
|
117
|
+
--article-tree-bg: #ffffff;
|
|
118
|
+
--article-tree-posts-list-title-border: #007acc;
|
|
119
|
+
--article-tree-collapse-toggle-hover-color: #eeeeee;
|
|
120
|
+
--article-tree-current-article-bg: #1f8ed8;
|
|
121
|
+
--article-tree-border-color: #e9ecef;
|
|
122
|
+
--article-tree-innerborder: #dee2e6;
|
|
123
|
+
--article-tree-category-content-bg: #ffffff;
|
|
124
|
+
--article-tree-toggle-btn-hover-color: #eeeeee;
|
|
125
|
+
--article-tree-toggle-btn-border-color: #ebebeb;
|
|
126
|
+
--article-tree-subcategory-bg: #e9ecef;
|
|
127
|
+
|
|
116
128
|
[class^='prompt-'] {
|
|
117
129
|
--link-underline-color: rgb(219, 216, 216);
|
|
118
130
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-chirpier
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.
|
|
4
|
+
version: 1.0.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Cotes Chung
|
|
8
8
|
- JiuYu77
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -150,6 +150,7 @@ files:
|
|
|
150
150
|
- _includes/analytics/google.html
|
|
151
151
|
- _includes/analytics/matomo.html
|
|
152
152
|
- _includes/analytics/umami.html
|
|
153
|
+
- _includes/category-article-tree.html
|
|
153
154
|
- _includes/comment.html
|
|
154
155
|
- _includes/comments/disqus.html
|
|
155
156
|
- _includes/comments/giscus.html
|
|
@@ -219,6 +220,7 @@ files:
|
|
|
219
220
|
- _sass/main.scss
|
|
220
221
|
- _sass/pages/_archives.scss
|
|
221
222
|
- _sass/pages/_categories.scss
|
|
223
|
+
- _sass/pages/_category-article-tree.scss
|
|
222
224
|
- _sass/pages/_category-tag.scss
|
|
223
225
|
- _sass/pages/_home.scss
|
|
224
226
|
- _sass/pages/_index.scss
|
|
@@ -277,7 +279,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
277
279
|
- !ruby/object:Gem::Version
|
|
278
280
|
version: '0'
|
|
279
281
|
requirements: []
|
|
280
|
-
rubygems_version: 3.6.
|
|
282
|
+
rubygems_version: 3.6.7
|
|
281
283
|
specification_version: 4
|
|
282
284
|
summary: A minimal, responsive, and feature-rich Jekyll theme for technical writing.
|
|
283
285
|
test_files: []
|