Document metadata

GemBook allows adding data in yaml format (called FrontMatter) at the beginning of the Markdown file, to set how documents appear in the sidebar and navigation bar. For example:

---
title: Sidebar title
description: The description of the page, the first paragraph is used by default
sidebarIgnore: true

isNav: true
navTitle: Navigation bar title
navOrder: 2

redirect: ./new.md
---

# Markdown title

Homepage

The homepage of homeMode also supports hero and features, for example:

---
hero:
  title: GemBook
  desc: Create your document website easily and quickly
  actions:
    - text: Getting Started
      link: ./guide/README.md
features:
  - title: Out of the box
    icon: 📝
    desc: Just run the command line to pack all front-end resources, so that all attention can be paid to document writing
  - title: Performance
    icon: /logo.png
    desc: Every page is rendered to HTML when building, the content is visible before JavaScript loads
  - title: Expandable
    icon: 👩‍🎨
    desc: Extend documents with custom elements in Markdown, such as runnable examples, API documentation and search

Folder

The settings for Markdown also apply to folders, just add config.yml in the folder, for example:

title: 指南

Two special options are supported:

reverse: Reverse sort, which is useful when blogging
groups: Place multiple files within a group in the sidebar without modifying the directory structure, the files of a group without title are displayed directly

A folder with isNav is an independent part of the documents, it is only displayed in the navigation bar, when the current page is in it, the sidebar only displays the documents of the folder.

Definition

export interface FrontMatter {
  title?: string;
  /** 页面的 `<meta name="description">`，默认使用首页的 `hero.desc` 或者第一段文本 */
  description?: string;
  isNav?: boolean;
  navTitle?: string;
  navOrder?: number;
  sidebarIgnore?: boolean;
  redirect?: string;

  /** below only dir */
  reverse?: boolean;
  groups?: { title: string; members: string[] }[];

  /** below only homepage */
  hero?: Hero;
  features?: Feature[];
}

export interface Hero {
  title?: string;
  desc?: string;
  actions?: { text: string; link: string }[];
}

export interface Feature {
  icon?: string;
  title: string;
  desc: string;
}