Frontmatter Options #
This guide explains the various frontmatter options available in the valaxy-theme-antfu
theme and how to use them to customize your pages.
前置元数据选项 #
本指南将解释 valaxy-theme-antfu
主题中可用的各种前置元数据选项,以及如何使用它们来自定义您的页面。
What is Frontmatter? #
Frontmatter is the metadata section at the beginning of a Markdown file, enclosed by triple dashes (---
). It contains information about the page, such as its title, date, tags, and other properties.
什么是前置元数据? #
前置元数据是 Markdown 文件开头的元数据部分,由三个破折号(---
)包围。它包含有关页面的信息,如标题、日期、标签和其他属性。
---
title: My Page Title
date: 2023-01-01
---
Common Frontmatter Options #
Here are the common frontmatter options used in the valaxy-theme-antfu
theme:
常用前置元数据选项 #
以下是 valaxy-theme-antfu
主题中使用的常用前置元数据选项:
title #
The title
option sets the title of the page. It’s used in the browser tab, meta tags, and typically as the main heading of the page.
title #
title
选项设置页面的标题。它用于浏览器标签、元标签,通常作为页面的主标题。
---
title: My Page Title
---
display #
The display
option allows you to set a different display name for the page in navigation menus, while keeping the original title for SEO and other purposes.
display #
display
选项允许您在导航菜单中为页面设置不同的显示名称,同时保留原始标题用于 SEO 和其他目的。
---
title: My Comprehensive Guide to Web Development
display: 'Web Dev Guide'
---
subtitle #
The subtitle
option adds a subtitle to the page, which is displayed below the main title in some layouts.
subtitle #
subtitle
选项为页面添加副标题,在某些布局中显示在主标题下方。
---
title: My Project
subtitle: A detailed overview of my latest work
---
description #
The description
option provides a brief description of the page content. It’s used in meta tags for SEO and may be displayed in some layouts.
description #
description
选项提供页面内容的简短描述。它用于 SEO 的元标签,可能在某些布局中显示。
---
title: My Blog Post
description: In this post, I discuss the latest trends in web development and how they affect modern applications.
---
date #
The date
option specifies when the page was created or published. It’s used for sorting posts and displaying the publication date.
date #
date
选项指定页面创建或发布的时间。它用于对文章进行排序和显示发布日期。
---
title: My Blog Post
date: 2023-01-01
---
categories #
The categories
option assigns the page to one or more categories. This helps organize your content and can be used for filtering.
categories #
categories
选项将页面分配到一个或多个类别。这有助于组织您的内容,可用于过滤。
---
title: My Blog Post
categories: Technology
---
Or multiple categories:
---
title: My Blog Post
categories:
- Technology
- Web Development
---
tags #
The tags
option assigns tags to the page. Tags are similar to categories but are typically more specific and can be used for more granular organization.
tags #
tags
选项为页面分配标签。标签类似于类别,但通常更具体,可用于更精细的组织。
---
title: My Blog Post
tags:
- javascript
- react
- web development
---
type #
The type
option specifies the type of content. This is used to categorize content for different purposes, such as distinguishing between blog posts, notes, demos, etc.
type #
type
选项指定内容的类型。这用于为不同目的对内容进行分类,例如区分博客文章、笔记、演示等。
---
title: Quick Tip
type: note
---
Common types include:
post
- Blog postsnote
- Short notes or tipsdemo
- Interactive demonstrationsdocs
- Documentation pagestalk
- Presentations or talks
duration #
The duration
option indicates how long it takes to read the content. This helps readers decide if they have time to read the article.
duration #
duration
选项表示阅读内容需要多长时间。这有助于读者决定是否有时间阅读文章。
---
title: My Blog Post
duration: 5min
---
image #
The image
option specifies an image associated with the page. This is often used for social media previews and featured images.
image #
image
选项指定与页面关联的图像。这通常用于社交媒体预览和特色图像。
---
title: My Blog Post
image: /path/to/image.jpg
---
Visual Customization Options #
The valaxy-theme-antfu
theme provides several options for visual customization:
视觉自定义选项 #
valaxy-theme-antfu
主题提供了几个视觉自定义选项:
art #
The art
option adds a decorative background to the page header. The theme includes several built-in art styles.
art #
art
选项为页面标题添加装饰性背景。主题包含几种内置艺术风格。
---
title: My Page
art: plum
---
Available art styles:
plum
- A plum blossom patterndots
- A pattern of dotsrandom
- A randomly selected art style
wrapperClass #
The wrapperClass
option allows you to add custom CSS classes to the page wrapper element, giving you more control over the page’s appearance.
wrapperClass #
wrapperClass
选项允许您向页面包装元素添加自定义 CSS 类,使您能够更好地控制页面的外观。
---
title: My Page
wrapperClass: 'text-center bg-gray-100'
---
布局选项 #
您可以使用特殊注释或前置元数据选项自定义页面的布局:
Advanced Options #
Here are some advanced frontmatter options for specific use cases:
高级选项 #
以下是一些用于特定用例的高级前置元数据选项:
layout #
The layout
option specifies the page layout. For detailed information about layouts, please see the Layout Options guide.
layout #
layout
选项指定页面布局。有关布局的详细信息,请参阅布局选项指南。
---
title: My Page
layout: full-width
---
lang #
The lang
option specifies the language of the page. This is used for internationalization and can affect how certain elements are displayed.
lang #
lang
选项指定页面的语言。这用于国际化,可能会影响某些元素的显示方式。
---
title: My Page
lang: en
---
projects #
The projects
option is used on the features page to define a list of projects or features to display:
projects #
projects
选项用于功能页面,定义要显示的项目或功能列表:
---
title: Features
projects:
Group 1:
- name: 'Feature 1'
link: '/feature1'
desc: 'Description of feature 1'
icon: 'i-carbon-rocket'
- name: 'Feature 2'
link: '/feature2'
desc: 'Description of feature 2'
icon: 'i-carbon-document'
Group 2:
- name: 'Feature 3'
link: '/feature3'
desc: 'Description of feature 3'
icon: 'i-carbon-code'
---
<AntfuListProjects :projects="frontmatter.projects" />
items #
The items
option is used to define additional items to display in list components:
items #
items
选项用于定义要在列表组件中显示的其他项目:
---
title: Talks
items:
- title: 'Upcoming Talk'
date: '2023-06-01'
desc: 'A talk about web development'
link: 'https://example.com'
---
<AntfuListPosts type="talk" :extra="frontmatter.items" />
Conclusion #
By using these frontmatter options, you can customize the appearance and behavior of your pages in the valaxy-theme-antfu
theme. Experiment with different combinations to create a unique and engaging site.
结论 #
通过使用这些前置元数据选项,您可以在 valaxy-theme-antfu
主题中自定义页面的外观和行为。尝试不同的组合,创建独特且吸引人的网站。