feat(category tag): add support to category tag in index and post page

Feat: 1. Now category tag can be displayed in index and post page. 2. Set `comments: false` to disable comment in specified post. 3. Set `sticky: ${num}` to show top article in index page. Change: 1. Scroll switch point is selected between the top image and the container. Fix: 1. Fix suddenly disappear of sidebar, caused by quick click on open menu button. 2. Fix known style sheet issues. Chore: 1. Use `const` to make JavaScript code more clever. 2. Improve mobile experience. 3. Update docs.
fi3ework · Jul 25, 2021 · 17ee2b3 · 17ee2b3
1 parent cf7a796
commit 17ee2b3
Show file tree

Hide file tree

Showing 32 changed files with 259 additions and 173 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ npm install hexo-wordcount --save
 git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1
 ```
 
-### 设置 Hexo 博客主题为 Archer
+### 设置 Hexo 主题为 Archer
 
 修改 Hexo 根目录下的 `_config.yml` 文件中的 `theme` 字段为 `archer`：
 
@@ -71,13 +71,13 @@ jsonContent:
     tags: true
 ```
 
-### 启动博客预览
+### 启动本地预览
 
-在 Hexo 根目录下执行 `hexo s`，即可启动本地博客预览。
+在 Hexo 根目录下执行 `hexo s`，即可启动本地预览。
 
 ## 主题配置
 
-现在您的博客项目的目录目录结构应当如下：
+现在您的项目目录结构应当如下所示：
 
 ``` bash
 . # 「Hexo 根目录」
@@ -102,6 +102,22 @@ jsonContent:
 
 **警告**：不要把自己 api-token 之类的私密信息添加到配置中，更不要推送到公共仓库。
 
+可选的 Archer 主题配置内容如下：
+
+- [配置 About 页面](#配置-about-页面)
+- [配置 404 页面](#配置-404-页面)
+- [启用 RSS 订阅](#启用-rss-订阅)
+- [启用 Mermaid](#启用-mermaid)
+- [启用 LaTeX 数学公式](#启用-latex-数学公式)
+- [自定义单独文章页头图](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E7%AB%A0%E9%A1%B5%E5%A4%B4%E5%9B%BE)
+- [将 Unsplash 的随机图片作为头图](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%B0%86-Unsplash-%E9%9A%8F%E6%9C%BA%E5%9B%BE%E7%89%87%E4%BD%9C%E4%B8%BA%E5%A4%B4%E5%9B%BE)
+- [自定义文章在首页的摘要](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E7%AB%A0%E5%9C%A8%E9%A6%96%E9%A1%B5%E7%9A%84%E6%91%98%E8%A6%81)
+- [自定义主题颜色](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2)
+- [切换代码配色方案](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%88%87%E6%8D%A2%E4%BB%A3%E7%A0%81%E9%85%8D%E8%89%B2%E6%96%B9%E6%A1%88)
+- [设置文章版权信息](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%AE%BE%E7%BD%AE%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF)
+- [启用 Algolia 搜索](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Algolia-%E6%90%9C%E7%B4%A2)
+- [切换为英文界面](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%8B%B1%E6%96%87%E7%95%8C%E9%9D%A2)
+
 ### 配置 About 页面
 
 在 Hexo 根目录下执行：
@@ -198,7 +214,7 @@ mermaid:
     ```
 ```
 
-> ❗️❗️❗️ 注意：如果您需要使用**类图**，请编辑您 Hexo 根目录下的 `_config.yml` 文件，设置 `external_link: false`。请确保这个设置对您原来的博客功能没有影响，这是 Hexo 本身的 bug。
+> ❗️❗️❗️ 注意：如果您需要使用**类图**，请编辑您 Hexo 根目录下的 `_config.yml` 文件，设置 `external_link: false`。请确保这个设置对您原来的页面功能没有影响，这是 Hexo 本身的 bug。
 
 ## 启用 LaTeX 数学公式
 
@@ -228,7 +244,7 @@ math:
     version: 3.2.0
 ```
 
-博客默认不启用 MathJax 渲染 LaTeX 数学公式，因此需要在文章的 Front-matter 中添加 `mathjax: true` 字段。
+Archer 默认不启用 MathJax 渲染 LaTeX 数学公式，因此需要在文章的 Front-matter 中添加 `mathjax: true` 字段。
 
 测试是否启用成功，您可以在这篇文章中添加下面的内容：
 
