286 add feature to close off comments completely when no comment plugin is used

src/components/Footer.vue

@@ -121,37 +121,23 @@ import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import SvgIcon, { SvgTypes } from '@/components/SvgIcon/index.vue'
 import beianImg from '@/assets/gongan-beian-40-40.png'
-import { walinePageViewInit } from '@/utils/comments/waline-api'
-import {
-  enabledCommentPlugin,
-  intiCommentPluginPageView
-} from '@/utils/comments/helpers'
 import { getDaysTillNow } from '@/utils'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'ObFooter',
   components: { SvgIcon },
   setup() {
     const appStore = useAppStore()
     const { t } = useI18n()
-
-    const enabledPlugin = computed(
-      () => enabledCommentPlugin(appStore.themeConfig.plugins).plugin
-    )
+    const { enabledCommentPlugin, intiCommentPluginPageView } =
+      useCommentPlugin()
 
     watch(
-      () => enabledPlugin.value,
+      () => enabledCommentPlugin.value.plugin,
       (newValue, oldValue) => {
         if (oldValue === '' && newValue) {
-          window.setTimeout(
-            () =>
-              intiCommentPluginPageView(
-                newValue,
-                '/',
-                appStore.themeConfig.plugins
-              ),
-            50
-          )
+          window.setTimeout(() => intiCommentPluginPageView('/'), 50)
         }
       }
     )
@@ -179,7 +165,7 @@ export default defineComponent({
         return getDaysTillNow(`${appStore.themeConfig.site.started_date}`)
       }),
       intiCommentPluginPageView,
-      enabledPlugin,
+      enabledPlugin: computed(() => enabledCommentPlugin.value.plugin),
       t
     }
   }

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"
@@ -173,14 +173,10 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, defineExpose } from 'vue'
+import { PropType, computed, defineComponent, ref } from 'vue'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import {
-  enabledCommentPlugin,
-  initCommentPluginCommentCount,
-  intiCommentPluginPageView
-} from '@/utils/comments/helpers'
 import { PluginsData, ThemeConfig } from '@/models/ThemeConfig.class'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'ObPostStats',
