VuePress搭建文档网站/个人博客(详细配置)之站点配置


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


宫女如花满春殿,只今惟有鹧鸪飞。
——《越中览古》



VuePress个人博客专栏


VuePress的站点配置

即基础配置项,以下内容适用于初始搭建时的站点配置
对于vuepress站点的基础配置如下:base、lang、title、description、head、locales

1. 站点的基础路径base

  • 类型:string
  • 默认值: /
  • 注意点:base参数以/开始和结束的绝对路径

如站点部署的路径为https://hanshanlibai.com/
现在想部署到上面路径的子路径下,如https://hanshanlibai.com/test/
则base参数定义为/test/

2. 站点的语言lang

  • 类型:string
  • 默认值:en-US
  • 注意点:该参数会在最终的HTML中作为HTML标签的lang属性,可以设置在不同语言的locales中

一般来说我们将参数设置成zh-CN对应的是中文,但是如果配置中文,想要生效的话,需要配置对应的文档,后续文章内会详细说明这一项,可参考专栏后续文章中多语言配置篇

3. 站点的标题title

  • 类型:string
  • 默认值:‘’
  • 注意点:该参数会作为页面标题的后缀,在默认主题的导航栏中显示

4. 站点的描述description

  • 类型:string
  • 默认值:‘’
  • 注意点:会在HTML中作为<meta name="description" />标签的content属性,并会被每个页面的Frontmatter中的description字段覆盖

5. 站点的请求头参数head

  • 类型:HeadConfig[]
  • 默认值:[]

在HTML的head标签内加入的额外标签
通过[tagName, { attrName: attrValue }, innerHTML?]的格式添加标签
如果attrValue是一个pathname则不会被自动添加base前缀,需要的话可手动添加前缀

扫描二维码关注公众号,回复: 17514671 查看本文章

如增加一个自定义的favicon

export default {
    
    
  head: [['link', {
    
     rel: 'icon', href: '/images/logo.png' }]],
}

渲染为

<head>
  <link rel="icon" href="/images/logo.png" />
</head>

6. 站点的多语言配置

  • 类型:{ [path: string]: Partial<SiteLocaleData> }
  • 默认值:{}

多语言支持的配置,这里只是配置了参数,没有配置文档内容,可参考后续文章多语言配置篇
可使用的字段:lang、title、description、head
举例

export default {
    
    
  locales: {
    
    
    // 键名是该语言所属的子路径
    // 作为特例,默认语言可以使用 '/' 作为其路径。
    '/': {
    
    
      lang: 'en-US',
      title: 'VuePress',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
    
    
      lang: 'zh-CN',
      title: 'VuePress',
      description: 'Vue 驱动的静态网站生成器',
    },
  },
}

7. 主题配置

主题配置项默认如下,详细配置可参考专栏后续主题配置篇

  // 主题配置, 默认内容为空,此时只有一个黑色和白色主题的切换按钮
  theme: defaultTheme(),

8. 打包工具配置

打包工具配置默认如下,详细配置可参考专栏后续打包工具配置篇

  bundler: viteBundler(),

9. 站点基础配置完整内容

config.js中的站点配置完整后如下

import {
    
     viteBundler } from '@vuepress/bundler-vite'
import {
    
     defaultTheme } from '@vuepress/theme-default'
import {
    
     defineUserConfig } from 'vuepress'

export default defineUserConfig({
    
    
  bundler: viteBundler(),

  // 主题配置, 默认内容为空,此时只有一个黑色和白色主题的切换按钮
  theme: defaultTheme(),

  // 子路由配置,如果想部署到http://localhost:8080/hanshan/ 则需要将base设置成/hanshan/ 注意base必须以/开始并以/结束
  base: '/hanshan/',
  // 站点语言配置
  lang: 'zh-CN',
  // 站点页面标题配置
  title: '你好, VuePress !',
  // 站点页面描述
  description: '这是我的第一个 VuePress 站点',
  // 请求头配置参数, 如自定义页面tab标签的图标favicon
  // head: [['link', { rel: 'icon', href: '/images/logo.png' }]],
  // 站点多语言配置,暂时用不到,不开启
  // locales: {
    
    
  //   // 键名是该语言所属的子路径
  //   // 作为特例,默认语言可以使用 '/' 作为其路径。
  //   '/': {
    
    
  //     lang: 'en-US',
  //     title: 'VuePress',
  //     description: 'Vue-powered Static Site Generator',
  //   },
  //   '/zh/': {
    
    
  //     lang: 'zh-CN',
  //     title: 'VuePress',
  //     description: 'Vue 驱动的静态网站生成器',
  //   },
  // },
})

感谢阅读,祝君暴富!


猜你喜欢

转载自blog.csdn.net/mo_sss/article/details/142026708