fix(0.3.0): 增加一些个性化配置 (#47)

* 新增自定义评论框背景图片 * 新增自定义博主标识 * 新增自定义通知邮件模板 * 新增自定义通知邮件服务器 * 修复用户未注册 Gravatar，显示随机头像
twikoojs · Dec 7, 2020 · a5dc7aa · a5dc7aa
1 parent 4238659
commit a5dc7aa
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 49 deletions.
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
@@ -3,7 +3,7 @@
     <template #page-bottom>
       <div class="page-edit">
         <div id="twikoo"></div>
-        <script src="https://cdn.jsdelivr.net/npm/twikoo@0.2.9/dist/twikoo.all.min.js" ref="twikooJs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/twikoo@0.3.0/dist/twikoo.all.min.js" ref="twikooJs"></script>
       </div>
     </template>
   </ParentLayout>

diff --git a/docs/link.md b/docs/link.md
@@ -3,3 +3,4 @@
 * [在Hexo的Butterfly主题使用Twikoo评论配置及更新教程](https://blog.zhheo.com/p/2e6bbbd0.html) by 张洪 Heo
 * [Valine 到 Twikoo 迁移脚本](https://github.com/imaegoo/twikoo-import-tools) by iMaeGoo
 * [Typecho 到 Twikoo 迁移脚本](https://github.com/Android-KitKat/twikoo-import-tools-typecho) by Android-KitKat
+* [Hexo 博客配置 twikoo 评论系统，并调用最新评论](https://www.heson10.com/posts/3217.html) by Heson
diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -103,7 +103,7 @@ Butterfly 目前支持 Twikoo，请查看 [Butterfly 安裝文檔(四) 主題配
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/twikoo@0.2.9/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/twikoo@0.3.0/dist/twikoo.all.min.js"></script>
 <script>twikoo.init({ envId: '您的环境id', el: '#tcomment' })</script>
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",
@@ -12,21 +12,22 @@
     "type": "git",
     "url": "https://github.com/imaegoo/twikoo.git"
   },
-  "homepage": "https://github.com/imaegoo/twikoo",
+  "homepage": "https://twikoo.js.org",
   "scripts": {
     "dev": "webpack-dev-server",
     "serve": "webpack-dev-server",
     "build": "webpack",
     "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "login": "tcb login",
+    "logout": "tcb logout",
     "deploy": "tcb fn deploy twikoo --force",
     "lint": "eslint",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
   "devDependencies": {
-    "@cloudbase/cli": "^1.0.4",
-    "copy-webpack-plugin": "^6.3.1",
+    "@cloudbase/cli": "^1.0.7",
+    "copy-webpack-plugin": "^6.3.2",
     "css-loader": "^3.6.0",
     "eslint": "^7.13.0",
     "eslint-config-standard": "^16.0.2",
@@ -48,7 +49,7 @@
     "@fortawesome/fontawesome-free": "^5.15.1",
     "blueimp-md5": "^2.18.0",
     "element-ui": "^2.14.1",
-    "marked": "^1.2.4",
+    "marked": "^1.2.5",
     "vue": "^2.6.12"
   }
 }
diff --git a/src/function/twikoo/index.js b/src/function/twikoo/index.js
@@ -1,5 +1,5 @@
 /*!
- * Twikoo cloudbase function v0.2.9
+ * Twikoo cloudbase function v0.3.0
  * (c) 2020-2020 iMaeGoo
  * Released under the MIT License.
  */
@@ -29,7 +29,7 @@ const window = new JSDOM('').window
 const DOMPurify = createDOMPurify(window)
 
 // 常量 / constants
-const VERSION = '0.2.9'
+const VERSION = '0.3.0'
 const RES_CODE = {
   SUCCESS: 0,
   FAIL: 1000,
@@ -705,14 +705,25 @@ async function sendMail (comment) {
 // 初始化邮件插件
 async function initMailer () {
   try {
-    if (!config || !config.SMTP_SERVICE || !config.SMTP_USER || !config.SMTP_PASS) throw new Error('数据库配置不存在')
-    transporter = nodemailer.createTransport({
-      service: config.SMTP_SERVICE,
+    if (!config || !config.SMTP_USER || !config.SMTP_PASS) {
+      throw new Error('数据库配置不存在')
+    }
+    const transportConfig = {
       auth: {
         user: config.SMTP_USER,
         pass: config.SMTP_PASS
       }
-    })
+    }
+    if (config.SMTP_SERVICE) {
+      transportConfig.service = config.SMTP_SERVICE
+    } else if (config.SMTP_HOST) {
+      transportConfig.host = config.SMTP_HOST
+      transportConfig.port = parseInt(config.SMTP_PORT)
+      transportConfig.secure = config.SMTP_SECURE === 'true'
+    } else {
+      throw new Error('SMTP 服务器没有配置')
+    }
+    transporter = nodemailer.createTransport(transportConfig)
     transporter.verify(function (error, success) {
       if (error) throw new Error('SMTP 邮箱配置异常：', error)
       else if (success) console.log('SMTP 邮箱配置正常')
@@ -734,15 +745,25 @@ async function noticeMaster (comment) {
   const SITE_URL = config.SITE_URL
   const POST_URL = comment.href || SITE_URL + comment.url
   const emailSubject = config.MAIL_SUBJECT_ADMIN || `${SITE_NAME}上有新评论了`
-  const emailContent = config.MAIL_TEMPLATE_ADMIN || `
-    <div style="border-top:2px solid #12addb;box-shadow:0 1px 3px #aaaaaa;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
-      <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
-        您在<a style="text-decoration:none;color: #12addb;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的文章有了新的评论
-      </h2>
-      <p><strong>${NICK}</strong>回复说：</p>
-      <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${COMMENT}</div>
-      <p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br></p>
-    </div>`
+  let emailContent
+  if (config.MAIL_TEMPLATE_ADMIN) {
+    emailContent = config.MAIL_TEMPLATE_ADMIN
+      .replace(/\${SITE_URL}/g, SITE_URL)
+      .replace(/\${SITE_NAME}/g, SITE_NAME)
+      .replace(/\${NICK}/g, NICK)
+      .replace(/\${COMMENT}/g, COMMENT)
+      .replace(/\${POST_URL}/g, POST_URL)
+  } else {
+    emailContent = `
+      <div style="border-top:2px solid #12addb;box-shadow:0 1px 3px #aaaaaa;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
+        <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
+          您在<a style="text-decoration:none;color: #12addb;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的文章有了新的评论
+        </h2>
+        <p><strong>${NICK}</strong>回复说：</p>
+        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${COMMENT}</div>
+        <p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br></p>
+      </div>`
+  }
   let sendResult
   try {
     sendResult = await transporter.sendMail({
@@ -810,22 +831,34 @@ async function noticeReply (currentComment) {
   const POST_URL = (currentComment.href || config.SITE_URL + currentComment.url) + '#' + currentComment._id
   const SITE_URL = config.SITE_URL
   const emailSubject = config.MAIL_SUBJECT || `${PARENT_NICK}，您在『${SITE_NAME}』上的评论收到了回复`
-  const emailContent = config.MAIL_TEMPLATE || `
-    <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
-      <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
-        您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的评论有了新的回复
-      </h2>
-      ${PARENT_NICK} 同学，您曾发表评论：
-      <div style="padding:0 12px 0 12px;margin-top:18px">
-        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${PARENT_COMMENT}</div>
-        <p><strong>${NICK}</strong>回复说：</p>
-        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${COMMENT}</div>
-        <p>
-          您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>，
-          欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。<br>
-        </p>
-      </div>
-    </div>`
+  let emailContent
+  if (config.MAIL_TEMPLATE) {
+    emailContent = config.MAIL_TEMPLATE
+      .replace(/\${SITE_URL}/g, SITE_URL)
+      .replace(/\${SITE_NAME}/g, SITE_NAME)
+      .replace(/\${PARENT_NICK}/g, PARENT_NICK)
+      .replace(/\${PARENT_COMMENT}/g, PARENT_COMMENT)
+      .replace(/\${NICK}/g, NICK)
+      .replace(/\${COMMENT}/g, COMMENT)
+      .replace(/\${POST_URL}/g, POST_URL)
+  } else {
+    emailContent = `
+      <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
+        <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
+          您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的评论有了新的回复
+        </h2>
+        ${PARENT_NICK} 同学，您曾发表评论：
+        <div style="padding:0 12px 0 12px;margin-top:18px">
+          <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${PARENT_COMMENT}</div>
+          <p><strong>${NICK}</strong>回复说：</p>
+          <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${COMMENT}</div>
+          <p>
+            您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>，
+            欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。<br>
+          </p>
+        </div>
+      </div>`
+  }
   let sendResult
   try {
     sendResult = await transporter.sendMail({
@@ -1065,7 +1098,9 @@ function getConfig () {
     code: RES_CODE.SUCCESS,
     config: {
       SITE_NAME: config.SITE_NAME,
-      SITE_URL: config.SITE_URL
+      SITE_URL: config.SITE_URL,
+      MASTER_TAG: config.MASTER_TAG,
+      COMMENT_BG_IMG: config.COMMENT_BG_IMG
     }
   }
 }

diff --git a/src/view/components/TkAdminComment.vue b/src/view/components/TkAdminComment.vue
@@ -65,7 +65,7 @@ export default {
       this.getComments()
     },
     handleView (comment) {
-      window.open(comment.href || comment.url)
+      window.open(`${comment.url}#${comment._id}`)
     },
     async handleDelete (comment) {
       this.loading = true

diff --git a/src/view/components/TkAdminConfig.vue b/src/view/components/TkAdminConfig.vue
@@ -34,7 +34,9 @@ export default {
             { key: 'SITE_NAME', desc: '网站名称', ph: '示例：虹墨空间站', value: '' },
             { key: 'SITE_URL', desc: '网站地址', ph: '示例：https://www.imaegoo.com', value: '' },
             { key: 'BLOGGER_EMAIL', desc: '博主的邮箱地址，用于邮件通知、博主标识。', ph: '示例：[email protected]', value: '' },
-            { key: 'COMMENT_PAGE_SIZE', desc: '评论列表分页大小，默认为 8。', ph: '示例：8', value: '' }
+            { key: 'COMMENT_PAGE_SIZE', desc: '评论列表分页大小，默认为 8。', ph: '示例：8', value: '' },
+            { key: 'MASTER_TAG', desc: '博主标识自定义文字，默认为 “博主”。', ph: '示例：站长', value: '' },
+            { key: 'COMMENT_BG_IMG', desc: '评论框自定义背景图片 URL 地址。', ph: '', value: '' }
           ]
         },
         {
@@ -55,8 +57,15 @@ export default {
             { key: 'SENDER_EMAIL', desc: '邮件通知邮箱地址。对于大多数邮箱服务商，SENDER_EMAIL 必须和 SMTP_USER 保持一致，否则无法发送邮件。', ph: '示例：[email protected]', value: '' },
             { key: 'SENDER_NAME', desc: '邮件通知标题。', ph: '示例：虹墨空间站评论提醒', value: '' },
             { key: 'SMTP_SERVICE', desc: '邮件通知邮箱服务商。支持："126", "163", "1und1", "AOL", "DebugMail", "DynectEmail", "FastMail", "GandiMail", "Gmail", "Godaddy", "GodaddyAsia", "GodaddyEurope", "Hotmail", "Mail.ru", "Maildev", "Mailgun", "Mailjet", "Mailosaur", "Mandrill", "Naver", "OpenMailBox", "Outlook365", "Postmark", "QQ", "QQex", "SES", "SES-EU-WEST-1", "SES-US-EAST-1", "SES-US-WEST-2", "SendCloud", "SendGrid", "SendPulse", "SendinBlue", "Sparkpost", "Yahoo", "Yandex", "Zoho", "hot.ee", "iCloud", "mail.ee", "qiye.aliyun"', ph: '示例：QQ', value: '' },
+            { key: 'SMTP_HOST', desc: '自定义 SMTP 服务器地址。如您已配置 SMTP_SERVICE，此项请留空。', ph: '示例：smtp.qq.com', value: '' },
+            { key: 'SMTP_PORT', desc: '自定义 SMTP 端口。如您已配置 SMTP_SERVICE，此项请留空。', ph: '示例：465', value: '' },
+            { key: 'SMTP_SECURE', desc: '自定义 SMTP 是否使用TLS，请填写 true 或 false。如您已配置 SMTP_SERVICE，此项请留空。', ph: '示例：true', value: '' },
             { key: 'SMTP_USER', desc: '邮件通知邮箱用户名。', ph: '示例：[email protected]', value: '' },
-            { key: 'SMTP_PASS', desc: '邮件通知邮箱密码，QQ邮箱请填写授权码。', ph: '示例：password', value: '', secret: true }
+            { key: 'SMTP_PASS', desc: '邮件通知邮箱密码，QQ邮箱请填写授权码。', ph: '示例：password', value: '', secret: true },
+            { key: 'MAIL_SUBJECT', desc: '自定义通知邮件主题，留空则使用默认主题。', ph: '示例：您在虹墨空间站上的评论收到了回复', value: '' },
+            { key: 'MAIL_TEMPLATE', desc: '自定义通知邮件模板，留空则使用默认模板。可包含的字段：${SITE_URL}, ${SITE_NAME}, ${PARENT_NICK}, ${PARENT_COMMENT}, ${NICK}, ${COMMENT}, ${POST_URL}', ph: '', value: '' },
+            { key: 'MAIL_SUBJECT_ADMIN', desc: '自定义博主通知邮件主题，留空则使用默认主题。', ph: '示例：虹墨空间站上有新评论了', value: '' },
+            { key: 'MAIL_TEMPLATE_ADMIN', desc: '自定义博主通知邮件模板，留空则使用默认模板。可包含的字段：${SITE_URL}, ${SITE_NAME}, ${NICK}, ${COMMENT}, ${POST_URL}', ph: '', value: '' }
           ]
         }
       ],

diff --git a/src/view/components/TkAvatar.vue b/src/view/components/TkAvatar.vue
@@ -24,9 +24,9 @@ export default {
   computed: {
     avatar () {
       if (this.mailMd5) {
-        return `https://gravatar.loli.net/avatar/${this.mailMd5}`
+        return `https://gravatar.loli.net/avatar/${this.mailMd5}?d=identicon`
       } else if (this.mail) {
-        return `https://gravatar.loli.net/avatar/${md5(this.mail)}`
+        return `https://gravatar.loli.net/avatar/${md5(this.mail)}?d=identicon`
       } else {
         return ''
       }

diff --git a/src/view/components/TkComment.vue b/src/view/components/TkComment.vue
@@ -8,7 +8,7 @@
           <a class="tk-nick tk-nick-link" v-if="convertedLink" :href="convertedLink" target="_blank">
             <strong>{{ comment.nick }}</strong>
           </a>
-          <span class="tk-tag tk-tag-green" v-if="comment.master">博主</span>
+          <span class="tk-tag tk-tag-green" v-if="comment.master">{{ config.MASTER_TAG || '博主' }}</span>
           <small class="tk-time">{{ displayCreated }}</small>
         </div>
         <tk-action :liked="comment.liked"
@@ -30,13 +30,15 @@
         <tk-comment v-for="reply in comment.replies"
             :key="reply.id"
             :comment="reply"
+            :config="config"
             @load="onLoad"
             @reply="onReplyReply" />
       </div>
       <!-- 回复框 -->
       <tk-submit v-if="replying"
           :reply-id="comment.id"
           :pid="pid"
+          :config="config"
           @load="onLoad"
           @cancel="onCancel" />
       <div class="tk-expand" v-if="showExpand" @click="onExpand">展开</div>
@@ -97,7 +99,8 @@ export default {
   },
   props: {
     comment: Object,
-    replying: Boolean
+    replying: Boolean,
+    config: Object
   },
   computed: {
     displayCreated () {

diff --git a/src/view/components/TkComments.vue b/src/view/components/TkComments.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tk-comments">
-    <tk-submit @load="initComments" />
+    <tk-submit @load="initComments" :config="config" />
     <div class="tk-comments-container" v-loading="loading">
       <div class="tk-comments-title">
         <span>{{ count }} 条评论</span>
@@ -11,6 +11,7 @@
         :key="comment.id"
         :comment="comment"
         :replying="replyId === comment.id"
+        :config="config"
         @reply="onReply"
         @load="initComments" />
       <div class="tk-expand" v-if="showExpand" @click="onExpand" v-loading="loadingMore">查看更多</div>
@@ -33,6 +34,7 @@ export default {
     return {
       loading: true,
       loadingMore: false,
+      config: {},
       comments: [],
       showExpand: true,
       count: 0,
@@ -41,6 +43,12 @@ export default {
     }
   },
   methods: {
+    async initConfig () {
+      const result = await call(this.$tcb, 'GET_CONFIG', event)
+      if (result && result.result && result.result.config) {
+        this.config = result.result.config
+      }
+    },
     async initComments () {
       this.loading = true
       await this.getComments({
@@ -64,7 +72,7 @@ export default {
       if (comments && comments.result && comments.result.data) {
         this.comments = event.before ? this.comments.concat(comments.result.data) : comments.result.data
         this.showExpand = comments.result.more
-        this.count = comments.result.count || this.comments.length
+        this.count = comments.result.count || this.comments.length || 0
       }
     },
     onReply (id) {
@@ -75,6 +83,7 @@ export default {
     }
   },
   mounted () {
+    this.initConfig()
     this.initComments()
   }
 }

diff --git a/src/view/components/TkSubmit.vue b/src/view/components/TkSubmit.vue
@@ -6,6 +6,7 @@
         <tk-meta-input :nick="nick" :mail="mail" :link="link" @update="onMetaUpdate" />
         <el-input class="tk-input"
             type="textarea"
+            ref="textarea"
             v-model="comment"
             placeholder="请输入内容"
             :autosize="{ minRows: 3 }"
@@ -44,7 +45,8 @@ export default {
   },
   props: {
     replyId: String,
-    pid: String
+    pid: String,
+    config: Object
   },
   data () {
     return {
@@ -106,6 +108,19 @@ export default {
       this.comment = ''
       this.isSending = false
       this.$emit('load')
+    },
+    onBgImgChange () {
+      if (this.config.COMMENT_BG_IMG && this.$refs.textarea) {
+        this.$refs.textarea.$refs.textarea.style['background-image'] = `url("${this.config.COMMENT_BG_IMG}")`
+      }
+    }
+  },
+  mounted () {
+    this.onBgImgChange()
+  },
+  watch: {
+    'config.COMMENT_BG_IMG': function () {
+      this.onBgImgChange()
     }
   }
 }
@@ -150,6 +165,10 @@ export default {
 .tk-input {
   flex: 1;
 }
+.tk-input /deep/ .el-textarea__inner {
+  background-position: right bottom;
+  background-repeat: no-repeat;
+}
 .tk-preview-container {
   margin-left: 3rem;
   margin-bottom: 1rem;