vuepress-theme-vdoing vuepress-theme-vdoing
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
插件
案例
问答
💖支持
反馈
GitHub (opens new window)
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
插件
案例
问答
💖支持
反馈
GitHub (opens new window)
  • 配置

    • 主题配置
    • 首页配置
      • banner栏背景
        • bannerBg
      • 特性图片和链接
        • features
      • 文章列表显示方式
        • postList
        • simplePostListLength
      • 其他
    • front matter配置
    • 目录页配置
    • 添加摘要
    • 修改主题颜色和样式
    • 评论栏

首页配置

在docs目录下的index.md或README.md的 front matter 指定 home: true,就会为你的站点生成一个首页,示例:

---
home: true
# heroImage: /img/web.png
heroText: Evan's blog
tagline: Web前端技术博客,积跬步以至千里,致敬每个爱学习的你。
# actionText: 立刻进入 →
# actionLink: /web/
# bannerBg: auto # auto => 网格纹背景(有bodyBgImg时无背景),默认 | none => 无 | '大图地址' | background: 自定义背景样式       提示:如发现文本颜色不适应你的背景时可以到palette.styl修改$bannerTextColor变量

features: # 可选的
  - title: 前端
    details: JavaScript、ES6、Vue框架等前端技术
    link: /web/ # 可选
    imgUrl: /img/web.png # 可选
  - title: 页面
    details: html(5)/css(3),前端页面相关技术
    link: /ui/
    imgUrl: /img/ui.png
  - title: 技术
    details: 技术文档、教程、技巧、总结等文章
    link: /technology/
    imgUrl: /img/other.png

# 文章列表显示方式: detailed 默认,显示详细版文章列表(包括作者、分类、标签、摘要、分页等)| simple => 显示简约版文章列表(仅标题和日期)| none 不显示文章列表
# postList: detailed
# simplePostListLength: 10 # 简约版文章列表显示的文章数量,默认10。(仅在postList设置为simple时生效)
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

一些字段还是沿用默认主题 (opens new window)的,这里只对修改的地方做一个补充。

# banner栏背景

# bannerBg

  • 类型:string
  • 可选参数:
    • auto 自动背景,一般会显示网格纹背景,如果在config.js设置了bodyBgImg时则无背景
    • none 无背景
    • <大图地址>,如/img/bg.jpeg
    • background: <自定义背景样式>,如background: blue
  • 默认值: auto

# 特性图片和链接

# features

features是在banner栏显示的特性描述,主题添加了图片的展示和点击跳转的链接

  • features[index].link 当前feature跳转的链接,可选
  • features[index].imgUrl 当前feature的图片地址,可选

# 文章列表显示方式

# postList

  • 类型:string
  • 可选参数:
    • detailed 显示详细版文章列表(包括标题、日期、作者、分类、标签、摘要、分页等)
    • simple 显示简约版文章列表(仅标题和日期)
    • none 不显示文章列表
  • 默认值: detailed

首页内容中的文章列表显示方式

# simplePostListLength v1.5.1 +

简约版文章列表显示的文章数量,默认10。(仅在postList设置为simple时生效)

# 其他

注意

原默认主题首页的footer字段已改到config.js文件里设置

上次更新: 2020/10/13, 22:51:59
主题配置
front matter配置

← 主题配置 front matter配置→

Theme by Vdoing | Copyright © 2019-2021 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×