feat: added page view and comment count for all pages

src/components/Footer.vue

@@ -145,7 +145,11 @@ export default defineComponent({
         if (oldValue === '' && newValue) {
           window.setTimeout(
             () =>
-              intiCommentPluginPageView(newValue, appStore.themeConfig.plugins),
+              intiCommentPluginPageView(
+                newValue,
+                '/',
+                appStore.themeConfig.plugins
+              ),
             50
           )
         }

src/components/PageContainer.vue → src/components/PageContent.vue

@@ -10,6 +10,17 @@
         width="100%"
         height="clamp(1.2rem, calc(1rem + 3.5vw), 4rem)"
       />
+
+      <div class="flex flex-row items-center justify-start mt-8 mb-4">
+        <PostStats
+          :post-word-count="post.count_time.symbolsCount"
+          :post-time-count="post.count_time.symbolsTime"
+          :post-title="post.title"
+          :current-path="currentPath"
+          :plugin-configs="pluginConfigs"
+          ref="postStatsRef"
+        />
+      </div>
     </div>
     <div class="main-grid">
       <div class="relative">
@@ -21,15 +32,7 @@
         />
         <div
           v-else
-          class="
-            bg-ob-deep-800
-            px-14
-            py-16
-            rounded-2xl
-            shadow-xl
-            block
-            min-h-screen
-          "
+          class="bg-ob-deep-800 px-14 py-16 rounded-2xl shadow-xl block min-h-screen"
         >
           <ob-skeleton
             tag="div"
@@ -70,20 +73,31 @@
 
 <script lang="ts">
 import {
+  Ref,
   computed,
   defineComponent,
+  nextTick,
   onMounted,
   onUnmounted,
+  ref,
   toRefs,
   watch
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Sidebar, Toc, Profile } from '@/components/Sidebar'
 import { useCommonStore } from '@/stores/common'
+import { useRoute } from 'vue-router'
+import PostStats from './Post/PostStats.vue'
+import { useAppStore } from '@/stores/app'
+
+interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
+  getCommentCount(): void
+  getPostView(): void
+}
 
 export default defineComponent({
-  name: 'ObPageContainer',
-  components: { Sidebar, Toc, Profile },
+  name: 'ObPageContent',
+  components: { Sidebar, Toc, Profile, PostStats },
   props: {
     post: {
       type: Object,
@@ -97,19 +111,32 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const appStore = useAppStore()
     const commonStore = useCommonStore()
+    const route = useRoute()
     const { t } = useI18n()
     const post = toRefs(props).post
     const title = toRefs(props).title
+    const postStatsRef = ref<PostStatsExpose>()
 
     watch(
       () => post.value.covers,
       value => {
-        console.log(value)
         if (value) commonStore.setHeaderImage(value)
       }
     )
 
+    watch(
+      () => post.value.count_time.symbolsTime,
+      async value => {
+        if (value) {
+          await nextTick()
+          postStatsRef.value?.getCommentCount()
+          postStatsRef.value?.getPostView()
+        }
+      }
+    )
+
     onMounted(() => {
       commonStore.setHeaderImage(post.value.covers)
     })
@@ -123,6 +150,9 @@ export default defineComponent({
         if (title.value !== '') return title.value
         return post.value.title
       }),
+      currentPath: computed(() => route.path),
+      pluginConfigs: computed(() => appStore.themeConfig.plugins),
+      postStatsRef,
       t
     }
   }

src/components/Post/PostStats.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="post-stats" v-if="postTimeCount && postWordCount">
+    <span>
+      <SvgIcon
+        icon-class="clock-outline"
+        fill="none"
+        stroke="white"
+        height="1.25em"
+        width="1.25em"
+      />
+      <span class="pl-2 opacity-70">
+        {{ postTimeCount }}
+      </span>
+    </span>
+    <span>
+      <SvgIcon
+        icon-class="text-outline"
+        fill="none"
+        stroke="white"
+        height="1.25em"
+        width="1.25em"
+      />
+      <span class="pl-2 opacity-70">
+        {{ postWordCount }}
+      </span>
+    </span>
+
+    <!-- Waline -->
+    <span v-if="plugin === '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">
+          <ob-skeleton width="40px" height="16px" />
+        </span>
+      </span>
+    </span>
+    <span v-if="plugin === '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">
+          <ob-skeleton width="40px" height="16px" />
+        </span>
+      </span>
+    </span>
+
+    <!-- Twikoo -->
+    <span v-if="plugin === '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="plugin === '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">
+        <template v-if="commentCount === undefined">
+          <ob-skeleton width="40px" height="16px" />
+        </template>
+
+        <template v-else>
+          {{ commentCount }}
+        </template>
+      </span>
+    </span>
+
+    <!-- Valine -->
+    <span v-if="plugin === '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="postTitle"
+        >
+          <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-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-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="plugin === 'waline' || plugin === 'twikoo' || plugin === '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="plugin === 'waline' || plugin === '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>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent, ref, defineExpose } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import {
+  enabledCommentPlugin,
+  initCommentPluginCommentCount,
+  intiCommentPluginPageView
+} from '@/utils/comments/helpers'
+import { PluginsData, ThemeConfig } from '@/models/ThemeConfig.class'
+
+export default defineComponent({
+  name: 'ObPostStats',
+  components: { SvgIcon },
+  props: {
+    postWordCount: {
+      type: Number || undefined
+    },
+    postTimeCount: {
+      type: String || undefined
+    },
+    postTitle: {
+      type: String
+    },
+    pluginConfigs: {
+      type: Object as PropType<PluginsData>,
+      default: () => new ThemeConfig().plugins,
+      required: true
+    },
+    currentPath: {
+      type: String,
+      default: '/',
+      required: true
+    }
+  },
+  setup(props, { expose }) {
+    const commentCount = ref<number | undefined>(undefined)
+    const enabledPlugin = computed(
+      () => enabledCommentPlugin(props.pluginConfigs).plugin
+    )
+
+    const getCommentCount = async () => {
+      commentCount.value = await initCommentPluginCommentCount(
+        enabledPlugin.value,
+        props.currentPath,
+        props.pluginConfigs
+      )
+    }
+
+    const getPostView = () => {
+      intiCommentPluginPageView(
+        enabledPlugin.value,
+        props.currentPath,
+        props.pluginConfigs
+      )
+    }
+
+    expose({
+      getCommentCount,
+      getPostView
+    })
+
+    return {
+      commentCount,
+      plugin: enabledPlugin
+    }
+  }
+})
+</script>

src/components/Post/PostStatsType.ts

@@ -0,0 +1 @@
+

src/models/Article.class.ts

@@ -55,6 +55,7 @@ export class Page implements Detail {
   content = ''
   count_time = {}
   toc = ''
+  text = ''
 
   constructor(raw?: { [key: string]: string }) {
     if (raw) {

src/utils/comments/helpers.ts

@@ -37,11 +37,12 @@ export const enabledCommentPlugin = (plugins: PluginsData) => {
 
 export const intiCommentPluginPageView = (
   plugin: string,
+  path: string,
   plugins: PluginsData
 ) => {
   switch (plugin) {
     case 'waline':
-      walinePageViewInit(plugins.waline.serverURL)
+      walinePageViewInit(plugins.waline.serverURL, path)
       break
   }
 }