Page
FrontMatter
你可以使用 front-matter 定制页面属性。
You can custom page by front-matter.
TIP提示
- 页面(Page)配置:PageFrontmatter
- Page configuration: PageFrontmatter
PageFrontmatter Types
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[]
}
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
---
其它
toc: false
: 隐藏目录aside: false
: 隐藏右侧文章导航栏codeHeightLimit: 300
: 代码块高度限制(300px)
Other
toc: false
: Hide TOCaside: false
: Hide Right AsidecodeHeightLimit: 300
: Code block height limit(300px)