hexo-theme-particlex 1.0.0

package/layout/current.ejs

@@ -0,0 +1,76 @@
+<div class="page-current">
+    <div class="prev">
+        <% if (page.current != 1) { %>
+        <a href="<%- url_for(page.prev_link) %>">
+            <span class="page-num">
+                <i class="fa-solid fa-caret-left fa-fw"></i>
+            </span>
+        </a>
+        <% } %>
+    </div>
+    <div class="page-index">
+        <% if (page.current != 1) { %>
+        <span>
+            <% if (page.current - 3 >= 1) { %>
+            <a href="<%- config.root %>"><span class="page-num">1</span></a>
+            <span class="page-omit">...</span>
+            <% } %>
+            <% if (page.current - 2 >= 1) { %>
+                <% if (page.current - 2 == 1) { %>
+                <a href="<%- config.root %>">
+                    <span class="page-num">1</span>
+                </a>
+                <% } %>
+                <% if (page.current - 2 != 1) { %>
+                <a href="<%- url_for("page/" + (page.current - 2)) %>">
+                    <span class="page-num">
+                        <%= page.current - 2 %>
+                    </span>
+                </a>
+                <% } %>
+            <% } %>
+            <a href="<%- url_for(page.prev_link) %>">
+                <span class="page-num">
+                    <%= page.prev %>
+                </span>
+            </a>
+        </span>
+        <% } %>
+        <span class="current">
+            <%= page.current %>
+        </span>
+        <% if (page.current != page.total) { %>
+        <span>
+            <a href="<%- url_for(page.next_link) %>">
+                <span class="page-num">
+                    <%= page.next %>
+                </span>
+            </a>
+            <% if (page.current + 2 <= page.total) { %>
+            <a href="<%- url_for("page/" + (page.current + 2)) %>">
+                <span class="page-num">
+                    <%= page.current + 2 %>
+                </span>
+            </a>
+            <% } %>
+            <% if (page.current + 3 <= page.total) { %>
+            <span class="page-omit">...</span>
+            <a href="<%- url_for("page/" + page.total) %>">
+                <span class="page-num">
+                    <%= page.total %>
+                </span>
+            </a>
+            <% } %>
+        </span>
+        <% } %>
+    </div>
+    <div class="next">
+        <% if (page.current != page.total) { %>
+        <a href="<%- url_for(page.next_link) %> ">
+            <span class="page-num">
+                <i class="fa-solid fa-caret-right fa-fw"></i>
+            </span>
+        </a>
+        <% } %>
+    </div>
+</div>

package/layout/footer.ejs

@@ -0,0 +1,25 @@
+<footer id="footer">
+    <div class="footer-wrap">
+        <div>
+            © <%= theme.footer.since %> - <%= date(Date.now(), "YYYY") %> <%= config.title %>
+            <span class="footer-icon">
+                <i class="fa-solid fa-font-awesome fa-fw"></i>
+            </span>
+            @<%= config.author %>
+        </div>
+        <div></div>
+        <div>Based on the <a href="https://hexo.io">Hexo Engine</a> & <a href="https://github.com/argvchs/hexo-theme-particlex">ParticleX Theme</a></div>
+        <% if (theme.footer.ICP.enable) { %>
+        <div>
+            备案号：
+            <% if (theme.footer.ICP.link) { %>
+            <a href="<%= theme.footer.ICP.link %>">
+            <%= theme.footer.ICP.code %>
+            </a>
+            <% } else { %>
+            <%= theme.footer.ICP.code %>
+            <% } %>
+        </div>
+        <% } %>
+    </div>
+</footer>

package/layout/index.ejs

@@ -0,0 +1,31 @@
+<div id="home-background" style="background-image: url(<%- theme.home_background %>)"></div>
+<div id="home-head">
+    <% if (theme.head_block_enable) { %>
+    <div id="home-info" class="home-info" @click="homeclick">
+        <span class="loop"></span>
+        <span class="loop"></span>
+        <span class="loop"></span>
+        <span class="loop"></span>
+        <span class="info">
+            <div class="wrap">
+                <h1><%= config.title %></h1>
+                <h3><%= config.subtitle %></h3>
+                <h5><%= config.description %></h5>
+            </div>
+        </span>
+    </div>
+    <% } %>
+</div>
+<div id="home-posts-wrap" class="<%- theme.card.enable ? "" : "home-posts-wrap-no-card" %>">
+    <div id="home-posts">
+        <div id="posts">
+            <%- include("posts") %>
+            <%- include("current") %>
+        </div>
+    </div>
+    <% if (theme.card.enable) { %>
+    <div id="home-card">
+        <%- include("card") %>
+    </div>
+    <% } %>
+</div>

