fix(style): refine styles

1. 发送显示发送中
2. 接入文档页
3. 页脚调整

README.md

@@ -19,6 +19,10 @@ A simple, safe, serverless comment system based on Tencent CloudBase (tcb).
 * 反垃圾评论 | Akismet
 * 邮件 / 微信通知 | Email / WeChat notify
 
+## 演示 | Demo
+
+请查看[twikoo.js.org](https://twikoo.js.org)
+
 ## 快速上手 | Quick Start
 
 请查看[快速上手](https://twikoo.js.org/quick-start.html)

docs/.vuepress/config.js

@@ -5,7 +5,8 @@ module.exports = {
     sidebar: [
       '/',
       '/quick-start',
-      '/configuration'
+      '/configuration',
+      '/faq'
     ],
     lastUpdated: true,
     // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
@@ -16,8 +17,5 @@ module.exports = {
     docsBranch: 'dev',
     // 默认是 false, 设置为 true 来启用
     editLinks: true
-  },
-  plugins: [
-    ['@oak-tree-house/encrypt']
-  ]
+  }
 }

docs/.vuepress/theme/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extend: '@vuepress/theme-default'
+}

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

@@ -0,0 +1,38 @@
+<template>
+  <ParentLayout>
+    <template #page-bottom>
+      <div class="page-edit">
+        <div id="twikoo"></div>
+        <script src="https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js" ref="twikooJs"></script>
+      </div>
+    </template>
+  </ParentLayout>
+</template>
+
+<script>
+import ParentLayout from '@parent-theme/layouts/Layout.vue'
+
+const envId = 'imaegoo-16fe3d'
+
+export default {
+  name: 'Layout',
+  components: {
+    ParentLayout
+  },
+  mounted () {
+    const twikooJs = this.$refs.twikooJs
+    if (twikooJs) {
+      twikooJs.onload = this.initTwikoo
+      this.$router.afterEach(this.onRoute)
+    }
+  },
+  methods: {
+    initTwikoo () {
+      twikoo.init({ envId })
+    },
+    onRoute (to, from) {
+      if (to.path !== from.path) this.initTwikoo()
+    }
+  }
+}
+</script>

docs/faq.md

@@ -0,0 +1 @@
+# 常见问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <[email protected]> (https://github.com/imaegoo)",
   "license": "MIT",

src/view/components/TkFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tk-footer">
-    Powered by <a href="https://github.com/imaegoo/twikoo" target="_blank">Twikoo</a>
+    Powered by <a href="https://twikoo.js.org" target="_blank">Twikoo</a>
     v{{ version }}
   </div>
 </template>
@@ -23,5 +23,6 @@ export default {
   text-align: end;
   font-size: 0.75em;
   color: #999999;
+  margin-top: 1em;
 }
 </style>

src/view/components/TkSubmit.vue

@@ -25,7 +25,7 @@
           type="primary"
           size="small"
           :disabled="!canSend"
-          @click="send">发送</el-button>
+          @click="send">{{ isSending ? '发送中' : '发送' }}</el-button>
     </div>
     <div class="tk-preview-container" v-if="isPreviewing" v-html="commentHtml"></div>
   </div>