fix hook

Author: NeserCode

docs/.vuepress/theme/lib/client/components/Comment.vue

@@ -50,11 +50,7 @@ console.log("[Debug Comment]", [giscusOptions.value, options.value])
 			:loading="giscusOptions.loading"
 		/>
 		<div class="v-nc-comment-placeholder" v-else>
-			<h2 id="v-nc-comment" tabindex="-1">
-				<a class="header-anchor text" href="#v-nc-comment" aria-hidden="true"
-					>评论已关闭</a
-				>
-			</h2>
+			<span class="text">评论已关闭</span>
 		</div>
 	</div>
 </template>

docs/.vuepress/theme/lib/client/components/Page.vue

@@ -6,7 +6,7 @@ import PageNav from "./PageNav.vue"
 import SubToc from "./SubToc.vue"
 import Comment from "./Comment.vue"
 
-import { computed, ref, watch } from "vue"
+import { computed, ref } from "vue"
 import { usePageData, usePageFrontmatter, useRoute } from "vuepress/client"
 import { useThemeData } from "@vuepress/plugin-theme-data/client"
 
@@ -52,13 +52,15 @@ const isCommentActive = computed(() =>
 )
 const commentOption = ref()
 
-// non-flash hook
 const $route = useRoute()
-Hook.onRoute(() => {
-	if (!isCommentActive.value) commentOption.value = undefined
-	else commentOption.value = themeData.value.giscus ?? undefined
-	console.log(isCommentActive.value, commentOption.value)
-}, $route)
+Hook.onRoute(
+	() => {
+		if (!isCommentActive.value) commentOption.value = undefined
+		else commentOption.value = themeData.value.giscus ?? undefined
+	},
+	$route,
+	{ immediate: true }
+)
 
 const pageTitle = computed(() => pageData.value.title)
 setupHeaders()

docs/.vuepress/theme/lib/client/components/SubToc.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue"
-import { usePageData, usePageFrontmatter } from "vuepress/client"
+import { usePageData, usePageFrontmatter, useRoute } from "vuepress/client"
 import { PageHeader } from "vuepress/shared"
 
 import { useSubTocFly } from "../composables/useSubTocFly"
 import { usePluginState } from "../composables/useComponentUtils"
 import { defaultConstants, DefaultThemePageFrontmatter } from "../../shared"
+import { Hook } from "../composables/useHook"
 
 const pageData = usePageData()
 const pageFrontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
@@ -19,19 +20,7 @@ const computedStateSource = computed(() =>
 const isCommentActive = computed(() =>
 	usePluginState("comment", computedStateSource.value)
 )
-const tocHeaders = computed<PageHeader[]>(() => {
-	const headers: PageHeader[] = pageData.value.headers ?? []
-	if (!isCommentActive.value) return headers
-	else if (headers[headers.length - 1].title !== "评论")
-		headers.push({
-			level: 2,
-			link: `#v-nc-comment`,
-			slug: `v-nc-comment`,
-			title: `评论`,
-			children: [],
-		})
-	return headers
-})
+const tocHeaders = ref<PageHeader[]>(pageData.value.headers ?? [])
 
 const tocOptions = {
 	containerTag: "nav",
@@ -47,6 +36,23 @@ const tocOptions = {
 const toc = ref<HTMLDivElement | null>(null)
 const tocFly = ref<HTMLDivElement | null>(null)
 useSubTocFly(toc, tocFly)
+
+const $route = useRoute()
+Hook.onRoute(
+	() => {
+		if (!isCommentActive || !document) return
+		if (document.querySelector("h2#v-nc-comment"))
+			tocHeaders.value.push({
+				level: 2,
+				link: `#v-nc-comment`,
+				slug: `v-nc-comment`,
+				title: `评论`,
+				children: [],
+			})
+	},
+	$route,
+	{ immediate: true }
+)
 </script>
 
 <template>

docs/.vuepress/theme/lib/client/composables/useHook.ts

@@ -4,12 +4,14 @@ import type { RouteLocationNormalizedLoadedGeneric } from "vue-router"
 export const Hook = {
 	onRoute: (
 		callback: () => void,
-		route: RouteLocationNormalizedLoadedGeneric
+		route: RouteLocationNormalizedLoadedGeneric,
+		options?: { immediate?: boolean }
 	) => {
 		watch(
 			() => route.path,
 			() => {
-				nextTick(callback)
+				if (!options?.immediate) nextTick(callback)
+				else callback()
 			},
 			{ immediate: true }
 		)