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

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

vuepress自定义首页的样式风格

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

请看正文步骤

正文

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

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

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

<template>
  <main
    class="home"
    :aria-labelledby="data.heroText !== null ? 'main-title' : null"
  >
    <header class="hero">
      <img
        v-if="data.heroImage"
        :src="$withBase(data.heroImage)"
        :alt="data.heroAlt || 'hero'"
      >

      <h1
        v-if="data.heroText !== null"
        id="main-title"
      >
        {{ data.heroText || $title || 'Hello' }}
      </h1>

      <p
        v-if="data.tagline !== null"
        class="description"
      >
        {{ data.tagline || $description || 'Welcome to your VuePress site' }}
      </p>

      <p
        v-if="data.actionText && data.actionLink"
        class="action"
      >
        <NavLink
          class="action-button"
          :item="actionLink"
        />
      </p>
    </header>

    <div
      v-if="data.features && data.features.length"
      class="features"
    >
      <div
        v-for="(feature, index) in data.features"
        :key="index"
        class="feature"
        @click="handleClickFeature(feature.url)"
      >
        <div class="feature-cover">
          <img :alt="feature.title" :src="feature.img"/>
        </div>
        <div class="feature-body">
          <h2>{{ feature.title }}</h2>
          <p>{{ feature.details }}</p>
        </div>
      </div>
    </div>

    <Content class="theme-default-content custom" />

    <div
      v-if="data.footer"
      class="footer"
    >
      {{ data.footer }}
    </div>
  </main>
</template>

<script>
import NavLink from '@theme/components/NavLink.vue'

export default {
  name: 'Home',

  components: { NavLink },

  computed: {
    data () {
      return this.$page.frontmatter
    },

    actionLink () {
      return {
        link: this.data.actionLink,
        text: this.data.actionText
      }
    }
  },
  methods: {
    handleClickFeature(url) {
        window.location.href = url
    }
  }
}
</script>
<style lang="stylus">
.home
  padding $navbarHeight 2rem 0
  max-width $homePageWidth
  margin 0px auto
  display block
  .hero
    text-align center
    img
      max-width: 100%
      max-height 280px
      display block
      margin 3rem auto 1.5rem
    h1
      font-size 3rem
    h1, .description, .action
      margin 1.8rem auto
    .description
      max-width 35rem
      font-size 1.6rem
      line-height 1.3
      color lighten(#000, 40%)
    .action-button
      display inline-block
      font-size 1.2rem
      color #fff
      background-color $accentColor
      padding 0.8rem 1.6rem
      border-radius 4px
      transition background-color .1s ease
      box-sizing border-box
      border-bottom 1px solid darken($accentColor, 10%)
      .icon.outbound {
        color #fff
      }
      &:hover
        background-color lighten($accentColor, 10%)
  .features
    border-top 1px solid $borderColor
    padding 1.2rem 0
    margin-top 2.5rem
    display flex
    flex-wrap wrap
    align-items flex-start
    align-content stretch
    justify-content space-between
  .feature
    margin-bottom 2rem
    flex-grow 1
    flex-basis 30%
    max-width 30%
    cursor pointer
    border 1px solid $borderColor
    transition box-shadow .3s,border-color .3s
    &:hover {
      border-color transparent;
      box-shadow 0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017
    }
    .feature-cover
      height 12rem
      img
        height: 100%;
        width: 100%;
        object-fit cover
    .feature-body
      padding 0 1.2rem
    h2
      font-size 1.4rem
      font-weight 500
      border-bottom none
      padding-bottom 0
      color lighten($textColor, 10%)
    p
      color lighten($textColor, 25%)
  .footer
    padding 2.5rem
    border-top 1px solid $borderColor
    text-align center
    color lighten($textColor, 25%)

@media (max-width: $MQMobile)
  .home
    .features
      flex-direction column
    .feature
      max-width 100%
      padding 0 2.5rem

@media (max-width: $MQMobileNarrow)
  .home
    padding-left 1.5rem
    padding-right 1.5rem
    .hero
      img
        max-height 210px
        margin 2rem auto 1.2rem
      h1
        font-size 2rem
      h1, .description, .action
        margin 1.2rem auto
      .description
        font-size 1.2rem
      .action-button
        font-size 1rem
        padding 0.6rem 1.2rem
    .feature
      h2
        font-size 1.25rem
</style>

对应首页的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;
}

修改前

修改后

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

(0)

