04-VitePress自带默认属性

这里主要介绍VitePress内置的对象，干什么用，如何获取和使用。

路由相关

获取当前页面路由对象

<script setup>
    import { useRoute } from 'vitepress'
    const route = useRoute()
    console.log(route)
    console.log(route.path) // 当前页面路径
</script>

获取数据

获取当前页面的数据

import { useData } from 'vitepress'

// 获取 frontmatter
const { frontmatter } = useData()

// 获取页面自定义的layoutClass属性
console.log(frontmatter.value?.layoutClass)

比如在nav.md 页面上加上下面的自定义属性

---
description: 页面描述
layoutClass: m-nav-layout
---

主题配置

export default {
  // 主题相关配置
  themeConfig: {
    logo: '/logo.svg', // 左侧导航栏图标
    siteTitle: '开发笔记', // 左侧导航栏标题
    nav: [
      { text: 'Guide', link: '/guide' },
    ], // 导航菜单
    sidebar: { ... }, // 侧边栏菜单
    outline: {
      level: 'deep', // 在大纲中显示的标题级别
      label: '快速导航', // 大纲的标题
    },
    editLink: { // 提供编辑页面的连接
      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
      text: 'Edit this page on GitHub'
    },
    lastUpdatedText: '上次更新', // 上次更新时间显示文本
    docFooter: { // 文档底部文本
      prev: '上一节',
      next: '下一节'
    },
    footer: { // 有 sidebar 时不显示
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2019-present Evan You'
    },
    socialLinks: [ // 友情连接
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      // You can also add custom icons by passing SVG as string:
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12...6.38z"/></svg>'
        },
        link: '...'
      }
    ]
  }
}

基础配置

export default {
  // 应用层面的配置
  lang: 'zh-CN',
  // 渲染为： <html lang="zh-CN">
  title: '笔记', // 网站标题
  titleTemplate: '开发笔记', // 网站标题后缀- “笔记 | 开发笔记”
  description: '卡卡罗特的开发笔记', // 网站描述 
  // 渲染为：<meta name="description" content="Vite & Vue powered static site generator.">
  base: '/', // base url
  head: [
    [ 'link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' } ],
    // 渲染为: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    [ 'link', { rel: 'icon', href: '/logo.svg' } ]
    // 渲染为: <link rel="icon" href="/logo.svg" />
  ],
  appearance: true, // 外观切换 - 深色浅色
  ignoreDeadLinks: true, // 当设置为 true 时，VitePress 不会因为死链接而导致构建失败。
  lastUpdated: true, // 显示页面最后更新时间
  cleanUrls: true, // 删除路径中的.html后缀
  themeConfig: {}, // 主题配置
  markdown: { // markdown 解析配置
    lineNumbers: true // 显示行号
  }
}