package/layout/layout.ejs

@@ -0,0 +1,72 @@
+<%
+    let layout = "post";
+    if (is_home())
+        layout = "index";
+    else if (is_post())
+        layout = "post";
+    else if (is_category() || page.title == "categories")
+        layout = "categories";
+    else if (is_tag() || page.title == "tags")
+        layout = "tags";
+    else if (is_archive() || is_year() || is_month())
+        layout = "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() || is_year() || is_month())
+        title = "Archives | ";
+    title += config.title;
+    site.posts.data.sort((a, b) => b.date - a.date);
+%>
+<!DOCTYPE html>
+<html lang="<%- config.language %>">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
+        <title><%= titlecase(title) %></title>
+        <meta name="author" content="<%- config.author %>">
+        <meta name="description" content="<%- config.description %>">
+        <meta name="keywords" content="<%- config.keywords %>">
+        <link rel="icon" href="<%- theme.avatar %>">
+        <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>
+        <% 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">
+        <% } %>
+    </head>
+    <body>
+        <%- include("loading") %>
+        <div id="layout">
+            <i data-fa-symbol="calendar-solid" class="fa-solid fa-calendar fa-fw"></i>
+            <i data-fa-symbol="bookmark-solid" class="fa-solid fa-bookmark fa-fw"></i>
+            <i data-fa-symbol="tags-solid" class="fa-solid fa-tags fa-fw"></i>
+            <transition name="into">
+                <div v-show="showpage" style="display: -not-none">
+                    <div id="menushow">
+                        <%- include("menu") %>
+                    </div>
+                    <div id="main">
+                        <%- include(layout) %>
+                        <%- include("footer") %>
+                    </div>
+                </div>
+            </transition>
+            <div id="showimg">
+                <img id="showimg-content" alt="showimg">
+            </div>
+        </div>
+        <%- include("script") %>
+    </body>
+</html>

package/layout/loading.ejs

@@ -0,0 +1,13 @@
+<div id="loading" style="height:100vh;width:100vw;position:fixed;display:flex;z-index:2147483647;justify-content:space-between;background:#fff;transition:all 0.3s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none">
+    <div style="position:fixed;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center">
+        <div id="loadcontent" style="width:50vmin;height:50vmin;padding:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:solid 10px #a3ddfb;text-align:center">
+            <div>
+                <h2>LOADING...</h2>
+                <p style="word-break:keep-all">加载过慢请开启缓存(浏览器默认开启)</p>
+                <div>
+                    <img alt="loading" src="<%- url_for("/loading.gif") %>">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/layout/menu.ejs

@@ -0,0 +1,34 @@
+<nav id="menu">
+    <div class="desktop-menu">
+        <a href="<%- config.root %>">
+            <span class="title"><%- config.title %></span>
+        </a>
+        <% Object.keys(theme.menu).forEach(key => { %>
+        <a href="<%= url_for(theme.menu[key].src) %>">
+            <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
+            <span>&ensp;<%= key %></span>
+        </a>
+        <% }); %>
+    </div>
+    <div :class="'phone-menu ' + menushow" id="phone-menu">
+        <div class="curtain" @click="menushow = !menushow" v-show="menushow"></div>
+        <div class="title" @click="menushow = !menushow">
+            <i class="fa-solid fa-bars fa-fw"></i>
+            <span>&emsp;<%- config.title %></span>
+        </div>
+        <transition name="slide">
+        <div class="items" v-show="menushow">
+            <% Object.keys(theme.menu).forEach(key => { %>
+            <a href="<%= url_for(theme.menu[key].src) %>">
+                <div class="item">
+                    <div style="min-width: 20px; max-width: 50px; width: 10%">
+                        <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
+                    </div>
+                    <div style="min-width: 100px; max-width: 150%; width: 20%"><%= key %></div>
+                </div>
+            </a>
+            <% }); %>
+        </div>
+        </transition>
+    </div>
+</nav>

package/layout/post.ejs

