Page

FrontMatter

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

You can custom page by front-matter.

TIP提示

更多配置项可参见：

页面（Page）配置：PageFrontmatter

More configuration options can be found in:

Page configuration: PageFrontmatter

PageFrontmatter Types

page.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
  /**
   * 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 相册密码
   */
  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[]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

titleTemplate

---
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

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).

---
password: valaxy
---

Page

FrontMatter

titleTemplate

页面加密

Encrypt Page

其它

Other

Contributors

Page

FrontMatter ​

titleTemplate ​

页面加密 ​

Encrypt Page ​

其它 ​

Other ​

Contributors

FrontMatter

titleTemplate

页面加密

Encrypt Page

其它

Other