fix: highlighting not working when page route changes

docs/pages/en/integrations/vitepress-plugin-highlight-targeted-heading/index.md

@@ -2,6 +2,11 @@
 
 ## Demo
 
+Try clicking the following two links and observe the changes of the title elements:
+
+- [Highlight headings across pages](/pages/en/guide/getting-started.html#getting-started)
+- [Highlight headings within the page](#how-to-use)
+
 <video controls muted>
   <source src="./assets/demo-video-1.en.mov">
 </video>
@@ -61,9 +66,75 @@ yarn add @nolebase/vitepress-plugin-highlight-targeted-heading
 
 :::
 
-### Configure for VitePress
+### Integrate with VitePress
+
+It consists two major steps to integrate the Enhanced Readabilities plugin into your VitePress project:
+
+1. [Add plugin-specific options into configurations of Vite](#add-plugin-specific-options-into-configurations-of-vite)
+2. [Add plugin into the Theme options of VitePress](#add-plugin-into-the-theme-options-of-vitepress)
+
+#### Add plugin-specific options into configurations of Vite
+
+First of all, in VitePress's [**primary configuration file**](https://vitepress.dev/reference/site-config#config-resolution) (not this is not a **theme configuration file**, it's usually located at `docs/.vitepress/config.ts`, file paths and extensions may be vary), you need to supply some of the [Server-Side Rendering related options](https://vitejs.dev/guide/ssr.html#ssr-externals) in the root configuration object of [Vite](https://vitejs.dev).
+
+Add the Blinking highlight targeted heading plugin package name `@nolebase/vitepress-plugin-highlight-targeted-heading` into the Vite options that required by VitePress to process this plugin:
+
+<!--@include: @/pages/en/snippets/details-colored-diff.md-->
+
+```typescript
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  vite: { // [!code ++]
+    ssr: { // [!code ++]
+      noExternal: [ // [!code ++]
+        // If there are other packages that need to be processed by Vite, you can add them here. // [!code hl]
+        '@nolebase/vitepress-plugin-highlight-targeted-heading', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+  }, // [!code ++]
+  themeConfig: {
+    lang: 'en',
+    title: 'Site Name',
+    // rest of the options...
+  }
+  // rest of the options...
+})
+```
+
+You might have configured the separated [Vite configuration file](https://vitejs.dev/config/) (e.g. `vite.config.ts`) if you are already mastered Vite. In this case, you could ignore the above configuration and add the following configuration to your Vite configuration file:
+
+<!--@include: @/pages/en/snippets/details-colored-diff.md-->
+
+```typescript
+import { defineConfig } from 'vite'
+
+export default defineConfig(() => {
+  return {
+    ssr: { // [!code ++]
+      noExternal: [ // [!code ++]
+        // If there are other packages that need to be processed by Vite, you can add them here. // [!code hl]
+        '@nolebase/vitepress-plugin-highlight-targeted-heading', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+    optimizeDeps: {
+      exclude: ['vitepress'],
+    },
+    plugins: [
+      // other vite plugins...
+    ],
+    // other vite configurations...
+  }
+})
+
+```
+
+If you haven't configured any of the separated [Vite configuration file](https://vitejs.dev/config/) (e.g. `vite.config.ts`) before but still want to have a try with the above configuration, you can create a `vite.config.ts` file in the root directory of your VitePress project and add the above configuration to it. (Don't forget to install `vite` through your package manager as well!)
+
+#### Add plugin into the Theme options of VitePress
 
-In VitePress's [**theme configuration file**](https://vitepress.dev/reference/default-theme-config#default-theme-config) (note that it's not a **configuration file**, it's usually located at `docs/.vitepress/theme/index.ts`, file paths and extensions may be vary), import `@nolebase/vitepress-plugin-enhanced-readabilities` import and add it to the `Layout` extension:
+In VitePress's [**theme configuration file**](https://vitepress.dev/reference/default-theme-config#default-theme-config) (note that it's not a **configuration file**, it's usually located at `docs/.vitepress/theme/index.ts`, file paths and extensions may be vary), import `@nolebase/vitepress-plugin-highlight-targeted-heading` import and add it to the `Layout` extension:
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 

docs/pages/zh-CN/integrations/vitepress-plugin-highlight-targeted-heading/index.md

@@ -2,6 +2,11 @@
 
 ## 效果演示
 
+可以试着点击下面的两个链接，然后观察标题部分发生的变化：
+
+- [跨页面高亮目标标题](/pages/zh-CN/guide/getting-started.html#getting-started)
+- [页面内高亮目标标题](#如何使用)
+
 <video controls muted>
   <source src="./assets/demo-video-1.zh-CN.mov">
 </video>
@@ -63,6 +68,72 @@ yarn add @nolebase/vitepress-plugin-highlight-targeted-heading
 
 ### 为 VitePress 配置
 
+配置分为两个大步骤：
+
+1. [添加 Vite 相关的配置](#添加-vite-相关的配置)
+2. [添加 VitePress 主题相关的配置](#添加-vitepress-主题相关的配置)
+
+#### 添加 Vite 相关的配置
+
+首先，请在你的 VitePress [**核心配置文件**](https://vitepress.dev/reference/site-config#config-resolution) 中（注意不是**主题配置文件**，通常为 `docs/.vitepress/config.ts`，文件路径和拓展名也许会有区别）的根字段中添加 [Vite](https://vitejs.dev) 与 [SSR 服务端渲染相关](https://cn.vitejs.dev/config/ssr-options.html#ssr-external) 的配置。
+
+将高亮插件包 `@nolebase/vitepress-plugin-highlight-targeted-heading` 添加到需要 VitePress 底层的 Vite 帮忙处理的依赖：
+
+<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
+
+```typescript
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  vite: { // [!code ++]
+    ssr: { // [!code ++]
+      noExternal: [ // [!code ++]
+        // 如果还有别的依赖需要添加的话，并排填写和配置到这里即可 // [!code hl]
+        '@nolebase/vitepress-plugin-highlight-targeted-heading', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+  }, // [!code ++]
+  themeConfig: {
+    lang: 'zh-CN',
+    title: '网站标题',
+    // 其他的配置...
+  }
+  // 其他的配置...
+})
+```
+
+如果你很厉害，为 VitePress 的文档站点配置了分离和单独的 [Vite 配置文件](https://vitejs.dev/config/)（比如 `vite.config.ts`），那你也可以省略上面的配置，直接在 Vite 的配置文件中添加下面的配置：
+
+<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
+
+```typescript
+import { defineConfig } from 'vite'
+
+export default defineConfig(() => {
+  return {
+    ssr: { // [!code ++]
+      noExternal: [ // [!code ++]
+        // 如果还有别的依赖需要添加的话，并排填写和配置到这里即可 // [!code hl]
+        '@nolebase/vitepress-plugin-highlight-targeted-heading', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+    optimizeDeps: {
+      exclude: ['vitepress'],
+    },
+    plugins: [
+      // 其他 Vite 插件配置...
+    ],
+    // 其他的配置...
+  }
+})
+
+```
+
+如果你在没有单独配置过 [Vite 配置文件](https://vitejs.dev/config/)（比如 `vite.config.ts`）的情况下想要直接复制上面的代码的话，只需要在 VitePress 站点所在的地方新建一个 `vite.config.ts` 即可，不过也记得还需要通过包管理器安装一下 `vite` 哦。
+
+#### 添加 VitePress 主题相关的配置
+
 在 VitePress 的[**主题配置文件**](https://vitepress.dev/reference/default-theme-config#default-theme-config)中（注意不是**配置文件**，通常为 `docs/.vitepress/theme/index.ts`，文件路径和拓展名也许会有区别），将 `@nolebase/vitepress-plugin-highlight-targeted-heading` 导入，并且将其添加到 `Layout` 的拓展中：
 
 <!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->

packages/vitepress-plugin-highlight-targeted-heading/src/components/HighlightTargetedHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
-import { onMounted } from 'vue'
+import { nextTick, onMounted, watch } from 'vue'
+import { useRoute } from 'vitepress'
 
 function handleHighlight() {
   if (!window || !window.location)
@@ -34,7 +35,15 @@ function handleHighlight() {
   }, 10)
 }
 
+const route = useRoute()
+
 onMounted(handleHighlight)
+
+watch(route, async () => {
+  await nextTick()
+  handleHighlight()
+})
+
 useEventListener('hashchange', handleHighlight)
 </script>
 

packages/vitepress-plugin-highlight-targeted-heading/vite.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
   resolve: {
     dedupe: [
       'vue',
+      'vitepress',
       '@vue/runtime-core',
     ],
   },
@@ -20,10 +21,12 @@ export default defineConfig({
     rollupOptions: {
       external: [
         'vue',
+        'vitepress',
       ],
       output: {
         globals: {
           vue: 'Vue',
+          vitepress: 'vitepress',
         },
       },
     },