这篇文章主要介绍了vuepress实现自定义首页的样式风格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vuepress自定义首页的样式风格
如何自定义vuepress的首页设计风格呢？比如，我希望首页下面的红框内容是可点击的：
请看正文步骤
正文
在docs -> .vuepress下新建theme文件夹，再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-default -> Home.vue的源码拷贝至我们的Home.vue即可，
在源码里稍做修改便能满足我们的业务需求
改过后的Home.vue代码如下所示：
{{ data.heroText || $title || 'Hello' }}
{{ data.tagline || $description || 'Welcome to your VuePress site' }}
{{ feature.title }}
{{ feature.details }}
对应首页的README.md内容如下所示：
--- home: true heroText: SF heroImage: /logo.png-600 tagline: 公司业务产品设计体系库 actionText: 立即开始 actionLink: http://xxx.com/service/guide/install.html features: - title: SF Map Graph details: 提供一系列的柱状、饼状等组件，此外还有文字滚动、时间轴等特殊组件. url: http://xxx.com/service/guide/install.html img: /home/graph.png-600 - title: SF Map Service details: 提供大搜、按钮等一系列组件，已内置了状态和接口功能. url: http://xxx.com/service/guide/install.html img: /home/service.png-600 - title: SF Ui details: 基于Vue / Ant Design Vue的UI组件库. url: http://xxx.com/service/guide/install.html img: /home/ui.png-600 - title: SF Icons details: 一整套公司自有的图标集. url: http://xxx.com/service/guide/icon.html img: /home/icon.png-600 footer: MIT Licensed | Copyright © 2020-present ---
改后的首页效果图如下所示：
vuepress2.x修改默认样式的小技巧
Vuepress2.x 对样式的设置有较大变化，点此查看
官方推荐使用插件@vuepress/plugin-palette 和 SCSS。对此插件未做详细研究，使用了一种土方式。
详解
步骤1：新建css文件，docs/.vuepress/public/css/index.css
步骤2：配置 docs/.vuepress/config.ts
步骤3：先看看官网详解，也可在目录下找到官方变量
// 日间模式 node_modules\@vuepress\theme-default\lib\client\styles\vars.scss // 夜间模式 node_modules\@vuepress\theme-default\lib\client\styles\vars-dark.scss
步骤4：有两种方式：
方式一：直接修改默认变量，
默认样式如下：
docs/.vuepress/public/css/index.css 中修改
/* 日间模式 */ :root { --c-brand: #409eff; }新样式
方式二：直接在开发者工具中找到要修改的元素的css名称，然后在 docs/.vuepress/public/css/index.css 中修改即可。如：修改右上角站点名的字体颜色。
/* 左上角标题 */ .navbar .site-name { color: #409eff; }修改前
修改后
以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是vuepress实现自定义首页的样式风格的详细内容，更多请关注0133技术站其它相关文章！
