文章

Post VS Page

FrontMatter ​

提示

更多配置项可参见：

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）继承自页面（page），因此页面中的 Front Matter 通用被文章支持。

单篇文章支持的配置项。

譬如：

md
---
title: Title
hide: true
---
  • title: 文章标题
  • hide: 你可以在文章头部添加 hide 属性，来临时隐藏某篇文章。（该文章仍然会被渲染）
    • true / all: 当设置为 true 或 all 时，该文章仍然会被渲染，你可以直接访问链接进行查看。但不会被显示在展示的文章卡片与归档中。
    • index: 设置为 index 时，将只在首页隐藏，归档中仍然展示。（譬如放一些没有必要放在首页的笔记，并在归档中方便自己查看。）

摘要 ​

你可以通过插入 <!-- more --> 的方式生成摘要（excerpt）。 可通过设置 excerpt_type 设置摘要渲染类型。

  • excerpt: 自定义摘要（优先级高于 <!-- more -->）
  • excerpt_type: 预览列表摘要的渲染类型（与 <!-- more --> 配合使用）
    • md: 展示原始 Markdown
    • html: 以 HTML 形式展示
    • text: 以纯文本形式展示（去除 HTML 标签）
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.

插入 ​

组件 ​

  • 如想在文章中插入现有公共组件，请参照 组件。
  • 如想在文章中插入自定义组件，请参照 自定义组件。

脚本 ​

可直接通过 useScriptTag 使用，封装为组件或直接添加在文章中。

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

强制规范 ​

由于 Valaxy 支持解析 Vue 组件渲染，因此当您输入 <CustomComponent></CustomComponent> 时，它会解析 components 目录下的 CustomComponent.vue 组件并渲染。

当您不需要其被渲染时，请务必使用反引号包裹，如：

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

贡献者