vitepress系列-05-其他优化设置

其他优化设置

设置：

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({lang: 'en-US',title: "东东爱编码的技术博客",description: "记录日常学习点点滴滴",themeConfig: {docFooter: {prev: '上一页',next: '下一页'}}
})

效果：

设置版权信息

设置：

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({lang: 'en-US',title: "东东爱编码的技术博客",description: "记录日常学习点点滴滴",themeConfig: {footer: {message: 'Released under the MIT License.',copyright: 'Copyright © 2021-present eastern'}}
})

效果：

更改全局样式

vitepress跟vuepress一样也提供了更改全局样式的入口，需要很强的CSS功底，没这方面技能就拿最默认配置吧，别瞎折腾，很累！

参考地址：

查看默认主题 CSS 变量来获取可以被覆盖的变量。

举例：更改左侧边栏的宽度

样式
```
:root {--vp-sidebar-width: 200px;
}
```

将样式文件引入theme/indes.ts中

import DefaultTheme from "vitepress/theme";
import '../config/styles/index.less'
import '../config/styles/base.less'
// @ts-ignore
import Home from './Home.vue'export default {extends: DefaultTheme,enhanceApp({ app }) {app.component('customHome', Home)}
}

效果

打开搜索功能

配置：

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({lang: 'en-US',title: "东东爱编码的技术博客",description: "记录日常学习点点滴滴",themeConfig: {search: {provider: 'local'}}
})

效果：

设置启动端口

命令行接口：参考文档

  "scripts": {"docs:dev": "vitepress dev docs --port 8080",},

设置自定义字体

设置：

@font-face {font-family: 'customFont';src: url('../../../public/font/gbsn00lp.ttf') format('truetype');
}:root {--vp-sidebar-width: 300px;--vp-font-family-base: "customFont"
}

效果：