hexo-theme-particlex 2.5.7 → 2.5.9

package/README.md

@@ -8,15 +8,15 @@
 
 > 目前有 Full、Night 和 Maiden **两个**主题样式
 
-虽然更改后只有一种了，如果你想改颜色就在 `particlex.css` 里 `Ctrl+F` 替换吧
+虽然更改后只有一种了，如果你想改颜色就在 `main.css` 里替换吧
 
-## 演示
+# 1. 演示
 
 -   [GitHub Pages](https://argvchs.github.io)
 -   [Netlify](https://argvchs.netlify.app)
 -   [Vercel](https://argvchs.vercel.app)
 
-## 安装
+# 2. 安装
 
 ```bash
 cd themes
@@ -29,319 +29,325 @@ git clone https://github.com/argvchs/hexo-theme-particlex.git particlex --depth=
 theme: particlex
 ```
 
--   关闭自带 Highlight
+## 2.1. 关闭自带代码高亮
 
-    Hexo 有自带的 Highlight，但是和 ParticleX 的 Highlight 不兼容
+Hexo 有自带的代码高亮，但是和 ParticleX 的不兼容
 
-    ```yaml
-    highlight:
-        enable: false
-    prismjs:
-        enable: false
-    ```
+```yaml
+highlight:
+    enable: false
+prismjs:
+    enable: false
+```
 
-    如果使用 Pandoc 还需要设置一下
+如果使用 Pandoc 还需要设置一下
 
-    ```yaml
-    pandoc:
-        extra:
-            - no-highlight:
-    ```
+```yaml
+pandoc:
+    extra:
+        - no-highlight:
+```
 
--   禁用年度月度归档
+## 2.2. 禁用年度月度归档
 
-    Hexo 会自动生成年度月度归档，可是 ParticleX 主题没有这个功能 ~~我太懒了~~
+Hexo 会自动生成年度月度归档，可是 ParticleX 主题没有这个功能 ~~我太懒了~~
 
-    ```yaml
-    archive_generator:
-        enabled: true
-        per_page: 0
-        yearly: false
-        monthly: false
-        daily: false
-    ```
+```yaml
+archive_generator:
+    enabled: true
+    per_page: 0
+    yearly: false
+    monthly: false
+    daily: false
+```
 
 修改完请 `hexo cl` 清除缓存
 
-## 配置
+# 3. 配置
+
+## 3.1. 基本配置
 
 ```yaml
 # Avatar image
 avatar: /images/avatar.jpg
 
-# Home page info block
-headBlockEnable: true
-
 # Home page background image
-background: /images/background.jpg
+background:
+    - /images/background.jpg
 ```
 
-其中 Background 可以是一个列表，打开时会随机加载一个背景
-
--   导航栏
-
-    为了方便，主题使用的图标是 Font Awesome 6 图标
-
-    ```yaml
-    # ParticleX theme icon is adopts the Font Awesome 6
-    # https://fontawesome.com
-
-    # Main menu navigation
-    menu:
-        Home:
-            name: house
-            theme: solid
-            link: /
-        About:
-            name: id-card
-            theme: solid
-            link: /about
-        Archives:
-            name: box-archive
-            theme: solid
-            link: /archives
-        Categories:
-            name: bookmark
-            theme: solid
-            link: /categories
-        Tags:
-            name: tags
-            theme: solid
-            link: /tags
-    ```
-
--   主页信息卡片
-
-    `description` 支持 Markdown 格式
-
-    图标链接配置和导航栏配置相同
-
-    **如果图标链接或友链为空，请在 `iconLinks:` 或 `friendLinks:` 后添加一个 `{}`**
-
-    ```yaml
-    # Side info card
-    card:
-        enable: true
-        description: |
-            Description
-            ...
-        iconLinks:
-            {}
-        friendLinks:
-            Argvchs: https://argvchs.netlify.app
-    ```
-
--   页脚
-
-    考虑到博客部署在服务器并使用自己域名的情况，按规定需要在网站下边添加备案消息
-
-    如没有需要显示备案消息的可以关闭
-
-    ```yaml
-    # Footer info
-    footer:
-        since: 2022
-        # Customize the server domain name ICP
-        ICP:
-            enable: false
-            code:
-            link:
-    ```
-
--   Polyfill
-
-    使用 [Polyfill.io](https://polyfill.io) 自动根据 UA 处理新的 JS API 兼容
-
-    可以配合 [Hexo-Babel](https://github.com/argvchs/hexo-babel) 插件处理 JS 语法兼容
-
-    ```yaml
-    # Polyfill
-    # https://polyfill.io
-    polyfill:
-        enable: true
-        features:
-            - default
-    ```
-
--   代码高亮
-
-    使用 Highlight.js 代码高亮
-
-    样式可以在[这里](https://highlightjs.org/static/demo)选择，默认为 GitHub
-
-    ```yaml
-    # Highlight.js
-    # https://highlightjs.org
-    highlight:
-        enable: true
-        style: github
-    ```
-
--   数学渲染
-
-    使用 KaTeX 渲染数学公式
-
-    ```yaml
-    # Rendering math with KaTeX
-    math:
-        enable: false
-    ```
+其中 Background 是一个列表，打开时会随机加载一个背景
 
--   图片预览
+## 3.2. 内容配置
 
-    简单的点击图片放大缩小的预览
+### 3.2.1. 导航栏
 
-    ```yaml
-    # Image Preview
-    preview:
-        enable: true
-    ```
+为了方便，主题使用的图标是 Font Awesome 6 图标
 
--   文章缩略
+```yaml
+# ParticleX theme icon is adopts the Font Awesome 6
+# https://fontawesome.com
+
+# Main menu navigation
+menu:
+    Home:
+        name: house
+        theme: solid
+        link: /
+    About:
+        name: id-card
+        theme: solid
+        link: /about
+    Archives:
+        name: box-archive
+        theme: solid
+        link: /archives
+    Categories:
+        name: bookmark
+        theme: solid
+        link: /categories
+    Tags:
+        name: tags
+        theme: solid
+        link: /tags
+```
 
-    一般来说，缩略展示文档只需要在文档中添加 `<!-- more -->` 即可，缩略内容在显示全文中也会出现
+### 3.2.2. 主页信息卡片
 
-    但考虑到不想把缩略内容放在正文里，就添加了此参数，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置
+`description` 支持 Markdown 格式
 
-    支持 Markdown 格式
+图标链接配置和导航栏配置相同
 
-    ```yaml
-    description: |
-        Normal _Italic_ **Strong**
-    ```
+**如果图标链接或友链为空，请在 `iconLinks:` 或 `friendLinks:` 后添加一个 `{}`**
 
--   文章置顶
+```yaml
+# Side info card
+card:
+    enable: true
+    description: |
+        Description
+        ...
+    iconLinks:
+        {}
+    friendLinks:
+        Argvchs: https://argvchs.netlify.app
+```
 
-    在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数，越大越靠前，默认为 0
+### 3.2.3. 页脚
 
--   文章加密
+考虑到博客部署在服务器并使用自己域名的情况，按规定需要在网站下边添加备案消息
 
-    使用 AES 加密算法，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `secret` 作为密码，**使用请安装插件 [Hexo-Helper-Crypto](https://github.com/argvchs/hexo-helper-crypto)**
+如没有需要显示备案消息的可以关闭
 
-    ```yaml
-    # Article encryption
-    crypto:
+```yaml
+# Footer info
+footer:
+    since: 2022
+    # Customize the server domain name ICP
+    ICP:
         enable: false
-    ```
+        code:
+        link:
+```
 
--   搜索
+## 3.3. 功能配置
 
-    嵌入到 Archives 中的搜索
+### 3.3.1. Polyfill
 
-    目前只支持搜索文档标题（我太弱了）
+使用 [Polyfill.io](https://polyfill.io) 自动根据 UA 处理新的 JS API 兼容
 
-    ```yaml
-    # Search
-    search:
-        enable: false
-    ```
+可以配合 [Hexo-Babel](https://github.com/argvchs/hexo-babel) 插件处理 JS 语法兼容
 
--   Giscus
+```yaml
+# Polyfill
+# https://polyfill.io
+polyfill:
+    enable: true
+    features:
+        - default
+```
 
-    Giscus 是一个由 GitHub Discussions 支持的评论系统
+### 3.3.2. 代码高亮
 
-    在 [Giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
+使用 Highlight.js 代码高亮
 
-    ```yaml
-    # Giscus
-    # https://github.com/giscus/giscus
-    giscus:
-        enable: false
-        src: https://giscus.app/client.js
-        repo:
-        repoID:
-        category:
-        categoryID:
-        mapping: pathname
-        strict: 0
-        reactionsEnabled: 1
-        emitMetadata: 0
-        inputPosition: bottom
-        theme: preferred_color_scheme
-        lang: zh-CN
-    ```
-
--   Gitalk
-
-    Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
-
-    考虑到博客可能部署到多个网站同步评论，但 OAuth APP 只能有一个回调 URL，所以添加了 `sites` 参数用于多个网站的评论
-
-    **同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
-
-    由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
-
-    ```yaml
-    # Gitalk
-    # https://github.com/gitalk/gitalk
-    gitalk:
-        enable: false
-        clientID: # Default ClientID
-        clientSecret: # Default ClientSecret
-        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
-        proxy: # CORS proxy
-        sites: # Sites
-            {}
-            # www.example.com:
-            #    clientID:
-            #    clientSecret:
-    ```
-
--   Waline
-
-    Waline 是一个简单、安全的评论系统
-
-    详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi.dev/posts/bcb4ff00.html)
-
-    **注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
-
-    ```yaml
-    # Waline
-    # https://github.com/walinejs/waline
-    waline:
-        enable: false
-        serverURL: # Waline server address url, you should set this to your own link
-        locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
-            {}
-        commentCount: true # If false, comment count will only be displayed in post page, not in home page
-        pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
-        emoji: # Custom emoji
-            - https://unpkg.com/@waline/emojis@1.2.0/weibo
-            - https://unpkg.com/@waline/emojis@1.2.0/alus
-            - https://unpkg.com/@waline/emojis@1.2.0/bilibili
-            - https://unpkg.com/@waline/emojis@1.2.0/qq
-            - https://unpkg.com/@waline/emojis@1.2.0/tieba
-            - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji
-        meta: # Comment information, valid meta are nick, mail and link
-            - nick
-            - mail
-            - link
-        requiredMeta: # Set required meta field, e.g.: [nick] | [nick, mail]
-            - nick
-        lang: zh-CN # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
-        wordLimit: 0 # Word limit, no limit when setting to 0
-        login: enable # Whether enable login, can choose from 'enable', 'disable' and 'force'
-        pageSize: 10 # Comment per page
-    ```
-
--   Twikoo
-
-    Twikoo 是一个一个简洁、安全、免费的静态网站评论系统
-
-    ```yaml
-    # Twikoo
-    # https://github.com/imaegoo/twikoo
-    twikoo:
-        enable: false
-        envID:
-        region:
-        path: location.pathname
-        lang: zh-CN
-    ```
+样式可以在[这里](https://highlightjs.org/static/demo)选择，默认为 GitHub
+
+```yaml
+# Highlight.js
+# https://highlightjs.org
+highlight:
+    enable: true
+    style: github
+```
+
+### 3.3.3. 数学渲染
+
+使用 KaTeX 渲染数学公式
+
+```yaml
+# KaTeX math rendering
+math:
+    enable: false
+```
+
+### 3.3.4. 图片预览
+
+简单的点击图片放大缩小的预览
+
+```yaml
+# Image preview
+preview:
+    enable: true
+```
+
+### 3.3.5. 文章缩略
+
+一般来说，缩略展示文档只需要在文档中添加 `<!-- more -->` 即可，缩略内容在显示全文中也会出现
+
+但考虑到不想把缩略内容放在正文里，就添加了此参数，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置
+
+支持 Markdown 格式
+
+```yaml
+description: |
+    Normal _Italic_ **Strong**
+```
+
+### 3.3.6. 文章置顶
+
+在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数，越大越靠前，默认为 0
+
+### 3.3.7. 文章加密
+
+使用 AES 加密算法，在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `secret` 作为密码，**使用请安装插件 [Hexo-Helper-Crypto](https://github.com/argvchs/hexo-helper-crypto)**
+
+```yaml
+# Article encryption
+crypto:
+    enable: false
+```
+
+### 3.3.8. 搜索
+
+嵌入到 Archives 中的搜索
+
+目前只支持搜索文档标题
+
+```yaml
+# Search
+search:
+    enable: false
+```
+
+## 3.4. 评论配置
+
+### 3.4.1. Giscus
+
+Giscus 是一个由 GitHub Discussions 支持的评论系统
+
+在 [Giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
+
+```yaml
+# Giscus
+# https://github.com/giscus/giscus
+giscus:
+    enable: false
+    src: https://giscus.app/client.js
+    repo:
+    repoID:
+    category:
+    categoryID:
+    mapping: pathname
+    strict: 0
+    reactionsEnabled: 1
+    emitMetadata: 0
+    inputPosition: bottom
+    theme: preferred_color_scheme
+    lang: zh-CN
+```
+
+### 3.4.2. Gitalk
+
+Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
+
+考虑到博客可能部署到多个网站同步评论，但 OAuth APP 只能有一个回调 URL，所以添加了 `sites` 参数用于多个网站的评论
+
+**同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
+
+由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.netlify.app/2022/07/04/build-cors-anywhere)
+
+```yaml
+# Gitalk
+# https://github.com/gitalk/gitalk
+gitalk:
+    enable: false
+    clientID: # Default ClientID
+    clientSecret: # Default ClientSecret
+    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
+    proxy: # CORS proxy
+    sites: # Sites
+        {}
+        # www.example.com:
+        #    clientID:
+        #    clientSecret:
+```
+
+### 3.4.3. Waline
+
+Waline 是一个简单、安全的评论系统
+
+详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi.dev/posts/bcb4ff00.html)
+
+**注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
+
+```yaml
+# Waline
+# https://github.com/walinejs/waline
+waline:
+    enable: false
+    serverURL: # Waline server address url, you should set this to your own link
+    locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
+        {}
+    commentCount: true # If false, comment count will only be displayed in post page, not in home page
+    pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
+    emoji: # Custom emoji
+        - https://unpkg.com/@waline/emojis@1.2.0/weibo
+        - https://unpkg.com/@waline/emojis@1.2.0/alus
+        - https://unpkg.com/@waline/emojis@1.2.0/bilibili
+        - https://unpkg.com/@waline/emojis@1.2.0/qq
+        - https://unpkg.com/@waline/emojis@1.2.0/tieba
+        - https://unpkg.com/@waline/emojis@1.2.0/tw-emoji
+    meta: # Comment information, valid meta are nick, mail and link
+        - nick
+        - mail
+        - link
+    requiredMeta: # Set required meta field, e.g.: [nick] | [nick, mail]
+        - nick
+    lang: zh-CN # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
+    wordLimit: 0 # Word limit, no limit when setting to 0
+    login: enable # Whether enable login, can choose from 'enable', 'disable' and 'force'
+    pageSize: 10 # Comment per page
+```
+
+### 3.4.4. Twikoo
+
+Twikoo 是一个一个简洁、安全、免费的静态网站评论系统
+
+```yaml
+# Twikoo
+# https://github.com/imaegoo/twikoo
+twikoo:
+    enable: false
+    envID:
+    region:
+    path: location.pathname
+    lang: zh-CN
+```
 
-## 写在最后
+# 4. 写在最后
 
 本项目采用 MIT 开源许可证，欢迎大家贡献，你可以随意打开一个 Issue 来进行提问，有任何改进想法都可以进行 Fork，期待您的 Pull Request！

package/_config.yml

@@ -4,11 +4,9 @@
 # Avatar image
 avatar: /images/avatar.jpg
 
-# Home page info block
-headBlockEnable: true
-
 # Home page background image
-background: /images/background.jpg
+background:
+    - /images/background.jpg
 
 # ParticleX theme icon is adopts the Font Awesome 6
 # https://fontawesome.com
@@ -69,11 +67,11 @@ highlight:
     enable: true
     style: github
 
-# Rendering math with KaTeX
+# KaTeX math rendering
 math:
     enable: false
 
-# Image Preview
+# Image preview
 preview:
     enable: true
 

package/layout/card.ejs

@@ -1,5 +1,5 @@
 <div id="card-div">
-    <div class="card-style" style="width: 300px">
+    <div class="card-style">
         <div class="avatar">
             <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
         </div>

package/layout/comment.ejs

@@ -18,7 +18,7 @@
 <% } %>
 <% if (theme.gitalk.enable) { %>
 <script>
-    (function () {
+    (() => {
         let clientID = "<%- theme.gitalk.clientID %>",
             clientSecret = "<%- theme.gitalk.clientSecret %>";
         <% Object.keys(theme.gitalk.sites).forEach(key => { %>

package/layout/index.ejs

@@ -1,6 +1,9 @@
 <div id="home-head">
-    <div id="home-background" ref="homeBackground" data-image="<%- url_for(theme.background) %>"></div>
-    <% if (theme.headBlockEnable) { %>
+    <div
+        id="home-background"
+        ref="homeBackground"
+        data-images="<%- theme.background.map(i => url_for(i)) %>"
+    ></div>
     <div id="home-info" @click="homeClick">
         <span class="loop"></span>
         <span class="loop"></span>
@@ -14,14 +17,11 @@
             </div>
         </span>
     </div>
-    <% } %>
 </div>
 <div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
     <div id="home-posts">
-        <div id="posts">
-            <%- partial("posts") %>
-            <%- partial("current") %>
-        </div>
+        <%- partial("posts") %>
+        <%- partial("current") %>
     </div>
     <% if (theme.card.enable) { %>
     <div id="home-card">

package/layout/layout.ejs

@@ -1,25 +1,16 @@
 <%
-    let type = "post";
-    if (is_home())
-        type = "index";
-    else if (is_post())
-        type = "post";
-    else if (is_category() || page.type === "categories")
-        type = "categories";
-    else if (is_tag() || page.type === "tags")
-        type = "tags";
-    else if (is_archive())
-        type = "archives";
-    let title = "";
-    if (page.title)
-        title = page.title + " | ";
-    else if (is_category())
-        title = "Categories: " + page.category + " | ";
-    else if (is_tag())
-        title = "Tags: " + page.tag + " | ";
-    else if (is_archive())
-        title = "Archives | ";
-    title += config.title;
+    let type;
+    if (is_home()) type = "index";
+    if (is_post() || is_page()) type = "post";
+    if (is_category() || page.type === "categories") type = "categories";
+    if (is_tag() || page.type === "tags") type = "tags";
+    if (is_archive()) type = "archives";
+    let title;
+    if (is_home()) title = config.title;
+    if (is_post() || is_page()) title = page.title + " | " + config.title;
+    if (is_category()) title = "Categories: " + page.category + " | " + config.title;
+    if (is_tag()) title = "Tags: " + page.tag + " | " + config.title;
+    if (is_archive()) title = "Archives | " + config.title;
 %>
 <!DOCTYPE html>
 <html lang="<%- config.language %>">
@@ -39,14 +30,14 @@
             <div id="loading" v-show="loading">
                 <div id="loading-circle">
                     <h2>LOADING</h2>
-                    <p>加载过慢请开启缓存&ensp;浏览器默认开启</p>
+                    <p>加载过慢请开启缓存 浏览器默认开启</p>
                     <img src="<%- url_for("/images/loading.gif") %>" />
                 </div>
             </div>
             </transition>
+            <%- partial("menu") %>
             <transition name="into">
             <div id="main" v-show="!loading">
-                <%- partial("menu") %>
                 <%- partial(type) %>
                 <%- partial("footer") %>
             </div>

package/layout/menu.ejs

@@ -1,4 +1,4 @@
-<nav id="menu" ref="menu">
+<nav id="menu" :class="{ hidden: hiddenMenu, 'menu-color': menuColor}">
     <div class="desktop-menu">
         <a class="title" href="<%- config.root %>">
             <span><%= config.title.toUpperCase() %></span>
@@ -11,13 +11,13 @@
         <% }); %>
     </div>
     <div id="mobile-menu">
-        <div class="curtain" v-show="showMenu" @click="showMenu = !showMenu"></div>
-        <div class="title" @click="showMenu = !showMenu">
+        <div class="curtain" @click="shouMenuItems = !shouMenuItems" v-show="shouMenuItems"></div>
+        <div class="title" @click="shouMenuItems = !shouMenuItems">
             <i class="fa-solid fa-bars fa-fw"></i>
             <span>&emsp;<%= config.title.toUpperCase() %></span>
         </div>
         <transition name="slide">
-        <div class="items" v-show="showMenu">
+        <div class="items" v-show="shouMenuItems">
             <% Object.keys(theme.menu).forEach(key => { %>
             <a href="<%- url_for(theme.menu[key].link) %>">
                 <div class="item">

package/layout/post.ejs

@@ -43,26 +43,19 @@
         <% } %>
     </div>
     <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
-    <%
-        const CryptoJS = crypto();
-        function SHA(word) {
-            return CryptoJS.SHA256(word).toString();
-        }
-        function encrypt(word, secret) {
-            return CryptoJS.AES.encrypt(word, secret).toString();
-        }
-    %>
+    <% const CryptoJS = crypto(); %>
     <input
         id="crypto"
-        class="input"
+        :class="['input', cryptoClass]"
+        :disabled="check"
         ref="crypto"
         placeholder="文章被加密，请输入密码"
-        data-encrypted="<%- encrypt(page.content, page.secret) %>"
-        data-shasum="<%- SHA(page.content) %>"
+        data-encrypted="<%- CryptoJS.AES.encrypt(page.content, page.secret).toString() %>"
+        data-shasum="<%- CryptoJS.SHA256(page.content).toString() %>"
         v-model="crypto"
     />
     <transition name="fade">
-    <div class="content" ref="content" v-show="check"></div>
+    <div class="content" ref="content" v-html="decrypted" v-show="check"></div>
     </transition>
     <% } else { %>
     <div class="content" v-pre>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-particlex",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "description": "A concise Hexo theme, based on Particle.",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/argvchs/hexo-theme-particlex#readme",
   "dependencies": {
-    "hexo-helper-crypto": "^1.1.0",
+    "hexo-helper-crypto": "^1.1.2",
     "hexo-renderer-ejs": "^2.0.0"
   },
   "scripts": {

package/source/css/main.css

@@ -92,6 +92,7 @@
     box-shadow: 0 0 20px #d9d9d980;
     padding: 25px 0;
     text-align: center;
+    width: 300px;
 }
 #home-card .card-style .avatar {
     border: #f1f1f1 solid 3px;
@@ -360,11 +361,11 @@
     height: 50vmin;
     justify-content: center;
     padding: 50px;
+    text-align: center;
     width: 50vmin;
 }
 #main {
     margin-right: calc(100% - 100vw);
-    overflow: auto;
 }
 #menu {
     background: #92cafa;
@@ -488,6 +489,7 @@
     line-height: 2;
     overflow: auto;
     padding: 50px 30px 20px;
+    white-space: pre;
 }
 .comment iframe,
 body::-webkit-scrollbar-track {
@@ -504,24 +506,24 @@ body::-webkit-scrollbar-track {
     margin: 15px auto;
     max-width: 75%;
 }
-.code-copy {
+.copycode {
     color: #5c6b72;
     position: absolute;
     right: 0;
     top: 0;
 }
-.code-copy i {
+.copycode i {
     padding: 15px;
     position: absolute;
     right: 0;
     top: 0;
     transition: transform 0.25s;
 }
-.code-copy.copied i {
+.copycode.copied i {
     transform: scale(1.25);
 }
-.code-copy.copied i:first-child,
-.code-copy:not(.copied) i:last-child {
+.copycode.copied i:first-child,
+.copycode:not(.copied) i:last-child {
     opacity: 0;
 }
 .fade-enter-active,
@@ -658,7 +660,7 @@ a {
     text-decoration: none;
 }
 a:hover,
-.content .code-copy:hover {
+.content .copycode:hover {
     opacity: 0.8;
 }
 b,
@@ -694,13 +696,12 @@ iframe,
 .friend-link a,
 .icon-link a,
 .language,
-.code-copy {
+.copycode {
     user-select: none;
 }
 code {
     background: #bddcf76b;
     border-radius: 4px;
-    font-size: 14px;
     line-height: 2.5;
     padding: 4px 8px;
 }
@@ -764,6 +765,7 @@ pre {
     box-shadow: 0 2px 12px 0 #0000001a;
     margin: 25px 0;
     margin: 25px 0;
+    white-space: normal;
 }
 pre,
 code,
@@ -824,9 +826,6 @@ ol li {
     }
 }
 @media (min-width: 900px) {
-    #home-card {
-        margin-right: auto;
-    }
     #home-head #home-info .info .wrap {
         padding: 25px;
     }
@@ -855,9 +854,8 @@ ol li {
         width: 500px;
     }
     #home-posts {
-        margin-left: auto;
         margin-right: 50px;
-        width: 900px;
+        width: 850px;
     }
     #home-posts .post {
         margin-bottom: 25px;
@@ -867,8 +865,7 @@ ol li {
         padding: 20px 0;
     }
     #home-posts-wrap {
-        max-width: 1150px;
-        padding: 30px 0;
+        max-width: 1200px;
     }
     #menu .desktop-menu {
         display: block;
@@ -894,7 +891,6 @@ ol li {
         display: none;
     }
     #home-posts {
-        margin: auto;
         width: 100%;
     }
     #home-posts-wrap,

package/source/js/lib/crypto.js

@@ -2,40 +2,31 @@ mixins.crypto = {
     data() {
         return {
             crypto: "",
-            check: false,
+            check: null,
         };
     },
-    methods: {
-        SHA(word) {
-            return CryptoJS.SHA256(word).toString();
-        },
-        decrypt(word, secret, shasum) {
+    watch: {
+        crypto(value) {
+            let input = this.$refs.crypto,
+                content = this.$refs.content;
+            let { encrypted, shasum } = input.dataset;
             try {
-                let res = CryptoJS.AES.decrypt(word, secret).toString(CryptoJS.enc.Utf8);
-                return { check: this.SHA(res) === shasum, decrypted: res };
+                let decrypted = CryptoJS.AES.decrypt(encrypted, value).toString(CryptoJS.enc.Utf8);
+                if (CryptoJS.SHA256(decrypted).toString() === shasum) {
+                    this.check = true;
+                    content.innerHTML = decrypted;
+                    this.render();
+                } else this.check = false;
             } catch {
-                return { check: false };
+                this.check = false;
             }
         },
     },
-    watch: {
-        crypto(value) {
-            let input = this.$refs.crypto,
-                content = this.$refs.content;
-            let { decrypted, check } = this.decrypt(
-                input.dataset.encrypted,
-                value,
-                input.dataset.shasum
-            );
-            this.check = check;
-            if (check) {
-                input.classList.remove("fail");
-                input.classList.add("success");
-                input.disabled = true;
-                content.innerHTML = decrypted;
-                this.render();
-            } else input.classList.add("fail");
+    computed: {
+        cryptoClass() {
+            if (this.check === null) return "";
+            if (this.check === true) return "success";
+            if (this.check === false) return "fail";
         },
     },
 };
-mixins.push(cryptoMixin);

package/source/js/lib/highlight.js

@@ -10,24 +10,29 @@ mixins.highlight = {
     },
     methods: {
         highlight() {
-            let that = this;
             let codes = document.querySelectorAll("pre");
             for (let i of codes) {
-                let lang = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
                 let code = i.innerText;
-                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>`;
-                let copy = i.querySelector(".code-copy");
-                copy.addEventListener("click", async function () {
-                    if (that.copying) return;
-                    that.copying = true;
-                    this.classList.add("copied");
+                let language = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
+                let highlighted = hljs.highlight(code, { language }).value;
+                i.innerHTML = `
+                    <div class="code-content">${highlighted}</div>
+                    <div class="language">${language}</div>
+                    <div class="copycode">
+                        <i class="fa-solid fa-copy fa-fw"></i>
+                        <i class="fa-solid fa-clone fa-fw"></i>
+                    </div>
+                `;
+                let copycode = i.querySelector(".copycode");
+                copycode.addEventListener("click", async () => {
+                    if (this.copying) return;
+                    this.copying = true;
+                    copycode.classList.add("copied");
                     await navigator.clipboard.writeText(code);
                     await new Promise(resolve => setTimeout(resolve, 1000));
-                    this.classList.remove("copied");
-                    that.copying = false;
+                    copycode.classList.remove("copied");
+                    this.copying = false;
                 });
-                let content = i.querySelector(".code-content");
-                hljs.highlightElement(content);
             }
         },
     },

package/source/js/lib/home.js

@@ -1,11 +1,10 @@
 mixins.home = {
     mounted() {
-        let menu = this.$refs.menu,
-            background = this.$refs.homeBackground;
-        menu.classList.add("menu-color");
-        let image = background.dataset.image.split(",");
-        let id = Math.floor(Math.random() * image.length);
-        background.style.backgroundImage = `url('${image[id]}')`;
+        let background = this.$refs.homeBackground;
+        let images = background.dataset.images.split(",");
+        let id = Math.floor(Math.random() * images.length);
+        background.style.backgroundImage = `url('${images[id]}')`;
+        this.menuColor = true;
     },
     methods: {
         homeClick() {

package/source/js/lib/preview.js

@@ -9,15 +9,14 @@ mixins.preview = {
     },
     methods: {
         preview() {
-            let that = this;
             let preview = this.$refs.preview,
                 content = this.$refs.previewContent;
             let images = document.querySelectorAll("img");
             for (let i of images)
-                i.addEventListener("click", function () {
-                    content.alt = this.alt;
-                    content.src = this.src;
-                    that.previewShow = true;
+                i.addEventListener("click", () => {
+                    content.alt = i.alt;
+                    content.src = i.src;
+                    this.previewShow = true;
                 });
             preview.addEventListener("click", () => {
                 this.previewShow = false;

package/source/js/main.js

@@ -3,8 +3,10 @@ const app = Vue.createApp({
     data() {
         return {
             loading: true,
-            showMenu: false,
-            barLocal: 0,
+            hiddenMenu: false,
+            showMenuItems: false,
+            menuColor: false,
+            scrollTop: 0,
             renderers: [],
         };
     },
@@ -23,20 +25,19 @@ const app = Vue.createApp({
             for (let i of this.renderers) i();
         },
         handleScroll() {
-            let menu = this.$refs.menu,
-                wrap = this.$refs.homePostsWrap;
-            let newlocal = document.documentElement.scrollTop;
-            if (this.barLocal < newlocal) {
-                this.showMenu = false;
-                menu.classList.add("hidden");
-            } else menu.classList.remove("hidden");
+            let wrap = this.$refs.homePostsWrap;
+            let newScrollTop = document.documentElement.scrollTop;
+            if (this.scrollTop < newScrollTop) {
+                this.hiddenMenu = true;
+                this.showMenuItems = false;
+            } else this.hiddenMenu = false;
             if (wrap) {
-                if (newlocal <= window.innerHeight - 100) menu.classList.add("menu-color");
-                else menu.classList.remove("menu-color");
-                if (newlocal <= 400) wrap.style.marginTop = -newlocal / 5 + "px";
+                if (newScrollTop <= window.innerHeight - 100) this.menuColor = true;
+                else this.menuColor = false;
+                if (newScrollTop <= 400) wrap.style.marginTop = -newScrollTop / 5 + "px";
                 else wrap.style.marginTop = "-80px";
             }
-            this.barLocal = newlocal;
+            this.scrollTop = newScrollTop;
         },
     },
 });