Editor Help

Keyboard Shortcuts

ShortcutAction
Ctrl+SExport markdown file
DeleteRemove selected block
Ctrl+DDuplicate selected block

Editor Tips

  • Click any block to edit its properties
  • Drag blocks to reorder
  • Use Split view to see changes live
  • Markdown view shows raw output
  • Import existing .md files to continue editing
  • Export saves to downloads folder

Block Types

BlockUse For
HeadingSection titles (h1-h6)
ParagraphBody text, supports markdown
ImageSingle image with caption
CodeCode snippets with syntax highlighting
TableData tables
ListBullet or numbered lists
BlockquoteQuoted text
DividerHorizontal separator

Inline Hover Components

The paragraph rich text editor includes buttons to insert hover components that show tooltips when readers hover over them.

SkillHover

Insert an inline skill reference that shows skill details on hover:

html
<SkillHover id="10071">Skill Name</SkillHover>
  • id: The skill ID from the database
  • Text between tags: Display text (falls back to skill name if empty)

UmaHover

Insert an inline character reference that shows character details on hover:

html
<UmaHover cardId="100101">Special Week</UmaHover>
  • cardId: The character card ID from the database
  • Text between tags: Display text (falls back to character name if empty)

SupportCardHover

Insert an inline support card reference that shows card details on hover:

html
<SupportCardHover supportCardId="30001">Support Card Name</SupportCardHover>
  • supportCardId: The support card ID from the database
  • Text between tags: Display text (falls back to card name if empty)

SupportCardStats

Display a support card's stat progression table:

html
<SupportCardStats supportCardId="30001" />
  • supportCardId: The support card ID from the database
  • Shows effect values at each level breakpoint
  • Highlights unique effect bonuses

Usage Tips

  1. Select text in the paragraph editor, then click the hover button to wrap it
  2. Replace the placeholder ID with the actual ID from the database
  3. Works inline with other markdown formatting

Frontmatter Reference

Article Layout

Pages with author use article layout automatically. Force it without author:

yaml
---
articleLayout: true
---

Display prominently on guides page:

yaml
---
featured: true
---

Order

Control the display order on the guides page. Bigger numbers appear first (higher priority):

yaml
---
order: 100
---

Guides with order appear before guides without it. Guides without order fall back to date sorting.

Thumbnail

Add a thumbnail image for guide cards on the guides index page:

yaml
---
thumbnail: /img/guides/my-thumbnail.png
---

Place images in docs/src/public/img/guides/ and reference them with the path starting from /img/.

Date

Set the publication date (used for sorting, newest first):

yaml
---
date: 2026-01-21
---

Guide Categories

Guides can belong to one or more categories. Use an array format:

Category IDLabel
beginnerBeginner
race-mechanicsRace Mechanics
champions-meetingChampion's Meeting
team-trialsTeam Trials
careerCareer
gachaGacha
researchResearch

Single category:

yaml
---
category: [beginner]
---

Multiple categories:

yaml
---
category: [beginner, race-mechanics]
---

Disable Custom Layouts

yaml
---
customLayout: false    # Default VitePress page layout
customHome: false      # Default VitePress home layout
---

Complete Example

yaml
---
title: My Guide Title
description: Brief description
category: [beginner, race-mechanics]
tags: [tag1, tag2]
featured: true
author: Your Name
date: 2026-01-21
thumbnail: /img/guides/my-guide.png
---