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

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

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

(进入注册为作者充电)

  • 配置

    • 主题配置
    • 首页配置
      • 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时生效)
    # hideRightBar: true # 是否隐藏右侧边栏 (v1.11.2+)
    ---
    

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

    # bannerBg

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

    # features

    • 类型:{title: string, details: string, link?: string, imgUrl?: string}[]

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

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

    # postList

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

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

    # simplePostListLength v1.5.1 +

    • 类型:number
    • 默认: 10

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

    # hideRightBar v1.11.2 +

    • 类型:boolean
    • 默认: false

    是否隐藏右侧边栏

    注意

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

    上次更新: 2023/07/09, 11:40:24
    主题配置
    front matter配置

    ← 主题配置 front matter配置→

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