VitePress 会员主题

Appearance

VitePress 默认主题宽度改为全屏 ​

VitePress 默认主题最大宽度是 1440px，且屏幕居中。

通过修改全局样式变量实现。

修改前的默认值

--vp-layout-max-width: 1440px;

修改后的新赋值

--vp-layout-max-width: 100%;

代码结构 ​

.
├─ docs
│  ├─ .vitepress
│  │  ├─ theme
│  │  │  ├─ style.css
│  │  │  └─ index.js 
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

变量写在主题目录下的样式文件style.css中：

css
:root {  
  --vp-layout-max-width: 100%;
}

在.vitepress/theme/index.js文件中引入样式文件：

js
import DefaultTheme from 'vitepress/theme';  
import Layout from './layout/Layout.vue';  

//引入样式文件
import './style.css';  
  
export default {  
    extends: DefaultTheme,  
    Layout  
}

改其它样式的方法 ​

类似--vp-layout-max-width这样的变量，默认主题里有特别多，都可以自己按需改。

可以通过浏览器的开发调试界面，找到变量名进行修改。

想改哪里，就定位到具体元素的样式，找到变量名，就可以修改。