页面

FrontMatter ​

你可以使用 front-matter 定制页面属性。

提示

更多配置项可参见：

PageFrontmatter Types
page.ts
ts
import type { ImageObject, NodeRelations } from '@unhead/schema-org'
import type { CollectionConfig } from '../../client/types'

export interface Album {
  /**
   * @description:en-US Album Link
   */
  url: string
  /**
   * @description:en-US Album cover
   * url
   */
  cover: string
  /**
   * @description:en-US Album caption
   */
  caption: string
  /**
   * @description:en-US Album description
   */
  desc: string
}

export interface Photo {
  src: string
  caption: string
  desc: string
}

export interface BaseFrontMatter extends Record<string, any> {
  /**
   * Title
   * @description 文章标题
   *
   * ```md
   * ---
   * title: Post Title
   * ---
   * ```
   *
   * i18n:
   *
   * ```md
   * ---
   * title:
   *   en: Post Title
   *   zh-CN: 文章标题
   * ---
   * ```
   */
  title: string | Record<string, string>
  /**
   * @description:en-US Created Date
   * @description:zh-CN 文章创建日期
   */
  date: string | number | Date
  /**
   * Updated Time
   */
  updated: string | number | Date
}

export interface PageFrontMatter extends BaseFrontMatter {
  /**
   * Path of post
   * route.path
   * @description 路径
   */
  path: string
  /**
   * abbrlink
   *
   * generated by valaxy-addon-abbrlink, do not manually modify
   *
   * just compatible for [hexo-abbrlink](https://github.com/ohroy/hexo-abbrlink)
   */
  abbrlink: string

  /**
   * i18n
   */
  lang: string

  /**
   * @description Author
   * @description:zh-CN 作者
   */
  author: string

  /**
   * Display sponsor info
   * @description 是否开启赞助
   */
  sponsor: boolean
  /**
   * Copyright
   * @description 是否显示文章底部版权信息
   */
  copyright: boolean

  /**
   * for seo
   * schema
   */
  image: NodeRelations<ImageObject | string>

  /**
   * cover
   * @description 封面图片
   */
  cover: string
  /**
   * @description:en-US Open Graph image for SEO
   * @description:zh-CN Open Graph 图片，用于 SEO
   */
  ogImage: string
  /**
   * @protected
   * @tutorial ⚠️ DO NOT SET MANUALLY (auto-extracted from markdown content)
   * @description:en-US First image URL extracted from markdown content
   * @description:zh-CN 从 Markdown 内容中自动提取的第一张图片 URL
   */
  firstImage: string
  /**
   * display toc
   * @description 是否显示目录
   */
  toc: boolean
  /**
   * display right sidebar
   * @description 是否显示右侧侧边栏
   */
  aside: boolean
  /**
   * display left sidebar
   * @description 是否显示左侧侧边栏
   */
  sidebar: boolean

  /**
   * @description:en-US Custom Markdown class
   * @description:zh-CN 自定义 Markdown 样式
   * @default 'markdown-body'
   */
  markdownClass: string

  /**
   * @description:en-US Post title class
   * @description:zh-CN 文章标题样式
   */
  pageTitleClass: string

  /**
   * icon before title
   * @description 标题前的图标
   */
  icon: string
  /**
   * title color
   * @deprecated Please use `pageTitleClass` | `postTitleClass` instead
   */
  color: string
  /**
   * display comment
   */
  comment: boolean
  /**
   * post is end
   * @description 是否完结，将在末尾添加衬线字体 Q.E.D.
   */
  end: boolean

  /**
   * Enable/disable KaTeX math rendering for this page.
   * Overrides the global `features.katex` setting.
   *
   * - When `features.katex: true` (default), set `katex: false` to disable KaTeX for this page.
   * - When `features.katex: false`, set `katex: true` to enable KaTeX for this page.
   *
   * @url https://katex.org/
   */
  katex: boolean
  /**
   * use codepen
   * @url https://codepen.io/
   */
  codepen: boolean
  /**
   * use medium-zoom
   * @url https://github.com/francoischalifour/medium-zoom
   */
  medium_zoom: boolean

  // --- layout ---
  /**
   * @description:en-US Albums
   * @description:zh-CN 相册
   */
  albums: Album[]
  /**
   * For layout Gallery
   * @description:en-US Photos
   */
  photos: Photo[]
  /**
   * for collections
   */
  collections: CollectionConfig[]

  /**
   * @description:zh-CN 是否启用加密，password 存在时默认为 true
   */
  encrypt: boolean
  /**
   * @description:zh-CN 加密密码
   */
  password?: string
  /**
   * @description:zh-CN 密码提示
   */
  password_hint?: string
  /**
   * @description:zh-CN 相册密码
   */
  gallery_password?: string
  /**
   * @en
   * @description encrypted content
   *
   * @description:zh-CN 加密后的内容
   */
  encryptedContent?: string
  /**
   * @description:zh-CN 部分加密的内容
   */
  partiallyEncryptedContents?: string[]
  /**
   * @description:zh-CN 加密后的相册
   */
  encryptedPhotos?: string
  /**
   * @description:en-US Limit the height of the code block in px
   * @description:zh-CN 限制代码块的高度，单位是 px
   */
  codeHeightLimit?: number
  /**
   * @description:en-US Source path for client redirection
   * @description:zh-CN 客户端重定向的源路径
   */
  from?: string | string[]
}

titleTemplate ​

md
---
title: Cool
titleTemplate: '%s - Valaxy'
---

这样可以使 HTML 标题变为 Cool - Valaxy。

页面加密 ​

注意

加密依赖于浏览器原生 Web Crypto API | MDN， 其仅在 HTTPS 中可用。

site.config.ts
ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  encrypt: {
    // 开启加密，默认关闭
    enable: true
    // algorithm
    // iv
    // salt
  }
})

在对应需要加密页面的 frontmatter 中添加 password: YourPassword 即可。

当 encrypt.enable 为 true，且页面中密码 password 存在时，默认开启加密。

被加密的内容应在解密后动态渲染。此时无法（也不应）参与到构建流程中生成静态产物（否则会被直接看到）。 因此对于加密内容中的图片路径，总是应该使用绝对路径而非相对路径。

md
---
password: valaxy
---

其它 ​

  • sidebar: false: 隐藏左侧文章导航栏
  • aside: false: 隐藏右侧文章导航栏
  • toc: false: 隐藏目录
  • codeHeightLimit: 300: 代码块高度限制（300px）

贡献者