vuepress-plugin-twikoo 1.0.0

package/Comment.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="tcomment"></div>
+</template>
+
+<script>
+export default {
+  mounted () {
+    // 检查是否在浏览器环境中
+    if (typeof window !== 'undefined') {
+      this.initTwikoo()
+    }
+
+    this.$router.afterEach((to, from) => {
+      if (to && from && to.path === from.path) {
+        return
+      }
+      // 检查是否在浏览器环境中
+      if (typeof window !== 'undefined') {
+        this.initTwikoo()
+      }
+    })
+  },
+  methods: {
+    async initTwikoo () {
+      const frontmatter = {
+        to: {},
+        from: {},
+        ...this.$frontmatter
+      }
+
+      if (!this.needComment(frontmatter)) {
+        return
+      }
+
+      const twikoo = await import('twikoo')
+      twikoo.init({
+        ...TWIKOO_OPTIONS,
+        el: '#tcomment'
+      })
+    },
+    needComment (frontmatter) {
+      return frontmatter.comment !== false && frontmatter.comments !== false
+    }
+  }
+}
+</script>

package/README.md

@@ -0,0 +1,76 @@
+# Vuepress-plugin-twikoo
+
+[![](https://img.shields.io/badge/online-preview-faad14.svg?style=popout-square)](https://xin-tan.com/)
+[![](https://img.shields.io/npm/dm/vuepress-plugin-twikoo.svg?style=flat-square)](https://www.npmjs.com/package/vuepress-plugin-twikoo)
+[![](https://img.shields.io/badge/vuepress-≥v1.0.0-3eaf7c.svg?style=popout-square)](https://vuepress.vuejs.org/)
+![](https://img.shields.io/badge/license-MIT-blue.svg?style=popout-square)
+
+
+> Vuepress 1.x 的 Twikoo 评论插件
+
+## 特性
+
+- 支持 Twikoo 评论系统
+- 动态导入 Twikoo 库，减少初始加载时间
+- 响应路由变化，自动刷新评论
+- 支持使用页面的 `$frontmatter` 配置
+- 通过检查 window 对象避免 SSR 错误
+
+## 安装
+
+使用 `npm`:
+
+```bash
+npm install --save vuepress-plugin-twikoo
+```
+
+使用 `yarn`:
+
+```bash
+yarn add vuepress-plugin-twikoo -D
+```
+
+## 使用方法
+
+在 `config.js` 中配置：
+
+```javascript
+module.exports = {
+  plugins: [
+    [
+      'vuepress-plugin-twikoo',
+      {
+        options: {
+          envId: '您的环境 ID',
+          // 其他 Twikoo 配置选项
+        }
+      }
+    ]
+  ]
+}
+```
+
+## 如何在指定页面隐藏评论
+
+如果您想在指定页面隐藏评论插件，请在页面的 frontmatter 中设置 `comment` 或 `comments` 为 `false`。
+
+例如：
+
+```yml
+---
+comment: false 
+# comments: false 
+---
+```
+
+这样，该页面就不会显示评论了。
+
+## 配置选项
+
+- **options** `object`
+
+  **必填**。Twikoo 评论插件的配置选项，与 Twikoo 官方配置一致。
+
+- **container** `string`
+
+  **可选，默认为 `'main.page'`**。包含 Twikoo 评论插件的 DOM 选择器。

package/comment.js

@@ -0,0 +1,5 @@
+import Comment from './Comment.vue'
+
+export default ({ Vue }) => {
+  Vue.component('Comment', Comment)
+}

package/index.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = (opts, ctx) => {
+  return {
+    define: {
+      TWIKOO_OPTIONS: opts.options || {},
+      TWIKOO_CONTAINER: opts.container || 'main.page'
+    },
+    enhanceAppFiles: path.resolve(__dirname, 'comment.js'),
+    globalUIComponents: 'Comment'
+  }
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vuepress-plugin-twikoo",
+  "version": "1.0.0",
+  "description": "Twikoo comment plugin for vuepress 1.x",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/liyao52033/vuepress-plugins.git"
+  },
+  "keywords": [
+    "vuepress",
+    "comment",
+    "plugin",
+    "vue",
+    "twikoo"
+  ],
+  "author": "liyao52033",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liyao52033/vuepress-plugins/issues"
+  },
+  "homepage": "https://github.com/liyao52033/vuepress-plugins/tree/main/vuepress-plugin-twikoo",  
+  "dependencies": {
+    "ejs": "^4.0.1",
+    "twikoo": "^1.6.44"
+  }
+}