Post

Post VS Page

FrontMatter

TIP提示

更多配置项可参见:
More configuration options can be found in:
PostFrontmatter Types
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 通用被文章支持。

单篇文章支持的配置项。

譬如:

post is a descendant of page, so the front matter in pages are supported by posts.

For example:

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

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

  • excerpt: 自定义摘要(优先级高于 <!-- more -->
  • excerpt_type: 预览列表摘要的渲染类型(与 <!-- more --> 配合使用)
    • md: 展示原始 Markdown
    • html: 以 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 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

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

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

由于 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:

md
`<CustomComponent></CustomComponent>`

Contributors


To Be Continued.