hexo-theme-particlex 2.5.8 → 2.5.10

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.
Files changed (15) hide show
  1. package/README.md +2 -2
  2. package/_config.yml +1 -1
  3. package/layout/card.ejs +1 -1
  4. package/layout/comment.ejs +1 -1
  5. package/layout/index.ejs +3 -5
  6. package/layout/layout.ejs +14 -23
  7. package/layout/menu.ejs +4 -4
  8. package/layout/post.ejs +6 -13
  9. package/package.json +1 -1
  10. package/source/css/main.css +13 -17
  11. package/source/js/lib/crypto.js +18 -27
  12. package/source/js/lib/highlight.js +17 -12
  13. package/source/js/lib/home.js +5 -6
  14. package/source/js/lib/preview.js +4 -5
  15. package/source/js/main.js +14 -13
package/README.md CHANGED
@@ -130,7 +130,7 @@ card:
130
130
  iconLinks:
131
131
  {}
132
132
  friendLinks:
133
- Argvchs: https://argvchs.netlify.app
133
+ Argvchs: https://argvchs.github.io
134
134
  ```
135
135
 
136
136
  ### 3.2.3. 页脚
@@ -275,7 +275,7 @@ Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
275
275
 
276
276
  **同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
277
277
 
278
- 由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.netlify.app/2022/07/04/build-cors-anywhere)
278
+ 由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
279
279
 
280
280
  ```yaml
281
281
  # Gitalk
package/_config.yml CHANGED
@@ -43,7 +43,7 @@ card:
43
43
  iconLinks:
44
44
  {}
45
45
  friendLinks:
46
- Argvchs: https://argvchs.netlify.app
46
+ Argvchs: https://argvchs.github.io
47
47
 
48
48
  # Footer info
49
49
  footer:
package/layout/card.ejs CHANGED
@@ -1,5 +1,5 @@
1
1
  <div id="card-div">
2
- <div class="card-style" style="width: 300px">
2
+ <div class="card-style">
3
3
  <div class="avatar">
4
4
  <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
5
5
  </div>
package/layout/comment.ejs CHANGED
@@ -18,7 +18,7 @@
18
18
  <% } %>
