hexo-theme-particlex 2.4.11 → 2.5.1

package/README.md

@@ -66,12 +66,15 @@ theme: particlex
 ## 配置
 
 ```yaml
-avatar: # Avatar image
-headBlockEnable: true # Home page info block
-background: # Home page background image
-highlightStyle: github # Highlight style
+avatar:
+
+headBlockEnable: true
+
+background:
 ```
 
+其中 Background 可以是一个列表，打开时会随机加载一个背景
+
 -   导航栏
 
     为了方便，主题使用的图标是 Font Awesome 6 图标
@@ -81,27 +84,27 @@ highlightStyle: github # Highlight style
         Home:
             name: house
             theme: solid
-            src: /
+            link: /
         About:
             name: id-card
             theme: solid
-            src: /about
+            link: /about
         Archives:
             name: box-archive
             theme: solid
-            src: /archives
+            link: /archives
         Categories:
             name: bookmark
             theme: solid
-            src: /categories
+            link: /categories
         Tags:
             name: tags
             theme: solid
-            src: /tags
+            link: /tags
         # <name>:
         #     name: <icon-name>
         #     theme: <icon-theme>
-        #     src: <link-url>
+        #     link: <link-url>
     ```
 
 -   主页信息卡片
@@ -170,15 +173,36 @@ highlightStyle: github # Highlight style
             - default
     ```
 
--   渲染数学公式
+-   代码高亮
 
-    使用 KaTeX 渲染数学公式，默认关闭
+    使用 Highlight.js 代码高亮
+
+    样式可以在[这里](https://highlightjs.org/static/demo)选择，默认为 GitHub
+
+    ```yaml
+    highlight:
+        enable: false
+        style: github
+    ```
+
+-   数学渲染
+
+    使用 KaTeX 渲染数学公式
 
     ```yaml
     math:
         enable: false
     ```
 
+-   图片预览
+
+    简单的点击图片放大缩小的预览
+
+    ```yaml
+    preview:
+        enable: true
+    ```
+
 -   文章置顶
 
     在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数，越大越靠前，默认为 0
@@ -194,7 +218,7 @@ highlightStyle: github # Highlight style
 
 -   搜索
 
-    嵌入到 Archives 中的搜索，默认关闭
+    嵌入到 Archives 中的搜索
 
     目前只支持搜索文档标题（我太弱了）
 

package/_config.yml

@@ -10,10 +10,6 @@ headBlockEnable: true
 # Home page background image
 background:
 
-# Highlight style
-# https://highlightjs.org
-highlightStyle: github
-
 # ParticleX theme icon is adopts the Font Awesome 6
 # https://fontawesome.com/search
 
@@ -22,27 +18,27 @@ menu:
     Home:
         name: house
         theme: solid
-        src: /
+        link: /
     About:
         name: id-card
         theme: solid
-        src: /about
+        link: /about
     Archives:
         name: box-archive
         theme: solid
-        src: /archives
+        link: /archives
     Categories:
         name: bookmark
         theme: solid
-        src: /categories
+        link: /categories
     Tags:
         name: tags
         theme: solid
-        src: /tags
+        link: /tags
     # <name>:
     #     name: <icon-name>
     #     theme: <icon-theme>
-    #     src: <link-url>
+    #     link: <link-url>
 
 # Side info card
 card:
@@ -76,10 +72,20 @@ polyfill:
     features:
         - default
 
+# Highlight.js
+# https://highlightjs.org
+highlight:
+    enable: true
+    style: github
+
 # Rendering math with KaTeX
 math:
     enable: false
 
+# Image Preview
+preview:
+    enable: true
+
 # Article encryption
 crypto:
     enable: false

package/layout/archives.ejs

@@ -4,46 +4,53 @@
 %>
 <div id="archives">
     <% if (theme.search.enable) { %>
-    <div id="search-mask" style="z-index: <%- posts.length + 1 %>"></div>
-    <input id="search-bar" class="input" placeholder="搜索" style="z-index: <%- posts.length + 2 %>">
+    <input id="search-bar" class="input" placeholder="搜索" v-model="rawSearch" />
     <% } %>
-    <% posts.forEach((post, id) => { %>
-    <div class="timeline" style="z-index: <%- posts.length - id %>" data-title="<%- post.title.toLowerCase().replace(/\s+/gm, "") %>">
-        <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) %>">
+    <div id="timeline-wrap" ref="timeline">
+        <% posts.reverse().forEach((post, id) => { %>
+        <div class="timeline" data-title="<%- post.title.toLowerCase().replace(/\s+/gm, "") %>">
+            <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">
+                                <i class="fa-solid fa-bookmark fa-fw"></i>
+                            </span>
+                            <%= post.categories.data[0].name %>
+                        </a>
+                    </span>
+                    <% } %>
+                    <% if (post.tags && post.tags.data.length !== 0) { %>
+                    <span class="tags">
                         <span class="icon">
-                            <i class="fa-solid fa-bookmark fa-fw"></i>
+                            <i class="fa-solid fa-tags fa-fw"></i>
                         </span>
-                        <%= post.categories.data[0].name %>
-                    </a>
-                </span>
-                <% } %>
-                <% if (post.tags && post.tags.data.length !== 0) { %>
-                <span class="tags">
-                    <span class="icon">
-                        <i class="fa-solid fa-tags fa-fw"></i>
-                    </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>
+                        <% post.tags.data.forEach(data => { %>
+                        <span class="tag">
+                            <%
+                                const color = [
+                                    "color: #ffa2c4",
+                                    "color: #00bcd4",
+                                    "color: #03a9f4",
+                                    "color: #00a596",
+                                    "color: #ff7d73",
+                                ];
+                                let id = Math.floor(Math.random() * color.length);
+                            %>
+                            <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
+                        </span>
+                        <% }); %>
                     </span>
-                    <% }); %>
-                </span>
-                <% } %>
+                    <% } %>
+                </div>
             </div>
         </div>
