约 1168 字大约 4 分钟

2022-04-09

说明

页面配置是为了能够以更细小的颗粒度控制单个页面的行为。

在本主题中,当你启动本地服务器后,主题会在你新建 markdown文件时,自动在文件头部插入基本的配置,你可以随时修改它。

markdown中的配置形式,如下所示:

---
title: 标题
createTime: 2022/04/09 01:24:17
author: You
permalink: /note/vuepress-theme-plume/page-config/
tags:
  - vuepress
---

配置内容是以 YAML 的格式进行书写的。

首页配置

以下配置只有在 {sourceDir}/README.md 中配置时才生效

home

  • 类型: boolean

  • 默认值: true

  • 详情:

    标记当前 md文件为博客首页,仅在 {sourceDir}/README.md 中配置即可

  • 类型: string

  • 默认值: ''

  • 详情

    配置首页首屏大图

bannerMask

  • 类型:number | { light?: number; dark?: number }

  • 默认值: 0

  • 详情

    取值范围: 0 - 1。配置首页 banner 大图的遮罩蒙版不透明度。支持配置 浅色/深色 模式下 的不同值。当值为 0 时,不显示遮罩蒙版。

    这在首页首屏大图比较亮时,可以适当使图片看起来暗一些。

    配置首页首屏,在移动端设备中使用的大图

hero

  • 类型: Hero

  • 默认值: {}

  • 详情

    首页大屏显示文案,用于展示网站高亮信息。

interface Hero {
  name: string
  tagline?: string
  text?: string
  actions: HeroAction[]
}

export interface HeroAction {
  theme?: 'brand' | 'alt'
  text: string
  link?: string
}

示例

---
home: true
banner: /images/home-banner.jpg
hero: 
  name: 鹏展博
  tagline: Front End Developer
  text: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
  actions: 
    - 
      text: 我的博客
      link: /blog/
      theme: brand
    - 
      text: Github
      link: https://github.com/pengzhanbo
      theme: alt
---

文章页面配置

title

  • 类型: string

  • 默认值: ''

  • 详情:

    文章标题,启动本地服务器时,如果该字段为空,会根据当前文件名称自动生成。

createTime

  • 类型: DateString 格式 yyyy/MM/dd hh:mm:ss

  • 默认值: ''

  • 详情:

    文章创建时间,启动本地服务器时,如果该字段为空,会根据当前文件的创建时间自动生成

author

  • 类型: string

  • 默认值: ''

  • 详情:

    文章作者,启动本地服务器时,如果该字段为空,会根据当前项目package.json中的author字段生成

  • 类型: string

  • 默认值: ''

  • 详情:

    文章永久链接,启动本地服务器时,如果该字段为空,会根据默认规则生成。

    在本主题中通过 nanoid 生成文章唯一链接。

tags

  • 类型: string[]

  • 默认值: []

  • 详情:

    文章标签,可配置多个

  • 示例:

    ---
    tags:
      - html
      - javascript
    ---

sticky

  • 类型: boolean | number

  • 默认值: false

  • 详情:

    是否置顶当前文章。

    当同时配置多篇文章置顶,如果值为number,则number越大的文章越靠前。

article

  • 类型: boolean

  • 默认值: true, 在notes 中的文章,默认值为 false

  • 详情:

    是否将文章收录到 博客 文章列表

  • 类型: boolean | undefined

  • 详情:

    当前文章是否开启编辑链接

editLinkPattern

  • 类型: string | undefined

  • 详情:

    当前文章编辑链接的正则表达式

lastUpdated

  • 类型: boolean | undefined

  • 详情:

    当前文章是否开启最近更新

contributors

  • 类型: boolean | undefined

  • 详情:

    当前文章是否开启贡献者

prev

  • 类型: string | { link: string; text: string } | undefined

  • 详情:

    配置当前文章上一篇文章的链接和文本

next

  • 类型: string | { link: string; text: string } | undefined

  • 详情:

    配置当前文章下一篇文章的链接和文本

comments

  • 类型: boolean

  • 详情:

    当前文章是否开启评论

backToTop

  • 类型: boolean

  • 详情:

    当前文章是否开启返回顶部

友情链接页配置

以下配置只有在 友情链接页面中配置时才生效

friends

  • 类型: boolean

  • 默认值: false

  • 详情:

    指定当前文件为 友情链接 页面。

title

  • 类型: string

  • 默认值: ''

  • 详情

    友情链接 页面的标题

description

  • 类型: string

  • 默认值: ''

  • 详情

    友情链接 页面的描述

list

  • 类型: FriendsItem[]

  • 默认值: []

  • 详情:

    友情链接 页面的 友链配置列表

interface FriendsItem {
  /**
   * 友链名称
   */
  name: string
  /**
   * 友链 链接
   */
  link: string
  /**
   * 友链 头像
   */
  avatar?: string
  /**
   * 友链 描述
   */
  desc?: string
}

示例

---
friends: true
title: 友情链接
description: 这里是友情链接的描述文字
permalink: /friends/
list: 
  - 
    name: pengzhanbo
    link: https://github.com/pengzhanbo
    avatar: https://github.com/pengzhanbo.png
    desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
  - 
    name: pengzhanbo
    link: https://github.com/pengzhanbo
    avatar: https://github.com/pengzhanbo.png
    desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
---