@@ -0,0 +1,87 @@
+<div class="article">
+    <div>
+        <h1><%= titlecase(page.title) %> </h1>
+    </div>
+    <div class="info">
+        <span class="date">
+            <span class="icon">
+                <svg class="fa-icon"><use xlink:href="#calendar-solid"></use></svg>
+            </span>
+            <%= date(page.date, "YYYY/M/D") %>
+        </span>
+        <% if (page.categories && page.categories.data.length != 0) { %>
+        <span class="category">
+            <a href="<%- url_for(page.categories.data[0].path) %>">
+                <span class="icon">
+                    <svg class="fa-icon"><use xlink:href="#bookmark-solid"></use></svg>
+                </span>
+                <%= page.categories.data[0].name %>
+            </a>
+        </span>
+        <% } %>
+        <% if (page.tags && page.tags.data.length != 0) { %>
+        <span class="tags">
+            <span class="icon">
+                <svg class="fa-icon"><use xlink:href="#tags-solid"></use></svg>
+            </span>
+            <% page.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>
+    <% if (typeof page.password != "undefined" && theme.crypto.enable) { %>
+    <%
+        const CryptoJS = crypto();
+        function SHA(str) {
+            return CryptoJS.SHA256(str).toString(CryptoJS.enc.Base64);
+        }
+        function encrypt(str, key) {
+            return CryptoJS.AES.encrypt(str, SHA(key), {
+                mode: CryptoJS.mode.ECB,
+                padding: CryptoJS.pad.Pkcs7,
+            }).toString();
+        }
+    %>
+    <input class="ipt crypto" placeholder="文章被加密，请输入密码">
+    <div class="content" v-pre></div>
+    <script src="https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js"></script>
+    <script src="<%- url_for("/js/cryptor.js") %>"></script>
+    <script>cryptor.init("<%- encrypt(page.content, page.password.toString()) %>", "<%- SHA(page.content) %>")</script>
+    <% } else { %>
+    <div class="content" v-pre>
+        <%- page.content %>
+    </div>
+    <% } %>
+    <% if (theme.gitalk.enable) { %>
+    <link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.7.2/gitalk.min.css">
+    <div id="comment">
+        <div id="gitalk-container"></div>
+    </div>
+    <% } %>
+    <% if (theme.giscus.enable) { %>
+    <div id="comment">
+        <div id="giscus-container" class="giscus"></div>
+    </div>
+    <% } %>
+    <% if (theme.waline.enable) { %>
+    <link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.9.1/waline.min.css" />
+    <div id="comment">
+        <div id="waline-container"></div>
+    </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>
+    <% } %>
+</div>

package/layout/posts.ejs

@@ -0,0 +1,56 @@
+<% let current = (page.current - 1) * config.index_generator.per_page; %>
+<% site.posts.slice(0 + current, config.index_generator.per_page + current).forEach(post => { %>
+<div class="post">
+    <a href="<%- url_for(post.path) %>">
+        <h2 class="post-title"><%= titlecase(post.title) %></h2>
+    </a>
+    <div class="category-and-date">
+        <% if (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>
+        <% } %>
+        <span class="date">
+            <span class="icon">
+                <svg class="fa-icon"><use xlink:href="#calendar-solid"></use></svg>
+            </span>
+            <%- date(post.date, "YYYY/M/D") %>
+        </span>
+    </div>
+    <div class="excerpt">
+        <div class="content" v-pre>
+            <% if (typeof post.description !== "undefined") { %>
+            <%- markdown(post.description) %>
+            <% } else if (typeof post.excerpt !== "undefined") { %>
+            <%- post.excerpt %>
+            <% } else { %>
+            <%- post.content %>
+            <% } %>
+        </div>
+    </div>
+    <div class="post-tags">
+        <% if (post.tags.data.length != 0) { %>
+        <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>
+        <% }); %>
+    </div>
+    <a href="<%- url_for(post.path) %>" class="go-post">阅读全文</a>
+</div>
+<% }); %>

package/layout/script.ejs

