Components

自动组件注册

新建 components 文件夹,书写任意 Vue 组件。 它们会被自动注册,你甚至可以在你的 Markdown 文件中使用它。

如果存在与主题、Valaxy 的同名组件,覆盖顺序为 用户目录 -> 主题目录 -> Valaxy 客户端目录。 这也意味着你可以只覆盖主题的某个组件,来达到自定义局部主题的效果!

自定义覆盖主题组件

基于此,你可以非常容易地自定义主题的任何地方!

譬如自定义页脚:

可参见 demo/yun/components/YunFooter.vue | GitHub

在博客文件夹中 components 目录下,新建 YunFooter.vue 覆盖你的主题页脚文件。

你可以直接替换掉页脚内容:

<template>
  <div>页脚内容</div>
</template>

也可以继承扩展此前的页脚:

<script lang="ts" setup>
import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
</script>

<template>
  <YunFooter>
    自定义页脚内容
  </YunFooter>
</template>

更多示例

插入不蒜子统计

不蒜子统计

以 valaxy-theme-yun 为例:

默认指在你的博客文件夹下进行操作。

components/ 文件夹下新建 YunFooter.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" /></div>
    <div>本站访客数 <span id="busuanzi_value_site_uv" /> 人次</div>
  </YunFooter>
</template>

components/ 文件夹下新建 YunPostMeta.vue 以自定义每篇文章的信息并显示不蒜子单篇文章统计。

<script lang="ts" setup>
import type { Post } from 'valaxy'
import { useLayout } from 'valaxy'
import YunPostMeta from 'valaxy-theme-yun/components/YunPostMeta.vue'

defineProps<{
  frontmatter: Post
}>()

// 仅在 Post 布局显示
const isPost = useLayout('post')
</script>

<template>
  <YunPostMeta :frontmatter="frontmatter">
    <span v-if="isPost" id="busuanzi_container_page_pv">
      本文总阅读量 <span id="busuanzi_value_page_pv" />
    </span>
  </YunPostMeta>
</template>

原理即覆盖组件,您还可以自由覆盖主题的任意其他组件。

其他

valaxy-addon-components 也是一个充分利用该机制的插件,你也可以参考它的实现方式,以 Valaxy 插件的形式自由发布你的自定义组件。

由于发布的是原生的 Vue 组件,所以打包时它将会完全是按需的,无需您额外担忧。


To Be Continued.