+        <% }); %>
     </div>
-    <% }); %>
 </div>

package/layout/card.ejs

@@ -1,7 +1,7 @@
 <div id="card-div">
     <div class="card-style" style="width: 300px">
         <div class="avatar">
-            <img src="<%- url_for(theme.avatar) %>" alt="avatar">
+            <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
         </div>
         <div class="name"><%= config.author %></div>
         <div class="description">
@@ -12,7 +12,9 @@
             <% Object.keys(theme.card.iconLinks).forEach(key => { %>
             <span class="icon-link">
                 <a href="<%- url_for(theme.card.iconLinks[key].link) %>">
-                    <i class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"></i>
+                    <i
+                        class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"
+                    ></i>
                 </a>
             </span>
             <% }); %>

package/layout/categories.ejs

@@ -6,10 +6,10 @@
             const color = is_category(category.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
                 : ["#ffa2c4", "#00bcd4", "#03a9f4", "#00a596", "#ff7d73"];
-            let num = Math.floor(Math.random() * color.length);
+            let id = Math.floor(Math.random() * color.length);
         %>
         <span>
-            <a href="<%- url_for(category.path) %>" style="background: <%- color[num] %>">
+            <a href="<%- url_for(category.path) %>" style="background: <%- color[id] %>">
                 <span class="icon">
                     <i class="fa-solid fa-bookmark fa-fw"></i>
                 </span>
@@ -51,10 +51,16 @@
                     <% 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);
+                            const color = [
+                                "color: #ffa2c4",
+                                "color: #00bcd4",
+                                "color: #03a9f4",
+                                "color: #00a596",
+                                "color: #ff7d73",
+                            ];
+                            let id = Math.floor(Math.random() * color.length);
                         %>
-                        <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                        <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/layout/{script.ejs → comment.ejs}

@@ -1,9 +1,4 @@
-<script src="<%- url_for("/js/functions.js") %>"></script>
-<script src="<%- url_for("/js/particlex.js") %>"></script>
-<% if (type === "post" && page.comments) { %>
 <% if (theme.gitalk.enable) { %>
-<script src="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.css">
 <script>
     let clientID = "<%- theme.gitalk.clientID %>",
         clientSecret = "<%- theme.gitalk.clientSecret %>";
@@ -48,9 +43,6 @@
 ></script>
 <% } %>
 <% if (theme.waline.enable) { %>
-<script src="https://cdn.staticfile.org/waline/2.14.7/waline.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline.min.css">
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline-meta.min.css">
 <script>
     Waline.init({
         el: "#waline-container",
@@ -69,7 +61,6 @@
 </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",
@@ -80,4 +71,3 @@
     })
 </script>
 <% } %>
-<% } %>

package/layout/footer.ejs

@@ -1,19 +1,22 @@
 <footer id="footer">
-    <div class="footer-wrap">
+    <div id="footer-wrap">
         <div>
             &copy;
             <%= theme.footer.since %> - <%= date(Date.now(), "YYYY") %> <%= config.title %>
-            <span class="footer-icon">
+            <span id="footer-icon">
                 <i class="fa-solid fa-font-awesome fa-fw"></i>
             </span>
             &commat;<%= config.author %>
         </div>
