feat: added valine, twikoo and valine post views stat

virtualansh · Aug 6, 2023 · 517e9d0 · 517e9d0
1 parent 2d15ac6
commit 517e9d0
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 21 deletions.
diff --git a/src/styles/components/article.scss b/src/styles/components/article.scss
@@ -642,7 +642,7 @@
   .post-stats {
     @apply flex-row text-sm lg:text-base mr-4 hidden lg:flex;
     > span {
-      @apply text-white stroke-current flex flex-row items-center pr-4 opacity-80;
+      @apply text-white stroke-current flex flex-row items-center pr-4;
     }
   }
 }

diff --git a/src/utils/comments/twikoo-api.ts b/src/utils/comments/twikoo-api.ts
@@ -42,10 +42,23 @@ export const twikooInit = (configs: TwikooInitConfig) => {
     el: '#tcomment', // 容器元素
     region: configs.region, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
     path: configs.path, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
-    lang: configs.lang // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+    lang: configs.lang, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+    visitor: true
   })
 }
 
+export const twikooCommentsCount = async (
+  envId: string,
+  path: string
+): Promise<number> => {
+  const commentCounts = await twikoo.getCommentsCount({
+    envId,
+    urls: [path],
+    includeReply: true
+  })
+  return commentCounts[0] ? Number(commentCounts[0].count) : 0
+}
+
 export class TwikooComments {
   configs: TwikooConfig = defaultConfig
 

diff --git a/src/utils/comments/waline-api.ts b/src/utils/comments/waline-api.ts
@@ -2,6 +2,8 @@ declare const Waline: any
 
 import {
   init,
+  pageviewCount,
+  commentCount,
   RecentComments
   // @ts-expect-error
 } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'
@@ -73,6 +75,21 @@ export const walineInit = ({
   return init(options)
 }
 
+export const walinePageViewInit = (serverURL: string) => {
+  console.log(123)
+  pageviewCount({
+    serverURL,
+    path: window.location.pathname
+  })
+}
+
+export const walineCommentViewInit = (serverURL: string, path: string) => {
+  commentCount({
+    serverURL,
+    path
+  })
+}
+
 export class WalineComments {
   configs: Partial<WalineConfig> = {
     serverURL: '',

diff --git a/src/views/Post.vue b/src/views/Post.vue
@@ -90,28 +90,163 @@
             v-if="post.count_time.symbolsTime && post.date"
           >
             <span>
-              <SvgIcon icon-class="clock-outline" stroke="var(--text-white)" />
+              <SvgIcon
+                icon-class="clock-outline"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
               <span class="pl-2 opacity-70">
                 {{ post.count_time.symbolsTime }}
               </span>
             </span>
             <span>
-              <SvgIcon icon-class="text-outline" stroke="var(--text-white)" />
+              <SvgIcon
+                icon-class="text-outline"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
               <span class="pl-2 opacity-70">
                 {{ post.count_time.symbolsCount }}
               </span>
             </span>
+
+            <!-- Waline -->
+            <span v-if="enabledPlugin === 'waline'">
+              <SvgIcon
+                class="h-5 w-5"
+                icon-class="hot"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2 opacity-70">
+                <span class="waline-pageview-count" />
+              </span>
+            </span>
+            <span v-if="enabledPlugin === 'waline'">
+              <SvgIcon
+                class="h-5 w-5"
+                icon-class="quote"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2 opacity-70">
+                <span class="waline-comment-count" :data-path="currentPath" />
+              </span>
+            </span>
+
+            <!-- Twikoo -->
+            <span v-if="enabledPlugin === 'twikoo'">
+              <SvgIcon
+                class="h-5 w-5"
+                icon-class="hot"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2 opacity-70" id="twikoo_visitors">
+                <ob-skeleton width="40px" height="16px" />
+              </span>
+            </span>
+            <span v-if="enabledPlugin === 'twikoo'">
+              <SvgIcon
+                class="h-5 w-5"
+                icon-class="quote"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2 opacity-70">
+                {{ commentCount }}
+              </span>
+            </span>
+
+            <!-- Valine -->
+            <span v-if="enabledPlugin === 'valine'">
+              <SvgIcon
+                class="h-5 w-5"
+                icon-class="hot"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2 opacity-70">
+                <span
+                  :id="currentPath"
+                  class="leancloud_visitors"
+                  :data-flag-title="post.title"
+                >
+                  <i class="leancloud-visitors-count">
+                    <ob-skeleton width="40px" height="16px" />
+                  </i>
+                </span>
+              </span>
+            </span>
           </div>
 
           <div v-else class="post-stats">
             <span>
-              <SvgIcon icon-class="clock" />
+              <SvgIcon
+                icon-class="clock-outline"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
               <span class="pl-2">
                 <ob-skeleton width="40px" height="16px" />
               </span>
             </span>
             <span>
-              <SvgIcon icon-class="text" />
+              <SvgIcon
+                icon-class="text-outline"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2">
+                <ob-skeleton width="40px" height="16px" />
+              </span>
+            </span>
+            <span
+              v-if="
+                enabledPlugin === 'waline' ||
+                enabledPlugin === 'twikoo' ||
+                enabledPlugin === 'valine'
+              "
+            >
+              <SvgIcon
+                icon-class="hot"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
+              <span class="pl-2">
+                <ob-skeleton width="40px" height="16px" />
+              </span>
+            </span>
+            <span
+              v-if="enabledPlugin === 'waline' || enabledPlugin === 'twikoo'"
+            >
+              <SvgIcon
+                icon-class="quote"
+                fill="none"
+                stroke="white"
+                height="1.25em"
+                width="1.25em"
+              />
               <span class="pl-2">
                 <ob-skeleton width="40px" height="16px" />
               </span>
@@ -201,15 +336,7 @@
 import { Sidebar, Toc, Profile } from '@/components/Sidebar'
 import { Post } from '@/models/Post.class'
 import { usePostStore } from '@/stores/post'
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch
-} from 'vue'
+import { computed, defineComponent, nextTick, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import Comment from '@/components/Comment.vue'
@@ -221,7 +348,12 @@ import { useMetaStore } from '@/stores/meta'
 import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'
 
-import SvgIcon from '@/components/SvgIcon/index.vue'
+import SvgIcon, { SvgTypes } from '@/components/SvgIcon/index.vue'
+import {
+  enabledCommentPlugin,
+  initCommentPluginCommentCount,
+  intiCommentPluginPageView
+} from '@/utils/comments/helpers'
 
 declare const Prism: any
 
@@ -237,6 +369,11 @@ export default defineComponent({
     const { t } = useI18n()
     const post = ref(new Post())
     const loading = ref(true)
+    const commentCount = ref(0)
+
+    const enabledPlugin = computed(
+      () => enabledCommentPlugin(appStore.themeConfig.plugins).plugin
+    )
 
     const fetchData = async () => {
       loading.value = true
@@ -263,6 +400,15 @@ export default defineComponent({
         )
       }
       await nextTick()
+      intiCommentPluginPageView(
+        enabledPlugin.value,
+        appStore.themeConfig.plugins
+      )
+      commentCount.value = await initCommentPluginCommentCount(
+        enabledPlugin.value,
+        route.path,
+        appStore.themeConfig.plugins
+      )
       Prism.highlightAll()
     }
 
@@ -278,18 +424,25 @@ export default defineComponent({
       window.location.href = link
     }
 
-    onMounted(fetchData)
-    onBeforeUnmount(() => {
-      commonStore.resetHeaderImage()
-    })
-
     return {
       isMobile: computed(() => commonStore.isMobile),
+      currentPath: computed(() => route.path),
+      commentCount,
+      SvgTypes,
+      enabledPlugin,
+      commonStore,
+      fetchData,
       handleAuthorClick,
       loading,
       post,
       t
     }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  beforeUnmount() {
+    this.commonStore.resetHeaderImage()
   }
 })
 </script>