hexo-theme-particlex 2.4.11 → 2.5.1

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.
package/README.md CHANGED
@@ -66,12 +66,15 @@ theme: particlex
66
66
  ## 配置
67
67
 
68
68
  ```yaml
69
- avatar: # Avatar image
70
- headBlockEnable: true # Home page info block
71
- background: # Home page background image
72
- highlightStyle: github # Highlight style
69
+ avatar:
70
+
71
+ headBlockEnable: true
72
+
73
+ background:
73
74
  ```
74
75
 
76
+ 其中 Background 可以是一个列表,打开时会随机加载一个背景
77
+
75
78
  - 导航栏
76
79
 
77
80
  为了方便,主题使用的图标是 Font Awesome 6 图标
@@ -81,27 +84,27 @@ highlightStyle: github # Highlight style
81
84
  Home:
82
85
  name: house
83
86
  theme: solid
84
- src: /
87
+ link: /
85
88
  About:
86
89
  name: id-card
87
90
  theme: solid
88
- src: /about
91
+ link: /about
89
92
  Archives:
90
93
  name: box-archive
91
94
  theme: solid
92
- src: /archives
95
+ link: /archives
93
96
  Categories:
94
97
  name: bookmark
95
98
  theme: solid
96
- src: /categories
99
+ link: /categories
97
100
  Tags:
98
101
  name: tags
99
102
  theme: solid
100
- src: /tags
103
+ link: /tags
101
104
  # <name>:
102
105
  # name: <icon-name>
103
106
  # theme: <icon-theme>
104
- # src: <link-url>
107
+ # link: <link-url>
105
108
  ```
106
109
 
107
110
  - 主页信息卡片
@@ -170,15 +173,36 @@ highlightStyle: github # Highlight style
170
173
  - default
171
174
  ```
172
175
 
173
- - 渲染数学公式
176
+ - 代码高亮
174
177
 
