feat: add vssue

package comments plugin, and use it to add vssue

Author: reco_luan

components/Common.vue

@@ -30,7 +30,7 @@
         <Password v-if="!isHasPageKey" :isPage="true"></Password>
         <div v-else>
           <slot></slot>
-          <Valine :isComment="isComment"></Valine>
+          <Comments :isShowComments="isComment"/>
         </div>
       </div>
     </transition>
@@ -43,11 +43,10 @@ import Navbar from '@theme/components/Navbar.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import { resolveSidebarItems } from '../util'
 import Password from '@theme/components/Password'
-import Valine from '@theme/components/Valine/'
 import { setTimeout } from 'timers'
 
 export default {
-  components: { Sidebar, Navbar, Password, Valine },
+  components: { Sidebar, Navbar, Password },
 
   props: ['sidebar', 'isComment'],
 
@@ -185,6 +184,23 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.theme-container.no-sidebar
+  .comments-wrapper
+    padding-left 2rem
+
+.comments-wrapper
+  padding 2rem 2rem 2rem 22rem
+  max-width: 740px;
+  margin: 0 auto;
+@media (max-width: $MQNarrow)
+  .theme-container.no-sidebar
+    .comments-wrapper
+      padding-left 2rem
+  .comments-wrapper
+    padding-left: 16.4rem;
+@media (max-width: $MQMobile)
+  .comments-wrapper
+    padding-left: 2rem
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s;
 }

components/Home.vue

@@ -52,18 +52,17 @@
           </a>
       </span>
       <span>
-        <AccessNumber idVal="/"></AccessNumber>
+        <AccessNumber idVal="/" />
       </span>
     </div>
   </div>
 </template>
 
 <script>
 import NavLink from '@theme/components/NavLink/'
-import AccessNumber from '@theme/components/Valine/AccessNumber'
 
 export default {
-  components: { NavLink, AccessNumber },
+  components: { NavLink },
   data () {
     return {
       recoShow: false

components/HomeBlog.vue

@@ -71,19 +71,18 @@
         </a>
       </span>
       <span>
-        <AccessNumber idVal="/"></AccessNumber>
+        <AccessNumber idVal="/" />
       </span>
     </div>
   </div>
 </template>
 
 <script>
-import AccessNumber from '@theme/components/Valine/AccessNumber'
 import TagList from '@theme/components/TagList.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
 
 export default {
-  components: { AccessNumber, NoteAbstract, TagList },
+  components: { NoteAbstract, TagList },
   data () {
     return {
       recoShow: false,

components/PageInfo.vue

@@ -5,9 +5,18 @@
       v-if="pageInfo.frontmatter.author || $themeConfig.author || $site.title">
       <span>{{ pageInfo.frontmatter.author || $themeConfig.author || $site.title }}</span>
     </i>
-    <i class="iconfont reco-date" v-if="pageInfo.frontmatter.date"><span>{{ pageInfo.frontmatter.date | formatDate }}</span></i>
-    <AccessNumber v-if="isHome !== true" :idVal="pageInfo.path" :numStyle="numStyle"></AccessNumber>
-    <i class="iconfont reco-tag tags" v-if="pageInfo.frontmatter.tags">
+    <i
+      v-if="pageInfo.frontmatter.date"
+      class="iconfont reco-date">
+      <span>{{ pageInfo.frontmatter.date | formatDate }}</span>
+    </i>
+    <AccessNumber
+      v-if="isHome !== true"
+      :idVal="pageInfo.path"
+      :numStyle="numStyle" />
+    <i
+      v-if="pageInfo.frontmatter.tags"
+      class="iconfont reco-tag tags">
       <span
         v-for="(subItem, subIndex) in pageInfo.frontmatter.tags"
         :key="subIndex"
@@ -21,12 +30,10 @@
 </template>
 
 <script>
-import AccessNumber from './Valine/AccessNumber'
 // 引入时间格式化js文件
 import { fromatDateTime } from '@theme/util/formatDate.js'
 
 export default {
-  components: { AccessNumber },
   // props: ['pageInfo', 'currentTag'],
   props: {
     pageInfo: {

components/Valine/AccessNumber.vue

@@ -23,6 +23,16 @@ module.exports = (options, ctx) => ({
     '@vuepress-reco/pagation',
     '@vuepress-reco/screenfull',
     '@vuepress-reco/ga',
+    ['@vuepress-reco/comments', {
+      solution: 'valine',
+      options: {
+        appId: 'Q6hMeY2PSaM9FMkXetzoJoU5-gzGzoHsz',
+        appKey: 'iLQlev5jo2Cm5pLcI0z3qhtr',
+        placeholder: '填写邮箱可以收到回复提醒哦！',
+        notify: true,
+        recordIP: true
+      }
+    }],
     '@vuepress/active-header-links',
     ['@vuepress/plugin-blog', {
       permalink: '/:regular',

components/Valine/index.vue

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.0.9-alpha.11",
+  "version": "1.0.9-alpha.12",
   "description": "this is a vuepress theme",
   "main": "index.js",
   "scripts": {
@@ -31,6 +31,7 @@
     "@vuepress-reco/vuepress-plugin-pagation": "^1.0.3",
     "@vuepress-reco/vuepress-plugin-screenfull": "^1.0.0",
     "@vuepress-reco/vuepress-plugin-ga": "^1.0.2",
+    "@vuepress-reco/vuepress-plugin-comments": "1.0.0-alpha.1",
     "@vuepress/plugin-blog": "1.3.0",
     "leancloud-storage": "3.13.2",
     "valine": "1.3.6",