Post
FrontMatter
TIP提示
- 文章(Post)配置:PostFrontmatter (文章配置包含页面配置)
- 页面(Page)配置:PageFrontmatter (可参见页面配置 | Valaxy)
- Post configuration: PostFrontmatter (Post configuration extends page configuration)
- Page configuration: PageFrontmatter (See Page | Valaxy)
PostFrontmatter Types
import type { PageFrontMatter } from './page'
export type ExcerptType = 'md' | 'html' | 'text' | 'ai'
export interface PostFrontMatter extends PageFrontMatter {
/**
* @description:en-US Custom post title class in post list
* @description:zh-CN 文章列表中 自定义标题样式
*/
postTitleClass: string
/**
* @description:en-US Post Card Type, can be bilibili/yuque/... (need theme support)
* @description:zh-CN 卡片类型,可以是 bilibili/yuque/... (需主题支持)
*/
type: 'bilibili' | 'yuque' | string
/**
* @en override url, and jump directly
* @zh 覆盖 post url,直接跳转
*/
url: string
/**
* @description:en-US custom excerpt, `excerpt_type` will be invalid
* @description 手动指定摘要,此时 `excerpt_type` 将会无效
*/
excerpt: string
/**
* @description 摘要类型
* @default 'html'
* render type of excerpt
* - md: render as raw markdown
* - html: render as html
* - text: render as text
*/
excerpt_type: 'md' | 'text' | 'html' | 'ai'
/**
* @description:en-US Category, if it is an array, it represents multiple folders in order
* @description:zh-CN 分类,若为数组,则按顺序代表多层文件夹
*/
categories: string | string[]
/**
* @description:en-US Tags, can have multiple
* @description:zh-CN 标签,可以有多个
*/
tags: string[]
/**
* @description:en-US Whether to display the previous and next navigation
* @description:zh-CN 是否显示前一篇、后一篇导航
*/
nav: boolean
/**
* @description:en-US Pin to top, the larger the number, the closer to the front
* @description:zh-CN 置顶,数字越大越靠前
*/
top: number
/**
* @description:en-US Whether it is a draft, it will only be displayed during development
* @description:zh-CN 是否为草稿,将仅在开发时被展示
*/
draft: boolean
/**
* hide in index
* - true/`all`: hide in index & archive
* - `index`: hide in index
* @description 是否隐藏
*/
hide: 'index' | boolean
/**
* @en
* when the post is updated more than 30 days ago, show a warning
* default 30 days, you can set `time_warning` in frontmatter to change it
*
* @zh
* 当文章更新时间超过 30 天时,显示一个警告
* 默认 30 天,你可以在 frontmatter 中设置 `time_warning` (数字)来修改,单位 ms
* @example 3600000
*/
time_warning: boolean | number
/**
* @protected
* @see https://valaxy.site/guide/config/#%E9%98%85%E8%AF%BB%E7%BB%9F%E8%AE%A1
* @tutorial ⚠️ DO NOT SET MANUALLY (generated by `site.config.ts` -> `statistics.enable: true`)
* You can use `statistics.readTime.speed` to change the speed of reading time.
* @description:en-US Reading time
* @description:zh-CN 阅读时间
*/
readingTime: number
/**
* @protected
* @see https://valaxy.site/guide/config/#%E9%98%85%E8%AF%BB%E7%BB%9F%E8%AE%A1
* @tutorial ⚠️ DO NOT SET MANUALLY (generated by `site.config.ts` -> `statistics.enable: true`)
* You need enable `statistics` in site config to use this feature.
* @description:en-US Word count
* @description:zh-CN 字数统计
*/
wordCount: string
}
文章(post
)继承自页面(page
),因此页面中的 Front Matter 通用被文章支持。
单篇文章支持的配置项。
譬如:
post
is a descendant of page
, so the front matter in pages are supported by posts.
For example:
---
title: Title
hide: true
---
title
: 文章标题hide
: 你可以在文章头部添加 hide 属性,来临时隐藏某篇文章。(该文章仍然会被渲染)true
/all
: 当设置为true
或all
时,该文章仍然会被渲染,你可以直接访问链接进行查看。但不会被显示在展示的文章卡片与归档中。index
: 设置为index
时,将只在首页隐藏,归档中仍然展示。(譬如放一些没有必要放在首页的笔记,并在归档中方便自己查看。)
title
: Title of the article.hide
: Addinghide
in the header allows you to hide the article temporarily. (The article will still be rendered)true
/all
: When set totrue
orall
, the article will be rendered, and you can view it by visiting the link directly. It will not be displayed in article cards or archives.index
: When set toindex
, it will be hidden only in the front page. It will still be displayed in archives. (You can use this for some notes unnecessary for the front page, but good for the archive for reference sometimes)
摘要
Excerpt
你可以通过插入 <!-- more -->
的方式生成摘要(excerpt)。 可通过设置 excerpt_type
设置摘要渲染类型。
excerpt
: 自定义摘要(优先级高于<!-- more -->
)excerpt_type
: 预览列表摘要的渲染类型(与<!-- more -->
配合使用)md
: 展示原始 Markdownhtml
: 以 HTML 形式展示text
: 以纯文本形式展示(去除 HTML 标签)
You can insert <!--more-->
to generate an excerpt. You can set the excerpt rendering type by setting excerpt_type
.
excerpt
: Custom excerpt (higher priority than<!-- more -->
)excerpt_type
: The rendering type for the excerpt in the preview list (Used with<!-- more -->
)md
: Display as original markdownhtml
: Display as HTMLtext
: Display as text (removing HTML tags)
---
title: 'excerpt_type: text'
excerpt_type: text
---
## Header
![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
<!-- more -->
Main Content
---
title: 'excerpt_type: md'
excerpt_type: md
---
## Header
![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
<!-- more -->
Main Content
---
title: 'excerpt_type: html'
excerpt_type: html
---
## Header
![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
<!-- more -->
Main Content
---
title: 'custom excerpt'
excerpt: This is a custom excerpt.
---
## Header
![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
Main Content
You will get excerpt:
HEADER yun-bg
## Header ![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
<!-- Rendered HTML -->
This is a custom excerpt.
插入
Insert
组件
Components
- To insert existing public components in the article, please refer to Components.
- To insert custom components in the article, please refer to Custom Components.
脚本
Scripts
可直接通过 useScriptTag
使用,封装为组件或直接添加在文章中。
You can use useScriptTag
directly, encapsulate it as a component, or add it directly to the article.
<script lang="ts" setup>
useScriptTag('https://static.codepen.io/assets/embed/ei.js')
</script>
强制规范
Force Standard
由于 Valaxy 支持解析 Vue 组件渲染,因此当您输入 <CustomComponent></CustomComponent>
时,它会解析 components
目录下的 CustomComponent.vue
组件并渲染。
当您不需要其被渲染时,请务必使用反引号包裹,如:
Since Valaxy supports parsing Vue component rendering, when you enter <CustomComponent></CustomComponent>
, it will parse the CustomComponent.vue
component in the components
directory and render it.
When you don’t want it to be rendered, be sure to wrap it in backticks, like:
`<CustomComponent></CustomComponent>`
To Be Continued.