From d107853e73bb255580dfdeb8c7da8d58c4b4cb46 Mon Sep 17 00:00:00 2001 From: Benny Guo Date: Sun, 6 Aug 2023 15:58:20 +0800 Subject: [PATCH] feat: added page view and comment count for all pages --- src/components/Footer.vue | 6 +- .../{PageContainer.vue => PageContent.vue} | 54 +++- src/components/Post/PostStats.vue | 239 ++++++++++++++++++ src/components/Post/PostStatsType.ts | 1 + src/models/Article.class.ts | 1 + src/utils/comments/helpers.ts | 3 +- src/utils/comments/waline-api.ts | 5 +- src/views/About.vue | 6 +- src/views/Page.vue | 8 +- src/views/Post.vue | 220 +++------------- 10 files changed, 329 insertions(+), 214 deletions(-) rename src/components/{PageContainer.vue => PageContent.vue} (68%) create mode 100644 src/components/Post/PostStats.vue create mode 100644 src/components/Post/PostStatsType.ts diff --git a/src/components/Footer.vue b/src/components/Footer.vue index f198ffb0..fa84d1e3 100644 --- a/src/components/Footer.vue +++ b/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 ) } diff --git a/src/components/PageContainer.vue b/src/components/PageContent.vue similarity index 68% rename from src/components/PageContainer.vue rename to src/components/PageContent.vue index 6dfb5e17..72d06e03 100644 --- a/src/components/PageContainer.vue +++ b/src/components/PageContent.vue @@ -10,6 +10,17 @@ width="100%" height="clamp(1.2rem, calc(1rem + 3.5vw), 4rem)" /> + +
+ +
@@ -21,15 +32,7 @@ />
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> { + 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() 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 } } diff --git a/src/components/Post/PostStats.vue b/src/components/Post/PostStats.vue new file mode 100644 index 00000000..86f6bc03 --- /dev/null +++ b/src/components/Post/PostStats.vue @@ -0,0 +1,239 @@ + + + diff --git a/src/components/Post/PostStatsType.ts b/src/components/Post/PostStatsType.ts new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/src/components/Post/PostStatsType.ts @@ -0,0 +1 @@ + diff --git a/src/models/Article.class.ts b/src/models/Article.class.ts index b7e624c1..c84d887c 100644 --- a/src/models/Article.class.ts +++ b/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) { diff --git a/src/utils/comments/helpers.ts b/src/utils/comments/helpers.ts index fe7518c0..ca400ea0 100644 --- a/src/utils/comments/helpers.ts +++ b/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 } } diff --git a/src/utils/comments/waline-api.ts b/src/utils/comments/waline-api.ts index 34db439b..a215e504 100644 --- a/src/utils/comments/waline-api.ts +++ b/src/utils/comments/waline-api.ts @@ -75,11 +75,10 @@ export const walineInit = ({ return init(options) } -export const walinePageViewInit = (serverURL: string) => { - console.log(123) +export const walinePageViewInit = (serverURL: string, path: string) => { pageviewCount({ serverURL, - path: window.location.pathname + path }) } diff --git a/src/views/About.vue b/src/views/About.vue index f5cbd4f5..4f40331a 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -1,7 +1,7 @@ @@ -9,13 +9,13 @@ import { defineComponent, onMounted, ref } from 'vue' import { useArticleStore } from '@/stores/article' import { Page } from '@/models/Article.class' -import PageContainer from '@/components/PageContainer.vue' +import PageContent from '@/components/PageContent.vue' import Breadcrumbs from '@/components/Breadcrumbs.vue' import { useI18n } from 'vue-i18n' export default defineComponent({ name: 'About', - components: { PageContainer, Breadcrumbs }, + components: { PageContent, Breadcrumbs }, setup() { const articleStore = useArticleStore() const pageData = ref(new Page()) diff --git a/src/views/Page.vue b/src/views/Page.vue index 737f3cea..d2115401 100644 --- a/src/views/Page.vue +++ b/src/views/Page.vue @@ -1,7 +1,7 @@ @@ -21,13 +21,13 @@ import { useI18n } from 'vue-i18n' import { useRoute } from 'vue-router' import { useAppStore } from '@/stores/app' import { useMetaStore } from '@/stores/meta' -import PageContainer from '@/components/PageContainer.vue' +import PageContent from '@/components/PageContent.vue' import Breadcrumbs from '@/components/Breadcrumbs.vue' import Comment from '@/components/Comment.vue' export default defineComponent({ name: 'Page', - components: { PageContainer, Breadcrumbs, Comment }, + components: { PageContent, Breadcrumbs, Comment }, setup() { const articleStore = useArticleStore() const appStore = useAppStore() diff --git a/src/views/Post.vue b/src/views/Post.vue index fac72242..ac814a8c 100644 --- a/src/views/Post.vue +++ b/src/views/Post.vue @@ -85,173 +85,14 @@
-
- - - - {{ post.count_time.symbolsTime }} - - - - - - {{ post.count_time.symbolsCount }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{ commentCount }} - - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - -
+
@@ -336,7 +177,7 @@ import { Sidebar, Toc, Profile } from '@/components/Sidebar' import { Post } from '@/models/Post.class' import { usePostStore } from '@/stores/post' -import { computed, defineComponent, nextTick, ref, watch } from 'vue' +import { Ref, computed, defineComponent, nextTick, ref, watch } from 'vue' import { useRoute } from 'vue-router' import { useI18n } from 'vue-i18n' import Comment from '@/components/Comment.vue' @@ -349,17 +190,27 @@ import { useAppStore } from '@/stores/app' import { useCommonStore } from '@/stores/common' import SvgIcon, { SvgTypes } from '@/components/SvgIcon/index.vue' -import { - enabledCommentPlugin, - initCommentPluginCommentCount, - intiCommentPluginPageView -} from '@/utils/comments/helpers' +import PostStats from '@/components/Post/PostStats.vue' + +interface PostStatsExpose extends Ref> { + getCommentCount(): void + getPostView(): void +} declare const Prism: any export default defineComponent({ name: 'ObPost', - components: { Sidebar, Toc, Comment, SubTitle, Article, Profile, SvgIcon }, + components: { + Sidebar, + Toc, + Comment, + SubTitle, + Article, + Profile, + SvgIcon, + PostStats + }, setup() { const metaStore = useMetaStore() const postStore = usePostStore() @@ -369,11 +220,7 @@ 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 postStatsRef = ref() const fetchData = async () => { loading.value = true @@ -400,15 +247,8 @@ export default defineComponent({ ) } await nextTick() - intiCommentPluginPageView( - enabledPlugin.value, - appStore.themeConfig.plugins - ) - commentCount.value = await initCommentPluginCommentCount( - enabledPlugin.value, - route.path, - appStore.themeConfig.plugins - ) + postStatsRef.value?.getCommentCount() + postStatsRef.value?.getPostView() Prism.highlightAll() } @@ -427,9 +267,9 @@ export default defineComponent({ return { isMobile: computed(() => commonStore.isMobile), currentPath: computed(() => route.path), - commentCount, + pluginConfigs: computed(() => appStore.themeConfig.plugins), + postStatsRef, SvgTypes, - enabledPlugin, commonStore, fetchData, handleAuthorClick,