hexo-theme-particlex 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Argvchs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,295 @@
+# Hexo-Theme-ParticleX
+
+[Hexo-Theme-ParticleX](https://github.com/argvchs/hexo-theme-particlex) 主题，诞生原因是因为原来的 [Particle](https://github.com/korilin/hexo-theme-particle) 主题不维护了，但是我觉得还是很好的
+
+原来用的是 Vue2 + AntdVue1，现更新到 Vue3，去除 AntdVue 采用自定义样式，图标更改为 FontAwesome 6，将不能用的 JsDelivr 改为 Staticfile CDN
+
+原项目 `README.md` 里说：
+
+> 目前有 full、night 和 maiden **两个**主题样式
+
+~~虽然更改后只有一种了，如果你想改颜色就在 `particlex.css` 里 `Ctrl+F` 替换吧~~
+
+## 演示地址
+
+-   Github Pages <https://argvchs.github.io>
+-   Netlify <https://argvchs.netlify.app>
+-   Vercel <https://argvchs.vercel.app>
+
+## 安装
+
+```bash
+cd themes
+git clone https://github.com/argvchs/hexo-theme-particlex.git particlex --depth=1
+```
+
+## 关闭自带 Highlight
+
+到博客根目录下的 `_config.yml`，找到 `highlight` 和 `prismjs` 参数，设置为如下：
+
+```yaml
+highlight:
+    enable: false
+    line_number: true
+    auto_detect: false
+    tab_replace: ""
+    wrap: true
+    hljs: false
+prismjs:
+    enable: false
+    preprocess: true
+    line_number: true
+    tab_replace: ""
+```
+
+修改完请清除缓存：`hexo cl`
+
+## 配置
+
+```yaml
+language: # Language
+avatar: # Avatar URL
+head_block_enable: true
+home_background: # Background URL
+```
+
+-   导航栏配置
+
+    为了方便，主题使用的图标是 FontAwesome 6 图标，地址为：<https://fontawesome.com/search>
+
+    ```yaml
+    menu:
+        home:
+            name: house
+            theme: solid
+            src: /
+        about:
+            name: id-card
+            theme: solid
+            src: /about
+        archives:
+            name: box-archive
+            theme: solid
+            src: /archives
+        categories:
+            name: bookmark
+            theme: solid
+            src: /categories
+        tags:
+            name: tags
+            theme: solid
+            src: /tags
+        # <name>:
+        #     name: <icon-name>
+        #     theme: <icon-theme>
+        #     src: <link-url>
+    ```
+
+-   主页信息卡片
+
+    和导航栏配置差不多
+
+    `description` 支持 Markdown 格式
+
+    **如果图标链接或友链为空，请在 `icon_links:` 或 `friend_links:` 后添加一个 `{}`**
+
+    ```yaml
+    card:
+        enable: true
+        description:
+            - Description
+            - "..."
+        icon_links:
+            {}
+            # <name>:
+            #    name: <icon-name>
+            #    theme: <icon-theme>
+            #    link: <link-url>
+        friend_links:
+            {}
+            # <name>: <link-url>
+    ```
+
+-   首页文档缩略配置
+
+    一般来说，缩略展示文档只需要在文档中添加 `<!-- more -->` 即可，缩略内容在显示全文中也会出现
+
+    但考虑到不想把缩略内容放在正文里，就添加了此配置
+
+    配置在 Markdown 文件的 Front-Matter 中填写（被 `---` 括起来的内容），支持 Markdown 格式，不想用则不用添加
+
+    例如：（注意换行和转义 `"`）
+
+    ```yaml
+    description: "text\n**bold**\n_italic_"
+    ```
+
+-   页脚配置
+
+    考虑到博客部署在服务器并使用自己域名的情况，按国家规定需要在网站下边添加备案消息
+
+    如没有需要显示备案消息的可以关闭
+
+    ```yaml
+    footer:
+        since: 20xx
+        ICP:
+            enable: false
+            code:
+            link:
+    ```
+
+-   Polyfill
+
+    使用 [Polyfill.io](https://polyfill.io/v3/url-builder) 自动根据 UA 处理新的 JS API 兼容问题，可以配合 [Hexo-Renderer-BabelJS](https://github.com/argvchs/hexo-renderer-babeljs) 插件处理 JS 语法
+
+    ```yaml
+    polyfill:
+        enable: true
+        features:
+            - default
+    ```
+
+-   渲染数学公式
+
+    使用 $\mathrm{K\kern{-0.2em}\raise{0.21em}{\scriptstyle{A}}\kern{-0.17em}T\kern{-0.14em}\lower{0.5ex}{E}\kern{-0.115em}X}$ 渲染数学公式，默认关闭
+
+    ```yaml
+    math:
+        enable: false
+    ```
+
+-   文章加密
+
+    使用 AES 加密算法，在 Front-Matter 里设置 `password` 作为密码，**使用请安装插件 [Hexo-Helper-Crypto](https://github.com/argvchs/hexo-helper-crypto)**
+
+    ```yaml
+    crypto:
+        enable: false
+    ```
+
+-   搜索
+
+    嵌入到 Archives 中的搜索，搜索数据是用 [Hexo-Generator-Search-Lite](https://github.com/argvchs/hexo-generator-search-lite) 生成，默认关闭，使用需要**安装上述插件**并**设置 `optimize: true`**
+
+    目前只支持搜索文档的 Title Categories Tags（我太弱了）
+
+    要同时在主题和根目录的两个 `_config.yml` 添加设置
+
+    ```yaml
+    # Theme config
+    search:
+        enable: false
+        path: /search.json
+    ```
+
+    ```yaml
+    # Site config
+    search:
+        path: /search.json
+        optimize: false
+    ```
+
+-   Gitalk
+
+    Gitalk 是一个基于 Github Issue 和 Preact 的评论系统
+
+    考虑到博客可能部署到多个网站同步评论，但 OAuth APP 只能有一个回调 URL，所以添加了 `sites` 参数用于其他网站的评论，请注册多个 Oauth APP
+
+    **同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
+
+    由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 配置，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
+
+    ```yaml
+    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: <client-id>
+            #    clientSecret: <client-secret>
+    ```
+
+-   Giscus
+
+    Giscus 是一个由 GitHub Discussions 支持的评论系统
+
+    在 [Giscus.app](https://giscus.app) 配置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可
+
+    ```yaml
+    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
+    ```
+
+-   Waline
+
+    Waline 是一个简单、安全的评论系统
+
+    配置方法详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi0201.top/posts/bcb4ff00.html)
+
+    **注意如果不需要 Locale 配置，请在 `locale:` 后添加一个 `{}`**
+
+    ```yaml
+    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
+            {}
+            # e.g.:
+            # placeholder: Leave a comment
+        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.0.1/weibo
+            - https://unpkg.com/@waline/emojis@1.0.1/alus
+            - https://unpkg.com/@waline/emojis@1.0.1/bilibili
+            - https://unpkg.com/@waline/emojis@1.0.1/qq
+            - https://unpkg.com/@waline/emojis@1.0.1/tieba
+            - https://unpkg.com/@waline/emojis@1.0.1/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:
+        enable: false
+        envId:
+        region:
+        path: location.pathname
+        lang: zh-CN
+    ```
+
+## 写在最后
+
+本项目采用 MIT 开源许可证，欢迎大家贡献，你可以随意打开一个 Issue 来进行提问，有任何改进想法都可以进行 Fork，期待您的 Pull Request

package/_config.yml

@@ -0,0 +1,158 @@
+# https://github.com/argvchs/hexo-theme-particlex
+# Developer: argvchs
+
+# Avatar image url
+avatar:
+
+# Home page head info block
+head_block_enable: true
+
+# Home page head background style
+home_background:
+
+# ParticleX theme icon is adopts the font awesome 6
+# Link: https://fontawesome.com/search
+
+# Main menu navigation
+menu:
+    home:
+        name: house
+        theme: solid
+        src: /
+    about:
+        name: id-card
+        theme: solid
+        src: /about
+    archives:
+        name: box-archive
+        theme: solid
+        src: /archives
+    categories:
+        name: bookmark
+        theme: solid
+        src: /categories
+    tags:
+        name: tags
+        theme: solid
+        src: /tags
+    # <name>:
+    #     name: <icon-name>
+    #     theme: <icon-theme>
+    #     src: <link-url>
+
+# Side info card
+card:
+    enable: true
+    description:
+        - Description
+        - "..."
+    icon_links:
+        {}
+        # <name>:
+        #    name: <icon-name>
+        #    theme: <icon-theme>
+        #    link: <link-url>
+    friend_links:
+        {}
+        # <name>: <link-url>
+
+# Footer info
+footer:
+    since: 20xx
+    # Customize the server domain name ICP
+    ICP:
+        enable: false
+        code:
+        link:
+
+# Polyfill
+# https://polyfill.io/v3/url-builder
+polyfill:
+    enable: true
+    features:
+        - default
+
+# Rendering math with KaTeX
+math:
+    enable: false
+
+# Article encryption
+crypto:
+    enable: false
+
+# Search
+search:
+    enable: false
+    path: /search.json
+
+# 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: <client-id>
+        #    clientSecret: <client-secret>
+
+# Giscus
+# https://github.com/giscus/giscus
+giscus:
+    enable: false
+    src: https://giscus.app/client.js # Default src
+    repo:
+    repoID:
+    category:
+    categoryID:
+    mapping: pathname
+    strict: 0
+    reactionsEnabled: 1
+    emitMetadata: 0
+    inputPosition: bottom
+    theme: preferred_color_scheme
+    lang: zh-CN
+
+# 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
+        {}
+        # e.g.:
+        # placeholder: Leave a comment
+    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.0.1/weibo
+        - https://unpkg.com/@waline/emojis@1.0.1/alus
+        - https://unpkg.com/@waline/emojis@1.0.1/bilibili
+        - https://unpkg.com/@waline/emojis@1.0.1/qq
+        - https://unpkg.com/@waline/emojis@1.0.1/tieba
+        - https://unpkg.com/@waline/emojis@1.0.1/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
+# https://github.com/imaegoo/twikoo
+twikoo:
+    enable: false
+    envId:
+    region:
+    path: location.pathname
+    lang: zh-CN

package/layout/archives.ejs

@@ -0,0 +1,51 @@
+<div id="archives">
+    <% if (theme.search.enable) { %>
+    <div class="search-mask" style="z-index: <%= site.posts.length + 1 %>"></div>
+    <input class="ipt search-bar" placeholder="搜索..." style="z-index: <%= site.posts.length + 2 %>">
+    <% } %>
+    <% site.posts.forEach((post, id) => { %>
+    <div class="timeline" path="<%- url_for(post.path) %>" style="z-index: <%= site.posts.length - id %>">
+        <div class="timeline-tail"></div>
+        <div class="timeline-content">
+            <div class="item-time"><%- date(post.date, "YYYY/M/D") %></div>
+            <a href="<%- url_for(post.path) %>">
+                <h3><%= post.title %></h3>
+            </a>
+            <div class="info">
+                <% if (post.categories && post.categories.data.length != 0) { %>
+                <span class="category">
+                    <a href="<%- url_for(post.categories.data[0].path) %>">
+                        <span class="icon">
+                            <svg class="fa-icon"><use xlink:href="#bookmark-solid"></use></svg>
+                        </span>
+                        <%= post.categories.data[0].name %>
+                    </a>
+                </span>
+                <% } %>
+                <% if (post.tags && post.tags.data.length != 0) { %>
+                <span class="tags">
+                    <span class="icon">
+                        <svg class="fa-icon"><use xlink:href="#tags-solid"></use></svg>
+                    </span>
+                    <% post.tags.data.forEach(data => { %>
+                    <span class="tag">
+                        <%
+                            const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
+                            let num = Math.floor(Math.random() * color.length);
+                        %>
+                        <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">
+                            <%= data.name %>
+                        </a>
+                    </span>
+                    <% }); %>
+                </span>
+                <% } %>
+            </div>
+        </div>
+    </div>
+    <% }); %>
+    <% if (theme.search.enable) { %>
+    <script src="<%- url_for("/js/searcher.js") %>"></script>
+    <script>searcher.init("<%- url_for(theme.search.path) %>");</script>
+    <% } %>
+</div>

package/layout/card.ejs

@@ -0,0 +1,35 @@
+<div id="card-div">
+    <div class="card-style" style="width: 300px">
+        <div class="avatar">
+            <img src="<%- theme.avatar %>" alt="avatar">
+        </div>
+        <div class="name">
+            <%= config.author %>
+        </div>
+        <div class="descriptions">
+            <% theme.card.description.forEach(desc => { %>
+            <div class="description">
+                <%- markdown(desc) %>
+            </div>
+            <% }); %>
+        </div>
+        <div class="icon-links">
+            <% Object.keys(theme.card.icon_links).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>
+            </span>
+            <% }); %>
+        </div>
+        <div class="friend-links">
+            <% Object.keys(theme.card.friend_links).forEach(key => { %>
+            <div class="friend-link">
+                <a href="<%- theme.card.friend_links[key] %>">
+                    <%= key %>
+                </a>
+            </div>
+            <% }); %>
+        </div>
+    </div>
+</div>

package/layout/categories.ejs

@@ -0,0 +1,62 @@
+<div id="archives">
+    <% let posts = []; %>
+    <div class="categories-tags">
+        <% site.categories.data.forEach(category => { %>
+        <%
+            const color = is_category(category.name)
+                ? ["background: linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
+                : ["background: #ffa2c4", "background: #00bcd4", "background: #03a9f4", "background: #00a596", "background: #ff7d73"];
+            let num = Math.floor(Math.random() * color.length);
+        %>
+        <span>
+            <a href="<%- url_for(category.path) %>" style="<%- color[num] %>">
+                <span class="icon">
+                    <svg class="fa-icon"><use xlink:href="#bookmark-solid"></use></svg>
+                </span>
+                <%= category.name %>
+            </a>
+        </span>
+        <% if (is_category(category.name)) { posts = category.posts; } %><% }); %>
+    </div>
+    <% posts.forEach(post => { %>
+    <div class="timeline">
+        <div class="timeline-tail"></div>
+        <div class="timeline-content">
+            <div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
+            <a href="<%- url_for(post.path) %>">
+                <h3><%= titlecase(post.title) %></h3>
+            </a>
+            <div class="info">
+                <% if (post.categories && post.categories.data.length != 0) { %>
+                <span class="category">
+                    <a href="<%- url_for(post.categories.data[0].path) %>">
+                        <span class="icon">
+                            <svg class="fa-icon"><use xlink:href="#bookmark-solid"></use></svg>
+                        </span>
+                        <%= post.categories.data[0].name %>
+                    </a>
+                </span>
+                <% } %>
+                <% if (post.tags && post.tags.data.length != 0) { %>
+                <span class="tags">
+                    <span class="icon">
+                        <svg class="fa-icon"><use xlink:href="#tags-solid"></use></svg>
+                    </span>
+                    <% post.tags.data.forEach(data => { %>
+                    <span class="tag">
+                        <%
+                            const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
+                            let num = Math.floor(Math.random() * color.length);
+                        %>
+                        <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">
+                            <%= data.name %>
+                        </a>
+                    </span>
+                    <% }); %>
+                </span>
+                <% } %>
+            </div>
+        </div>
+    </div>
+    <% }); %>
+</div>