19
19
  <% if (theme.gitalk.enable) { %>
20
20
  <script>
21
- (function () {
21
+ (() => {
22
22
  let clientID = "<%- theme.gitalk.clientID %>",
23
23
  clientSecret = "<%- theme.gitalk.clientSecret %>";
24
24
  <% Object.keys(theme.gitalk.sites).forEach(key => { %>
package/layout/index.ejs CHANGED
@@ -2,7 +2,7 @@
2
2
  <div
3
3
  id="home-background"
4
4
  ref="homeBackground"
5
- data-image="<%- theme.background.map(i => url_for(i)) %>"
5
+ data-images="<%- theme.background.map(i => url_for(i)) %>"
6
6
  ></div>
7
7
  <div id="home-info" @click="homeClick">
8
8
  <span class="loop"></span>
@@ -20,10 +20,8 @@
20
20
  </div>
21
21
  <div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
22
22
  <div id="home-posts">
23
- <div id="posts">
24
- <%- partial("posts") %>
25
- <%- partial("current") %>
26
- </div>
23
+ <%- partial("posts") %>
24
+ <%- partial("current") %>
27
25
  </div>
28
26
  <% if (theme.card.enable) { %>
29
27
  <div id="home-card">
package/layout/layout.ejs CHANGED
@@ -1,25 +1,16 @@
1
1
  <%
2
- let type = "post";
3
- if (is_home())
4
- type = "index";
5
- else if (is_post())
6
- type = "post";
7
- else if (is_category() || page.type === "categories")
8
- type = "categories";
9
- else if (is_tag() || page.type === "tags")
10
- type = "tags";
11
- else if (is_archive())
12
- type = "archives";
13
- let title = "";
14
- if (page.title)
15
- title = page.title + " | ";
16
- else if (is_category())
17
- title = "Categories: " + page.category + " | ";
18
- else if (is_tag())
19
- title = "Tags: " + page.tag + " | ";
20
- else if (is_archive())
21
- title = "Archives | ";
22
- title += config.title;
2
+ let type;
3
+ if (is_home()) type = "index";
4
+ if (is_post() || is_page()) type = "post";
5
+ if (is_category() || page.type === "categories") type = "categories";
6
+ if (is_tag() || page.type === "tags") type = "tags";
7
+ if (is_archive()) type = "archives";
8
+ let title;
9
+ if (is_home()) title = config.title;
10
+ if (is_post() || is_page()) title = page.title + " | " + config.title;
11
+ if (is_category()) title = "Categories: " + page.category + " | " + config.title;
12
+ if (is_tag()) title = "Tags: " + page.tag + " | " + config.title;
13
+ if (is_archive()) title = "Archives | " + config.title;
23
14
  %>
24
15
  <!DOCTYPE html>
25
16
  <html lang="<%- config.language %>">
@@ -39,14 +30,14 @@
39
30
  <div id="loading" v-show="loading">
40
31
  <div id="loading-circle">
41
32
  <h2>LOADING</h2>
42
- <p>加载过慢请开启缓存&ensp;浏览器默认开启</p>
33
+ <p>加载过慢请开启缓存 浏览器默认开启</p>
43
34
  <img src="<%- url_for("/images/loading.gif") %>" />
44
35
  </div>
45
36
  </div>
46
37
  </transition>
38
+ <%- partial("menu") %>
47
39
  <transition name="into">
48
40
  <div id="main" v-show="!loading">
49
- <%- partial("menu") %>
50
41
  <%- partial(type) %>
51
42
  <%- partial("footer") %>
52
43
  </div>
package/layout/menu.ejs CHANGED
@@ -1,4 +1,4 @@
1
- <nav id="menu" ref="menu">
1
+ <nav id="menu" :class="{ hidden: hiddenMenu, 'menu-color': menuColor}">
2
2
  <div class="desktop-menu">
3
3
  <a class="title" href="<%- config.root %>">
4
4
  <span><%= config.title.toUpperCase() %></span>
@@ -11,13 +11,13 @@
11
11
  <% }); %>
12
12
  </div>
13
13
  <div id="mobile-menu">
14
- <div class="curtain" v-show="showMenu" @click="showMenu = !showMenu"></div>
15
- <div class="title" @click="showMenu = !showMenu">
14
+ <div class="curtain" @click="shouMenuItems = !shouMenuItems" v-show="shouMenuItems"></div>
15
+ <div class="title" @click="shouMenuItems = !shouMenuItems">
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="showMenu">
20
+ <div class="items" v-show="shouMenuItems">
21
21
  <% Object.keys(theme.menu).forEach(key => { %>
22
22
  <a href="<%- url_for(theme.menu[key].link) %>">
23
23
  <div class="item">
package/layout/post.ejs CHANGED
@@ -43,26 +43,19 @@
43
43
  <% } %>
44
44
  </div>
45
45
  <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
46
- <%
47
- const CryptoJS = crypto();
48
- function SHA(word) {
49
- return CryptoJS.SHA256(word).toString();
50
- }
51
- function encrypt(word, secret) {
52
- return CryptoJS.AES.encrypt(word, secret).toString();
53
- }
54
- %>
46
+ <% const CryptoJS = crypto(); %>
55
47
  <input
56
48
  id="crypto"
57
- class="input"
49
+ :class="['input', cryptoClass]"
50
+ :disabled="check"
58
51
  ref="crypto"
59
52
  placeholder="文章被加密，请输入密码"
60
- data-encrypted="<%- encrypt(page.content, page.secret) %>"
61
- data-shasum="<%- SHA(page.content) %>"
53
+ data-encrypted="<%- CryptoJS.AES.encrypt(page.content, page.secret).toString() %>"
54
+ data-shasum="<%- CryptoJS.SHA256(page.content).toString() %>"
62
55
  v-model="crypto"
63
56
  />
64
57
  <transition name="fade">
65
- <div class="content" ref="content" v-show="check"></div>
58
+ <div class="content" ref="content" v-html="decrypted" v-show="check"></div>
66
59
  </transition>
67
60
  <% } else { %>
68
61
  <div class="content" v-pre>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hexo-theme-particlex",
3
- "version": "2.5.8",
3
+ "version": "2.5.10",
4
4
  "description": "A concise Hexo theme, based on Particle.",
5
5
  "repository": {
6
6
  "type": "git",
package/source/css/main.css CHANGED
@@ -92,6 +92,7 @@
92
92
  box-shadow: 0 0 20px #d9d9d980;
93
93
  padding: 25px 0;
94
94
  text-align: center;
95
+ width: 300px;
95
96
  }
96
97
  #home-card .card-style .avatar {
97
98
  border: #f1f1f1 solid 3px;
@@ -360,10 +361,10 @@
360
361
  height: 50vmin;
361
362
  justify-content: center;
362
363
  padding: 50px;
364
+ text-align: center;
363
365
  width: 50vmin;
364
366
  }
365
367
  #main {
366
- display: grid;
367
368
  margin-right: calc(100% - 100vw);
368
369
  }
369
370
  #menu {
@@ -488,6 +489,7 @@
488
489
  line-height: 2;
489
490
  overflow: auto;
490
491
  padding: 50px 30px 20px;
492
+ white-space: pre;
491
493
  }
492
494
  .comment iframe,
493
495
  body::-webkit-scrollbar-track {
@@ -504,24 +506,24 @@ body::-webkit-scrollbar-track {
504
506
  margin: 15px auto;
505
507
  max-width: 75%;
506
508
  }
507
- .code-copy {
509
+ .copycode {
508
510
  color: #5c6b72;
509
511
  position: absolute;
510
512
  right: 0;
511
513
  top: 0;
512
514
  }
513
- .code-copy i {
515
+ .copycode i {
514
516
  padding: 15px;
515
517
  position: absolute;
516
518
  right: 0;
517
519
  top: 0;
518
520
  transition: transform 0.25s;
519
521
  }
520
- .code-copy.copied i {
522
+ .copycode.copied i {
521
523
  transform: scale(1.25);
522
524
  }
523
- .code-copy.copied i:first-child,
524
- .code-copy:not(.copied) i:last-child {
525
+ .copycode.copied i:first-child,
526
+ .copycode:not(.copied) i:last-child {
525
527
  opacity: 0;
526
528
  }
527
529
  .fade-enter-active,
@@ -658,7 +660,7 @@ a {
658
660
  text-decoration: none;
659
661
  }
660
662
  a:hover,
661
- .content .code-copy:hover {
663
+ .content .copycode:hover {
662
664
  opacity: 0.8;
663
665
  }
664
666
  b,
@@ -694,13 +696,12 @@ iframe,
694
696
  .friend-link a,
695
697
  .icon-link a,
696
698
  .language,
697
- .code-copy {
699
+ .copycode {
698
700
  user-select: none;
699
701
  }
700
702
  code {
701
703
  background: #bddcf76b;
702
704
  border-radius: 4px;
703
- font-size: 14px;
704
705
  line-height: 2.5;
705
706
  padding: 4px 8px;
706
707
  }
@@ -764,6 +765,7 @@ pre {
764
765
  box-shadow: 0 2px 12px 0 #0000001a;
765
766
  margin: 25px 0;
766
767
  margin: 25px 0;
768
+ white-space: normal;
767
769
  }
768
770
  pre,
769
771
  code,
@@ -824,9 +826,6 @@ ol li {
824
826
  }
825
827
  }
826
828
  @media (min-width: 900px) {
827
- #home-card {
828
- margin-right: auto;
829
- }
830
829
  #home-head #home-info .info .wrap {
831
830
  padding: 25px;
832
831
  }
@@ -855,9 +854,8 @@ ol li {
855
854
  width: 500px;
856
855
  }
857
856
  #home-posts {
858
- margin-left: auto;
859
857
  margin-right: 50px;
860
- width: 900px;
858
+ width: 850px;
861
859
  }
862
860
  #home-posts .post {
863
861
  margin-bottom: 25px;
@@ -867,8 +865,7 @@ ol li {
867
865
  padding: 20px 0;
868
866
  }
869
867
  #home-posts-wrap {
870
- max-width: 1150px;
871
- padding: 30px 0;
868
+ max-width: 1200px;
872
869
  }
873
870
  #menu .desktop-menu {
874
871
  display: block;
@@ -894,7 +891,6 @@ ol li {
894
891
  display: none;
895
892
  }
896
893
  #home-posts {
897
- margin: auto;
898
894
  width: 100%;
899
895
  }
900
896
  #home-posts-wrap,
package/source/js/lib/crypto.js CHANGED
@@ -2,40 +2,31 @@ mixins.crypto = {
2
2
  data() {
3
3
  return {
4
4
  crypto: "",
5
- check: false,
5
+ check: null,
6
6
  };
7
7
  },
8
- methods: {
9
- SHA(word) {
10
- return CryptoJS.SHA256(word).toString();
11
- },
12
- decrypt(word, secret, shasum) {
8
+ watch: {
9
+ crypto(value) {
10
+ let input = this.$refs.crypto,
11
+ content = this.$refs.content;
12
+ let { encrypted, shasum } = input.dataset;
13
13
  try {
14
- let res = CryptoJS.AES.decrypt(word, secret).toString(CryptoJS.enc.Utf8);
15
- return { check: this.SHA(res) === shasum, decrypted: res };
14
+ let decrypted = CryptoJS.AES.decrypt(encrypted, value).toString(CryptoJS.enc.Utf8);
15
+ if (CryptoJS.SHA256(decrypted).toString() === shasum) {
16
+ this.check = true;
17
+ content.innerHTML = decrypted;
18
+ this.render();
19
+ } else this.check = false;
16
20
  } catch {
17
- return { check: false };
21
+ this.check = false;
18
22
  }
19
23
  },
20
24
  },
21
- watch: {
22
- crypto(value) {
23
- let input = this.$refs.crypto,
24
- content = this.$refs.content;
25
- let { decrypted, check } = this.decrypt(
26
- input.dataset.encrypted,
27
- value,
28
- input.dataset.shasum
29
- );
30
- this.check = check;
31
- if (check) {
32
- input.classList.remove("fail");
33
- input.classList.add("success");
34
- input.disabled = true;
35
- content.innerHTML = decrypted;
36
- this.render();
37
- } else input.classList.add("fail");
25
+ computed: {
26
+ cryptoClass() {
27
+ if (this.check === null) return "";
28
+ if (this.check === true) return "success";
29
+ if (this.check === false) return "fail";
38
30
  },
39
31
  },
40
32
  };
41
- mixins.push(cryptoMixin);
package/source/js/lib/highlight.js CHANGED
@@ -10,24 +10,29 @@ mixins.highlight = {
10
10
  },
11
11
  methods: {
12
12
  highlight() {
13
- let that = this;
14
13
  let codes = document.querySelectorAll("pre");
15
14
  for (let i of codes) {
16
- let lang = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
17
15
  let code = i.innerText;
18
- i.innerHTML = `<div class="code-content">${code}</div><div class="language">${lang}</div><div class="code-copy"><i class="fa-solid fa-copy fa-fw"></i><i class="fa-solid fa-clone fa-fw"></i></div>`;
19
- let copy = i.querySelector(".code-copy");
20
- copy.addEventListener("click", async function () {
21
- if (that.copying) return;
22
- that.copying = true;
23
- this.classList.add("copied");
16
+ let language = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
17
+ let highlighted = hljs.highlight(code, { language }).value;
18
+ i.innerHTML = `
19
+ <div class="code-content">${highlighted}</div>
20
+ <div class="language">${language}</div>
21
+ <div class="copycode">
22
+ <i class="fa-solid fa-copy fa-fw"></i>
23
+ <i class="fa-solid fa-clone fa-fw"></i>
24
+ </div>
25
+ `;
26
+ let copycode = i.querySelector(".copycode");
27
+ copycode.addEventListener("click", async () => {
28
+ if (this.copying) return;
29
+ this.copying = true;
30
+ copycode.classList.add("copied");
24
31
  await navigator.clipboard.writeText(code);
25
32
  await new Promise(resolve => setTimeout(resolve, 1000));
26
- this.classList.remove("copied");
27
- that.copying = false;
33
+ copycode.classList.remove("copied");
34
+ this.copying = false;
28
35
  });
29
- let content = i.querySelector(".code-content");
30
- hljs.highlightElement(content);
31
36
  }
32
37
  },
33
38
  },
package/source/js/lib/home.js CHANGED
@@ -1,11 +1,10 @@
1
1
  mixins.home = {
2
2
  mounted() {
3
- let menu = this.$refs.menu,
4
- background = this.$refs.homeBackground;
5
- menu.classList.add("menu-color");
6
- let image = background.dataset.image.split(",");
7
- let id = Math.floor(Math.random() * image.length);
8
- background.style.backgroundImage = `url('${image[id]}')`;
3
+ let background = this.$refs.homeBackground;
4
+ let images = background.dataset.images.split(",");
5
+ let id = Math.floor(Math.random() * images.length);
6
+ background.style.backgroundImage = `url('${images[id]}')`;
7
+ this.menuColor = true;
9
8
  },
10
9
  methods: {
11
10
  homeClick() {
package/source/js/lib/preview.js CHANGED
@@ -9,15 +9,14 @@ mixins.preview = {
9
9
  },
10
10
  methods: {
11
11
  preview() {
12
- let that = this;
13
12
  let preview = this.$refs.preview,
14
13
  content = this.$refs.previewContent;
15
14
  let images = document.querySelectorAll("img");
16
15
  for (let i of images)
17
- i.addEventListener("click", function () {
18
- content.alt = this.alt;
19
- content.src = this.src;
20
- that.previewShow = true;
16
+ i.addEventListener("click", () => {
17
+ content.alt = i.alt;
18
+ content.src = i.src;
19
+ this.previewShow = true;
21
20
  });
22
21
  preview.addEventListener("click", () => {
23
22
  this.previewShow = false;
package/source/js/main.js CHANGED
@@ -3,8 +3,10 @@ const app = Vue.createApp({
3
3
  data() {
4
4
  return {
5
5
  loading: true,
6
- showMenu: false,
7
- barLocal: 0,
6
+ hiddenMenu: false,
7
+ showMenuItems: false,
8
+ menuColor: false,
9
+ scrollTop: 0,
8
10
  renderers: [],
9
11
  };
10
12
  },
@@ -23,20 +25,19 @@ const app = Vue.createApp({
23
25
  for (let i of this.renderers) i();
24
26
  },
25
27
  handleScroll() {
26
- let menu = this.$refs.menu,
27
- wrap = this.$refs.homePostsWrap;
28
- let newlocal = document.documentElement.scrollTop;
29
- if (this.barLocal < newlocal) {
30
- this.showMenu = false;
31
- menu.classList.add("hidden");
32
- } else menu.classList.remove("hidden");
28
+ let wrap = this.$refs.homePostsWrap;
29
+ let newScrollTop = document.documentElement.scrollTop;
30
+ if (this.scrollTop < newScrollTop) {
31
+ this.hiddenMenu = true;
32
+ this.showMenuItems = false;
33
+ } else this.hiddenMenu = false;
33
34
  if (wrap) {
34
- if (newlocal <= window.innerHeight - 100) menu.classList.add("menu-color");
35
- else menu.classList.remove("menu-color");
36
- if (newlocal <= 400) wrap.style.marginTop = -newlocal / 5 + "px";
35
+ if (newScrollTop <= window.innerHeight - 100) this.menuColor = true;
36
+ else this.menuColor = false;
37
+ if (newScrollTop <= 400) wrap.style.marginTop = -newScrollTop / 5 + "px";
37
38
  else wrap.style.marginTop = "-80px";
38
39
  }
39
- this.barLocal = newlocal;
40
+ this.scrollTop = newScrollTop;
40
41
  },
41
42
  },
42
43
  });