From b24f072e6478421e1f40823472906a642d01fcd6 Mon Sep 17 00:00:00 2001 From: iMaeGoo Date: Wed, 30 Dec 2020 15:44:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(0.5.0):=20=E4=BB=A3=E7=A0=81=E9=AB=98?= =?UTF-8?q?=E4=BA=AE=20(#83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 新增 代码高亮 * 变更 默认头像 CDN 改为 cn.gravatar.com * 文档 增加完整功能列表 --- README.md | 86 +++++++++++++++++++++---- docs/.vuepress/theme/layouts/Layout.vue | 2 +- docs/README.md | 68 +++++++++++++++---- docs/faq.md | 8 ++- docs/quick-start.md | 10 +-- package.json | 3 +- src/function/twikoo/index.js | 10 +-- src/function/twikoo/package.json | 9 +++ src/js/entites/config.js | 2 + src/js/utils/highlight.js | 27 ++++++++ src/js/utils/index.js | 2 + src/view/components/TkAdminComment.vue | 18 ++++-- src/view/components/TkAdminConfig.vue | 17 +++-- src/view/components/TkAvatar.vue | 2 +- src/view/components/TkComment.vue | 12 +++- src/view/components/TkComments.vue | 18 ++++-- src/view/components/TkSubmit.vue | 5 +- 17 files changed, 246 insertions(+), 53 deletions(-) create mode 100644 src/js/utils/highlight.js diff --git a/README.md b/README.md index b12fe2d02..087477ae3 100644 --- a/README.md +++ b/README.md @@ -12,19 +12,74 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb). ## 特色 | Features -* 免费搭建(※1) -* 隐私安全(※2) -* 支持邮件与微信通知(※3) -* 支持反垃圾评论(※4) +
+点击展开 -注:
-※1 Twikoo 使用云开发作为评论后台,每个用户均长期享受1个免费的标准型基础版1资源套餐
-※2 Twikoo 通过云函数控制敏感字段(邮箱、IP、环境配置等)不会泄露
-※3 微信提醒基于 [Server酱](https://sc.ftqq.com/3.version),需自行注册并获取API key
-※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/owo@1.0.2/demo/OwO.json)) +* 支持自定义【昵称】【邮箱】【网址】必填 / 选填 +* 支持自定义代码高亮主题 + +### 便捷管理 + +* 内嵌式管理面板,通过密码登录,可方便地查看评论、隐藏评论、删除评论、修改配置 +* 支持隐藏管理入口,通过输入暗号显示 +* 支持从 Valine、Artalk、Disqus 导入评论 + +### 缺点 + +* 国外请求较慢 +* 部署需要实名认证 +* 不支持 IE + +
## 预览 | Preview +
+点击展开 + ### 评论 ![评论](./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) +
+ ## 快速上手 | Quick Start 请查看[快速上手](https://twikoo.js.org/quick-start.html) -> 如果你想获取更新动态、建言献策、参与内测,欢迎加入内测群:
-> 1080829142 +
+如果你想获取更新动态、建言献策、参与内测,欢迎加入讨论群:1080829142 +1080829142 +
@@ -75,4 +134,9 @@ There are no plans to internationalize this project. ## 许可 | License +
+MIT License + [![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) + +
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue index e2c791948..7c37ff46c 100644 --- a/docs/.vuepress/theme/layouts/Layout.vue +++ b/docs/.vuepress/theme/layouts/Layout.vue @@ -6,7 +6,7 @@
- + diff --git a/docs/README.md b/docs/README.md index f95bd2e32..27397d67e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -12,16 +12,63 @@ A simple, safe, free comment system based on Tencent CloudBase (tcb). ## 特色 -* 免费搭建(※1) -* 隐私安全(※2) -* 支持邮件与微信通知(※3) -* 支持反垃圾评论(※4) +### 简单 -> 注:
-> ※1 Twikoo 使用云开发作为评论后台,每个用户均长期享受1个免费的标准型基础版1资源套餐
-> ※2 Twikoo 通过云函数控制敏感字段(邮箱、IP、环境配置等)不会泄露
-> ※3 微信提醒基于 [Server酱](https://sc.ftqq.com/3.version),需自行注册并获取API key
-> ※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/owo@1.0.2/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
-正式版(1.0)会兼容 IE11 +技术原因,不兼容 IE ::: | IE / Edge
IE / Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | iOS Safari
iOS Safari | diff --git a/docs/faq.md b/docs/faq.md index 6cc3ca6c1..4dc12fa49 100644 --- a/docs/faq.md +++ b/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 0 @@ -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/twikoo@x.x.x/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)。 diff --git a/docs/quick-start.md b/docs/quick-start.md index 20d83dac8..589e81b01 100644 --- a/docs/quick-start.md +++ b/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
- + ``` diff --git a/package.json b/package.json index 21389b98e..0562fc74f 100644 --- a/package.json +++ b/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 (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" } } diff --git a/src/function/twikoo/index.js b/src/function/twikoo/index.js index 9c99dc217..39768be27 100644 --- a/src/function/twikoo/index.js +++ b/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 } } } diff --git a/src/function/twikoo/package.json b/src/function/twikoo/package.json index ae6ff8f63..1d64e062d 100644 --- a/src/function/twikoo/package.json +++ b/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 (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", diff --git a/src/js/entites/config.js b/src/js/entites/config.js index f5dd19ddd..c7fdfd70e 100644 --- a/src/js/entites/config.js +++ b/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 diff --git a/src/js/utils/highlight.js b/src/js/utils/highlight.js new file mode 100644 index 000000000..d34d46329 --- /dev/null +++ b/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/prismjs@1.22.0' +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 diff --git a/src/js/utils/index.js b/src/js/utils/index.js index ceccc56cb..9d10dce2c 100644 --- a/src/js/utils/index.js +++ b/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, diff --git a/src/view/components/TkAdminComment.vue b/src/view/components/TkAdminComment.vue index bb65b9bf4..a85670cf7 100644 --- a/src/view/components/TkAdminComment.vue +++ b/src/view/components/TkAdminComment.vue @@ -27,7 +27,7 @@ diff --git a/src/view/components/TkAdminConfig.vue b/src/view/components/TkAdminConfig.vue index a37a6d341..2d5e606d0 100644 --- a/src/view/components/TkAdminConfig.vue +++ b/src/view/components/TkAdminConfig.vue @@ -38,14 +38,21 @@ export default { { key: 'COMMENT_PAGE_SIZE', desc: '评论列表分页大小,默认为 8。', ph: '示例:8', value: '' }, { key: 'MASTER_TAG', desc: '博主标识自定义文字,默认为 “博主”。', ph: '示例:站长', value: '' }, { key: 'COMMENT_BG_IMG', desc: '评论框自定义背景图片 URL 地址。', ph: '', value: '' }, - { key: 'GRAVATAR_CDN', desc: '自定义头像 CDN 地址。如:cn.gravatar.com, sdn.geekzu.org, gravatar.loli.net', ph: '示例:sdn.geekzu.org', value: '' }, + { key: 'GRAVATAR_CDN', desc: '自定义头像 CDN 地址。如:cn.gravatar.com, sdn.geekzu.org, gravatar.loli.net,默认:cn.gravatar.com', ph: '示例:sdn.geekzu.org', value: '' }, + { key: 'COMMENT_PLACEHOLDER', desc: '评论框提示信息,可用
换行,默认为空', ph: '示例:', value: '' }, + { key: 'REQUIRED_FIELDS', desc: '评论必填信息,设为 nick,mail,link 代表全必填,设为 none 代表全选填,默认:nick,mail', ph: '示例:nick,mail,link', value: '' }, + { key: 'HIDE_ADMIN_CRYPT', desc: '隐藏管理面板入口。可设置一个“暗号”,只有在“昵称”一栏输入相同的“暗号”时,管理面板入口才会显示,留空则不隐藏管理入口', ph: '示例:admin', value: '' } + ] + }, + { + name: '插件', + items: [ { key: 'SHOW_IMAGE', desc: '启用插入图片功能,默认为:true', ph: '示例:false', value: '' }, { key: 'IMAGE_CDN', desc: '插入图片所使用的图床,目前支持:7bu、qcloud,默认为:qcloud', ph: '示例:false', value: '' }, { key: 'SHOW_EMOTION', desc: '启用插入表情功能,默认为:true', ph: '示例:false', value: '' }, { key: 'EMOTION_CDN', desc: '表情 CDN,默认为:https://cdn.jsdelivr.net/gh/imaegoo/emotion/owo.json', ph: '', value: '' }, - { key: 'COMMENT_PLACEHOLDER', desc: '评论框提示信息,可用
换行,默认为空', ph: '示例:', value: '' }, - { key: 'REQUIRED_FIELDS', desc: '评论必填信息,设为 nick,mail,link 代表全必填,设为 none 代表全选填,默认:nick,mail', ph: '示例:nick,mail,link', value: '' }, - { key: 'HIDE_ADMIN_CRYPT', desc: '隐藏管理面板入口。可设置一个“暗号”,只有在“昵称”一栏输入相同的“暗号”时,管理面板入口才会显示,留空则不隐藏管理入口', ph: '示例:admin', value: '' } + { key: 'HIGHLIGHT', desc: '启用代码高亮功能。如果您的主题和代码高亮有冲突,请设为 false。默认:true', ph: '示例:false', value: '' }, + { key: 'HIGHLIGHT_THEME', desc: '代码高亮主题,可选:default、coy、dark、funky、okaidia、solarizedlight、tomorrow、twilight,访问 https://prismjs.com 可预览主题效果。如果您的主题和代码高亮有冲突,请设为 none。默认:none', ph: '示例:tomorrow', value: '' } ] }, { @@ -58,7 +65,7 @@ export default { ] }, { - name: '通知', + name: '即时通知', items: [ { key: 'SC_SENDKEY', desc: 'Server酱(sc.ftqq.com)微信推送的 SCKEY', ph: '示例:SCT1364TKdsiGjGvyAZNYDVnuHW12345', value: '' }, { key: 'QM_SENDKEY', desc: 'Qmsg酱(qmsg.zendee.cn)QQ推送的 KEY', ph: '示例:k2ni28jkmn72tqdvqryt9827u0o9nbpok', value: '' }, diff --git a/src/view/components/TkAvatar.vue b/src/view/components/TkAvatar.vue index cc783b306..36ae2df34 100644 --- a/src/view/components/TkAvatar.vue +++ b/src/view/components/TkAvatar.vue @@ -28,7 +28,7 @@ export default { if (this.config && this.config.GRAVATAR_CDN) { return this.config.GRAVATAR_CDN } else { - return 'gravatar.loli.net' + return 'cn.gravatar.com' } }, avatarInner () { diff --git a/src/view/components/TkComment.vue b/src/view/components/TkComment.vue index b376e5d4b..6f3e403ed 100644 --- a/src/view/components/TkComment.vue +++ b/src/view/components/TkComment.vue @@ -60,7 +60,7 @@