fix(valaxy): update toc when save in dev

docs/pages/themes/write.md

@@ -149,6 +149,42 @@ export interface ValaxyConfig {
 
 ## 开始编写
 
+### App.vue
+
+> 你的入口文件
+
+譬如我想要为主题添加一个全局的 Loading 页面。
+
+你可以从 valaxy 导入全局状态 `useAppStore`，记录 `showLoading` 来实现。
+
+> 你也可以使用你自己的全局状态管理。参见 [状态管理](#状态管理)。
+
+```vue
+<!-- valaxy-theme-yun/App.vue -->
+<script lang="ts" setup>
+import { useHead } from '@vueuse/head'
+import { useAppStore } from 'valaxy'
+import { onMounted } from 'vue'
+
+// ...
+
+const app = useAppStore()
+onMounted(() => {
+  app.showLoading = false
+})
+</script>
+
+<template>
+  <!-- ... -->
+  <!-- 添加 Loading 组件，components/YunLoading.vue -->
+  <!-- https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy-theme-yun/components/YunLoading.vue -->
+  <Transition name="fade">
+    <YunLoading v-if="app.showLoading" />
+  </Transition>
+</template>
+```
+
+
 ### ValaxyMain
 
 你需要自定义一个 `ValaxyMain` 组件来决定主题的文章渲染部分。
@@ -179,6 +215,8 @@ defineProps<{
 
 > 示例可参考 [ValaxyMain.vue | valaxy-theme-yun](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy-theme-yun/components/ValaxyMain.vue)
 
+
+
 ## 样式
 
 ### Markdown 样式
@@ -260,6 +298,32 @@ const fm = useFrontmatter()
 </template>
 ```
 
+#### 全局状态管理
+
+你可以借助 [Pinia](https://pinia.vuejs.org/) （Valaxy 内置）建立自己的全局状态，并在随后使用它，
+
+```ts
+// stores/app.ts
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useYunAppStore = defineStore('yun-app', () => {
+  // global cache for yun
+
+  return {}
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useYunAppStore, import.meta.hot))
+```
+
+```ts
+// where you want to use
+// components/YunExample.vue
+import { useYunAppStore } from '../stores/app'
+
+const yun = useYunAppStore()
+```
+
 ### 目录
 
 如果你想要快速实现一个目录，Valaxy 提供了一个内置钩子函数 `useOutline`。

packages/valaxy/client/components/ValaxyMd.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, onUpdated, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { onContentUpdated, runContentUpdated, useAplayer, useCodePen, useCopyCode, useMediumZoom, wrapTable } from 'valaxy'
 import type { Post } from 'valaxy'
@@ -22,6 +22,10 @@ onMounted(() => {
   runContentUpdated()
 })
 
+onUpdated(() => {
+  runContentUpdated()
+})
+
 // widgets
 if (props.frontmatter.aplayer)
   useAplayer()