Merge pull request #367 from fi3ework/dev

fix(word-count): disable word count function by default

.gitignore

@@ -3,6 +3,7 @@ node_modules
 _config_.yml
 _config__.yml
 .jsbeautifyrc
+yarn.lock
 
 # Created by https://www.gitignore.io/api/vim
 

README.md

@@ -17,43 +17,27 @@
 
 - 本主题受 [yilia](https://github.com/litten/hexo-theme-yilia) 主题和 [huxpro](https://github.com/Huxpro/huxpro.github.io) 主题的启发，结合了前者的 sidebar 设计及后者的 UI 设计。通过 sidebar 能够快速执行 archive, tag 以及 categories 导航。
 - 兼容性：现代浏览器及 IE10+。
-- 有任何使用上的问题欢迎 **发起 issue**。
+- 有任何使用上的问题欢迎[发起 issue](https://github.com/fi3ework/hexo-theme-archer/issues/new/choose)。
 
-## 安装主题
+## 快速安装
 
-### 安装主题依赖
-
-Archer 主题依赖于 `hexo-generator-json-content` 和 `hexo-wordcount`，因此需要在 Hexo 根目录执行以下命令：
-
-``` bash
-npm install hexo-generator-json-content --save
-npm install hexo-wordcount --save
-```
-
-### 拉取主题文件
-
-依赖安装完成后，拉取 Archer 主题到 `themes/archer` 目录，在 Hexo 根目录执行下面的命令：
+拉取 Archer 主题文件到 `themes/archer` 目录：
 
 ``` bash
 git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1
 ```
 
-如果您没有安装 Git 工具，也可以在 Hexo 根目录下手动创建 `themes/archer` 文件夹，然后将此仓库的源码放入该目录下。
-
-> 仓库的 `dev` 分支包含正在开发中的主题代码，如果您是**进阶开发者**或追新用户，能够承受代码的不足之处和低稳定性，并乐于关注我们开发的最新进展，也可以使用此分支：
-> `git clone -b dev https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1`
+> 如果您没有安装 [Git](https://git-scm.com/) 工具，也可以在 Hexo 根目录下手动创建 `themes/archer` 文件夹，然后将此仓库的所有代码下载到该目录下。
 
-### 设置 Hexo 主题为 Archer
+> 仓库的 [`dev` 分支](https://github.com/fi3ework/hexo-theme-archer/tree/dev)包含正在开发中的主题代码，如果您是**进阶开发者**或追新用户，能够承受代码的不足之处和低稳定性，并乐于关注我们开发的最新进展，可以品尝此分支：`git clone -b dev https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1`
 
-修改 Hexo 根目录下的 `_config.yml` 文件中的 `theme` 字段为 `archer`：
+Archer 主题依赖于 `hexo-generator-json-content` 插件生成侧边栏索引，需要在 Hexo 根目录安装并配置此插件：
 
-``` yaml
-theme: archer
+``` bash
+npm install hexo-generator-json-content
 ```
 
-### 启用 Archer 侧边栏
-
-在 Hexo 根目录下的 `_config.yml` 中添加以下字段：
+在 `_config.yml` 中添加如下字段：
 
 ``` yaml
 jsonContent:
@@ -76,11 +60,15 @@ jsonContent:
     tags: true
 ```
 
-### 启动本地预览
+最后配置 `_config.yml`，设置 Hexo 主题为 Archer：
 
-在 Hexo 根目录下执行 `hexo s`，即可启动本地预览。
+``` yaml
+theme: archer
+```
+
+您成功设置了博客主题 🎇！现在就执行 `hexo s` 命令，在本地预览主题效果吧。
 
-## 主题配置
+## 主题个性化配置
 
 现在您的项目目录结构应当如下所示：
 
@@ -89,26 +77,22 @@ jsonContent:
 ├── themes
 │   └── archer # 「Archer 主题目录」
 │       └── _config.yml # Archer 主题配置文件
-│
 └── _config.yml # Hexo 配置文件
 ```
 
 您可以通过 `hexo -v` 命令，或在 Hexo 根目录下的 `package.json` 中查看您当前使用的 Hexo 版本。
 
-如果 Hexo 版本 >= 5.0.0，建议复制 Archer 主题目录下的 [`_config.yml`](./_config.yml) 到 Hexo 根目录，并命名为 `_config.archer.yml`，接下来修改此文件即可对主题进行配置。现在，您可以删除 Archer 主题目录下的 `_config.yml` 文件，或将它重命名为 `_config.yml.template`，避免配置合并或冲突。
-
-如果 Hexo 版本 >= 2.8.2，修改 Archer 主题目录下的 `_config.yml` 文件即可对主题进行配置。
+- 如果 **Hexo 版本 >= 5.0.0**，建议复制 Archer 主题目录下的 [`_config.yml`](./_config.yml) 到 Hexo 根目录，并命名为 `_config.archer.yml`，接下来修改此文件即可对主题进行配置。现在，您可以删除 Archer 主题目录下的 `_config.yml` 文件，或将它重命名为 `_config.yml.template`，避免配置合并或冲突。
+- 如果 **Hexo 版本 >= 2.8.2**，修改 Archer 主题目录下的 `_config.yml` 文件即可对主题进行配置。
+- 如果 **Hexo 版本 < 2.8.2**，请参考 Archer 主题目录下的 `_config.yml` 中的配置，在 Hexo 根目录下的 `_config.yml` 添加相应字段即可进行配置。
 
-如果 Hexo 版本 < 2.8.2，请参考 Archer 主题目录下的 `_config.yml` 中的配置，在 Hexo 根目录下的 `_config.yml` 添加相应字段即可进行配置。
-
-上面三种情况的 Archer 主题配置文件 `_config.archer.yml` 或 `_config.yml`，为了与 Hexo 根目录下的全局配置文件 `_config.yml` 作区分，在后面的介绍中统称为「Archer 主题目录下的 `_config.yml`」。
-
-这个[维基页面](https://github.com/fi3ework/hexo-theme-archer/wiki/Archer-%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%E4%B8%AD%E6%96%87%E5%8F%82%E8%80%83)包含了主题配置属性的中文参考。
-
-**警告**：不要把自己 api-token 之类的私密信息添加到配置中，更不要推送到公共仓库。
+上面三种情况的 Archer 主题配置文件 `_config.archer.yml` 或 `_config.yml`，为了与 Hexo 根目录下的全局配置文件 `_config.yml` 作区分，在后面的介绍中统称为 **Archer 主题目录下的 `_config.yml`**。
 
 可选的 Archer 主题配置内容如下：
 
+> 这个[维基页面](https://github.com/fi3ework/hexo-theme-archer/wiki/Archer-%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%E4%B8%AD%E6%96%87%E5%8F%82%E8%80%83)包含了主题配置属性的完整中文参考。
+
+- [启用字数统计](#启用字数统计)
 - [配置 About 页面](#配置-about-页面)
 - [配置 404 页面](#配置-404-页面)
 - [启用 RSS 订阅](#启用-rss-订阅)
@@ -124,39 +108,53 @@ jsonContent:
 - [启用 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)
 
+### 启用字数统计
+
+在 Hexo 根目录下安装依赖插件：
+
+```bash
+npm install hexo-wordcount
+```
+
+配置 Archer 主题目录下的 `_config.yml` 启用字数统计能力：
+
+```yml
+reading_info: true
+```
+
+现在，字数统计信息将显示在博客页面的标题下方。
+
 ### 配置 About 页面
 
-在 Hexo 根目录下执行：
+在 Hexo 根目录下执行如下命令：
 
 ``` bash
 hexo new page "about"
 ```
 
-在 Hexo 根目录下 `source/about/index.md` 文件中添加下面的字段：
+在 Hexo 根目录下 `source/about/index.md` 中添加以下内容：
 
 ``` markdown
 ---
-title: 自我介绍标题
+title: 您的自我介绍标题
 layout: about
 ---
-自我介绍正文
+您的自我介绍正文
 ```
 
-其中 Front-matter 的 `layout: about` 字段为**必要的**且**不可修改**为其它值；Front-matter 的 `title` 和正文内容由您自定义编写。
+其中 `layout: about` 字段为**必要的**且**不可修改**为其它值。
 
-您可以修改 Archer 主题目录下的 `_config.yml` 文件的 `about` 字段：
+配置 Archer 主题目录下的 `_config.yml` 以开启 About 页面：
 
 ``` yml
 about:
   enable: true
   image: '/intro/about-page.jpg'
 ```
 
-其中，如果设置 `enable: false`，则不显示 About 页面；`image` 为 About 页面 Banner 图像地址，若不填写则默认使用首页的 Banner 图像。
-
 ### 配置 404 页面
 
-在 Hexo 根目录下 `source` 中创建 `404.md` 文件，添加字段如下：
+在 Hexo 根目录下 `source` 中创建 `404.md`，添加字段如下：
 
 ``` markdown
 ---
@@ -168,21 +166,21 @@ description: "May the Force be with you :&#41;"
 
 其中 Front-matter 的 `layout: 404` 字段为**必要的**且**不可修改**为其它值，`title` 字段为您自定义的标题，`description` 字段为 404 页面的自定义描述。
 
-您可以配置 Archer 主题目录下的 `_config.yml` 文件的 `_404_image` 字段来修改 404 页面的背景图片：
+您可以通过配置 Archer 主题目录下的 `_config.yml` 来修改 404 页面的背景图片：
 
 ``` yml
 _404_image: '/intro/404-bg.jpg'
 ```
 
 ### 启用 RSS 订阅
 
-在 Hexo 根目录下执行：
+在 Hexo 根目录下安装依赖插件：
 
 ``` bash
 npm install hexo-generator-feed --save
 ```
 
-修改 Archer 主题目录下的 `_config.yml` 文件中的 `social` 字段，配置内容如下：
+配置 Archer 主题目录下的 `_config.yml`：
 
 ```yml
 social:
@@ -193,13 +191,13 @@ social:
 
 [Mermaid](https://github.com/mermaid-js/mermaid) 是一款基于 JavaScript 的流程图和图表工具，它使用 Markdown 定义并渲染各种图表，帮助构建软件工程或各类技术文档。
 
-为了启用 Mermaid，您需要首先在 Hexo 根目录下安装 [`hexo-filter-mermaid-diagrams`](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) 依赖：
+为了启用 Mermaid，您需要首先在 Hexo 根目录下安装 [`hexo-filter-mermaid-diagrams`](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) 依赖插件：
 
 ``` bash
 npm install hexo-filter-mermaid-diagrams --save
 ```
 
-然后在 Archer 主题目录下的 `_config.yml` 设置以启用 Mermaid：
+配置 Archer 主题目录下的 `_config.yml`以启用 Mermaid：
 
 ``` yml
 mermaid:
@@ -220,7 +218,7 @@ mermaid:
     ```
 ```
 
-> ❗️❗️❗️ 注意：如果您需要使用**类图**，请编辑您 Hexo 根目录下的 `_config.yml` 文件，设置 `external_link: false`。请确保这个设置对您原来的页面功能没有影响，这是 Hexo 本身的 bug。
+> ❗️❗️❗️ 注意：如果您需要使用**类图**，请编辑您 Hexo 根目录下的 `_config.yml`，设置 `external_link: false`。请确保这个设置对您原来的页面功能没有影响，这是 Hexo 本身的 bug。
 
 ### 启用 LaTeX 数学公式
 
@@ -241,7 +239,7 @@ npm uninstall hexo-renderer-marked --save
 npm install hexo-renderer-pandoc --save
 ```
 
-在 Archer 主题目录下的 `_config.yml` 设置以启用 LaTeX 数学公式：
+配置 Archer 主题目录下的 `_config.yml` 以启用 LaTeX 数学公式：
 
 ``` yml
 math:
@@ -268,9 +266,9 @@ z=\dfrac{3\pi}{2}(1+2t)\sin(\dfrac{3\pi}{2}(1+2t)), &
 
 ### 启用自定义字体
 
-**实验性功能**，自定义字体依赖于 [CSS Variables](https://caniuse.com/?search=CSS%20Variables) 能力，部分浏览器存在**兼容性问题**。
+**实验性功能**，自定义字体依赖于 [CSS Variables](https://caniuse.com/?search=CSS%20Variables) 能力，存在**浏览器兼容性问题**。
 
-配置 Archer 主题目录下的 `_config.yml` 文件：
+配置 Archer 主题目录下的 `_config.yml` 启用自定义字体能力：
 
 ``` yml
 custom_font:
@@ -312,7 +310,7 @@ sticky: 100
 ---
 ```
 
-您可以在 Hexo 根目录下的 `package.json` 文件中找到您是否使用 `hexo-generator-index` 插件作为项目依赖。
+您可以在 Hexo 根目录下的 `package.json` 中找到您是否使用 `hexo-generator-index` 插件作为项目依赖。
 
 假如您使用其它的插件生成索引，也可以手动添加 `top` 属性以显示小标记：
 

_config.yml

@@ -87,7 +87,7 @@ read_more_button: false
 # Enable toc
 toc: true
 # Word count & Reading time
-reading_info: true
+reading_info: false
 # Intro height (the default is 50 percents of the screen, you can input other number)
 index_intro_height: 50
 post_intro_height: 50

docs/develop-guide-zh.md

@@ -1,36 +1,34 @@
-# hexo-theme-archer 二次开发文档
+# hexo-theme-archer 开发文档
 
-对 Archer 主题进行二次开发前请阅读本文档。
+🧑‍🔧 对 Archer 主题进行开发前请阅读本文档。
 
 ## 目录结构
 
 假设当前目录结构为：
 
 ```bash
-. # 「Hexo 根目录」
+. # 📄 Hexo 根目录
 ├── source # 博客文件等
 ├── themes
-│   └── archer # 「Archer 主题目录」
+│   └── archer # 🎨 Archer 主题目录
 │       ├── docs # 文档目录
 │       ├── languages # 多语言配置
 │       ├── layout # 模板目录
 │       ├── source # html 模板文件，供 Hexo 加载
 │       ├── src # 源代码目录，会编译到 archer 目录下的 source 目录中
 │       │    ├── js # js 源代码
 │       │    └── scss # scss 源代码
-│       │
 │       ├── _config.yml # Archer 主题配置文件
 │       └── package.json
-│
 ├── _config.yml # Hexo 配置文件
 └── package.json
 ```
 
-- 如果需要修改页面结构，请修改 Archer 主题目录下 `layout` 中的 `.ejs` 模板文件；
-- 如果需要修改样式，请修改 Archer 主题目录下 `src/scss` 中的 `.scss` 文件；
-- 如果需要修改脚本，请修改 Archer 主题目录下 `src/js` 中的 `.js` 文件。
+- 📖 如果需要修改**页面结构**，请修改 Archer 主题目录下 `layout` 中的 `.ejs` 模板文件；
+- 🧑‍🎨 如果需要修改**样式**，请修改 Archer 主题目录下 `src/scss` 中的 `.scss` 样式文件；
+- 🧬 如果需要修改**脚本**，请修改 Archer 主题目录下 `src/js` 中的 `.js` 脚本文件。
 
-对样式 `.scss` 和脚本 `.js` 文件的修改需要进行编译，请参考下面的[开发步骤](#开发步骤)。
+对样式 `.scss` 和脚本 `.js` 文件的修改需要进行编译，请继续阅读下面的[开发步骤](#开发步骤)。
 
 ## 开发步骤
 
@@ -42,11 +40,15 @@ ignore: ['**/themes/**/node_modules/**', '**/themes/**/node_modules', '**/themes
 
 ### 安装依赖
 
-如果尚未安装 Node.js，请下载并安装 [14.x 版本](https://nodejs.org/dist/v14.17.3/)。
+如果尚未安装 Node.js，请下载并安装 [14.x 版本](https://nodejs.org/dist/latest-v14.x/)。推荐使用 nvm（[Windows](https://github.com/coreybutler/nvm-windows), [Linux](https://github.com/nvm-sh/nvm)）来管理当前使用的 Node.js 版本。
 
-分别在 Hexo 根目录和 Archer 主题目录下执行 `npm install` 以安装所需依赖。
+Archer 主题开发依赖于 `node-sass^8.0.0`，对于国内开发者，可以设置安装源，避免在本地编译：
 
-Archer 主题开发依赖于 node-sass 5.0.0，对 Node.js 版本有要求。如果依赖安装失败，可以尝试更换 Node.js 版本为 10, 12, 14, 15。推荐使用 nvm（[Windows](https://github.com/coreybutler/nvm-windows), [Linux](https://github.com/nvm-sh/nvm)）来管理 Node.js 版本。
+```bash
+npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
+```
+
+分别在 Hexo 根目录和 Archer 主题目录下执行 `npm install` 命令，安装依赖文件。
 
 ### 本地开发
 
@@ -60,18 +62,23 @@ Archer 主题开发依赖于 node-sass 5.0.0，对 Node.js 版本有要求。如
 
 编译压缩，发布资源。
 
-对于主题用户，您可以：
+#### 用户
+
+您可以：
 
 1. 在 Archer 主题目录下执行 `npm run build`。编译并压缩博客的样式和脚本文件。
 2. 在 Hexo 根目录下执行 `hexo g`。重新生成 Hexo 博客静态文件。
 3. 推送代码到博客仓库。
 
-对于主题开发者，您可以：
+#### 开发者
+
+您可以：
 
 1. 在 Archer 主题目录下执行 `npm run prettier`。检查并自动修复 `.scss` 和 `.js` 代码格式。
 2. 在 Archer 主题目录下执行 `npm run build`。编译并压缩博客的样式和脚本文件。
 3. 推送代码到主题仓库。
 
-在推送前，请确保已使用 `npm run build` 命令编译生成压缩好的 `.js` 与 `.css` 文件，它们可以分别在 Archer 主题目录下 `source/scripts` 和 `source/css` 目录中找到。
+**⚠ NOTE**
 
-如果编译没有生成 `.js` 文件，可以使用 `npm run build-js` 命令，查看编译失败的原因。对于 `.css` 文件，执行 `npm run build` 时会自动显示出现的错误。
+- 在推送前，请确保已使用 `npm run build` 命令编译生成压缩好的 `.js` 与 `.css` 文件，它们可以分别在 Archer 主题目录下 `source/scripts` 和 `source/css` 目录中找到。
+- 如果编译没有生成 `.js` 文件，可以使用 `npm run build-js` 命令，查看编译失败的原因。对于 `.css` 文件，执行 `npm run build` 时会自动显示出现的错误。

layout/_partial/base-background-image.ejs

@@ -12,7 +12,7 @@
     <!-- about页 -->
     <% } else if (page.layout === "about") { %>
         <% bgURL = theme.about.image || theme.site_header_image; %>
-    <% } %>        
+    <% } %>
     <div class="site-intro-placeholder"></div>
     <div class="site-intro-img" style="background-image: url(<%- url_for(bgURL) %>)"></div>
     <div class="site-intro-meta">
@@ -58,6 +58,7 @@
                         currPost: page,
                         className: 'post-intro-tags'}) %>
                 <% } %>
+                <!-- 文章字数统计 -->
                 <% if(theme.reading_info) { %>
                     <div class="post-intro-read">
                         <span><%- __('word_count') %>: <span class="post-count word-count"><%= wordcount(page.content) %></span><%= __('reading_time') %>: <span class="post-count reading-time"><%= min2read(page.content) %> min</span></span>