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

news2024/11/15 18:39:03

其他优化设置

设置：

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"
}

效果：