175
- 使用 KaTeX 渲染数学公式,默认关闭
178
+ 使用 Highlight.js 代码高亮
179
+
180
+ 样式可以在[这里](https://highlightjs.org/static/demo)选择,默认为 GitHub
181
+
182
+ ```yaml
183
+ highlight:
184
+ enable: false
185
+ style: github
186
+ ```
187
+
188
+ - 数学渲染
189
+
190
+ 使用 KaTeX 渲染数学公式
176
191
 
177
192
  ```yaml
178
193
  math:
179
194
  enable: false
180
195
  ```
181
196
 
197
+ - 图片预览
198
+
199
+ 简单的点击图片放大缩小的预览
200
+
201
+ ```yaml
202
+ preview:
203
+ enable: true
204
+ ```
205
+
182
206
  - 文章置顶
183
207
 
184
208
  在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数,越大越靠前,默认为 0
@@ -194,7 +218,7 @@ highlightStyle: github # Highlight style
194
218
 
195
219
  - 搜索
196
220
 
197
- 嵌入到 Archives 中的搜索,默认关闭
221
+ 嵌入到 Archives 中的搜索
198
222
 
199
223
  目前只支持搜索文档标题(我太弱了)
200
224
 
package/_config.yml CHANGED
@@ -10,10 +10,6 @@ headBlockEnable: true
10
10
  # Home page background image
11
11
  background:
12
12
 
13
- # Highlight style
14
- # https://highlightjs.org
15
- highlightStyle: github
16
-
17
13
  # ParticleX theme icon is adopts the Font Awesome 6
18
14
  # https://fontawesome.com/search
19
15
 
@@ -22,27 +18,27 @@ menu:
22
18
  Home:
23
19
  name: house
24
20
  theme: solid
25
- src: /
21
+ link: /
26
22
  About:
27
23
  name: id-card
28
24
  theme: solid
29
- src: /about
25
+ link: /about
30
26
  Archives:
31
27
  name: box-archive
32
28
  theme: solid
33
- src: /archives
29
+ link: /archives
34
30
  Categories:
35
31
  name: bookmark
36
32
  theme: solid
37
- src: /categories
33
+ link: /categories
38
34
  Tags:
39
35
  name: tags
40
36
  theme: solid
41
- src: /tags
37
+ link: /tags
42
38
  # <name>:
43
39
  # name: <icon-name>
44
40
  # theme: <icon-theme>
45
- # src: <link-url>
41
+ # link: <link-url>
46
42
 
47
43
  # Side info card
48
44
  card:
@@ -76,10 +72,20 @@ polyfill:
76
72
  features:
77
73
  - default
78
74
 
75
+ # Highlight.js
76
+ # https://highlightjs.org
77
+ highlight:
78
+ enable: true
79
+ style: github
80
+
79
81
  # Rendering math with KaTeX
80
82
  math:
81
83
  enable: false
82
84
 
85
+ # Image Preview
86
+ preview:
87
+ enable: true
88
+
83
89
  # Article encryption
84
90
  crypto:
85
91
  enable: false
@@ -4,46 +4,53 @@
4
4
  %>
5
5
  <div id="archives">
6
6
  <% if (theme.search.enable) { %>
7
- <div id="search-mask" style="z-index: <%- posts.length + 1 %>"></div>
8
- <input id="search-bar" class="input" placeholder="搜索" style="z-index: <%- posts.length + 2 %>">
7
+ <input id="search-bar" class="input" placeholder="搜索" v-model="rawSearch" />
9
8
  <% } %>
10
- <% posts.forEach((post, id) => { %>
11
- <div class="timeline" style="z-index: <%- posts.length - id %>" data-title="<%- post.title.toLowerCase().replace(/\s+/gm, "") %>">
12
- <div class="timeline-tail"></div>
13
- <div class="timeline-content">
14
- <div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
15
- <a href="<%- url_for(post.path) %>">
16
- <h3><%= post.title %></h3>
17
- </a>
18
- <div class="info">
19
- <% if (post.categories && post.categories.data.length !== 0) { %>
20
- <span class="category">
21
- <a href="<%- url_for(post.categories.data[0].path) %>">
9
+ <div id="timeline-wrap" ref="timeline">
10
+ <% posts.reverse().forEach((post, id) => { %>
11
+ <div class="timeline" data-title="<%- post.title.toLowerCase().replace(/\s+/gm, "") %>">
12
+ <div class="timeline-tail"></div>
13
+ <div class="timeline-content">
14
+ <div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
15
+ <a href="<%- url_for(post.path) %>">
16
+ <h3><%= post.title %></h3>
17
+ </a>
18
+ <div class="info">
19
+ <% if (post.categories && post.categories.data.length !== 0) { %>
20
+ <span class="category">
21
+ <a href="<%- url_for(post.categories.data[0].path) %>">
22
+ <span class="icon">
23
+ <i class="fa-solid fa-bookmark fa-fw"></i>
24
+ </span>
25
+ <%= post.categories.data[0].name %>
26
+ </a>
27
+ </span>
28
+ <% } %>
29
+ <% if (post.tags && post.tags.data.length !== 0) { %>
30
+ <span class="tags">
22
31
  <span class="icon">
23
- <i class="fa-solid fa-bookmark fa-fw"></i>
32
+ <i class="fa-solid fa-tags fa-fw"></i>
24
33
  </span>
25
- <%= post.categories.data[0].name %>
26
- </a>
27
- </span>
28
- <% } %>
29
- <% if (post.tags && post.tags.data.length !== 0) { %>
30
- <span class="tags">
31
- <span class="icon">
32
- <i class="fa-solid fa-tags fa-fw"></i>
33
- </span>
34
- <% post.tags.data.forEach(data => { %>
35
- <span class="tag">
36
- <%
37
- const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
38
- let num = Math.floor(Math.random() * color.length);
39
- %>
40
- <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
34
+ <% post.tags.data.forEach(data => { %>
35
+ <span class="tag">
36
+ <%
37
+ const color = [
38
+ "color: #ffa2c4",
39
+ "color: #00bcd4",
40
+ "color: #03a9f4",
41
+ "color: #00a596",
42
+ "color: #ff7d73",
43
+ ];
44
+ let id = Math.floor(Math.random() * color.length);
45
+ %>
46
+ <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
47
+ </span>
48
+ <% }); %>
41
49
  </span>
42
- <% }); %>
43
- </span>
44
- <% } %>
50
+ <% } %>
51
+ </div>
45
52
  </div>
46
53
  </div>
54
+ <% }); %>
47
55
  </div>
48
- <% }); %>
49
56
  </div>
package/layout/card.ejs CHANGED
@@ -1,7 +1,7 @@
1
1
  <div id="card-div">
2
2
  <div class="card-style" style="width: 300px">
3
3
  <div class="avatar">
4
- <img src="<%- url_for(theme.avatar) %>" alt="avatar">
4
+ <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
5
5
  </div>
6
6
  <div class="name"><%= config.author %></div>
7
7
  <div class="description">
@@ -12,7 +12,9 @@
12
12
  <% Object.keys(theme.card.iconLinks).forEach(key => { %>
13
13
  <span class="icon-link">
14
14
  <a href="<%- url_for(theme.card.iconLinks[key].link) %>">
15
- <i class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"></i>
15
+ <i
16
+ class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"
17
+ ></i>
16
18
  </a>
17
19
  </span>
18
20
  <% }); %>
@@ -6,10 +6,10 @@
6
6
  const color = is_category(category.name)
7
7
  ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
8
8
  : ["#ffa2c4", "#00bcd4", "#03a9f4", "#00a596", "#ff7d73"];
9
- let num = Math.floor(Math.random() * color.length);
9
+ let id = Math.floor(Math.random() * color.length);
10
10
  %>
11
11
  <span>
12
- <a href="<%- url_for(category.path) %>" style="background: <%- color[num] %>">
12
+ <a href="<%- url_for(category.path) %>" style="background: <%- color[id] %>">
13
13
  <span class="icon">
14
14
  <i class="fa-solid fa-bookmark fa-fw"></i>
15
15
  </span>
@@ -51,10 +51,16 @@
51
51
  <% post.tags.data.forEach(data => { %>
52
52
  <span class="tag">
53
53
  <%
54
- const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
55
- let num = Math.floor(Math.random() * color.length);
54
+ const color = [
55
+ "color: #ffa2c4",
56
+ "color: #00bcd4",
57
+ "color: #03a9f4",
58
+ "color: #00a596",
59
+ "color: #ff7d73",
60
+ ];
61
+ let id = Math.floor(Math.random() * color.length);
56
62
  %>
57
- <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
63
+ <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
58
64
  </span>
59
65
  <% }); %>
60
66
  </span>
@@ -1,9 +1,4 @@
1
- <script src="<%- url_for("/js/functions.js") %>"></script>
2
- <script src="<%- url_for("/js/particlex.js") %>"></script>
3
- <% if (type === "post" && page.comments) { %>
4
1
  <% if (theme.gitalk.enable) { %>
5
- <script src="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.js"></script>
6
- <link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.css">
7
2
  <script>
8
3
  let clientID = "<%- theme.gitalk.clientID %>",
9
4
  clientSecret = "<%- theme.gitalk.clientSecret %>";
@@ -48,9 +43,6 @@
48
43
  ></script>
49
44
  <% } %>
50
45
  <% if (theme.waline.enable) { %>
51
- <script src="https://cdn.staticfile.org/waline/2.14.7/waline.min.js"></script>
52
- <link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline.min.css">
53
- <link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline-meta.min.css">
54
46
  <script>
55
47
  Waline.init({
56
48
  el: "#waline-container",
@@ -69,7 +61,6 @@
69
61
  </script>
70
62
  <% } %>
71
63
  <% if (theme.twikoo.enable) { %>
72
- <script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
73
64
  <script>
74
65
  twikoo.init({
75
66
  el: "#twikoo-container",
@@ -80,4 +71,3 @@
80
71
  })
81
72
  </script>
82
73
  <% } %>
83
- <% } %>
package/layout/footer.ejs CHANGED
@@ -1,19 +1,22 @@
1
1
  <footer id="footer">
2
- <div class="footer-wrap">
2
+ <div id="footer-wrap">
3
3
  <div>
4
4
  &copy;
5
5
  <%= theme.footer.since %> - <%= date(Date.now(), "YYYY") %> <%= config.title %>
6
- <span class="footer-icon">
6
+ <span id="footer-icon">
7
7
  <i class="fa-solid fa-font-awesome fa-fw"></i>
8
8
  </span>
9
9
  &commat;<%= config.author %>
10
10
  </div>
11
- <div>Based on the <a href="https://hexo.io">Hexo Engine</a> &amp; <a href="https://github.com/argvchs/hexo-theme-particlex">ParticleX Theme</a></div>
11
+ <div>
12
+ Based on the <a href="https://hexo.io">Hexo Engine</a> &amp;
13
+ <a href="https://github.com/argvchs/hexo-theme-particlex">ParticleX Theme</a>
14
+ </div>
12
15
  <% if (theme.footer.ICP.enable) { %>
13
16
  <div>
14
17
  备案号:
15
18
  <% if (theme.footer.ICP.link) { %>
16
- <a href="<%- theme.footer.ICP.link %>"><%= theme.footer.ICP.code %></a>
19
+ <a href="<%- url_for(theme.footer.ICP.link) %>"><%= theme.footer.ICP.code %></a>
17
20
  <% } else { %>
18
21
  <%= theme.footer.ICP.code %>
19
22
  <% } %>
@@ -0,0 +1,49 @@
1
+ <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script>
2
+ <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.1/css/all.min.css" />
3
+ <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>" />
4
+ <script> const mixins = {}; </script>
5
+ <% if (theme.polyfill.enable) { %>
6
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
7
+ <% } %>
8
+ <% if (theme.highlight.enable) { %>
9
+ <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
10
+ <link
11
+ rel="stylesheet"
12
+ href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlight.style %>.min.css"
13
+ />
14
+ <script src="<%- url_for("/js/lib/highlight.js") %>"></script>
15
+ <% } %>
16
+ <% if (theme.math.enable) { %>
17
+ <script src="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.js"></script>
18
+ <script src="https://cdn.staticfile.org/KaTeX/0.16.4/contrib/auto-render.min.js"></script>
19
+ <link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.css" />
20
+ <script src="<%- url_for("/js/lib/math.js") %>"></script>
21
+ <% } %>
22
+ <% if (theme.preview.enable) { %>
23
+ <script src="<%- url_for("/js/lib/preview.js") %>"></script>
24
+ <% } %>
25
+ <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
26
+ <script src="https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js"></script>
27
+ <script src="<%- url_for("/js/lib/crypto.js") %>"></script>
28
+ <% } %>
29
+ <% if (type === "archives" && theme.search.enable) { %>
30
+ <script src="<%- url_for("/js/lib/search.js") %>"></script>
31
+ <% } %>
32
+ <% if (type === "post" && page.comments) { %>
33
+ <% if (theme.gitalk.enable) { %>
34
+ <script src="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.js"></script>
35
+ <link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.css" />
36
+ <% } %>
37
+ <% if (theme.waline.enable) { %>
38
+ <script src="https://cdn.staticfile.org/waline/2.14.7/waline.min.js"></script>
39
+ <link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline.min.css" />
40
+ <link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline-meta.min.css" />
41
+ <% } %>
42
+ <% if (theme.twikoo.enable) { %>
43
+ <script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
44
+ <% } %>
45
+ <% } %>
46
+ <% if (type === "index") %>
47
+ <script src="<%- url_for("/js/lib/home.js") %>"></script>
48
+ <% %>
49
+ <link rel="stylesheet" href="<%- url_for("/css/main.css") %>" />
package/layout/index.ejs CHANGED
@@ -1,7 +1,7 @@
1
1
  <div id="home-head">
2
- <div id="home-background" style="background-image: url(<%- theme.background %>)"></div>
2
+ <div id="home-background" ref="homeBackground" data-image="<% url_for(theme.background) %>"></div>
3
3
  <% if (theme.headBlockEnable) { %>
4
- <div id="home-info" @click="homeclick">
4
+ <div id="home-info" @click="homeClick">
5
5
  <span class="loop"></span>
6
6
  <span class="loop"></span>
7
7
  <span class="loop"></span>
@@ -16,7 +16,7 @@
16
16
  </div>
17
17
  <% } %>
18
18
  </div>
19
- <div id="home-posts-wrap" class="<%- theme.card.enable ? "" : "home-posts-wrap-no-card" %>">
19
+ <div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
20
20
  <div id="home-posts">
21
21
  <div id="posts">
22
22
  <%- partial("posts") %>
package/layout/layout.ejs CHANGED
@@ -24,45 +24,44 @@
24
24
  <!DOCTYPE html>
25
25
  <html lang="<%- config.language %>">
26
26
  <head>
27
- <meta charset="UTF-8">
27
+ <meta charset="UTF-8" />
28
28
  <title><%= title %></title>
29
- <meta name="author" content="<%- config.author %>">
30
- <meta name="description" content="<%- config.description %>">
31
- <meta name="keywords" content="<%- config.keywords %>">
32
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
33
- <link rel="icon" href="<%- url_for(theme.avatar) %>">
34
- <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script>
35
- <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
36
- <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlightStyle %>.min.css">
37
- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.1/css/all.min.css">
38
- <% if (theme.polyfill.enable) { %>
39
- <script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features.join(",") %>"></script>
40
- <% } %>
41
- <% if (theme.math.enable) { %>
42
- <script src="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.js"></script>
43
- <script src="https://cdn.staticfile.org/KaTeX/0.16.4/contrib/auto-render.min.js"></script>
44
- <link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.css">
45
- <% } %>
46
- <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
47
- <script src="https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js"></script>
48
- <% } %>
49
- <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>">
50
- <link rel="stylesheet" href="<%- url_for("/css/particlex.css") %>">
29
+ <meta name="author" content="<%- config.author %>" />
30
+ <meta name="description" content="<%- config.description %>" />
31
+ <meta name="keywords" content="<%- config.keywords %>" />
32
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
33
+ <link rel="icon" href="<%- url_for(theme.avatar) %>" />
34
+ <%- partial("import", { type }) %>
51
35
  </head>
52
36
  <body>
53
- <%- partial("loading") %>
54
37
  <div id="layout">
38
+ <transition name="fade">
39
+ <div id="loading" v-show="loading">
40
+ <div id="loading-circle">
41
+ <h2>LOADING</h2>
42
+ <p>加载过慢请开启缓存&ensp;浏览器默认开启</p>
43
+ <img src="<%- url_for("/images/loading.gif") %>" />
44
+ </div>
45
+ </div>
46
+ </transition>
55
47
  <transition name="into">
56
- <div id="main" v-show="showpage" style="display: -not-none">
48
+ <div id="main" v-show="!loading">
57
49
  <%- partial("menu") %>
58
50
  <%- partial(type) %>
59
51
  <%- partial("footer") %>
60
52
  </div>
61
53
  </transition>
62
- <div id="showimg">
63
- <img id="showimg-content">
54
+ <% if (theme.preview.enable) { %>
55
+ <transition name="fade">
56
+ <div id="preview" ref="preview" v-show="previewShow">
57
+ <img id="preview-content" ref="previewContent" />
64
58
  </div>
59
+ </transition>
60
+ <% } %>
65
61
  </div>
66
- <%- partial("script", { type }) %>
62
+ <script src="<%- url_for("/js/main.js") %>"></script>
63
+ <% if (type === "post" && page.comments) { %>
64
+ <%- partial("comment") %>
65
+ <% } %>
67
66
  </body>
68
67
  </html>
package/layout/menu.ejs CHANGED
@@ -1,25 +1,25 @@
1
- <nav id="menu">
1
+ <nav id="menu" ref="menu">
2
2
  <div class="desktop-menu">
3
3
  <a class="title" href="<%- config.root %>">
4
4
  <span><%= config.title.toUpperCase() %></span>
5
5
  </a>
6
6
  <% Object.keys(theme.menu).forEach(key => { %>
7
- <a href="<%- url_for(theme.menu[key].src) %>">
7
+ <a href="<%- url_for(theme.menu[key].link) %>">
8
8
  <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
9
9
  <span>&ensp;<%= key %></span>
10
10
  </a>
11
11
  <% }); %>
12
12
  </div>
13
- <div :class="&quot;phone-menu &quot; + menushow" id="phone-menu">
14
- <div class="curtain" @click="menushow = !menushow" v-show="menushow"></div>
15
- <div class="title" @click="menushow = !menushow">
13
+ <div id="mobile-menu">
14
+ <div class="curtain" v-show="showMenu" @click="showMenu = !showMenu"></div>
15
+ <div class="title" @click="showMenu = !showMenu">
16
16
  <i class="fa-solid fa-bars fa-fw"></i>
17
17
  <span>&emsp;<%= config.title.toUpperCase() %></span>
18
18
  </div>
19
19
  <transition name="slide">
20
- <div class="items" v-show="menushow">
20
+ <div class="items" v-show="showMenu">
21
21
  <% Object.keys(theme.menu).forEach(key => { %>
22
- <a href="<%- url_for(theme.menu[key].src) %>">
22
+ <a href="<%- url_for(theme.menu[key].link) %>">
23
23
  <div class="item">
24
24
  <div style="min-width: 20px; max-width: 50px; width: 10%">
25
25
  <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
package/layout/post.ejs CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="article">
2
2
  <div>
3
- <h1><%= page.title %> </h1>
3
+ <h1><%= page.title %></h1>
4
4
  </div>
5
5
  <div class="info">
6
6
  <span class="date">
@@ -27,10 +27,16 @@
27
27
  <% page.tags.data.forEach(data => { %>
28
28
  <span class="tag">
29
29
  <%
30
- const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
31
- let num = Math.floor(Math.random() * color.length);
30
+ const color = [
31
+ "color: #ffa2c4",
32
+ "color: #00bcd4",
33
+ "color: #03a9f4",
34
+ "color: #00a596",
35
+ "color: #ff7d73",
36
+ ];
37
+ let id = Math.floor(Math.random() * color.length);
32
38
  %>
33
- <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
39
+ <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
34
40
  </span>
35
41
  <% }); %>
36
42
  </span>
@@ -39,15 +45,25 @@
39
45
  <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
40
46
  <%
41
47
  const CryptoJS = crypto();
42
- function sha(str) {
43
- return CryptoJS.SHA256(str).toString();
48
+ function SHA(word) {
49
+ return CryptoJS.SHA256(word).toString();
44
50
  }
45
- function encrypt(str, key) {
46
- return CryptoJS.AES.encrypt(str, key).toString();
51
+ function encrypt(word, secret) {
52
+ return CryptoJS.AES.encrypt(word, secret).toString();
47
53
  }
48
54
  %>
49
- <input id="crypto" class="input" placeholder="文章被加密,请输入密码" data-encrypt="<%- encrypt(page.content, page.secret) %>" data-shasum="<%- sha(page.content) %>">
50
- <div class="content" v-pre style="opacity: 0"></div>
55
+ <input
56
+ id="crypto"
57
+ class="input"
58
+ ref="crypto"
59
+ placeholder="文章被加密,请输入密码"
60
+ data-encrypted="<%- encrypt(page.content, page.secret) %>"
61
+ data-shasum="<%- SHA(page.content) %>"
62
+ v-model="crypto"
63
+ />
64
+ <transition name="fade">
65
+ <div class="content" ref="content" v-show="check"></div>
66
+ </transition>
51
67
  <% } else { %>
52
68
  <div class="content" v-pre>
53
69
  <%- page.content %>
package/layout/posts.ejs CHANGED
@@ -61,10 +61,16 @@
61
61
  <% post.tags.data.forEach(data => { %>
62
62
  <span class="tag">
63
63
  <%
64
- const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
65
- let num = Math.floor(Math.random() * color.length);
64
+ const color = [
65
+ "color: #ffa2c4",
66
+ "color: #00bcd4",
67
+ "color: #03a9f4",
68
+ "color: #00a596",
69
+ "color: #ff7d73",
70
+ ];
71
+ let id = Math.floor(Math.random() * color.length);
66
72
  %>
67
- <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">
73
+ <a href="<%- url_for(data.path) %>" style="<%- color[id] %>">
68
74
  <%= data.name %>
69
75
  </a>
70
76
  </span>