fix(0.4.3): 新增QQ通知，修复锚点问题 (#69)

* 新增 QQ通知 #68 * 新增可 hover 到相对时间上查看具体评论时间 * 改进支持自定义 katex 参数 * 修复微信、QQ、邮件推送的锚点不正确 * 修复跳转到回复楼时，自动展开所在楼
twikoojs · Dec 24, 2020 · afbd94f · afbd94f
1 parent 62c9f0e
commit afbd94f
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 19 deletions.
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
@@ -2,8 +2,11 @@
   <ParentLayout>
     <template #page-bottom>
       <div class="page-edit">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+        <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/[email protected].2/dist/twikoo.all.min.js" ref="twikooJs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js" ref="twikooJs"></script>
       </div>
     </template>
   </ParentLayout>

diff --git a/docs/faq.md b/docs/faq.md
@@ -61,3 +61,21 @@ Twikoo 支持 Katex 公式，但为了限制 Twikoo 的包大小，Twikoo 没有
 载入后，您可以发送 `$$c = \pm\sqrt{a^2 + b^2}$$` 测试效果。
 
 ![katex](./static/katex.png)
+
+您还可以在 `twikoo.init` 时传入自定义 katex 配置，详细配置请查看 [Katex Auto-render Extension](https://katex.org/docs/autorender.html)。
+
+``` js
+twikoo.init({
+  envId: '您的环境id',
+  el: '#tcomment',
+  katex: {
+    delimiters: [
+      { left: '$$', right: '$$', display: true },
+      { left: '$', right: '$', display: false },
+      { left: '\\(', right: '\\)', display: false },
+      { left: '\\[', right: '\\]', display: true }
+    ],
+    throwOnError: false
+  }
+});
+```
diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -98,7 +98,7 @@ Volantis 目前支持 Twikoo，请查看 [hexo-theme-volantis/_config.yml](https
 ``` yml
 comments:
   twikoo:
-    js: https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js
+    js: https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js
     envId: xxxxxxxxxxxxxxx # 腾讯云环境id
 ```
 
@@ -110,7 +110,7 @@ comments:
 comment:
   type: twikoo
   envId: xxxxxxxxxxxxxxx # 腾讯云环境id
-  jsUrl: https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js
+  jsUrl: https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js
 ```
 
 ### 通过 CDN 引入
@@ -121,7 +121,7 @@ comment:
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/twikoo.all.min.js"></script>
 <script>
 twikoo.init({
   envId: '您的环境id',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",

diff --git a/src/function/twikoo/index.js b/src/function/twikoo/index.js
@@ -1,5 +1,5 @@
 /*!
- * Twikoo cloudbase function v0.4.2
+ * Twikoo cloudbase function v0.4.3
  * (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.2'
+const VERSION = '0.4.3'
 const RES_CODE = {
   SUCCESS: 0,
   FAIL: 1000,
@@ -754,7 +754,7 @@ async function noticeMaster (comment) {
   const NICK = comment.nick
   const COMMENT = comment.comment
   const SITE_URL = config.SITE_URL
-  const POST_URL = comment.href || SITE_URL + comment.url
+  const POST_URL = appendHashToUrl(comment.href || SITE_URL + comment.url, comment.id)
   const emailSubject = config.MAIL_SUBJECT_ADMIN || `${SITE_NAME}上有新评论了`
   let emailContent
   if (config.MAIL_TEMPLATE_ADMIN) {
@@ -801,7 +801,7 @@ async function noticeWeChat (comment) {
   const NICK = comment.nick
   const COMMENT = $(comment.comment).text()
   const SITE_URL = config.SITE_URL
-  const POST_URL = comment.href || SITE_URL + comment.url
+  const POST_URL = appendHashToUrl(comment.href || SITE_URL + comment.url, comment.id)
   const emailSubject = config.MAIL_SUBJECT_ADMIN || `${SITE_NAME}上有新评论了`
   const emailContent = `${NICK}回复说：\n${COMMENT}\n您可以点击 ${POST_URL} 查看回复的完整內容`
   let scApiUrl = 'https://sc.ftqq.com'
@@ -839,7 +839,7 @@ async function noticeQQ (comment) {
   const IP = comment.ip
   const COMMENT = $(comment.comment).text()
   const SITE_URL = config.SITE_URL
-  const POST_URL = comment.href || SITE_URL + comment.url
+  const POST_URL = appendHashToUrl(comment.href || SITE_URL + comment.url, comment.id)
   const emailSubject = config.MAIL_SUBJECT_ADMIN || `${SITE_NAME}上有新评论了`
   const emailContent = `评论人：${NICK}(${MAIL})\n评论人IP：${IP}\n评论内容：${COMMENT}\n您可以点击 ${POST_URL} 查看回复的完整內容`
   const qmApiUrl = 'https://qmsg.zendee.cn'
@@ -868,7 +868,7 @@ async function noticeReply (currentComment) {
   const NICK = currentComment.nick
   const COMMENT = currentComment.comment
   const PARENT_COMMENT = parentComment.comment
-  const POST_URL = (currentComment.href || config.SITE_URL + currentComment.url) + '#' + currentComment.pid
+  const POST_URL = appendHashToUrl(currentComment.href || config.SITE_URL + currentComment.url, currentComment.id)
   const SITE_URL = config.SITE_URL
   const emailSubject = config.MAIL_SUBJECT || `${PARENT_NICK}，您在『${SITE_NAME}』上的评论收到了回复`
   let emailContent
@@ -914,6 +914,14 @@ async function noticeReply (currentComment) {
   return sendResult
 }
 
+function appendHashToUrl (url, hash) {
+  if (url.indexOf('#') === -1) {
+    return `${url}#${hash}`
+  } else {
+    return `${url.substring(0, url.indexOf('#'))}#${hash}`
+  }
+}
+
 // 将评论转为数据库存储格式
 async function parse (comment) {
   const timestamp = Date.now()

diff --git a/src/js/utils/index.js b/src/js/utils/index.js
@@ -75,12 +75,19 @@ const renderLinks = (el) => {
   }
 }
 
-const renderMath = (el) => {
+const renderMath = (el, options) => {
+  const defaultOptions = {
+    delimiters: [
+      { left: '$$', right: '$$', display: true },
+      { left: '$', right: '$', display: false },
+      { left: '\\(', right: '\\)', display: false },
+      { left: '\\[', right: '\\]', display: true }
+    ],
+    throwOnError: false
+  }
   if (typeof renderMathInElement === 'function') {
     /* eslint-disable-next-line no-undef */
-    renderMathInElement(el, {
-      throwOnError: false
-    })
+    renderMathInElement(el, options || defaultOptions)
   }
 }
 

diff --git a/src/view/components/TkAdminComment.vue b/src/view/components/TkAdminComment.vue
@@ -62,7 +62,7 @@ export default {
       }
       this.$nextTick(() => {
         renderLinks(this.$refs.comments)
-        renderMath(this.$refs['comment-list'])
+        renderMath(this.$refs['comment-list'], this.$twikoo.katex)
       })
       this.loading = false
     },

diff --git a/src/view/components/TkComment.vue b/src/view/components/TkComment.vue
@@ -13,7 +13,9 @@
             <strong>{{ comment.nick }}</strong>
           </a>
           <span class="tk-tag tk-tag-green" v-if="comment.master">{{ config.MASTER_TAG || '博主' }}</span>
-          <small class="tk-time">{{ displayCreated }}</small>
+          <small class="tk-time">
+            <time :datetime="jsonTimestamp" :title="localeTime">{{ displayCreated }}</time>
+          </small>
         </div>
         <tk-action :liked="liked"
             :like-count="like"
@@ -35,6 +37,7 @@
             :key="reply.id"
             :comment="reply"
             :config="config"
+            @expand="onExpand"
             @load="onLoad"
             @reply="onReplyReply" />
       </div>
@@ -113,6 +116,12 @@ export default {
     displayCreated () {
       return timeago(this.comment.created)
     },
+    jsonTimestamp () {
+      return new Date(this.comment.created).toJSON()
+    },
+    localeTime () {
+      return new Date(this.comment.created).toLocaleString()
+    },
     iconOs () {
       return this.getIconBy(this.comment.os, osList)
     },
@@ -142,6 +151,7 @@ export default {
     scrollToComment () {
       if (window.location.hash.indexOf(this.comment.id) !== -1) {
         this.$refs['tk-comment'].scrollIntoView()
+        this.$emit('expand')
       }
     },
     async onLike () {
@@ -183,7 +193,7 @@ export default {
     this.$nextTick(this.scrollToComment)
     this.$nextTick(() => {
       renderLinks(this.$refs.comment)
-      renderMath(this.$refs.comment)
+      renderMath(this.$refs.comment, this.$twikoo.katex)
     })
   },
   watch: {

diff --git a/src/view/components/TkSubmit.vue b/src/view/components/TkSubmit.vue
@@ -133,7 +133,7 @@ export default {
         this.commentHtml = marked(this.comment)
         this.$nextTick(() => {
           renderLinks(this.$refs['comment-preview'])
-          renderMath(this.$refs['comment-preview'])
+          renderMath(this.$refs['comment-preview'], this.$twikoo.katex)
         })
       }
     },