-        <div>Based on the <a href="https://hexo.io">Hexo Engine</a> &amp; <a href="https://github.com/argvchs/hexo-theme-particlex">ParticleX Theme</a></div>
+        <div>
+            Based on the <a href="https://hexo.io">Hexo Engine</a> &amp;
+            <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>
+            <a href="<%- url_for(theme.footer.ICP.link) %>"><%= theme.footer.ICP.code %></a>
             <% } else { %>
             <%= theme.footer.ICP.code %>
             <% } %>

package/layout/import.ejs

@@ -0,0 +1,49 @@
+<script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.1/css/all.min.css" />
+<link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>" />
+<script> const mixins = {}; </script>
+<% if (theme.polyfill.enable) { %>
+<script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
+<% } %>
+<% if (theme.highlight.enable) { %>
+<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.highlight.style %>.min.css"
+/>
+<script src="<%- url_for("/js/lib/highlight.js") %>"></script>
+<% } %>
+<% 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" />
+<script src="<%- url_for("/js/lib/math.js") %>"></script>
+<% } %>
+<% if (theme.preview.enable) { %>
+<script src="<%- url_for("/js/lib/preview.js") %>"></script>
+<% } %>
+<% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
+<script src="https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js"></script>
+<script src="<%- url_for("/js/lib/crypto.js") %>"></script>
+<% } %>
+<% if (type === "archives" && theme.search.enable) { %>
+<script src="<%- url_for("/js/lib/search.js") %>"></script>
+<% } %>
+<% if (type === "post" && page.comments) { %>
+<% if (theme.gitalk.enable) { %>
+<script src="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.css" />
+<% } %>
+<% if (theme.waline.enable) { %>
+<script src="https://cdn.staticfile.org/waline/2.14.7/waline.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline.min.css" />
+<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline-meta.min.css" />
+<% } %>
+<% if (theme.twikoo.enable) { %>
+<script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
+<% } %>
+<% } %>
+<% if (type === "index") %>
+<script src="<%- url_for("/js/lib/home.js") %>"></script>
+<%  %>
+<link rel="stylesheet" href="<%- url_for("/css/main.css") %>" />

package/layout/index.ejs

@@ -1,7 +1,7 @@
 <div id="home-head">
-    <div id="home-background" style="background-image: url(<%- theme.background %>)"></div>
+    <div id="home-background" ref="homeBackground" data-image="<% url_for(theme.background) %>"></div>
     <% if (theme.headBlockEnable) { %>
-    <div id="home-info" @click="homeclick">
+    <div id="home-info" @click="homeClick">
         <span class="loop"></span>
         <span class="loop"></span>
         <span class="loop"></span>
@@ -16,7 +16,7 @@
     </div>
     <% } %>
 </div>
-<div id="home-posts-wrap" class="<%- theme.card.enable ? "" : "home-posts-wrap-no-card" %>">
+<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") %>

package/layout/layout.ejs

@@ -24,45 +24,44 @@
 <!DOCTYPE html>
 <html lang="<%- config.language %>">
     <head>
-        <meta charset="UTF-8">
+        <meta charset="UTF-8" />
         <title><%= title %></title>
-        <meta name="author" content="<%- config.author %>">
-        <meta name="description" content="<%- config.description %>">
-        <meta name="keywords" content="<%- config.keywords %>">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
-        <link rel="icon" href="<%- url_for(theme.avatar) %>">
-        <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">
-        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.1/css/all.min.css">
-        <% if (theme.polyfill.enable) { %>
-        <script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features.join(",") %>"></script>
-        <% } %>
-        <% 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">
-        <% } %>
-        <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
-        <script src="https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js"></script>
-        <% } %>
-        <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>">
-        <link rel="stylesheet" href="<%- url_for("/css/particlex.css") %>">
+        <meta name="author" content="<%- config.author %>" />
+        <meta name="description" content="<%- config.description %>" />
+        <meta name="keywords" content="<%- config.keywords %>" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+        <link rel="icon" href="<%- url_for(theme.avatar) %>" />
+        <%- partial("import", { type }) %>
     </head>
     <body>
-        <%- partial("loading") %>
         <div id="layout">
+            <transition name="fade">
+            <div id="loading" v-show="loading">
+                <div id="loading-circle">
+                    <h2>LOADING</h2>
+                    <p>加载过慢请开启缓存&ensp;浏览器默认开启</p>
+                    <img src="<%- url_for("/images/loading.gif") %>" />
+                </div>
+            </div>
+            </transition>
             <transition name="into">
