style(vuepress-theme-reco): move comments code to page.vue

packages/vuepress-theme-reco/components/Common.vue

@@ -34,11 +34,6 @@
         <Password v-show="!isHasPageKey" :isPage="true" class="password-wrapper-in" key="in"></Password>
         <div :class="{ 'hide': !isHasPageKey }">
           <slot></slot>
-          <ModuleTransition delay=".48">
-            <div v-show="recoShowModule">
-              <Comments :isShowComments="shouldShowComments"/>
-            </div>
-          </ModuleTransition>
         </div>
       </div>
     </div>
@@ -69,9 +64,6 @@
           <Password v-if="!isHasPageKey" :isPage="true"></Password>
           <div v-else>
             <slot></slot>
-            <div v-show="recoShowModule">
-              <Comments :isShowComments="shouldShowComments"/>
-            </div>
           </div>
         </div>
       </transition>
@@ -85,22 +77,17 @@ import Sidebar from '@theme/components/Sidebar'
 import { resolveSidebarItems } from '@theme/helpers/utils'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
-import ModuleTransition from '@theme/components/ModuleTransition'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
   mixins: [moduleTransitonMixin],
 
-  components: { Sidebar, Navbar, Password, ModuleTransition },
+  components: { Sidebar, Navbar, Password },
 
   props: {
     sidebar: {
       type: Boolean,
       default: true
-    },
-    isComment: {
-      type: Boolean,
-      default: true
     }
   },
 
@@ -117,15 +104,6 @@ export default {
     absoluteEncryption () {
       return this.$themeConfig.keyPage && this.$themeConfig.keyPage.absoluteEncryption === true
     },
-    // 是否显示评论
-    shouldShowComments () {
-      const { isShowComments, home } = this.$frontmatter
-      return !(
-        this.isComment == false ||
-        isShowComments == false ||
-        home == true
-      )
-    },
 
     shouldShowNavbar () {
       const { themeConfig } = this.$site
@@ -280,23 +258,7 @@ export default {
   .hide
     height 100vh
     overflow hidden
-.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: 18.4rem;
-@media (max-width: $MQMobile)
-  .comments-wrapper
-    padding-left: 2rem
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s;
 }

packages/vuepress-theme-reco/components/Page.vue

@@ -68,6 +68,10 @@
         </p>
       </div>
     </ModuleTransition>
+
+    <ModuleTransition delay="0.24">
+      <Comments v-if="recoShowModule" :isShowComments="shouldShowComments"/>
+    </ModuleTransition>
   </main>
 </template>
 
@@ -90,6 +94,15 @@ export default {
   },
 
   computed: {
+    // 是否显示评论
+    shouldShowComments () {
+      const { isShowComments, home } = this.$frontmatter
+      return !(
+        this.isComment == false ||
+        isShowComments == false ||
+        home == true
+      )
+    },
     showAccessNumber () {
       return this.$themeConfig.commentsSolution === 'valine'
     },
@@ -242,6 +255,8 @@ function flatten (items, res) {
       .time
         font-weight 400
         color #aaa
+  .comments-wrapper
+    @extend $wrapper
 
 .page-nav
   @extend $wrapper

packages/vuepress-theme-reco/layouts/Category.vue

@@ -1,5 +1,5 @@
 <template>
-  <Common class="categories-wrapper" :sidebar="false" :isComment="false">
+  <Common class="categories-wrapper" :sidebar="false">
     <!-- 分类集合 -->
     <ModuleTransition>
       <ul v-show="recoShowModule" class="category-wrapper">

packages/vuepress-theme-reco/layouts/Tag.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 公共布局 -->
-  <Common class="tag-wrapper" :sidebar="false" :isComment="false">
+  <Common class="tag-wrapper" :sidebar="false">
     <!-- 标签集合 -->
     <ModuleTransition>
       <TagList

packages/vuepress-theme-reco/layouts/Tags.vue

@@ -1,5 +1,5 @@
 <template>
-  <Common  class="tags-wrapper" :sidebar="false" :isComment="false">
+  <Common  class="tags-wrapper" :sidebar="false">
     <!-- 标签集合 -->
     <ModuleTransition>
       <TagList

packages/vuepress-theme-reco/layouts/TimeLines.vue

@@ -1,5 +1,5 @@
 <template>
-  <Common class="timeline-wrapper" :sidebar="false" :isComment="false">
+  <Common class="timeline-wrapper" :sidebar="false">
     <ul class="timeline-content">
       <ModuleTransition >
         <li v-show="recoShowModule" class="desc">Yesterday Once More!</li>