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

目录

• vuepress自定义首页的样式风格
• 正文
• vuepress2.x修改默认样式的小技巧
• 详解

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

修改前

修改后

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