Post

Post VS Page

FrontMatter ​

TIP

More configuration options can be found in:

PostFrontmatter Types
post.ts
ts
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 is a descendant of page, so the front matter in pages are supported by posts.

For example:

md
---
title: Title
hide: true
---
  • title: Title of the article.
  • hide: Adding hide in the header allows you to hide the article temporarily. (The article will still be rendered)
    • true / all: When set to true or all, 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 to index, 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 ​

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 markdown
    • html: Display as HTML
    • text: Display as text (removing HTML tags)
md
---
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
md
---
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
md
---
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
md
---
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:

md
HEADER yun-bg
md
## Header ![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)
md
<!-- Rendered HTML -->
md
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 ​

You can use useScriptTag directly, encapsulate it as a component, or add it directly to the article.

vue
<script lang="ts" setup>
useScriptTag('https://static.codepen.io/assets/embed/ei.js')
</script>

Force Standard ​

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:

md
`<CustomComponent></CustomComponent>`
To Be Continued.

Contributors