@@ -0,0 +1,78 @@
+<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()) { %>
+    <% if (theme.gitalk.enable) { %>
+    <script src="https://cdn.staticfile.org/gitalk/1.7.2/gitalk.min.js"></script>
+    <script>
+        let clientID = "<%- theme.gitalk.clientID %>", clientSecret = "<%- theme.gitalk.clientSecret %>";
+        <% Object.keys(theme.gitalk.sites).forEach(key => { %>
+        if (window.location.host == "<%- key %>") {
+            clientID = "<%- theme.gitalk.sites[key].clientID %>";
+            clientSecret = "<%- theme.gitalk.sites[key].clientSecret %>";
+        }
+        <% }); %>
+        const gitalk = new Gitalk({
+            clientID: clientID,
+            clientSecret: clientSecret,
+            repo: "<%- theme.gitalk.repo %>",
+            owner: "<%- theme.gitalk.owner %>",
+            admin: ["<%- theme.gitalk.admin %>"],
+            language: "<%- theme.gitalk.language %>",
+            id: location.pathname,
+            distractionFreeMode: false,
+            <% if (theme.gitalk.proxy) { %>
+            proxy: "<%- theme.gitalk.proxy %>"
+            <% } %>
+        })
+        gitalk.render("gitalk-container")
+    </script>
+    <% } %>
+    <% if (theme.giscus.enable) { %>
+    <script
+        src="<%- theme.giscus.src %>"
+        data-repo="<%- theme.giscus.repo %>"
+        data-repo-id="<%- theme.giscus.repoID %>"
+        data-category="<%- theme.giscus.category %>"
+        data-category-id="<%- theme.giscus.categoryID %>"
+        data-mapping="<%- theme.giscus.mapping %>"
+        data-strict="<%- theme.giscus.strict %>"
+        data-reactions-enabled="<%- theme.giscus.reactionsEnabled %>"
+        data-emit-metadata="<%- theme.giscus.emitMetadata %>"
+        data-input-position="<%- theme.giscus.inputPosition %>"
+        data-theme="<%- theme.giscus.theme %>"
+        data-lang="<%- theme.giscus.lang %>"
+        async
+    ></script>
+    <% } %>
+    <% if (theme.waline.enable) { %>
+    <script src="https://cdn.staticfile.org/waline/2.9.1/waline.min.js"></script>
+    <script>
+        Waline.init({
+            el: "#waline-container",
+            serverURL: "<%- theme.waline.serverURL %>",
+            commentCount: <%- theme.waline.commentCount %>,
+            pageview: <%- theme.waline.pageview %>,
+            emoji: "<%- theme.waline.emoji %>".split(","),
+            meta: "<%- theme.waline.meta %>".split(","),
+            requiredMeta: "<%- theme.waline.requiredMeta %>".split(","),
+            lang: "<%- theme.waline.lang %>",
+            wordLimit: <%- theme.waline.wordLimit %>,
+            pageSize: "<%- theme.waline.pageSize %>",
+            login: "<%- theme.waline.login %>",
+            locale: <%- JSON.stringify(theme.waline.locale) %>
+        });
+    </script>
+    <% } %>
+    <% if (theme.twikoo.enable) { %>
+    <script>
+        twikoo.init({
+            el: "#twikoo-container",
+            envId: "<%- theme.twikoo.envId %>",
+            region: "<%- theme.twikoo.region %>",
+            path: <%- theme.twikoo.path %>,
+            lang: "<%- theme.twikoo.lang %>"
+        })
+    </script>
+    <% } %>
+<% } %>

package/layout/tags.ejs

@@ -0,0 +1,62 @@
+<div id="archives">
+    <% let posts = []; %>
+    <div class="categories-tags">
+        <% site.tags.data.forEach(tag => { %>
+        <%
+            const color = is_tag(tag.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(tag.path) %>" style="<%- color[num] %>">
+                <span class="icon">
+                    <svg class="fa-icon"><use xlink:href="#tags-solid"></use></svg>
+                </span>
+                <%= tag.name %>
+            </a>
+        </span>
+        <% if (is_tag(tag.name)) { posts = tag.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>

package/licenses/particle/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 korilin
+
+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/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "hexo-theme-particlex",
+  "version": "1.0.0",
+  "description": "A concise Hexo theme, based on Particle.",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/argvchs/hexo-theme-particlex.git"
+  },
+  "keywords": [
+    "hexo",
+    "hexo-theme",
+    "gitalk",
+    "twikoo",
+    "waline",
+    "giscus"
+  ],
+  "author": "Argvchs",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/argvchs/hexo-theme-particlex/issues"
+  },
+  "homepage": "https://github.com/argvchs/hexo-theme-particlex#readme",
+  "dependencies": {
+    "hexo-generator-search-lite": "^1.0.7",
+    "hexo-helper-crypto": "^1.0.4",
+    "hexo-renderer-babeljs": "^1.0.7",
+    "hexo-renderer-ejs": "^2.0.0"
+  }
+}