feat(0.5.0): 代码高亮 (#83)

* 新增 代码高亮
* 变更 默认头像 CDN 改为 cn.gravatar.com
* 文档 增加完整功能列表

README.md

@@ -12,19 +12,74 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb).
 
 ## 特色 | Features
 
-* 免费搭建（※1）
-* 隐私安全（※2）
-* 支持邮件与微信通知（※3）
-* 支持反垃圾评论（※4）
+<details>
+<summary>点击展开</summary>
 
-注：<br>
-※1 Twikoo 使用云开发作为评论后台，每个用户均长期享受1个免费的标准型基础版1资源套餐<br>
-※2 Twikoo 通过云函数控制敏感字段（邮箱、IP、环境配置等）不会泄露<br>
-※3 微信提醒基于 [Server酱](https://sc.ftqq.com/3.version)，需自行注册并获取API key<br>
-※4 反垃圾基于 [akismet.com](https://akismet.com/)，需自行注册并获取API key
+### 简单
+
+* 免费搭建（使用云开发作为评论后台，每个用户均长期享受1个免费的标准型基础版1资源套餐）
+* 简单部署（支持一键部署、网页部署、脚本部署）
+
+### 易用
+
+* 支持回复、点赞
+* 无需额外适配，支持搭配浅色主题与深色主题使用
+* 支持 API 调用，批量获取文章评论数、最新评论
+* 访客在昵称栏输入 QQ 号，会自动补全 QQ 昵称和 QQ 邮箱
+* 访客填写数字 QQ 邮箱，会使用 QQ 头像作为评论头像
+* 支持评论框粘贴图片（可禁用）
+* 支持插入图片（可禁用）
+* 支持去不图床、云开发图床
+* 支持插入表情（可禁用）
+* 支持 Ctrl + Enter 快捷回复
+* 评论框内容实时保存草稿，刷新不会丢失
+* [支持 Katex 公式](https://twikoo.js.org/faq.html#%E5%A6%82%E4%BD%95%E5%90%AF%E7%94%A8-katex-%E6%94%AF%E6%8C%81)
+* 支持按语言的代码高亮
+
+### 安全
+
+* 隐私信息安全（通过云函数控制敏感字段（邮箱、IP、环境配置等）不会泄露）
+* 支持 Akismet 垃圾评论检测（需自行注册 [akismet.com](https://akismet.com/)）
+* 支持腾讯云内容安全垃圾评论检测（需自行注册 [腾讯云内容安全](https://console.cloud.tencent.com/cms/text/overview)）
+* 支持人工审核模式
+* 防 XSS 注入
+* 支持限制每个 IP 每 10 分钟最多发表多少条评论
+
+### 即时
+
+* 支持邮件提醒（访客和博主）
+* 支持微信提醒（仅针对博主，基于 [Server酱](https://sc.ftqq.com/3.version)，需自行注册）
+* 支持 QQ 提醒（仅针对博主，基于 [Qmsg酱](https://qmsg.zendee.cn/)，需自行注册）
+
+### 个性
+
+* 支持自定义评论框背景图片
+* 支持自定义“博主”标识文字
+* 支持自定义通知邮件模板
+* 支持自定义评论框提示信息（placeholder）
+* 支持自定义表情列表（兼容 [OwO 的数据格式](https://cdn.jsdelivr.net/npm/[email protected]/demo/OwO.json)）
+* 支持自定义【昵称】【邮箱】【网址】必填 / 选填
+* 支持自定义代码高亮主题
+
+### 便捷管理
+
+* 内嵌式管理面板，通过密码登录，可方便地查看评论、隐藏评论、删除评论、修改配置
+* 支持隐藏管理入口，通过输入暗号显示
+* 支持从 Valine、Artalk、Disqus 导入评论
+
+### 缺点
+
+* 国外请求较慢
+* 部署需要实名认证
+* 不支持 IE
+
+</details>
 
 ## 预览 | Preview
 
+<details>
+<summary>点击展开</summary>
+
 ### 评论
 
 ![评论](./docs/static/readme-1.png)
@@ -37,12 +92,16 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb).
 
 ![推送通知](./docs/static/readme-3.jpg)
 
+</details>
+
 ## 快速上手 | Quick Start
 
 请查看[快速上手](https://twikoo.js.org/quick-start.html)
 
-> 如果你想获取更新动态、建言献策、参与内测，欢迎加入内测群：<br>
-> <img height="300" alt="1080829142" src="https://www.imaegoo.com/gallery/2020/hello-twikoo.png" />
+<details>
+<summary>如果你想获取更新动态、建言献策、参与内测，欢迎加入讨论群：1080829142</summary>
+<img height="300" alt="1080829142" src="https://www.imaegoo.com/gallery/2020/hello-twikoo.png" />
+</details>
 
 <!-- ## 贡献者 | Contributors -->
 
@@ -75,4 +134,9 @@ There are no plans to internationalize this project.
 
 ## 许可 | License
 
+<details>
+<summary>MIT License</summary>
+
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimaegoo%2Ftwikoo.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimaegoo%2Ftwikoo?ref=badge_large)
+
+</details>

docs/.vuepress/theme/layouts/Layout.vue

@@ -6,7 +6,7 @@
         <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
         <div id="twikoo"></div>
-        <script src="https://cdn.jsdelivr.net/npm/twikoo@0.4.5/dist/twikoo.all.min.js" ref="twikooJs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/twikoo@0.5.0/dist/twikoo.all.min.js" ref="twikooJs"></script>
       </div>
     </template>
   </ParentLayout>

docs/README.md

@@ -12,16 +12,63 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb).
 
 ## 特色
 
-* 免费搭建（※1）
-* 隐私安全（※2）
-* 支持邮件与微信通知（※3）
-* 支持反垃圾评论（※4）
+### 简单
 
-> 注：<br>
-> ※1 Twikoo 使用云开发作为评论后台，每个用户均长期享受1个免费的标准型基础版1资源套餐<br>
-> ※2 Twikoo 通过云函数控制敏感字段（邮箱、IP、环境配置等）不会泄露<br>
-> ※3 微信提醒基于 [Server酱](https://sc.ftqq.com/3.version)，需自行注册并获取API key<br>
-> ※4 反垃圾基于 [akismet.com](https://akismet.com/)，需自行注册并获取API key
+* 免费搭建（使用云开发作为评论后台，每个用户均长期享受1个免费的标准型基础版1资源套餐）
+* 简单部署（支持一键部署、网页部署、脚本部署）
+
+### 易用
+
+* 支持回复、点赞
+* 无需额外适配，支持搭配浅色主题与深色主题使用
+* 支持 API 调用，批量获取文章评论数、最新评论
+* 访客在昵称栏输入 QQ 号，会自动补全 QQ 昵称和 QQ 邮箱
+* 访客填写数字 QQ 邮箱，会使用 QQ 头像作为评论头像
+* 支持评论框粘贴图片（可禁用）
+* 支持插入图片（可禁用）
+* 支持去不图床、云开发图床
+* 支持插入表情（可禁用）
+* 支持 Ctrl + Enter 快捷回复
+* 评论框内容实时保存草稿，刷新不会丢失
+* [支持 Katex 公式](https://twikoo.js.org/faq.html#%E5%A6%82%E4%BD%95%E5%90%AF%E7%94%A8-katex-%E6%94%AF%E6%8C%81)
+* 支持按语言的代码高亮
+
+### 安全
+
+* 隐私信息安全（通过云函数控制敏感字段（邮箱、IP、环境配置等）不会泄露）
+* 支持 Akismet 垃圾评论检测（需自行注册 [akismet.com](https://akismet.com/)）
+* 支持腾讯云内容安全垃圾评论检测（需自行注册 [腾讯云内容安全](https://console.cloud.tencent.com/cms/text/overview)）
+* 支持人工审核模式
+* 防 XSS 注入
+* 支持限制每个 IP 每 10 分钟最多发表多少条评论
+
+### 即时
+
+* 支持邮件提醒（访客和博主）
+* 支持微信提醒（仅针对博主，基于 [Server酱](https://sc.ftqq.com/3.version)，需自行注册）
+* 支持 QQ 提醒（仅针对博主，基于 [Qmsg酱](https://qmsg.zendee.cn/)，需自行注册）
+
+### 个性
+
+* 支持自定义评论框背景图片
+* 支持自定义“博主”标识文字
+* 支持自定义通知邮件模板
+* 支持自定义评论框提示信息（placeholder）
+* 支持自定义表情列表（兼容 [OwO 的数据格式](https://cdn.jsdelivr.net/npm/[email protected]/demo/OwO.json)）
+* 支持自定义【昵称】【邮箱】【网址】必填 / 选填
+* 支持自定义代码高亮主题
+
+### 便捷管理
+
+* 内嵌式管理面板，通过密码登录，可方便地查看评论、隐藏评论、删除评论、修改配置
+* 支持隐藏管理入口，通过输入暗号显示
+* 支持从 Valine、Artalk、Disqus 导入评论
+
+### 缺点
+
+* 国外请求较慢
+* 部署需要实名认证
+* 不支持 IE
 
 ## 预览
 
@@ -45,8 +92,7 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb).
 ## 浏览器支持
 
 ::: tip 提示
-测试版（0.x）暂不兼容 IE11<br>
-正式版（1.0）会兼容 IE11
+技术原因，不兼容 IE
 :::
 
 | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /><br/>IE / Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br/>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br/>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br/>Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" /><br/>iOS Safari |

docs/faq.md

@@ -8,7 +8,7 @@
 
 ## 如何修改、重置管理员密码？
 
-请前往[云开发控制台](https://console.cloud.tencent.com/tcb/database/collection/config)删除 config.ADMIN_PASS 配置项，然后前往 Twikoo 管理面板重新设置密码。
+请前往[云开发控制台](https://console.cloud.tencent.com/tcb/database/collection/config)编辑配置，删除 config.ADMIN_PASS 配置项，然后前往 Twikoo 管理面板重新设置密码。
 
 ## 如何获得管理面板的私钥文件？
 
@@ -18,7 +18,7 @@
 
 ## 如何开启文章访问量统计？
 
-文章访问量统计功能正在测试中，您可以在需要展示文章访问量的地方添加：
+您可以在需要展示文章访问量的地方添加：
 
 ``` html
 <span id="twikoo_visitors">0</span>
@@ -46,6 +46,10 @@ Twikoo 云函数的内存消耗恒定为 0.1GB，由此可计算出 Twikoo 云
 1. **更新云函数**：登录[环境-云函数](https://console.cloud.tencent.com/tcb/scf/index)，点击 twikoo，点击函数代码，将新的云函数代码（[index.js](https://imaegoo.coding.net/public/twikoo/twikoo/git/files/dev/src/function/twikoo/index.js) 和 [package.json](https://imaegoo.coding.net/public/twikoo/twikoo/git/files/dev/src/function/twikoo/package.json) 两个文件）粘贴、点击保存并安装依赖即可。
 2. **更新网站**：修改主题配置中的 Twikoo CDN 地址 `https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js` 中的 `x.x.x`，使之与云函数版本号相同，然后部署网站。
 
+::: tip 提示
+如果升级后出现无法读取评论列表，云函数报错，请在函数编辑页面，删除 `node_modules` 目录（删除需要半分钟左右，请耐心等待删除完成），再点击保存并安装依赖。如果仍然不能解决，请删除并重新创建 Twikoo 云函数。
+:::
+
 ## 如何启用 Katex 支持？
 
 Twikoo 支持 Katex 公式，但为了限制 Twikoo 的包大小，Twikoo 没有内置完整的 Katex，您需要[在页面中额外加载 katex.js](https://katex.org/docs/browser.html)。

docs/quick-start.md

@@ -46,7 +46,7 @@ Twikoo 使用云开发作为评论后台，每个云开发用户均长期享受1
 [如何更新 Twikoo 版本？](faq.html#如何更新-twikoo-版本)
 :::
 
-### ② 脚本方式（不推荐）
+### ② 脚本方式
 
 ::: warning 注意
 * 请确保您已经安装了 [Node.js](https://nodejs.org/en/download/)
@@ -98,7 +98,7 @@ Volantis 目前支持 Twikoo，请查看 [hexo-theme-volantis/_config.yml](https
 ``` yml
 comments:
   twikoo:
-    js: https://cdn.jsdelivr.net/npm/twikoo@0.4.5/dist/twikoo.all.min.js
+    js: https://cdn.jsdelivr.net/npm/twikoo@0.5.0/dist/twikoo.all.min.js
     envId: xxxxxxxxxxxxxxx # 腾讯云环境id
 ```
 
@@ -119,7 +119,7 @@ twikoo:
 comment:
   type: twikoo
   envId: xxxxxxxxxxxxxxx # 腾讯云环境id
-  jsUrl: https://cdn.jsdelivr.net/npm/twikoo@0.4.5/dist/twikoo.all.min.js
+  jsUrl: https://cdn.jsdelivr.net/npm/twikoo@0.5.0/dist/twikoo.all.min.js
 ```
 
 ### 通过 CDN 引入
@@ -130,13 +130,13 @@ comment:
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/twikoo@0.4.5/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/twikoo@0.5.0/dist/twikoo.all.min.js"></script>
 <script>
 twikoo.init({
   envId: '您的环境id',
   el: '#tcomment',
   // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
-  // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 文章路径，请勿随意传值！
+  // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
 })
 </script>
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "element-ui": "^2.14.1",
     "marked": "^1.2.5",
     "owo": "^1.0.2",
+    "prismjs": "^1.22.0",
     "vue": "^2.6.12"
   }
 }

src/function/twikoo/index.js

@@ -1,5 +1,5 @@
 /*!
- * Twikoo cloudbase function v0.4.5
+ * Twikoo cloudbase function v0.5.0
  * (c) 2020-2020 iMaeGoo
  * Released under the MIT License.
  */
@@ -31,7 +31,7 @@ const window = new JSDOM('').window
 const DOMPurify = createDOMPurify(window)
 
 // 常量 / constants
-const VERSION = '0.4.5'
+const VERSION = '0.5.0'
 const RES_CODE = {
   SUCCESS: 0,
   FAIL: 1000,
@@ -1197,7 +1197,7 @@ function getAvatar (comment) {
   if (comment.avatar) {
     return comment.avatar
   } else {
-    const gravatarCdn = config.GRAVATAR_CDN || 'gravatar.loli.net'
+    const gravatarCdn = config.GRAVATAR_CDN || 'cn.gravatar.com'
     const mailMd5 = comment.mailMd5 || md5(comment.mail)
     return `https://${gravatarCdn}/avatar/${mailMd5}?d=identicon`
   }
@@ -1244,7 +1244,9 @@ function getConfig () {
       EMOTION_CDN: config.EMOTION_CDN,
       COMMENT_PLACEHOLDER: config.COMMENT_PLACEHOLDER,
       REQUIRED_FIELDS: config.REQUIRED_FIELDS,
-      HIDE_ADMIN_CRYPT: config.HIDE_ADMIN_CRYPT
+      HIDE_ADMIN_CRYPT: config.HIDE_ADMIN_CRYPT,
+      HIGHLIGHT: config.HIGHLIGHT || 'true',
+      HIGHLIGHT_THEME: config.HIGHLIGHT_THEME
     }
   }
 }

src/function/twikoo/package.json

@@ -1,6 +1,15 @@
 {
   "name": "twikoo-func",
+  "version": "0.5.0",
+  "description": "A simple comment system based on Tencent CloudBase (tcb).",
+  "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
+  "license": "MIT",
   "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imaegoo/twikoo.git"
+  },
+  "homepage": "https://twikoo.js.org",
   "dependencies": {
     "@cloudbase/manager-node": "^3.8.2",
     "@cloudbase/node-sdk": "^2.4.4",

src/js/entites/config.js

@@ -16,6 +16,8 @@ class Config {
     this.COMMENT_PLACEHOLDER = model.COMMENT_PLACEHOLDER
     this.REQUIRED_FIELDS = model.REQUIRED_FIELDS
     this.HIDE_ADMIN_CRYPT = model.HIDE_ADMIN_CRYPT
+    this.HIGHLIGHT = model.HIGHLIGHT
+    this.HIGHLIGHT_THEME = model.HIGHLIGHT_THEME
     this.QCLOUD_SECRET_ID = model.QCLOUD_SECRET_ID
     this.QCLOUD_SECRET_KEY = model.QCLOUD_SECRET_KEY
     this.LIMIT_PER_MINUTE = model.LIMIT_PER_MINUTE

src/js/utils/highlight.js

@@ -0,0 +1,27 @@
+import Prism from 'prismjs'
+import 'prismjs/plugins/autoloader/prism-autoloader'
+
+const PRISM_CDN = 'https://cdn.jsdelivr.net/npm/[email protected]'
+let cssEl
+
+Prism.plugins.autoloader.languages_path = `${PRISM_CDN}/components/`
+
+const renderCode = (el, theme) => {
+  loadCss(theme)
+  Prism.highlightAllUnder(el)
+}
+
+const loadCss = (theme) => {
+  if (cssEl || !theme || theme === 'none') return
+  cssEl = document.createElement('link')
+  if (theme === 'default') {
+    cssEl.href = `${PRISM_CDN}/themes/prism.css`
+  } else {
+    cssEl.href = `${PRISM_CDN}/themes/prism-${theme}.css`
+  }
+  cssEl.rel = 'stylesheet'
+  cssEl.type = 'text/css'
+  document.getElementById('twikoo').appendChild(cssEl)
+}
+
+export default renderCode

src/js/utils/index.js

@@ -1,5 +1,6 @@
 import timeago from './timeago'
 import marked from './marked'
+import renderCode from './highlight'
 import call from './api'
 import { isQQ, getQQAvatar } from './avatar'
 
@@ -98,6 +99,7 @@ export {
   timestamp,
   convertLink,
   marked,
+  renderCode,
   call,
   getFuncVer,
   isQQ,