HJ-Press/docs/software/aps.md

---

title: 客户端 icon: nimbus:browser createTime: 2024/03/07 21:58:48

permalink: /guide/api/client/

使用

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 请查看 源代码 。