feat: add feature to disable comment on Pages or Posts individually

Author: bennyxguo

src/components/PageContent.vue

@@ -18,6 +18,7 @@
           :post-title="post.title"
           :current-path="currentPath"
           :plugin-configs="pluginConfigs"
+          :comments="enabledComment"
           ref="postStatsRef"
         />
       </div>
@@ -64,7 +65,7 @@
       <div class="col-span-1">
         <Sidebar>
           <Profile author="blog-author" />
-          <Toc :toc="post.toc" />
+          <Toc :toc="post.toc" :comments="enabledComment" />
         </Sidebar>
       </div>
     </div>
@@ -90,6 +91,7 @@ import { useCommonStore } from '@/stores/common'
 import { useRoute } from 'vue-router'
 import PostStats from './Post/PostStats.vue'
 import { useAppStore } from '@/stores/app'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -119,6 +121,7 @@ export default defineComponent({
     const post = toRefs(props).post
     const title = toRefs(props).title
     const postStatsRef = ref<PostStatsExpose>()
+    const { enabledCommentPlugin } = useCommentPlugin()
 
     watch(
       () => post.value.covers,
@@ -147,6 +150,9 @@ export default defineComponent({
     })
 
     return {
+      enabledComment: computed(
+        () => post.value.comments && enabledCommentPlugin.value.plugin !== ''
+      ),
       pageTitle: computed(() => {
         if (title.value !== '') return title.value
         return post.value.title

src/components/Post/PostStats.vue

@@ -44,7 +44,7 @@
         </span>
       </span>
     </span>
-    <span v-if="plugin === 'waline'">
+    <span v-if="comments && plugin === 'waline'">
       <SvgIcon
         class="h-5 w-5"
         icon-class="quote"
@@ -74,7 +74,7 @@
         <ob-skeleton width="40px" height="16px" />
       </span>
     </span>
-    <span v-if="plugin === 'twikoo'">
+    <span v-if="comments && plugin === 'twikoo'">
       <SvgIcon
         class="h-5 w-5"
         icon-class="quote"
@@ -157,7 +157,7 @@
         <ob-skeleton width="40px" height="16px" />
       </span>
     </span>
-    <span v-if="plugin === 'waline' || plugin === 'twikoo'">
+    <span v-if="comments && (plugin === 'waline' || plugin === 'twikoo')">
       <SvgIcon
         icon-class="quote"
         fill="none"
@@ -200,7 +200,8 @@ export default defineComponent({
       type: String,
       default: '/',
       required: true
-    }
+    },
+    comments: Boolean
   },
   setup(props, { expose }) {
     const commentCount = ref<number | undefined>(undefined)

src/components/Sidebar/src/Navigator.vue

@@ -16,7 +16,7 @@
       <SvgIcon class="inline-block text-3xl" icon-class="back-to-top" />
     </li>
     <li
-      v-if="enabledPlugin"
+      v-if="comments"
       class="flex justify-center py-3 w-full hover:opacity-50 hover:text-ob transition-all cursor-pointer"
       @click="jumpToComments"
       data-dia="jump-to-comment"
@@ -36,10 +36,12 @@ import useCommentPlugin from '@/hooks/useCommentPlugin'
 export default defineComponent({
   name: 'Navigator',
   components: { SvgIcon },
+  props: {
+    comments: Boolean
+  },
   setup() {
     const router = useRouter()
     const { jumpToEle } = useJumpToEle()
-    const { enabledCommentPlugin } = useCommentPlugin()
 
     const backToTop = () => {
       window.scrollTo({
@@ -57,7 +59,6 @@ export default defineComponent({
     }
 
     return {
-      enabledPlugin: computed(() => enabledCommentPlugin.value.plugin !== ''),
       goBack,
       backToTop,
       jumpToComments

src/components/Sidebar/src/Toc.vue

@@ -12,7 +12,7 @@
           />
         </div>
       </transition>
-      <Navigator />
+      <Navigator :comments="comments" />
     </div>
   </Sticky>
 </template>
@@ -27,7 +27,8 @@ export default defineComponent({
   name: 'ObTOC',
   components: { SubTitle, Sticky, Navigator },
   props: {
-    toc: String
+    toc: String,
+    comments: Boolean
   },
   setup(props) {
     const tocData = toRefs(props).toc

src/models/Article.class.ts

@@ -59,7 +59,7 @@ export class Page<DataType = Link[] | Record<string, Link[]>>
     year: 0
   }
   updated = ''
-  comments = false
+  comments = true
   path = ''
   covers: string | null = null
   excerpt: string | null = null

src/models/Post.class.ts

@@ -51,7 +51,7 @@ export class Post {
     year: 0
   }
   updated = ''
-  comments = false
+  comments = true
   path = ''
   excerpt: string | null = null
   keywords: string | null = null

src/views/Links.vue

@@ -20,6 +20,7 @@
             :post-title="pageData.title"
             :current-path="currentPath"
             :plugin-configs="pluginConfigs"
+            :comments="enabledComment"
             ref="postStatsRef"
           />
         </div>
@@ -117,7 +118,6 @@ import LinkCategoryList from '@/components/Link/LinkCategoryList.vue'
 import LinkList from '@/components/Link/LinkList.vue'
 import Comment from '@/components/Comment.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
-import { useMetaStore } from '@/stores/meta'
 import usePageTitle from '@/hooks/usePageTitle'
 import useJumpToEle from '@/hooks/useJumpToEle'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
@@ -173,7 +173,10 @@ export default defineComponent({
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),
-      enabledComment: computed(() => enabledCommentPlugin.value.plugin !== ''),
+      enabledComment: computed(
+        () =>
+          pageData.value.comments && enabledCommentPlugin.value.plugin !== ''
+      ),
       pageTitle,
       jumpToContent,
       postStatsRef,

src/views/Page.vue

@@ -83,7 +83,10 @@ export default defineComponent({
     onBeforeMount(fetchArticle)
 
     return {
-      enabledComment: computed(() => enabledCommentPlugin.value.plugin !== ''),
+      enabledComment: computed(
+        () =>
+          pageData.value.comments && enabledCommentPlugin.value.plugin !== ''
+      ),
       pageTitle: computed(() => pageTitle.value),
       pageData,
       t

src/views/Post.vue

@@ -91,6 +91,7 @@
             :post-title="post.title"
             :current-path="currentPath"
             :plugin-configs="pluginConfigs"
+            :comments="enabledComment"
             ref="postStatsRef"
           />
         </div>
@@ -166,7 +167,7 @@
       <div>
         <Sidebar>
           <Profile :author="post.author.slug || ''" />
-          <Toc :toc="post.toc" />
+          <Toc :toc="post.toc" :comments="enabledComment" />
         </Sidebar>
       </div>
     </div>
@@ -268,7 +269,9 @@ export default defineComponent({
       isMobile: computed(() => commonStore.isMobile),
       currentPath: computed(() => route.path),
       pluginConfigs: computed(() => appStore.themeConfig.plugins),
-      enabledComment: computed(() => enabledCommentPlugin.value.plugin !== ''),
+      enabledComment: computed(
+        () => post.value.comments && enabledCommentPlugin.value.plugin !== ''
+      ),
       postStatsRef,
       SvgTypes,
       commonStore,