-            <div id="main" v-show="showpage" style="display: -not-none">
+            <div id="main" v-show="!loading">
                 <%- partial("menu") %>
                 <%- partial(type) %>
                 <%- partial("footer") %>
             </div>
             </transition>
-            <div id="showimg">
-                <img id="showimg-content">
+            <% if (theme.preview.enable) { %>
+            <transition name="fade">
+            <div id="preview" ref="preview" v-show="previewShow">
+                <img id="preview-content" ref="previewContent" />
             </div>
+            </transition>
+            <% } %>
         </div>
-        <%- partial("script", { type }) %>
+        <script src="<%- url_for("/js/main.js") %>"></script>
+        <% if (type === "post" && page.comments) { %>
+        <%- partial("comment") %>
+        <% } %>
     </body>
 </html>

package/layout/menu.ejs

@@ -1,25 +1,25 @@
-<nav id="menu">
+<nav id="menu" ref="menu">
     <div class="desktop-menu">
         <a class="title" href="<%- config.root %>">
             <span><%= config.title.toUpperCase() %></span>
         </a>
         <% Object.keys(theme.menu).forEach(key => { %>
-        <a href="<%- url_for(theme.menu[key].src) %>">
+        <a href="<%- url_for(theme.menu[key].link) %>">
             <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
             <span>&ensp;<%= key %></span>
         </a>
         <% }); %>
     </div>
-    <div :class="&quot;phone-menu &quot; + menushow" id="phone-menu">
-        <div class="curtain" @click="menushow = !menushow" v-show="menushow"></div>
-        <div class="title" @click="menushow = !menushow">
+    <div id="mobile-menu">
+        <div class="curtain" v-show="showMenu" @click="showMenu = !showMenu"></div>
+        <div class="title" @click="showMenu = !showMenu">
             <i class="fa-solid fa-bars fa-fw"></i>
             <span>&emsp;<%= config.title.toUpperCase() %></span>
         </div>
         <transition name="slide">
-        <div class="items" v-show="menushow">
+        <div class="items" v-show="showMenu">
             <% Object.keys(theme.menu).forEach(key => { %>
-            <a href="<%- url_for(theme.menu[key].src) %>">
+            <a href="<%- url_for(theme.menu[key].link) %>">
                 <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>

package/layout/post.ejs

@@ -1,6 +1,6 @@
 <div class="article">
     <div>
-        <h1><%= page.title %> </h1>
+        <h1><%= page.title %></h1>
     </div>
     <div class="info">
         <span class="date">
@@ -27,10 +27,16 @@
             <% 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);
+                    const color = [
+                        "color: #ffa2c4",
+                        "color: #00bcd4",
+                        "color: #03a9f4",
+                        "color: #00a596",
+                        "color: #ff7d73",
+                    ];
+                    let id = Math.floor(Math.random() * color.length);
                 %>
-                <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
             </span>
             <% }); %>
         </span>
@@ -39,15 +45,25 @@
     <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
     <%
         const CryptoJS = crypto();
-        function sha(str) {
-            return CryptoJS.SHA256(str).toString();
+        function SHA(word) {
+            return CryptoJS.SHA256(word).toString();
         }
-        function encrypt(str, key) {
-            return CryptoJS.AES.encrypt(str, key).toString();
+        function encrypt(word, secret) {
+            return CryptoJS.AES.encrypt(word, secret).toString();
         }
     %>
-    <input id="crypto" class="input" placeholder="文章被加密，请输入密码" data-encrypt="<%- encrypt(page.content, page.secret) %>" data-shasum="<%- sha(page.content) %>">
-    <div class="content" v-pre style="opacity: 0"></div>
+    <input
+        id="crypto"
+        class="input"
+        ref="crypto"
+        placeholder="文章被加密，请输入密码"
+        data-encrypted="<%- encrypt(page.content, page.secret) %>"
+        data-shasum="<%- SHA(page.content) %>"
+        v-model="crypto"
+    />
+    <transition name="fade">
+    <div class="content" ref="content" v-show="check"></div>
+    </transition>
     <% } else { %>
     <div class="content" v-pre>
         <%- page.content %>

package/layout/posts.ejs

@@ -61,10 +61,16 @@
         <% 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);
+                const color = [
+                    "color: #ffa2c4",
+                    "color: #00bcd4",
+                    "color: #03a9f4",
+                    "color: #00a596",
+                    "color: #ff7d73",
+                ];
+                let id = Math.floor(Math.random() * color.length);
             %>
-            <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">
+            <a href="<%- url_for(data.path) %>" style="<%- color[id] %>">
                 <%= data.name %>
             </a>
         </span>