@@ -244,17 +260,37 @@ z=\dfrac{3\pi}{2}(1+2t)\sin(\dfrac{3\pi}{2}(1+2t)), &
 \end{equation}
 ```
 
-### 其它可选配置
+## 文章撰写增强
 
-- [自定义单独文章页头图](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E7%AB%A0%E9%A1%B5%E5%A4%B4%E5%9B%BE)
-- [将 Unsplash 的随机图片作为头图](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%B0%86-Unsplash-%E9%9A%8F%E6%9C%BA%E5%9B%BE%E7%89%87%E4%BD%9C%E4%B8%BA%E5%A4%B4%E5%9B%BE)
-- [自定义文章在首页的摘要](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E7%AB%A0%E5%9C%A8%E9%A6%96%E9%A1%B5%E7%9A%84%E6%91%98%E8%A6%81)
-- [自定义主题颜色](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2)
-- [切换代码配色方案](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%88%87%E6%8D%A2%E4%BB%A3%E7%A0%81%E9%85%8D%E8%89%B2%E6%96%B9%E6%A1%88)
-- [置顶文章](https://github.com/hexojs/hexo-generator-index)
-- [设置文章版权信息](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%AE%BE%E7%BD%AE%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF)
-- [启用 Algolia 搜索](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Algolia-%E6%90%9C%E7%B4%A2)
-- [切换为英文界面](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%8B%B1%E6%96%87%E7%95%8C%E9%9D%A2)
+Archer 主题为您撰写的文章提供了一些增强的展示内容，这需要您手动在文章的 Front-matter 处配置。包括如下：
+
+- [置顶文章](#置顶文章)
+
+### 置顶文章
+
+Archer 主题在主页为置顶的文章显示一个小标记。
+
+在默认情况下，Hexo 使用 [`hexo-generator-index`](https://github.com/hexojs/hexo-generator-index) 生成文章索引。假如您需要置顶某篇文章，只需要在它的 Front-matter 处添加 `sticky` 属性即可：
+
+```md
+---
+title: Hello World
+date: 2013/7/13 20:46:25
+sticky: 100
+---
+```
+
+您可以在 Hexo 根目录下的 `package.json` 文件中找到您是否使用 `hexo-generator-index` 插件作为项目依赖。
+
+假如您使用其它的插件生成索引，也可以手动添加 `top` 属性以显示小标记：
+
+```md
+---
+title: Hello World
+date: 2013/7/13 20:46:25
+top: true
+---
+```
 
 ## 更新主题
 

diff --git a/_config.yml b/_config.yml
@@ -65,6 +65,8 @@ read_progress_color: default
 post_banner_theme: default
 # Stick profile info
 profile_sticky: false
+# Show categories info in index and post page
+show_categories: false
 
 # ========== Search ========== #
 algolia_search:

diff --git a/layout/_partial/base-title-tags.ejs b/layout/_partial/base-title-tags.ejs
@@ -1,5 +1,18 @@
 <div class= <%- className %> >
+    <% if (theme.show_categories && currPost.categories.length) { %>
+        <% let postCategory = '' %>
+        <% currPost.categories.forEach((c) => { %>
+            <% postCategory += `${c.name}/` %>
+        <% }) %>
+        <% postCategory = postCategory.slice(0, -1) %>
+        <span class="post-category" data-categories="<%- postCategory %>"">
+            <i class="far fa-folder post-category-icon"></i>
+            <span class="post-category-text">
+                <%- postCategory %>
+            </span>
+        </span>
+    <% } %>
     <% currPost.tags.forEach(function (tag, i) { %>
-        <a class="post-tag" href="javascript:void(0);" data-tags = "<%- tag.name %>"><%- tag.name %></a>
+        <a class="post-tag" href="javascript:void(0);" data-tags="<%- tag.name %>"><%- tag.name %></a>
     <% }) %>
 </div>
diff --git a/layout/_partial/sidebar/sidebar-archives.ejs b/layout/_partial/sidebar/sidebar-archives.ejs
@@ -43,7 +43,8 @@
             <% toCloseUl = 1; %>
         <% } %>
         <li class="archive-post-item">
-            <span class="archive-post-date"><%- date(post.date, "MM/DD") %></span><a class="archive-post-title" href= "<%- post.link %>" ><%- post.title || '[Untitled Post]' %></a>
+            <span class="archive-post-date"><%- date(post.date, "MM/DD") %></span>
+            <a class="archive-post-title" href="<%- post.link %>"><%- post.title || '[Untitled Post]' %></a>
         </li>
     <% }) %>
     </div>

diff --git a/layout/_partial/sidebar/sidebar-categories.ejs b/layout/_partial/sidebar/sidebar-categories.ejs
@@ -1,7 +1,10 @@
 <div class="sidebar-panel-categories">
     <div class="sidebar-categories-name">
     <% site.categories.each(function (category) { %>
-        <span class="sidebar-category-name" data-categories="<%- category.slug %>"><span class="iconfont-archer">&#xe60a;</span><%- category.slug %></span>
+        <span class="sidebar-category-name" data-categories="<%- category.slug %>">
+            <span class="iconfont-archer">&#xe60a;</span>
+            <%- category.slug %>
+        </span>
     <% }) %>
     </div>
     <div class="iconfont-archer sidebar-categories-empty">&#xe678;</div>

diff --git a/layout/_partial/sidebar/sidebar-tags.ejs b/layout/_partial/sidebar/sidebar-tags.ejs
@@ -1,36 +1,15 @@
 <div class="sidebar-panel-tags">
     <div class="sidebar-tags-name">
         <% site.tags.each(function (tag) { %>
-            <span class="sidebar-tag-name" data-tags="<%- tag.name %>"><span class="iconfont-archer">&#xe606;</span><%- tag.name %></span>
+            <span class="sidebar-tag-name" data-tags="<%- tag.name %>">
+                <span class="iconfont-archer">&#xe606;</span>
+                <%- tag.name %>
+            </span>
         <% }) %>
     </div>
     <div class="iconfont-archer sidebar-tags-empty">&#xe678;</div>
     <div class="tag-load-fail" style="display: none; color: #ccc; font-size: 0.6rem;">
-        缺失模块。<br/>
-        1、请确保node版本大于6.2<br/>
-        2、在博客根目录（注意不是archer根目录）执行以下命令：<br/>
-        <span style="color: #f75357; font-size: 1rem; line-height: 2rem;">npm i hexo-generator-json-content --save</span><br/>
-        3、在根目录_config.yml里添加配置：
-        <pre style="color: #787878; font-size: 0.6rem;">
-            jsonContent:
-            meta: false
-            pages: false
-            posts:
-                title: true
-                date: true
-                path: true
-                text: false
-                raw: false
-                content: false
-                slug: false
-                updated: false
-                comments: false
-                link: false
-                permalink: false
-                excerpt: false
-                categories: true
-                tags: true
-        </pre>
+        缺失模块，请参考主题文档进行安装配置：https://github.com/fi3ework/hexo-theme-archer#%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98
     </div> 
     <div class="sidebar-tags-list"></div>
 </div>
diff --git a/layout/index.ejs b/layout/index.ejs
@@ -1,7 +1,7 @@
 <main class="main index-page">
     <% page.posts.each(function (_post) { %>
-        <% let truncateLength = typeof theme.truncate_length === 'number' ? theme.truncate_length : 300 %>
-        <% let _content = null %>
+        <% const truncateLength = typeof theme.truncate_length === 'number' ? theme.truncate_length : 300 %>
+        <% let _content = undefined %>
         <% if(!!_post.excerpt) { %>
             <% _content = _post.excerpt %>
         <% } else if (!!_post.abstract) { %>
@@ -11,24 +11,24 @@
         <% } %>
         <article class="index-post">
             <a class="abstract-title" href="<%- url_for(_post.path) %>">
-                <% if(_post.top) { %>
-                    <span class="stick-top iconfont-archer">&#xe63d;</span>
+                <% if(_post.top || _post.sticky) { %>
+                    <span class="iconfont-archer stick-top">&#xe63d;</span>
                 <% } %>
-                <span><%= _post.title || '[Untitled Post]' %></span>
+                <span class="abstract-title-text"><%= _post.title || '[Untitled Post]' %></span>
             </a>
             <div class="abstract-content">
                 <%- _content %>
             </div>
             <div class="abstract-post-meta">
-                <!-- date  -->
+                <!-- date -->
                 <div class="abstract-date">
                     <span class="abstract-calander iconfont-archer">&#xe676;</span><span class="abstract-time"><%- date(_post.date, "YYYY/MM/DD") %></span>
                 </div>
-                <!-- tags  -->
-                <% if (_post.tags.length) { %>
+                <!-- tags -->
+                <% if (_post.tags.length || (theme.show_categories && _post.categories.length)) { %>
                     <%- partial('./_partial/base-title-tags', {
-                        currPost :_post,
-                        className : 'abstract-tags'
+                        currPost: _post,
+                        className: 'abstract-tags'
                     }) %>
                 <% } %>
             </div>

diff --git a/layout/post.ejs b/layout/post.ejs
@@ -32,17 +32,19 @@
         </li>
     </ul>
     <!-- comment -->
-    <div class="post-comment">
-        <%- partial('_partial/comment/livere') %>
-        <%- partial('_partial/comment/disqus') %>
-        <%- partial('_partial/comment/gitment') %>
-        <%- partial('_partial/comment/gitalk') %>
-        <%- partial('_partial/comment/utteranc') %>
-        <!-- partial('_partial/comment/changyan') -->
-        <%- partial('_partial/comment/youyan') %>
-        <%- partial('_partial/comment/custom') %>
-        <%- partial('_partial/comment/valine') %>
-    </div>
+    <% if (page.comments !== false) { %> 
+        <div class="post-comment">
+            <%- partial('_partial/comment/livere') %>
+            <%- partial('_partial/comment/disqus') %>
+            <%- partial('_partial/comment/gitment') %>
+            <%- partial('_partial/comment/gitalk') %>
+            <%- partial('_partial/comment/utteranc') %>
+            <!-- partial('_partial/comment/changyan') -->
+            <%- partial('_partial/comment/youyan') %>
+            <%- partial('_partial/comment/custom') %>
+            <%- partial('_partial/comment/valine') %>
+        </div>
+    <% } %>
     <!-- timeliness note -->
     <!-- idea from: https://hexo.fluid-dev.com/posts/hexo-injector/#%E6%96%87%E7%AB%A0%E6%97%B6%E6%95%88%E6%80%A7%E6%8F%90%E7%A4%BA -->
     <% if (theme.outdated_threshold !== undefined && theme.outdated_threshold.enable && (!theme.outdated_threshold.specify_article || page.timeliness)) { %>