@@ -204,28 +200,25 @@ export default defineComponent({
       type: String,
       default: '/',
       required: true
-    }
+    },
+    comments: Boolean
   },
   setup(props, { expose }) {
     const commentCount = ref<number | undefined>(undefined)
-    const enabledPlugin = computed(
-      () => enabledCommentPlugin(props.pluginConfigs).plugin
-    )
+    const {
+      enabledCommentPlugin,
+      initCommentPluginCommentCount,
+      intiCommentPluginPageView
+    } = useCommentPlugin()
 
     const getCommentCount = async () => {
       commentCount.value = await initCommentPluginCommentCount(
-        enabledPlugin.value,
-        props.currentPath,
-        props.pluginConfigs
+        props.currentPath
       )
     }
 
     const getPostView = () => {
-      intiCommentPluginPageView(
-        enabledPlugin.value,
-        props.currentPath,
-        props.pluginConfigs
-      )
+      intiCommentPluginPageView(props.currentPath)
     }
 
     expose({
@@ -235,7 +228,7 @@ export default defineComponent({
 
     return {
       commentCount,
-      plugin: enabledPlugin
+      plugin: computed(() => enabledCommentPlugin.value.plugin)
     }
   }
 })

src/components/Sidebar/src/Navigator.vue

@@ -16,6 +16,7 @@
       <SvgIcon class="inline-block text-3xl" icon-class="back-to-top" />
     </li>
     <li
+      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"
@@ -26,14 +27,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import useJumpToEle from '@/hooks/useJumpToEle'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'Navigator',
   components: { SvgIcon },
+  props: {
+    comments: Boolean
+  },
   setup() {
     const router = useRouter()
     const { jumpToEle } = useJumpToEle()

src/components/Sidebar/src/RecentComment.vue

@@ -98,127 +98,49 @@
 import { computed, defineComponent, ref, watch } from 'vue'
 import { SubTitle } from '@/components/Title'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import { RecentComment } from '@/utils'
-import { GithubComments } from '@/utils/comments/github-api'
-import { LeanCloudComments } from '@/utils/comments/leancloud-api'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
-import { TwikooComments } from '@/utils/comments/twikoo-api'
-import { WalineComments } from '@/utils/comments/waline-api'
 import { SvgTypes } from '@/components/SvgIcon/index.vue'
-import { enabledCommentPlugin } from '@/utils/comments/helpers'
+import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
   name: 'ObRecentComment',
   components: { SubTitle, SvgIcon },
   setup() {
     const appStore = useAppStore()
     const { t } = useI18n()
-    let recentComments = ref<RecentComment[]>([])
-    let loading = ref<boolean>(true)
-
-    const enabledPlugin = computed<string | undefined>(() => {
-      const result = enabledCommentPlugin(appStore.themeConfig.plugins)
-      return result.plugin !== '' && !!result.recentComment
-        ? result.plugin
-        : undefined
-    })
-
-    const initRecentComment = () => {
-      if (!appStore.configReady || enabledPlugin.value === undefined) {
-        loading.value = false
-        return
-      }
-
-      switch (enabledPlugin.value) {
-        case 'gitalk':
-          const githubComments = new GithubComments({
-            repo: appStore.themeConfig.plugins.gitalk.repo,
-            clientId: appStore.themeConfig.plugins.gitalk.clientID,
-            clientSecret: appStore.themeConfig.plugins.gitalk.clientSecret,
-            owner: appStore.themeConfig.plugins.gitalk.owner,
-            admin: appStore.themeConfig.plugins.gitalk.admin[0]
-          })
-
-          githubComments.getComments().then(response => {
-            recentComments.value = response
-          })
-
-          break
-
-        case 'valine':
-          const leadCloudComments = new LeanCloudComments({
-            appId: appStore.themeConfig.plugins.valine.app_id,
-            appKey: appStore.themeConfig.plugins.valine.app_key,
-            avatar: appStore.themeConfig.plugins.valine.avatar,
-            admin: appStore.themeConfig.plugins.valine.admin,
-            lang: appStore.themeConfig.plugins.valine.lang
-          })
-
-          leadCloudComments.getRecentComments(7).then(res => {
-            recentComments.value = res
-            loading.value = false
-          })
-
-          break
-
-        case 'twikoo':
-          const twikooComments = new TwikooComments({
-            envId: appStore.themeConfig.plugins.twikoo.envId,
-            lang: appStore.themeConfig.plugins.twikoo.lang
-          })
-
-          twikooComments.getRecentComments(7).then(res => {
-            recentComments.value = res
-            loading.value = false
-          })
-
-          break
-
-        case 'waline':
-          const walineComments = new WalineComments({
-            serverURL:
-              'https://' + appStore.themeConfig.plugins.waline.serverURL,
-            lang: appStore.locale ?? 'en'
-          })
-
-          walineComments.getRecentComments(7).then(res => {
-            recentComments.value = res
-            loading.value = false
-          })
-
-          break
-
-        default:
-          loading.value = false
-      }
-    }
+    const {
+      enabledCommentPlugin,
+      recentComments,
+      fetchRecentComment,
+      commentPluginLoading
+    } = useCommentPlugin()
 
     /** Wait for config is ready */
     watch(
       () => appStore.configReady,
       (newValue, oldValue) => {
         if (!oldValue && newValue) {
-          initRecentComment()
+          fetchRecentComment()
         }
       }
     )
 
     return {
       SvgTypes,
-      isLoading: computed(() => loading.value),
+      isLoading: computed(() => commentPluginLoading.value),
       comments: computed(() => {
         return recentComments.value
       }),
       isConfigReady: computed(() => appStore.configReady),
-      initRecentComment,
+      fetchRecentComment,
       enabledCommentPlugin,
       t
     }
   },
   mounted() {
     if (this.isConfigReady) {
-      this.initRecentComment()
+      this.fetchRecentComment()
     }
   }
 })

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