Hardey知识库
Search K

Appearance

Vitepress ​

全局配置 ​

Frontmatter ​

可以在每一篇 Markdown 的开头添加 Frontmatter 来配置主题有关的内容。

配置了 第三方主题@sugrat/theme 的 Frontmatter 变得有些不同，在 Vitepress 原有的 Formatter 外，该主题引入了 Blog概念 ，使得文档或笔记可以在首页以 Blog 形式铺展开，所以 Frontmatter 中就新增了 layout 和 blog。

配置博客首页 Frontmatter ​

通常，layout 和 blog 字段值需要在首页内容 doc/index.md 中配置即可，无需在其他 Markdown Note 中再次配置。

md
---
# 表示当前markdown文件使用什么布局，取值 doc|home|page，默认取doc
layout: home
blog:
  # 设置首页的 banner 信息
  name: "Hardey的博客"
  motto: "Hardey的博客"
  # 可以在这里覆盖 vitepress 的默认作者
  author: Sugar
  # 可以在这里覆盖 vitepress 的作者头像
  logo: /logo.jpeg
  # 警句
  inspiring:
    - 学贵信，信在诚。诚则信矣，信则诚矣。
    - 要珍惜美好时光，不要蹉跎岁月。
  # 设置首页列表每页展示数量
  pageSize: 8
  # 设置 inspiringTimeout 可以实现自动切换
  inspiringTimeout: 3000
  # 设置头像分离展示模式, 取值 card | split，默认 card
  avatarMode: split
  # 移动端是否展示头像，取值 true | false，默认 true展示头像
  minScreenAvatar: false
---

提示

layout：home 已经被第三方主题修改过了，所以不可以按照 Vitepress 文档描述的那样，对其它文档也使用 home 布局，会与预期不符。

配置文章 Frontmatter ​

Vitepress 中 的 Formatter 配置项作用不大，主要讲第三方主题 @sugarat/theme 的配置 。

  • title 文章标题，默认文章一级标题，可不写
  • description 文章描述，出现在首页文章列表卡片的内容描述，以及页面 description meta 标签
  • descriptionHTML 文章 HTML 描述，和文章描述共存，作为文章描述的补充出现在文章卡片中，但不会出现在页面 description meta 标签
  • cover 首页文章列表的文章卡片的 cover 图片，会出现在正文里
  • hiddenCover true，隐藏正文里的 cover 图片
  • hidden true，文章不出现在首页文章列表
  • readingTime true，文章的预计阅读时间
  • date false，不显示时间，2023-01-04 ｜ 2023-01-04 20:00:00，首页文章列表的文章卡片的时间
  • tag|tags|categories yaml 数组，文章所属的标签分类
  • sticky 出现在首页精彩文章列表中，越小排名越靠前
  • top 出现在首页文章列表，越大越靠前
  • publish false 不出现在首页文章列表和文章推荐

在 VSCode 中添加 Markdown 文件的 User Snippets，快捷生成 Frontmatter

json
{
  // Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "frontmatter",
    "body": [
      "---",
      "# title: 文章标题",
      "# false，不显示时间，2023-01-04 ｜ 2023-01-04 20:00:00，首页文章列表的文章卡片的时间",
      "date: 2024-01-01 12:00:00",
      "# 文章描述，出现在首页文章列表卡片的内容描述，以及页面 description meta 标签",
      "description: 文章描述",
      "# 文章 HTML 描述，和文章描述共存，作为文章描述的补充出现在文章卡片中",
      "# 但不会出现在页面 description meta 标签",
      "# descriptionHTML: <div>描述</div>",
      "# 首页文章列表的文章卡片的 cover 图片，会出现在正文里",
      "# cover: 'url'",
      "# true，隐藏正文里的 cover 图片",
      "# hiddenCover: true",
      "# true，文章不出现在首页文章列表",
      "# hidden: false",
      "# 文章所属的标签分类",
      "# tag:",
      "#   - Docker",
      "# 出现在首页精彩文章列表中，越小排名越靠前",
      "# sticky 1",
      "# 出现在首页文章列表，越大越靠前",
      "# top 10",
      "---"
    ],
    "description": "Vitepress and @sugarat/theme Frontmatter"
  }
}

上次更新于: