hexo-theme-particlex 2.7.6 → 2.8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +12 -6
- package/_config.yml +1 -1
- package/layout/categories.ejs +70 -70
- package/layout/import.ejs +16 -16
- package/layout/tags.ejs +70 -70
- package/package.json +1 -1
package/README.md
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
[ParticleX](https://github.com/theme-particlex/hexo-theme-particlex) 主题,诞生原因是因为原来的 [Particle](https://github.com/korilin/hexo-theme-particle) 主题不维护了,但是我觉得还是很好的。
|
4
4
|
|
5
|
-
原来用的是 Vue 2 + Ant Design Vue 1,现更新到 Vue 3,去除 Ant Design Vue 采用自定义样式,图标更改为 Font Awesome 6,CDN 改为
|
5
|
+
原来用的是 Vue 2 + Ant Design Vue 1,现更新到 Vue 3,去除 Ant Design Vue 采用自定义样式,图标更改为 Font Awesome 6,CDN 改为 ZStatic。
|
6
6
|
|
7
7
|
原项目 `README.md` 里说:
|
8
8
|
|
@@ -18,7 +18,7 @@
|
|
18
18
|
|
19
19
|
# 2. 安装
|
20
20
|
|
21
|
-
```
|
21
|
+
```shell
|
22
22
|
cd themes
|
23
23
|
git clone https://github.com/theme-particlex/hexo-theme-particlex.git particlex --depth=1
|
24
24
|
```
|
@@ -40,6 +40,12 @@ prismjs:
|
|
40
40
|
enable: false
|
41
41
|
```
|
42
42
|
|
43
|
+
如果使用 Hexo 7.0.0 之后的版本只需要修改为:
|
44
|
+
|
45
|
+
```yaml
|
46
|
+
syntax_highlighter:
|
47
|
+
```
|
48
|
+
|
43
49
|
如果使用 Pandoc 还需要设置一下:
|
44
50
|
|
45
51
|
```yaml
|
@@ -250,14 +256,14 @@ search:
|
|
250
256
|
|
251
257
|
## 3.4. 评论配置
|
252
258
|
|
253
|
-
### 3.4.1.
|
259
|
+
### 3.4.1. giscus
|
254
260
|
|
255
|
-
|
261
|
+
giscus 是一个由 GitHub Discussions 支持的评论系统。
|
256
262
|
|
257
|
-
在 [
|
263
|
+
在 [giscus.app](https://giscus.app) 设置好各项后,会在下面生成一个 `<script>` 标签,在主题内填入即可。
|
258
264
|
|
259
265
|
```yaml
|
260
|
-
#
|
266
|
+
# giscus
|
261
267
|
# https://github.com/giscus/giscus
|
262
268
|
giscus:
|
263
269
|
enable: false
|
package/_config.yml
CHANGED
package/layout/categories.ejs
CHANGED
@@ -1,70 +1,70 @@
|
|
1
|
-
<div id="archives">
|
2
|
-
<% let posts = []; %>
|
3
|
-
<div class="categories-tags">
|
4
|
-
<% let prev; %>
|
5
|
-
<% site.categories.
|
6
|
-
<%
|
7
|
-
const colors = is_category(category.name)
|
8
|
-
? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
|
9
|
-
: theme.colors.filter(color => color !== prev);
|
10
|
-
let id = Math.floor(Math.random() * colors.length);
|
11
|
-
prev = colors[id];
|
12
|
-
%>
|
13
|
-
<span>
|
14
|
-
<a href="<%- url_for(category.path) %>" style="background: <%- colors[id] %>">
|
15
|
-
<span class="icon">
|
16
|
-
<i class="fa-solid fa-bookmark fa-fw"></i>
|
17
|
-
</span>
|
18
|
-
<%= category.name %>
|
19
|
-
</a>
|
20
|
-
</span>
|
21
|
-
<% if (is_category(category.name)) { %>
|
22
|
-
<%
|
23
|
-
posts = category.posts;
|
24
|
-
posts.data.sort((a, b) => b.date - a.date);
|
25
|
-
%>
|
26
|
-
<% } %>
|
27
|
-
<% }); %>
|
28
|
-
</div>
|
29
|
-
<% posts.forEach(post => { %>
|
30
|
-
<div class="timeline">
|
31
|
-
<div class="timeline-tail"></div>
|
32
|
-
<div class="timeline-content">
|
33
|
-
<div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
|
34
|
-
<a href="<%- url_for(post.path) %>">
|
35
|
-
<h3><%= post.title %></h3>
|
36
|
-
</a>
|
37
|
-
<div class="info">
|
38
|
-
<% if (post.categories && post.categories.data.length !== 0) { %>
|
39
|
-
<span class="category">
|
40
|
-
<a href="<%- url_for(post.categories.data[0].path) %>">
|
41
|
-
<span class="icon">
|
42
|
-
<i class="fa-solid fa-bookmark fa-fw"></i>
|
43
|
-
</span>
|
44
|
-
<%= post.categories.data[0].name %>
|
45
|
-
</a>
|
46
|
-
</span>
|
47
|
-
<% } %>
|
48
|
-
<% if (post.tags && post.tags.data.length !== 0) { %>
|
49
|
-
<span class="tags">
|
50
|
-
<span class="icon">
|
51
|
-
<i class="fa-solid fa-tags fa-fw"></i>
|
52
|
-
</span>
|
53
|
-
<% let prev; %>
|
54
|
-
<% post.tags.data.forEach(tag => { %>
|
55
|
-
<span class="tag">
|
56
|
-
<%
|
57
|
-
const colors = theme.colors.filter(color => color !== prev);
|
58
|
-
let id = Math.floor(Math.random() * colors.length);
|
59
|
-
prev = colors[id];
|
60
|
-
%>
|
61
|
-
<a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
|
62
|
-
</span>
|
63
|
-
<% }); %>
|
64
|
-
</span>
|
65
|
-
<% } %>
|
66
|
-
</div>
|
67
|
-
</div>
|
68
|
-
</div>
|
69
|
-
<% }); %>
|
70
|
-
</div>
|
1
|
+
<div id="archives">
|
2
|
+
<% let posts = []; %>
|
3
|
+
<div class="categories-tags">
|
4
|
+
<% let prev; %>
|
5
|
+
<% site.categories.forEach(category => { %>
|
6
|
+
<%
|
7
|
+
const colors = is_category(category.name)
|
8
|
+
? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
|
9
|
+
: theme.colors.filter(color => color !== prev);
|
10
|
+
let id = Math.floor(Math.random() * colors.length);
|
11
|
+
prev = colors[id];
|
12
|
+
%>
|
13
|
+
<span>
|
14
|
+
<a href="<%- url_for(category.path) %>" style="background: <%- colors[id] %>">
|
15
|
+
<span class="icon">
|
16
|
+
<i class="fa-solid fa-bookmark fa-fw"></i>
|
17
|
+
</span>
|
18
|
+
<%= category.name %>
|
19
|
+
</a>
|
20
|
+
</span>
|
21
|
+
<% if (is_category(category.name)) { %>
|
22
|
+
<%
|
23
|
+
posts = category.posts;
|
24
|
+
posts.data.sort((a, b) => b.date - a.date);
|
25
|
+
%>
|
26
|
+
<% } %>
|
27
|
+
<% }); %>
|
28
|
+
</div>
|
29
|
+
<% posts.forEach(post => { %>
|
30
|
+
<div class="timeline">
|
31
|
+
<div class="timeline-tail"></div>
|
32
|
+
<div class="timeline-content">
|
33
|
+
<div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
|
34
|
+
<a href="<%- url_for(post.path) %>">
|
35
|
+
<h3><%= post.title %></h3>
|
36
|
+
</a>
|
37
|
+
<div class="info">
|
38
|
+
<% if (post.categories && post.categories.data.length !== 0) { %>
|
39
|
+
<span class="category">
|
40
|
+
<a href="<%- url_for(post.categories.data[0].path) %>">
|
41
|
+
<span class="icon">
|
42
|
+
<i class="fa-solid fa-bookmark fa-fw"></i>
|
43
|
+
</span>
|
44
|
+
<%= post.categories.data[0].name %>
|
45
|
+
</a>
|
46
|
+
</span>
|
47
|
+
<% } %>
|
48
|
+
<% if (post.tags && post.tags.data.length !== 0) { %>
|
49
|
+
<span class="tags">
|
50
|
+
<span class="icon">
|
51
|
+
<i class="fa-solid fa-tags fa-fw"></i>
|
52
|
+
</span>
|
53
|
+
<% let prev; %>
|
54
|
+
<% post.tags.data.forEach(tag => { %>
|
55
|
+
<span class="tag">
|
56
|
+
<%
|
57
|
+
const colors = theme.colors.filter(color => color !== prev);
|
58
|
+
let id = Math.floor(Math.random() * colors.length);
|
59
|
+
prev = colors[id];
|
60
|
+
%>
|
61
|
+
<a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
|
62
|
+
</span>
|
63
|
+
<% }); %>
|
64
|
+
</span>
|
65
|
+
<% } %>
|
66
|
+
</div>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
<% }); %>
|
70
|
+
</div>
|
package/layout/import.ejs
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
<link rel="preconnect" href="https://
|
2
|
-
<script src="https://
|
3
|
-
<link rel="stylesheet" href="https://
|
1
|
+
<link rel="preconnect" href="https://s4.zstatic.net" />
|
2
|
+
<script src="https://s4.zstatic.net/ajax/libs/vue/3.3.7/vue.global.prod.min.js"></script>
|
3
|
+
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
|
4
4
|
<link rel="preconnect" href="https://fonts.loli.net" />
|
5
5
|
<link rel="preconnect" href="https://gstatic.loli.net" crossorigin />
|
6
6
|
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fira+Code:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap" />
|
@@ -9,25 +9,25 @@
|
|
9
9
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
|
10
10
|
<% } %>
|
11
11
|
<% if (theme.highlight.enable) { %>
|
12
|
-
<script src="https://
|
13
|
-
<script src="https://
|
12
|
+
<script src="https://s4.zstatic.net/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
13
|
+
<script src="https://s4.zstatic.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
|
14
14
|
<link
|
15
15
|
rel="stylesheet"
|
16
|
-
href="https://
|
16
|
+
href="https://s4.zstatic.net/ajax/libs/highlight.js/11.9.0/styles/<%- theme.highlight.style %>.min.css"
|
17
17
|
/>
|
18
18
|
<script src="<%- url_for("/js/lib/highlight.js") %>"></script>
|
19
19
|
<% } %>
|
20
20
|
<% if (theme.math.enable) { %>
|
21
|
-
<script src="https://
|
22
|
-
<script src="https://
|
23
|
-
<link rel="stylesheet" href="https://
|
21
|
+
<script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
|
22
|
+
<script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
|
23
|
+
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.css" />
|
24
24
|
<script src="<%- url_for("/js/lib/math.js") %>"></script>
|
25
25
|
<% } %>
|
26
26
|
<% if (theme.preview.enable) { %>
|
27
27
|
<script src="<%- url_for("/js/lib/preview.js") %>"></script>
|
28
28
|
<% } %>
|
29
29
|
<% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
|
30
|
-
<script src="https://
|
30
|
+
<script src="https://s4.zstatic.net/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
|
31
31
|
<script src="<%- url_for("/js/lib/crypto.js") %>"></script>
|
32
32
|
<% } %>
|
33
33
|
<% if (type === "archives" && theme.search.enable) { %>
|
@@ -35,16 +35,16 @@
|
|
35
35
|
<% } %>
|
36
36
|
<% if (type === "post" && page.comments) { %>
|
37
37
|
<% if (theme.gitalk.enable) { %>
|
38
|
-
<script src="https://
|
39
|
-
<link rel="stylesheet" href="https://
|
38
|
+
<script src="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.js"></script>
|
39
|
+
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.css" />
|
40
40
|
<% } %>
|
41
41
|
<% if (theme.waline.enable) { %>
|
42
|
-
<script src="https://
|
43
|
-
<link rel="stylesheet" href="https://
|
44
|
-
<link rel="stylesheet" href="https://
|
42
|
+
<script src="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.js"></script>
|
43
|
+
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.css" />
|
44
|
+
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline-meta.min.css" />
|
45
45
|
<% } %>
|
46
46
|
<% if (theme.twikoo.enable) { %>
|
47
|
-
<script src="https://
|
47
|
+
<script src="https://s4.zstatic.net/ajax/libs/twikoo/1.6.31/twikoo.all.min.js"></script>
|
48
48
|
<% } %>
|
49
49
|
<% } %>
|
50
50
|
<% if (type === "index") { %>
|
package/layout/tags.ejs
CHANGED
@@ -1,70 +1,70 @@
|
|
1
|
-
<div id="archives">
|
2
|
-
<% let posts = []; %>
|
3
|
-
<div class="categories-tags">
|
4
|
-
<% let prev; %>
|
5
|
-
<% site.tags.
|
6
|
-
<%
|
7
|
-
const colors = is_tag(tag.name)
|
8
|
-
? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
|
9
|
-
: theme.colors.filter(color => color !== prev);
|
10
|
-
let id = Math.floor(Math.random() * colors.length);
|
11
|
-
prev = colors[id];
|
12
|
-
%>
|
13
|
-
<span>
|
14
|
-
<a href="<%- url_for(tag.path) %>" style="background: <%- colors[id] %>">
|
15
|
-
<span class="icon">
|
16
|
-
<i class="fa-solid fa-tags fa-fw"></i>
|
17
|
-
</span>
|
18
|
-
<%= tag.name %>
|
19
|
-
</a>
|
20
|
-
</span>
|
21
|
-
<% if (is_tag(tag.name)) { %>
|
22
|
-
<%
|
23
|
-
posts = tag.posts;
|
24
|
-
posts.data.sort((a, b) => b.date - a.date);
|
25
|
-
%>
|
26
|
-
<% } %>
|
27
|
-
<% }); %>
|
28
|
-
</div>
|
29
|
-
<% posts.forEach(post => { %>
|
30
|
-
<div class="timeline">
|
31
|
-
<div class="timeline-tail"></div>
|
32
|
-
<div class="timeline-content">
|
33
|
-
<div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
|
34
|
-
<a href="<%- url_for(post.path) %>">
|
35
|
-
<h3><%= post.title %></h3>
|
36
|
-
</a>
|
37
|
-
<div class="info">
|
38
|
-
<% if (post.categories && post.categories.data.length !== 0) { %>
|
39
|
-
<span class="category">
|
40
|
-
<a href="<%- url_for(post.categories.data[0].path) %>">
|
41
|
-
<span class="icon">
|
42
|
-
<i class="fa-solid fa-bookmark fa-fw"></i>
|
43
|
-
</span>
|
44
|
-
<%= post.categories.data[0].name %>
|
45
|
-
</a>
|
46
|
-
</span>
|
47
|
-
<% } %>
|
48
|
-
<% if (post.tags && post.tags.data.length !== 0) { %>
|
49
|
-
<span class="tags">
|
50
|
-
<span class="icon">
|
51
|
-
<i class="fa-solid fa-tags fa-fw"></i>
|
52
|
-
</span>
|
53
|
-
<% let prev; %>
|
54
|
-
<% post.tags.data.forEach(tag => { %>
|
55
|
-
<span class="tag">
|
56
|
-
<%
|
57
|
-
const colors = theme.colors.filter(color => color !== prev);
|
58
|
-
let id = Math.floor(Math.random() * colors.length);
|
59
|
-
prev = colors[id];
|
60
|
-
%>
|
61
|
-
<a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
|
62
|
-
</span>
|
63
|
-
<% }); %>
|
64
|
-
</span>
|
65
|
-
<% } %>
|
66
|
-
</div>
|
67
|
-
</div>
|
68
|
-
</div>
|
69
|
-
<% }); %>
|
70
|
-
</div>
|
1
|
+
<div id="archives">
|
2
|
+
<% let posts = []; %>
|
3
|
+
<div class="categories-tags">
|
4
|
+
<% let prev; %>
|
5
|
+
<% site.tags.forEach(tag => { %>
|
6
|
+
<%
|
7
|
+
const colors = is_tag(tag.name)
|
8
|
+
? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
|
9
|
+
: theme.colors.filter(color => color !== prev);
|
10
|
+
let id = Math.floor(Math.random() * colors.length);
|
11
|
+
prev = colors[id];
|
12
|
+
%>
|
13
|
+
<span>
|
14
|
+
<a href="<%- url_for(tag.path) %>" style="background: <%- colors[id] %>">
|
15
|
+
<span class="icon">
|
16
|
+
<i class="fa-solid fa-tags fa-fw"></i>
|
17
|
+
</span>
|
18
|
+
<%= tag.name %>
|
19
|
+
</a>
|
20
|
+
</span>
|
21
|
+
<% if (is_tag(tag.name)) { %>
|
22
|
+
<%
|
23
|
+
posts = tag.posts;
|
24
|
+
posts.data.sort((a, b) => b.date - a.date);
|
25
|
+
%>
|
26
|
+
<% } %>
|
27
|
+
<% }); %>
|
28
|
+
</div>
|
29
|
+
<% posts.forEach(post => { %>
|
30
|
+
<div class="timeline">
|
31
|
+
<div class="timeline-tail"></div>
|
32
|
+
<div class="timeline-content">
|
33
|
+
<div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
|
34
|
+
<a href="<%- url_for(post.path) %>">
|
35
|
+
<h3><%= post.title %></h3>
|
36
|
+
</a>
|
37
|
+
<div class="info">
|
38
|
+
<% if (post.categories && post.categories.data.length !== 0) { %>
|
39
|
+
<span class="category">
|
40
|
+
<a href="<%- url_for(post.categories.data[0].path) %>">
|
41
|
+
<span class="icon">
|
42
|
+
<i class="fa-solid fa-bookmark fa-fw"></i>
|
43
|
+
</span>
|
44
|
+
<%= post.categories.data[0].name %>
|
45
|
+
</a>
|
46
|
+
</span>
|
47
|
+
<% } %>
|
48
|
+
<% if (post.tags && post.tags.data.length !== 0) { %>
|
49
|
+
<span class="tags">
|
50
|
+
<span class="icon">
|
51
|
+
<i class="fa-solid fa-tags fa-fw"></i>
|
52
|
+
</span>
|
53
|
+
<% let prev; %>
|
54
|
+
<% post.tags.data.forEach(tag => { %>
|
55
|
+
<span class="tag">
|
56
|
+
<%
|
57
|
+
const colors = theme.colors.filter(color => color !== prev);
|
58
|
+
let id = Math.floor(Math.random() * colors.length);
|
59
|
+
prev = colors[id];
|
60
|
+
%>
|
61
|
+
<a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
|
62
|
+
</span>
|
63
|
+
<% }); %>
|
64
|
+
</span>
|
65
|
+
<% } %>
|
66
|
+
</div>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
<% }); %>
|
70
|
+
</div>
|