hexo-theme-particlex 2.0.3 → 2.0.5

package/README.md

@@ -1,6 +1,6 @@
 # Hexo-Theme-ParticleX
 
-[Hexo-Theme-ParticleX](https://github.com/argvchs/hexo-theme-particlex) 主题，诞生原因是因为原来的 [Particle](https://github.com/korilin/hexo-theme-particle) 主题不维护了，但是我觉得还是很好的
+[ParticleX](https://github.com/argvchs/hexo-theme-particlex) 主题，诞生原因是因为原来的 [Particle](https://github.com/korilin/hexo-theme-particle) 主题不维护了，但是我觉得还是很好的
 
 原来用的是 Vue 2 + Ant Design Vue 1，现更新到 Vue 3，去除 Ant Design Vue 采用自定义样式，图标更改为 Font Awesome 6，将不能用的 JSDelivr 改为 Staticfile CDN
 
@@ -10,11 +10,11 @@
 
 虽然更改后只有一种了，如果你想改颜色就在 `particlex.css` 里 `Ctrl+F` 替换吧
 
-## 演示地址
+## 演示
 
--   Github Pages <https://argvchs.github.io>
--   Netlify <https://argvchs.netlify.app>
--   Vercel <https://argvchs.vercel.app>
+-   [Github Pages](https://argvchs.github.io)
+-   [Netlify](https://argvchs.netlify.app)
+-   [Vercel](https://argvchs.vercel.app)
 
 ## 安装
 
@@ -42,19 +42,20 @@ prismjs:
     tab_replace: ""
 ```
 
-修改完请清除缓存：`hexo cl`
+修改完请 `hexo cl` 清除缓存
 
 ## 配置
 
 ```yaml
-avatar: # Avatar image url
-head_block_enable: true # Home page head info block
-home_background: # Home page head background image url
+avatar: # Avatar image
+headBlockEnable: true # Home page info block
+background: # Home page background image
+highlightStyle: github # Highlight style
 ```
 
--   导航栏配置
+-   导航栏
 
-    为了方便，主题使用的图标是 FontAwesome 6 图标，地址为：<https://fontawesome.com/search>
+    为了方便，主题使用的图标是 Font Awesome 6 图标
 
     ```yaml
     menu:
@@ -86,44 +87,42 @@ home_background: # Home page head background image url
 
 -   主页信息卡片
 
-    和导航栏配置差不多
+    和导航栏差不多
 
     `description` 支持 Markdown 格式
 
-    **如果图标链接或友链为空，请在 `icon_links:` 或 `friend_links:` 后添加一个 `{}`**
+    **如果图标链接或友链为空，请在 `iconLinks:` 或 `friendLinks:` 后添加一个 `{}`**
 
     ```yaml
     card:
         enable: true
         description:
-            - Description
+            - "Description"
             - "..."
-        icon_links:
+        iconLinks:
             {}
             # <name>:
             #    name: <icon-name>
             #    theme: <icon-theme>
             #    link: <link-url>
-        friend_links:
+        friendLinks:
             {}
             # <name>: <link-url>
     ```
 
--   首页文档缩略配置
+-   文档缩略
 
     一般来说，缩略展示文档只需要在文档中添加 `<!-- more -->` 即可，缩略内容在显示全文中也会出现
 
-    但考虑到不想把缩略内容放在正文里，就添加了此配置
+    但考虑到不想把缩略内容放在正文里，就添加了此参数，在 Front-Matter 里设置
 
-    配置在 Markdown 文件的 Front-Matter 中填写（被 `---` 括起来的内容），支持 Markdown 格式，不想用则不用添加
-
-    例如：（注意换行和转义 `"`）
+    支持 Markdown 格式
 
     ```yaml
-    description: "text\n**bold**\n_italic_"
+    description: "Normal **Strong** _Italic_"
     ```
 
--   页脚配置
+-   页脚
 
     考虑到博客部署在服务器并使用自己域名的情况，按国家规定需要在网站下边添加备案消息
 
@@ -131,7 +130,7 @@ home_background: # Home page head background image url
 
     ```yaml
     footer:
-        since: 20xx
+        since: 2022
         ICP:
             enable: false
             code:
@@ -140,7 +139,9 @@ home_background: # Home page head background image url
 
 -   Polyfill
 
-    使用 [Polyfill.io](https://polyfill.io/v3/url-builder) 自动根据 UA 处理新的 JS API 兼容问题，可以配合 [Hexo-Renderer-BabelJS](https://github.com/argvchs/hexo-renderer-babeljs) 插件处理 JS 语法
+    使用 [Polyfill.io](https://polyfill.io/v3/url-builder) 自动根据 UA 处理新的 JS API 兼容
+
+    可以配合 [Hexo-Renderer-BabelJS](https://github.com/argvchs/hexo-renderer-babeljs) 插件处理 JS 语法
 
     ```yaml
     polyfill:
@@ -169,11 +170,11 @@ home_background: # Home page head background image url
 
 -   搜索
 
-    嵌入到 Archives 中的搜索，搜索数据是用 [Hexo-Generator-Search-Lite](https://github.com/argvchs/hexo-generator-search-lite) 生成，默认关闭，使用需要**安装上述插件**并**设置 `optimize: true`**
+    嵌入到 Archives 中的搜索，搜索数据是用 [Hexo-Generator-Search-Lite](https://github.com/argvchs/hexo-generator-search-lite) 生成，默认关闭，使用需要安装上述插件并**设置 `optimize: true`**
 
     目前只支持搜索文档的 Title Categories Tags（我太弱了）
 
-    要同时在主题和根目录的两个 `_config.yml` 添加设置
+    要同时在主题和根目录的两个 `_config.yml` 添加配置
 
     ```yaml
     # Theme config
@@ -186,7 +187,7 @@ home_background: # Home page head background image url
     # Site config
     search:
         path: /search.json
-        optimize: false
+        optimize: true
     ```
 
 -   Gitalk
@@ -197,7 +198,7 @@ home_background: # Home page head background image url
 
     **同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
 
-    由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 配置，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
+    由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
 
     ```yaml
     gitalk:
@@ -207,7 +208,7 @@ home_background: # Home page head background image url
         repo: # The name of repository of store comments
         owner: # GitHub repo owner
         admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
-        language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available.
+        language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
         proxy: # CORS proxy
         sites: # Sites
             {}
@@ -220,7 +221,7 @@ home_background: # Home page head background image url
 
     Giscus 是一个由 GitHub Discussions 支持的评论系统
 
-    在 [Giscus.app](https://giscus.app) 配置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
+    在 [Giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
 
     ```yaml
     giscus:
@@ -243,9 +244,9 @@ home_background: # Home page head background image url
 
     Waline 是一个简单、安全的评论系统
 
-    配置方法详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi0201.top/posts/bcb4ff00.html)
+    详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi0201.top/posts/bcb4ff00.html)
 
-    **注意如果不需要 Locale 配置，请在 `locale:` 后添加一个 `{}`**
+    **注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
 
     ```yaml
     waline:

package/_config.yml

@@ -1,17 +1,21 @@
+# ParticleX Configuration
 # https://github.com/argvchs/hexo-theme-particlex
-# Developer: argvchs
 
-# Avatar image url
+# Avatar image
 avatar:
 
-# Home page head info block
-head_block_enable: true
+# Home page info block
+headBlockEnable: true
 
-# Home page head background image url
-home_background:
+# Home page background image
+background:
+
+# Highlight style
+# https://highlightjs.org
+highlightStyle: github
 
 # ParticleX theme icon is adopts the Font Awesome 6
-# Link: https://fontawesome.com/search
+# https://fontawesome.com/search
 
 # Main menu navigation
 menu:
@@ -44,21 +48,21 @@ menu:
 card:
     enable: true
     description:
-        - Description
+        - "Description"
         - "..."
-    icon_links:
+    iconLinks:
         {}
         # <name>:
         #    name: <icon-name>
         #    theme: <icon-theme>
         #    link: <link-url>
-    friend_links:
+    friendLinks:
         {}
         # <name>: <link-url>
 
 # Footer info
 footer:
-    since: 20xx
+    since: 2022
     # Customize the server domain name ICP
     ICP:
         enable: false
@@ -94,7 +98,7 @@ gitalk:
     repo: # The name of repository of store comments
     owner: # GitHub repo owner
     admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
-    language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available.
+    language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
     proxy: # CORS proxy
     sites: # Sites
         {}

package/layout/card.ejs

@@ -14,18 +14,18 @@
             <% }); %>
         </div>
         <div class="icon-links">
-            <% Object.keys(theme.card.icon_links).forEach(key => { %>
+            <% Object.keys(theme.card.iconLinks).forEach(key => { %>
             <span class="icon-link">
-                <a href="<%- theme.card.icon_links[key].link %>">
-                    <i class="fa-<%- theme.card.icon_links[key].theme %> fa-<%- theme.card.icon_links[key].name %> fa-fw"></i>
+                <a href="<%- theme.card.iconLinks[key].link %>">
+                    <i class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"></i>
                 </a>
             </span>
             <% }); %>
         </div>
         <div class="friend-links">
-            <% Object.keys(theme.card.friend_links).forEach(key => { %>
+            <% Object.keys(theme.card.friendLinks).forEach(key => { %>
             <div class="friend-link">
-                <a href="<%- theme.card.friend_links[key] %>">
+                <a href="<%- theme.card.friendLinks[key] %>">
                     <%= key %>
                 </a>
             </div>

package/layout/index.ejs

@@ -1,6 +1,6 @@
-<div id="home-background" style="background-image: url(<%- theme.home_background %>)"></div>
+<div id="home-background" style="background-image: url(<%- theme.background %>)"></div>
 <div id="home-head">
-    <% if (theme.head_block_enable) { %>
+    <% if (theme.headBlockEnable) { %>
     <div id="home-info" class="home-info" @click="homeclick">
         <span class="loop"></span>
         <span class="loop"></span>

package/layout/layout.ejs

@@ -35,16 +35,18 @@
         <script src="https://cdn.staticfile.org/instant.page/5.1.1/instantpage.min.js" type="module"></script>
         <script src="https://cdn.staticfile.org/font-awesome/6.2.1/js/all.min.js"></script>
         <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script>
+        <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
+        <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlightStyle %>.min.css">
         <% if (theme.polyfill.enable) { %>
         <script src="https://polyfill.io/v3/polyfill.min.js?features=<% theme.polyfill.features.join(",") %>"></script>
         <% } %>
-        <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>">
-        <link rel="stylesheet" href="<%- url_for("/css/particlex.css") %>">
         <% if (theme.math.enable) { %>
         <script src="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.js"></script>
         <script src="https://cdn.staticfile.org/KaTeX/0.16.4/contrib/auto-render.min.js"></script>
         <link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.css">
         <% } %>
+        <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>">
+        <link rel="stylesheet" href="<%- url_for("/css/particlex.css") %>">
     </head>
     <body>
         <%- include("loading") %>

package/layout/post.ejs

@@ -79,7 +79,6 @@
     </div>
     <% } %>
     <% if (theme.twikoo.enable) { %>
-    <script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
     <div id="comment">
         <div id="twikoo-container"></div>
     </div>

package/layout/script.ejs

@@ -1,4 +1,3 @@
-<script src="https://cdn.staticfile.org/highlight.js/11.5.1/highlight.min.js"></script>
 <script src="<%- url_for("/js/functions.js") %>"></script>
 <script src="<%- url_for("/js/particlex.js") %>"></script>
 <% if (is_post()) { %>
@@ -65,6 +64,7 @@
     </script>
     <% } %>
     <% if (theme.twikoo.enable) { %>
+    <script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
     <script>
         twikoo.init({
             el: "#twikoo-container",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-particlex",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "A concise Hexo theme, based on Particle.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/source/css/particlex.css

@@ -682,54 +682,6 @@ footer .footer-wrap {
     line-height: 2;
     font-size: 13px;
 }
-.content .hljs .hljs-built_in {
-    color: #42a4d6;
-}
-.content .hljs .hljs-keyword {
-    color: #e24279;
-}
-.content .hljs .hljs-literal {
-    color: #ff9800;
-}
-.content .hljs .hljs-number {
-    color: #ff9800;
-}
-.content .hljs .hljs-doctag {
-    color: #009688;
-}
-.content .hljs .hljs-string {
-    color: #009688;
-}
-.content .hljs .hljs-comment {
-    color: #9e9e9e;
-}
-.content .hljs .hljs-quote {
-    color: #9e9e9e;
-}
-.content .hljs .hljs-attribute {
-    color: #f00;
-}
-.content .hljs .hljs-name {
-    color: #f00;
-}
-.content .hljs .hljs-attr {
-    color: #525252;
-}
-.content .hljs .hljs-class {
-    color: #3f51b5;
-}
-.content .hljs .hljs-title {
-    color: #3f51b5;
-}
-.content .hljs .hljs-type {
-    color: #3f51b5;
-}
-.content .hljs .hljs-params {
-    color: #458;
-}
-.content .hljs .hljs-variable {
-    color: #458;
-}
 #main {
     margin-right: calc(100% - 100vw);
 }