vuepress实现自定义首页的样式风格_vue.js_

vuepress自定义首页的样式风格

如何自定义vuepress的首页设计风格呢？比如，我希望首页下面的红框内容是可点击的：

请看正文步骤

正文

在docs -> .vuepress下新建theme文件夹，再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-default -> Home.vue的源码拷贝至我们的Home.vue即可，

在源码里稍做修改便能满足我们的业务需求

改过后的Home.vue代码如下所示：

对应首页的README.md内容如下所示：

--- home: true heroText: SF heroImage: /logo.png 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 - title: SF Map Service details: 提供大搜、按钮等一系列组件，已内置了状态和接口功能. url: http://xxx.com/service/guide/install.html img: /home/service.png - title: SF Ui details: 基于Vue / Ant Design Vue的UI组件库. url: http://xxx.com/service/guide/install.html img: /home/ui.png - title: SF Icons details: 一整套公司自有的图标集. url: http://xxx.com/service/guide/icon.html img: /home/icon.png 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; }

修改前

修改后

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！