Update post meta (#5)

* Update post meta * Edit README * Edit post meta text settings
leirock · Aug 18, 2022 · 878b6c9 · 878b6c9
1 parent edb363e
commit 878b6c9
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 49 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -0,0 +1,66 @@
+# 用于 Hexo NexT 的 Artalk 插件
+
+> [English](https://github.com/leirock/hexo-next-artalk/blob/main/README.md)
+
+[![NPM version](https://img.shields.io/npm/v/hexo-next-artalk?color=red&logo=npm&style=flat-square)](https://www.npmjs.com/package/hexo-next-artalk)
+[![NPM downloads](https://img.shields.io/npm/dm/hexo-next-artalk?color=red&logo=npm&style=flat-square)](https://www.npmjs.com/package/hexo-next-artalk)
+[![Theme Version](https://img.shields.io/badge/NexT-v7.3.0+-blue?style=flat-square)](https://github.com/next-theme/hexo-theme-next)
+[![Artalk Version](https://img.shields.io/badge/Artalk-v2.3.1+-558fb5?style=flat-square)](https://github.com/ArtalkJS/Artalk)
+
+这是一款适用于 Hexo NexT 的 [Artalk](https://artalk.js.org) 评论插件。
+
+## 安装
+
+```bash
+npm install hexo-next-artalk
+```
+
+## 配置
+
+将下列配置添加到 Hexo 的根配置文件 `_config.yml` 之中，把 `enable` 设为 `true`，然后将 `artalk` 下的其他配置项修改为您自己的值。
+
+```yaml
+# Artalk 配置文件
+# 更多信息: https://artalk.js.org
+
+artalk:
+  enable: false
+
+  # 后端程序 API 地址，请修改为您自己的 API 地址
+  server: https://artalk.example.com
+
+  # 网站名称，请指定后段程序中的一个网站，留空即默认站点
+  site:
+
+  # 前端资源 CDN 地址，您可以修改为偏好的其他 CDN 镜像
+  ## 参考：https://artalk.js.org/guide/frontend/install.html
+  jsUrl: https://unpkg.com/artalk@2/dist/Artalk.js
+  cssUrl: https://unpkg.com/artalk@2/dist/Artalk.css
+
+  # 文章阅读数统计
+  pvCount: true
+
+  # 评论数统计
+  commentCount: true
+
+  # 黑暗模式
+  darkMode: auto
+
+  # 在后端控制前端
+  ## 参考：https://artalk.js.org/guide/backend/fe-control.html
+  useBackendConf: false
+```
+
+## 贴士
+
+在文章信息栏中，评论数的默认显示文字是“Artalk”。如果您希望修改此处，例如，改为简体中文的“评论数”：
+
+1. 在 Hexo 博客文件夹下创建文件 `/source/_data/languages.yml`；
+2. 编辑该文件如下并保存。
+
+```yaml
+zh-CN:
+  post:
+    comments:
+      artalk: 评论数
+```
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 # Artalk for Hexo NexT
 
+> [中文](https://github.com/leirock/hexo-next-artalk/blob/main/README-CN.md)
+
 [![NPM version](https://img.shields.io/npm/v/hexo-next-artalk?color=red&logo=npm&style=flat-square)](https://www.npmjs.com/package/hexo-next-artalk)
 [![NPM downloads](https://img.shields.io/npm/dm/hexo-next-artalk?color=red&logo=npm&style=flat-square)](https://www.npmjs.com/package/hexo-next-artalk)
 [![Theme Version](https://img.shields.io/badge/NexT-v7.3.0+-blue?style=flat-square)](https://github.com/next-theme/hexo-theme-next)
 [![Artalk Version](https://img.shields.io/badge/Artalk-v2.3.1+-558fb5?style=flat-square)](https://github.com/ArtalkJS/Artalk)
 
-[Artalk](https://artalk.js.org) comment plugin for Hexo NexT.
+This is an [Artalk](https://artalk.js.org) comment plugin for Hexo NexT.
 
 ## Install
 
@@ -15,29 +17,28 @@ npm install hexo-next-artalk
 
 ## Configure
 
-Set the value `enable` to `true`, add `server`, and edit other configurations in `artalk` section in the config file as following. You can config those in Hexo's root config file `_config.yml`:
+Add the following configurations in Hexo's root config file `_config.yml`, set `enable` to `true`, and edit other configurations in `artalk` section as your own values.
 
 ```yaml
 # Artalk Config File
-# For more information: https://artalk.js.org
+## For more information: https://artalk.js.org
 
 artalk:
   enable: false
 
-  # Server address url, you should set this to your own link
+  # Backend server API, you should set this to your own server API
   server: https://artalk.example.com
 
   # Site name, you can set this to specify site for server
   # or leave blank to use default site
   site:
 
-  # JS CDN url, you can set this to your preferred CDN
+  # Frontend resources CDN, you can set this to your preferred CDN
+  ## Reference: https://artalk.js.org/guide/frontend/install.html
   jsUrl: https://unpkg.com/artalk@2/dist/Artalk.js
-
-  # CSS styles CDN url, you can set this to your preferred CDN
   cssUrl: https://unpkg.com/artalk@2/dist/Artalk.css
 
-  # PV count
+  # Page views count
   pvCount: true
 
   # Comments count
@@ -47,5 +48,20 @@ artalk:
   darkMode: auto
 
   # Use backend to config
-  # useBackendConf: true
+  ## Reference: https://artalk.js.org/guide/backend/fe-control.html
+  useBackendConf: false
+```
+
+## Tips
+
+The default text of comments count in post meta is "Artalk". If you would like to change it, for example, to simplified Chinese "评论数":
+
+1. Create a file `/source/_data/languages.yml` in your Hexo blog folder;
+2. Edit this file as follows and then save it.
+
+```yaml
+zh-CN:
+  post:
+    comments:
+      artalk: 评论数
 ```
diff --git a/artalk.njk b/artalk.njk
@@ -1,5 +1,5 @@
 {{ next_data('artalk', config.artalk, {
-  el: '#artalk',
+  el: '#comments',
   pageKey: url_for(page.path) | replace(r/index\.html$/, ''),
   pageTitle: page.title,
   locale: page.lang | default('zh-CN', true)

diff --git a/default.yaml b/default.yaml
@@ -1,23 +1,22 @@
 # Artalk Config File
-# For more information: https://artalk.js.org
+## For more information: https://artalk.js.org
 
 artalk:
   enable: false
 
-  # Server address url, you should set this to your own link
+  # Backend server API, you should set this to your own server API
   server: https://artalk.example.com
 
   # Site name, you can set this to specify site for server
   # or leave blank to use default site
   site:
-
-  # JS CDN url, you can set this to your preferred CDN
-  jsUrl: https://unpkg.com/artalk@2/dist/Artalk.js
 
-  # CSS styles CDN url, you can set this to your preferred CDN
+  # Frontend resources CDN, you can set this to your preferred CDN
+  ## Reference: https://artalk.js.org/guide/frontend/install.html
+  jsUrl: https://unpkg.com/artalk@2/dist/Artalk.js
   cssUrl: https://unpkg.com/artalk@2/dist/Artalk.css
 
-  # PV count
+  # Page views count
   pvCount: true
 
   # Comments count
@@ -27,4 +26,5 @@ artalk:
   darkMode: auto
 
   # Use backend to config
-  # useBackendConf: true
+  ## Reference: https://artalk.js.org/guide/backend/fe-control.html
+  useBackendConf: false
diff --git a/index.js b/index.js
@@ -10,56 +10,50 @@ hexo.extend.filter.register('theme_inject', (injects) => {
   const config = utils.defaultConfigFile('artalk', 'default.yaml');
   if (!config.enable) return;
 
-  injects.comment.raw('artalk', '<div class="comments" id="artalk"></div>', {}, { cache: true });
+  injects.comment.raw('artalk', '<div class="comments" id="comments"></div>', {}, { cache: true });
   injects.bodyEnd.raw('artalk', utils.getFileContent('artalk.njk'));
   injects.head.raw('artalk', `<link rel="preconnect" href="${config.server}">`, {}, {});
 });
 
 // Add post_meta
-const capitalize = (input) => input.toString().charAt(0).toUpperCase() + input.toString().substr(1);
-const iconText = (icon, key, defaultValue = capitalize(key)) =>
-  `
-    <span class="post-meta-item-icon">
-      <i class="${icon}"></i>
-    </span>
-    {%- set post_meta_comment = __('post.comments.${key}') %}
-    {%- if post_meta_comment == 'post.comments.${key}' %}
-      {%- set post_meta_comment = '${defaultValue}' %}
-    {%- endif %}
-    <span class="post-meta-item-text">{{ post_meta_comment + __('symbol.colon') }}</span>
-  `;
-
 hexo.extend.filter.register('theme_inject', (injects) => {
   const config = utils.defaultConfigFile('artalk', 'default.yaml');
   if (!config.enable || !config.server) return;
 
     injects.postMeta.raw(
-      'artalk_comment_count',
+      'artalk_pv_count',
       `
-        {% if post.comments and config.artalk.commentCount %}
-        <span class="post-meta-item">
-          ${iconText('far fa-comment', 'artalk')}
-          <a title="artalk" href="{{ url_for(post.path) }}#artalk" itemprop="discussionUrl">
-            <span id="ArtalkCount" class="post-comments-count" data-page-key="{{ url_for(post.path) }}" itemprop="commentCount"></span>
-          </a>
-        </span>
+        {% if config.artalk.pvCount %}
+          <span class="post-meta-item" title="{{ __('post.views') }}">
+            <span class="post-meta-item-icon">
+              <i class="far fa-eye"></i>
+            </span>
+            <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
+            <span id="ArtalkPV" data-page-key="{{ url_for(post.path) }}" ></span>
+          </span>
         {% endif %}
       `,
       {},
       {}
     );
 
     injects.postMeta.raw(
-      'artalk_pv_count',
+      'artalk_comment_count',
       `
-        {% if config.artalk.pvCount %}
-        <span class="post-meta-item" title="{{ __('post.views') }}">
-          <span class="post-meta-item-icon">
-            <i class="far fa-eye"></i>
+        {% if post.comments and config.artalk.commentCount %}
+          {%- set post_meta_comment = __('post.comments.artalk') %}
+          {%- if post_meta_comment == 'post.comments.artalk' %}
+            {%- set post_meta_comment = 'Artalk' %}
+          {%- endif %}
+          <span class="post-meta-item" title="{{ post_meta_comment }}">
+            <span class="post-meta-item-icon">
+              <i class="far fa-comment"></i>
+            </span>
+            <span class="post-meta-item-text">{{ post_meta_comment + __('symbol.colon') }}</span>
+            <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
+              <span id="ArtalkCount" class="post-comments-count" data-page-key="{{ url_for(post.path) }}" itemprop="commentCount"></span>
+            </a>
           </span>
-          <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
-          <span id="ArtalkPV" data-page-key="{{ url_for(post.path) }}" ></span>
-        </span>
         {% endif %}
       `,
       {},

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-next-artalk",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Artalk comment plugin for Hexo NexT.",
   "keywords": [
     "Hexo",