相关推荐

  • VuePress 中如何增加用户登录功能

    VuePress是什么? 先让我们看看 VuePress能干什么?有什么效果? 很像vue官网的文档页面,因为vuePress就是尤大大的一个力作 vuePress官网介绍介绍的很详细,这里只做搭建VuePress项目教程 在 VuePress 中增加用户登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档. 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候

  • Vuepress 搭建带评论功能的静态博客的实现

    vuepress 是 Vue 驱动的静态站点生成工具 本文仅介绍,搭建静态博客的过程,具体教程及文档请点击进入 vuepress中文网 点击查看项目代码 vuepress初始化 下面初始化 # 将 github 新创建的仓库克隆到本地 git clone git@github.com:zhb333/readme-blog.git # 进入项目 cd readme-blog # npm 初始化, 按照提示回车 npm init # 安装 vuepress npm i vuepress -D # 安

  • Vuepress使用vue组件实现页面改造

    目录 引言 前置环境 使用 vue 组件 安装插件 配置插件 创建 vue 组件 使用 vue 组件 引言 只是单纯的用 vuepress 写个 markdown 文档,的确会处处受限,满足不了定制化的样式和功能,有时只是简单的修改下某个页面,或者做些组件演示的内容,而不是开发一整套主题.所以研究下如何在项目中使用 vue 组件还有非常有必要的,毕竟也没那么难. 前置环境 node 环境 node v16.13.0 VuePress 版本 VuePress v2.0.0-beta.48 每个版本

  • VuePress使用Algolia实现全文搜索

    目录 引言 确认眼神 申请授权 实施部署 调试爬取 总结回顾 引言 Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务.Algolia 是一个数据库实时搜索服务,能够提供毫秒级的数据库搜索服务,并且其服务能以 API 的形式方便地布局到网页.客户端.APP 等多种场景. VuePress 官方文档就有 Algolia 搜索插件,可以直接安装使用,使用 Algolia 搜索最大的好处就是方便,它会自动爬取网站的页面内容并构建索引,你只用申请一个 Algolia 授权服务,在网站上添加一

  • VuePress 侧边栏的具体使用

    目录 前言 目录结构: 最简侧边栏: 侧边栏分组 显示文件名(或其他指定名字) 方法1 方法2 前言 官网写的侧边栏教程真的是让人很糟心,经过一番摸索,总算大致弄清楚了,下面详细说一下用法: 目录结构: docs根目录下有一个README.md.chinese文件夹.english文件夹 最简侧边栏: sidebar: { '/language/chinese/': [ '', //该目录下的README.md文件 'a', //该目录下的a.md文件 'b' //该目录下的a.md文件 ],

  • VuePress 静态网站生成方法步骤

    使用技术: VuePress - Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖. ## 没有项目可以初始化 yarn init ## 将 VuePress 作为一

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

    目录 vuepress自定义首页的样式风格 正文 vuepress2.x修改默认样式的小技巧 详解 vuepress自定义首页的样式风格 如何自定义vuepress的首页设计风格呢?比如,我希望首页下面的红框内容是可点击的: 请看正文步骤 正文 在docs -> .vuepress下新建theme文件夹,再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-defaul

  • Android控件之RatingBar自定义星级评分样式

    一.RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 效果图展示: 二.实例 1.布局文件 <?xml version="1.0&qu

  • Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)

    虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方便大家对自定义组件的学习,我接下来准备了几遍有关自定义的Dialog的文章,希望对大家有帮助. 在开发APK中最常见的估计就数弹出对话框了,这种对话框按照按钮数量来分大致是三种:一个按钮,两个按钮,三个按钮.现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮,只要你愿意). 自定义Di

  • swiper自定义分页器的样式

    本文实例为大家分享了swiper自定义分页器的样式代码,供大家参考,具体内容如下 js主要代码 pagination: { // 自定义分页器的类名----必填项 el: '.custom-pagination', // 是否可点击----必填项 clickable: true, // 分页的类型是自定义的----必填项 type: 'custom', // 自定义特殊类型分页器,当分页器类型设置为自定义时可用. renderCustom: function (swiper, current,

  • select自定义小三角样式代码(实用总结)

    这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class="ui-select"> <span>使用加息券或现金券 <i class="icon-down lMar10"></i></span> <select name="" id="

  • Android开发自定义TextView省略号样式的方法

    本文实例讲述了Android开发自定义TextView省略号样式的方法.分享给大家供大家参考,具体如下: 在布局xml中设置textView的字段 android:maxLines="2"  android:ellipsize="end"字段之后,textview会自动压缩行数,并且对压缩掉的部分用...显示.如果不想用...而想用...或者... ...就需要自定义这个省略号的样式,不需要自定义控件,方法如下. 首先是布局文件 <TextView andro

  • jQuery基于函数重载实现自定义Alert函数样式的方法

    本文实例讲述了jQuery基于函数重载实现自定义Alert函数样式的方法.分享给大家供大家参考,具体如下: (function(){ window.alert = function(text) { text=text.toString().replace(/\\/g,'\\').replace(/\n/g,'<br />').replace(/\r/g,'<br />'); //解析alert内容中的换行符 var alertdiv='<div id="alertd

  • jQuery插件Validate实现自定义校验结果样式

    本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码,分享给大家供大家参考,具体内容如下 效果如下: 具体步骤: 1.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/ja

  • JS仿iGoogle自定义首页模块拖拽特效的方法

    本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • Android中自定义加载样式图片的具体实现

    先让大家看看效果图吧,相信很多Android初学者都想知道这中效果是怎么实现的,来上图: 想实现上面这张图中的自定义加载样式,其实很简单,首先我们需要的布局组件有ProcessBar和TextView,下面是布局文件的代码(只是加载的页面的布局): 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.an

随机推荐