文件配置项和Markdown语法

发布于: 2025-10-19

更新于: 2025-10-19

字数: 0

时长: 0 分钟

阅读量: ∞

文件配置项

首页文件

修改docs\index.md中的内容。

# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "My Awesome Project"
  text: "A VitePress Site"
  tagline: My great project tagline
  actions:
    - theme: brand
      text: Markdown Examples
      link: /markdown-examples
    - theme: alt
      text: API Examples
      link: /api-examples
  image:            
    src: /icon.svg  
    alt: VitePress  

features:
  - title: Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    icon:          
      src: /icon.svg  
    link: /markdown-examples  
    linkText: 查看详情  
  - title: Feature B
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: Feature C
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit

config.mjs文件

修改vitepress的配置文件.vitepress\config.mjs。

import { defineConfig } from 'vitepress'
.....
export default defineConfig({
  title: "My Awesome Project", //首页标题
  description: "A VitePress Site", //标题描述
  ignoreDeadLinks: true, //忽略死链查询，即文档中嵌入的一些链接无法访问也不会导致站点报错
  lang: 'zh-CN', 
   //部署时映射的路径
  base: "/vitepress/",
  // header标签里面插入的内容
  //排除文件
  //srcExclude: ['**/README.md', '**/TODO.md']
  //源目录,默认docs
  srcDir: "docs",
  //构建输出目录，默认dist
  outDir: "dist",
  //放置生成的静态资源的目录，该路径应位于 outDir 内
  assetsDir: "static",
  head: [["link", { rel: "icon", href: "/icon.png" }]],
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    // 网站的logo
    //logo: "/icon.svg",
    nav: [
      { text: '首页', link: '/' },
      { text: 'dffs', link: '/csdfdsfd/' }
    ],

    sidebar: [
        {
          text: '',
          items: [
		    { text: '', link: '' },
		    { text: '', link: '' },
          ]
      }
    ],
    // 搜索
    search: {
      provider: "local",
    },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ],
    // 文章右侧大纲目录
    outline: {
      level: [2, 6],
      label: "目录",
    },
    //自定义上下页名
    docFooter: {
      prev: "上一页",
      next: "下一页",
    },
    // 页脚
    footer: {
      message: "Released under the MIT License.",
      copyright: "copyright: `Copyright © 2024-${new Date().getFullYear()} `",
    },
    // 文档的最后更新时间
    lastUpdated: {
    text: "最后更新于",
    formatOptions: {
        dateStyle: "full", //full、short
        timeStyle: "medium",
      }
    },
    // 返回顶部
    returnToTopLabel: '回到顶部',
    
    // 侧边栏菜单标签
    sidebarMenuLabel: '菜单',
    
    // 深色模式切换标签
    darkModeSwitchLabel: '主题',
    lightModeSwitchTitle: '切换到浅色模式',
    darkModeSwitchTitle: '切换到深色模式'

  },
    //运行识别不了的程序语言重命名
    markdown: {
      languageAlias: {
       'conf': 'bash'
      }
    }
  },
  
  // 构建配置
  buildEnd: async (siteConfig) => {
    // 构建完成后的钩子
    console.log('文档构建完成！')
  },
  transformHead: ({ pageData }) => {
    const head = []
    
    // 搜索优化, 添加结构化数据
    head.push([
      'script',
      { type: 'application/ld+json' },
      JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'TechArticle',
        headline: pageData.title,
        description: pageData.description,
        author: {
          '@type': 'Organization',
          name: 'Your Organization'
        },
        datePublished: pageData.lastUpdated,
        dateModified: pageData.lastUpdated
      })
    ])
    
    return head
  },
})

Markdown语法

行高亮

在选择语言类型时使用{},比如我要第2-3行和第5行显示，连续行用 - ，不连续行用 ,则为语言类型{2-3,5}。

输入：

```ts{2-3,5}
export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})
```

输出：

export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",
  titleTemplate: '另起标题覆盖title' ,
})

也可以使用 // [!code highlight]

输入：

```ts
export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程", // [!code highlight]
})
```

输出：

export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",  
})

也可以通过 // [!code highlight:<lines>] 连续行号

输入：

```ts
export default defineConfig({
  lang: 'zh-CN', // [!code highlight:3]
  title: "VitePress",
  description: "我的vitpress文档教程",
})
```

输出：

export default defineConfig({
  lang: 'zh-CN', 
  title: "VitePress",
  description: "我的vitpress文档教程",
})

增减差异

在某一行上添加 // [!code --] 或 // [!code ++] 注释将创建该行的差异，同时保留代码块的颜色

输入：

```ts{4-5}
export default defineConfig({
  lang: 'zh-CN', 
  title: "VitePress", 
  description: "我的vitpress文档教程", // [!code --]
  description: "更详细的vitpress中文文档教程", // [!code ++]
  titleTemplate: '另起标题覆盖title' ,
})
```

输出：

export default defineConfig({
  lang: 'zh-CN', 
  title: "VitePress", 
  description: "我的vitpress文档教程",  
  description: "更详细的vitpress中文文档教程", 
  titleTemplate: '另起标题覆盖title' ,
})

聚焦代码

在需要聚集的代码行后添加// [!code focus]，例如

```ts{4}
export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程", // [!code focus] 
  titleTemplate: '另起标题覆盖title' ,
})
```

输出

export default defineConfig({
  lang: 'zh-CN',
  title: "VitePress",
  description: "我的vitpress文档教程",  
  titleTemplate: '另起标题覆盖title' ,
})

参考链接：

样式美化
扣叔学习屋