Page

FrontMatter ​

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

You can custom page by front-matter.

TIP提示

更多配置项可参见：
More configuration options can be found in:
PageFrontmatter Types
page.ts
ts
import type { ImageObject, NodeRelations } from '@unhead/schema-org'

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 PageFrontMatter extends Record<string, any> {
  /**
   * 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
  /**
   * Title
   * @description 文章标题
   */
  title: string
  date: string | number | Date
  /**
   * Updated Time
   */
  updated: string | number | Date
  /**
   * i18n
   */
  lang: string

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

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

  // schema
  image: NodeRelations<ImageObject | string>

  /**
   * cover
   * @description 封面图片
   */
  cover: string
  /**
   * display toc
   * @description 是否显示目录
   */
  toc: boolean
  /**
   * display right sidebar
   * @description 是否显示右侧侧边栏
   */
  aside: 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

  /**
   * use katex
   * @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

  /**
   * @description:en-US Albums
   * @description:zh-CN 相册
   */
  albums: Album[]

  /**
   * For layout Gallery
   * @description:en-US Photos
   */
  photos: Photo[]

  /**
   * @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。

You will get html title Cool - Valaxy.

页面加密 ​

Encrypt Page ​

WARNING注意

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

Encryption relies on the browser’s native Web Crypto API | MDN, It is only available in 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 存在时，默认开启加密。

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

Add password: YourPassword to the frontmatter of the corresponding page to enable encryption.

When encrypt.enable is true, and the password password exists in the page, encryption is enabled by default.

The encrypted content should be dynamically rendered after decryption. At this time, it cannot (and should not) participate in the build process to generate static artifacts (otherwise it will be seen directly).

md
---
password: valaxy
---

其它 ​

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

Other ​

  • toc: false: Hide TOC
  • aside: false: Hide Right Aside
  • codeHeightLimit: 300: Code block height limit（300px）

Contributors

Edit this page on GitHub

Last updated: