使用

import { Layout } from 'vuepress-theme-plume/client'

布局组件

• <Layout />： 页面布局组件
• <NotFound /> ： 404 页面布局组件

import { Layout, NotFound } from 'vuepress-theme-plume/client'

通用组件

• <VPLink /> ： 链接组件
• <VPButton />: 按钮组件
• <VPIcon />: 图标组件
• <VPBadge />: 徽标组件
• <VPImage />: 图片组件
• <VPHomeBox />: 首页布局组件

更多其他组件请查看 源代码

import VPButton from 'vuepress-theme-plume/components/VPButton.vue'
import VPLink from 'vuepress-theme-plume/components/VPLink.vue'

组合式 API

useDarkMode()

• 类型： () => Ref<boolean>

• 详情：

  获取 是否是深色模式的响应式数据。

import { useDarkMode } from 'vuepress-theme-plume/composables'

const isDark = useDarkMode()

// 切换为深色模式
isDark.value = true
// 切换为浅色模式
isDark.value = false

useData()

• 类型： () => Data

• 详情：

  获取 主题 的各项响应式数据。

interface Data {
  // 主题配置
  theme: ThemeLocaleDataRef<PlumeThemeLocaleData>
  // 当前页面数据
  page: PageDataRef<PlumeThemePageData>
  // 当前 页面 frontmatter
  frontmatter: PageFrontmatterRef<Frontmatter<T>>
  // 当前语言
  lang: Ref<string>
  // 站点数据
  site: SiteLocaleDataRef
  // 是否是深色模式
  isDark: Ref<boolean>
}

import { useData } from 'vuepress-theme-plume/composables'

const { site, page, frontmatter, isDark, lang } = useData()

// 当前页面标题
console.log(frontmatter.value.title)

useLocalePostList()

• 类型： () => Ref<PostItem[]>

• 详情：

  获取 文章列表的响应式数据。

interface PostItem {
  path: string
  title: string
  excerpt: string
  tags: string[]
  sticky: boolean
  categoryList: CategoryItem[]
  createTime: string
  lang: string
  encrypt?: boolean
}

interface CategoryItem {
  type: string | number
  name: string
}

import { useLocalePostList } from 'vuepress-theme-plume/composables'

const postList = useLocalePostList()

更多

其它 组合式 API 请查看 源代码 。

贡献者

pengzhanbo

更新日志

2025/3/15 18:29

查看所有更新日志

• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• 6e6f9-docs: improve docs (#509)于 2025/3/2
• 520dc-style: lint fix于 2024/9/10
• b079a-docs: update docs于 2024/6/17
• 920d3-docs: update docs于 2024/3/13
• ca097-docs: lint fix于 2024/3/8
• c56ba-feat: 全新的文档！于 2024/3/8