docs: add how to custom components

demo/yun/components/YunFooter.vue

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
+import { useScriptTag } from '@vueuse/core'
 import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
+
+useScriptTag('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
 </script>
 
 <template>
   <YunFooter>
-    自定义页脚内容
+    <!-- 自定义页脚内容 -->
+    <div>本站总访问量 <span id="busuanzi_value_site_pv" /> 次</div>
+    <div>本站访客数 <span id="busuanzi_value_site_uv" /> 人次</div>
   </YunFooter>
 </template>

demo/yun/components/YunPostMeta.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import YunPostMeta from 'valaxy-theme-yun/components/YunPostMeta.vue'
+
+defineProps<{
+  frontmatter: Post
+}>()
+</script>
+
+<template>
+  <YunPostMeta :frontmatter="frontmatter">
+    <span id="busuanzi_container_page_pv">
+      本文总阅读量 <span id="busuanzi_value_page_pv" /> 次
+    </span>
+  </YunPostMeta>
+</template>

docs/pages/guide/custom/components.md

@@ -0,0 +1,100 @@
+---
+title: Components
+title_zh-CN: 自定义组件
+categories:
+  - Custom
+end: false
+---
+
+## 自动组件注册
+
+新建 `components` 文件夹，书写任意 Vue 组件。
+它们会被自动注册，你甚至可以在你的 Markdown 文件中使用它。
+
+如果存在与主题、Valaxy 的同名组件，覆盖顺序为 `用户目录` -> `主题目录` -> `Valaxy 客户端目录`。
+这也意味着你可以只覆盖主题的某个组件，来达到自定义局部主题的效果！
+
+### 自定义覆盖主题组件
+
+基于此，你可以非常容易地自定义主题的任何地方！
+
+譬如自定义页脚：
+
+> 可参见 [demo/yun/components/YunFooter.vue | GitHub](https://github.com/YunYouJun/valaxy/blob/main/demo/yun/components/YunFooter.vue)
+
+在博客文件夹中 `components` 目录下，新建 `YunFooter.vue` 覆盖你的主题页脚文件。
+
+你可以直接替换掉页脚内容：
+
+```vue
+<template>
+  <div>页脚内容</div>
+</template>
+```
+
+也可以继承扩展此前的页脚：
+
+```vue
+<script lang="ts" setup>
+import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
+</script>
+
+<template>
+  <YunFooter>
+    自定义页脚内容
+  </YunFooter>
+</template>
+```
+
+## 更多示例
+
+### 插入不蒜子统计
+
+> [不蒜子统计](http://ibruce.info/2015/04/04/busuanzi/)
+
+以 valaxy-theme-yun 为例：
+
+> 默认指在你的博客文件夹下进行操作。
+
+在 `components/` 文件夹下新建 `YunFooter.vue` 以自定义页脚并显示不蒜子统计。
+你可以根据你的需要自由定制它的样式。
+
+```vue
+<script lang="ts" setup>
+import { useScriptTag } from '@vueuse/core';
+import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
+
+useScriptTag('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
+</script>
+
+<template>
+  <YunFooter>
+    <!-- 自定义页脚内容 -->
+    <div>本站总访问量 <span id="busuanzi_value_site_pv"></span> 次</div>
+    <div>本站访客数 <span id="busuanzi_value_site_uv"></span> 人次</div>
+  </YunFooter>
+</template>
+```
+
+在 `components/` 文件夹下新建 `YunPostMeta.vue` 以自定义每篇文章的信息并显示不蒜子单篇文章统计。
+
+```vue
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import YunPostMeta from 'valaxy-theme-yun/components/YunPostMeta.vue'
+
+defineProps<{
+  frontmatter: Post
+}>()
+</script>
+
+<template>
+  <YunPostMeta :frontmatter="frontmatter">
+    <span id="busuanzi_container_page_pv">
+      本文总阅读量 <span id="busuanzi_value_page_pv"></span> 次
+    </span>
+  </YunPostMeta>
+</template>
+```
+
+原理即覆盖组件，您还可以自由覆盖主题的任意其他组件。

docs/pages/guide/custom/extend.md

@@ -20,46 +20,6 @@ Valaxy 以约定大于配置的方式提供了强大的扩展功能，如果你
 如果你想要有所参考，你可以参见 [valaxy-theme-yun](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-yun)。
 :::
 
-## 自动组件注册
-
-新建 `components` 文件夹，书写任意 Vue 组件。
-它们会被自动注册，你甚至可以在你的 Markdown 文件中使用它。
-
-如果存在与主题、Valaxy 的同名组件，覆盖顺序为 `用户目录` -> `主题目录` -> `Valaxy 客户端目录`。
-这也意味着你可以只覆盖主题的某个组件，来达到自定义局部主题的效果！
-
-### 自定义覆盖主题组件
-
-基于此，你可以非常容易地自定义主题的任何地方！
-
-譬如自定义页脚：
-
-> 可参见 [demo/yun/components/YunFooter.vue | GitHub](https://github.com/YunYouJun/valaxy/blob/main/demo/yun/components/YunFooter.vue)
-
-在博客文件夹中 `components` 目录下，新建 `YunFooter.vue` 覆盖你的主题页脚文件。
-
-你可以直接替换掉页脚内容：
-
-```vue
-<template>
-  <div>页脚内容</div>
-</template>
-```
-
-也可以继承扩展此前的页脚：
-
-```vue
-<script lang="ts" setup>
-import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
-</script>
-
-<template>
-  <YunFooter>
-    自定义页脚内容
-  </YunFooter>
-</template>
-```
-
 ## 自动布局注册
 
 基于 [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)，Valaxy 提供了布局功能。

package.json

@@ -39,27 +39,27 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.34.0",
+    "@antfu/eslint-config": "^0.34.1",
     "@types/debug": "^4.1.7",
     "@types/node": "^18.11.18",
     "@types/prompts": "^2.4.2",
     "@types/resolve": "^1.20.2",
     "@types/semver": "^7.3.13",
     "cross-env": "^7.0.3",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "prompts": "^2.4.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.6",
     "tsup": "^6.5.0",
-    "tsx": "^3.12.1",
+    "tsx": "^3.12.2",
     "typescript": "^4.9.4",
     "valaxy": "workspace:*",
     "valaxy-addon-algolia": "workspace:*",
     "valaxy-addon-waline": "workspace:*",
     "valaxy-theme-press": "workspace:*",
     "valaxy-theme-yun": "workspace:*",
-    "vitest": "^0.26.3",
+    "vitest": "^0.27.1",
     "vue-tsc": "1.0.24",
     "zx": "^7.1.1"
   },

packages/valaxy-theme-yun/components/YunPostMeta.vue

@@ -30,6 +30,8 @@ const { t } = useI18n()
       </template>
     </div>
   </div>
+
+  <slot />
 </template>
 
 <style>