Config
配置说明
Configurations
为了便于配置，Valaxy 将配置分为了三种。
valaxy.config.ts 是配置的主入口，它包含了一下配置。
siteConfig: 站点信息配置，这部分内容面向站点展示且在任何主题也是通用的格式themeConfig: 主题配置，这部分内容仅在特定主题生效runtimeConfig: 运行时的配置（由 Valaxy 自动生成），用户无需配置- 其他 Valaxy 通用配置内容（如需要在 Node 端处理的配置
unocss/addons）
譬如：
To simplify config, Valaxy divided the configuration into 3.
valaxy.config.ts is the main entry of configuration.
siteConfig: Site info config. This affects info displayed on the site, and is independent of themes.themeConfig: Theme config. This part is effective only when the specific theme is in use.runtimeConfig: Runtime config (generated by Valaxy). You don't need to modify the config.- Other general Valaxy config (e.g., config that's needed for Node)
For example:
ts
// valaxy.config.ts
import { defineValaxyConfig } from 'valaxy'
import type { ThemeConfig } from 'valaxy-theme-yun'
import { addonComponents } from 'valaxy-addon-components'
import Inspect from 'vite-plugin-inspect'
const safelist = [
'i-ri-home-line',
]
export default defineValaxyConfig<ThemeConfig>({
// site config see site.config.ts or write in siteConfig
siteConfig: {},
theme: 'yun',
themeConfig: {
banner: {
enable: true,
title: '云游君的小站',
},
},
vite: {
// https://github.com/antfu/vite-plugin-inspect
// Visit http://localhost:3333/__inspect/ to see the inspector
plugins: [Inspect()],
},
unocss: {
safelist,
},
addons: [
addonComponents()
],
})// valaxy.config.ts
import { defineValaxyConfig } from 'valaxy'
import type { ThemeConfig } from 'valaxy-theme-yun'
import { addonComponents } from 'valaxy-addon-components'
import Inspect from 'vite-plugin-inspect'
const safelist = [
'i-ri-home-line',
]
export default defineValaxyConfig<ThemeConfig>({
// site config see site.config.ts or write in siteConfig
siteConfig: {},
theme: 'yun',
themeConfig: {
banner: {
enable: true,
title: '云游君的小站',
},
},
vite: {
// https://github.com/antfu/vite-plugin-inspect
// Visit http://localhost:3333/__inspect/ to see the inspector
plugins: [Inspect()],
},
unocss: {
safelist,
},
addons: [
addonComponents()
],
})站点配置
Site Config
更多详细配置可参见 types/config.ts。
站点信息配置，这部分内容面向站点展示且在任何主题也是通用的格式。
你也可以将其写在 site.config.ts 中。
譬如：
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
lang: 'zh-CN',
title: 'Valaxy Theme Yun',
url: 'https://valaxy.site/',
author: {
name: '云游君',
avatar: 'https://www.yunyoujun.cn/images/avatar.jpg',
},
/**
* 站点图标
*/
favicon: 'https://www.yunyoujun.cn/favicon.svg',
/**
* 副标题
*/
subtitle: 'All at sea.',
description: 'Valaxy Theme Yun Preview.',
social: [
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
}
],
sponsor: {
enable: true,
methods: [
{
name: '支付宝',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
],
},
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
lang: 'zh-CN',
title: 'Valaxy Theme Yun',
url: 'https://valaxy.site/',
author: {
name: '云游君',
avatar: 'https://www.yunyoujun.cn/images/avatar.jpg',
},
/**
* 站点图标
*/
favicon: 'https://www.yunyoujun.cn/favicon.svg',
/**
* 副标题
*/
subtitle: 'All at sea.',
description: 'Valaxy Theme Yun Preview.',
social: [
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
}
],
sponsor: {
enable: true,
methods: [
{
name: '支付宝',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
],
},
})Site info config. This affects info displayed on the site, and is independent of themes.
You can also write it in site.config.ts.
For example:
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
lang: 'zh-CN',
title: 'Valaxy Theme Yun',
url: 'https://valaxy.site/',
author: {
name: 'Yunyoujun',
avatar: 'https://www.yunyoujun.cn/images/avatar.jpg',
},
/**
* Site favicon
*/
favicon: 'https://www.yunyoujun.cn/favicon.svg',
/**
* Subtitle
*/
subtitle: 'All at sea.',
description: 'Valaxy Theme Yun Preview.',
social: [
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
}
],
sponsor: {
enable: true,
methods: [
{
name: 'Alipay',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
],
},
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
lang: 'zh-CN',
title: 'Valaxy Theme Yun',
url: 'https://valaxy.site/',
author: {
name: 'Yunyoujun',
avatar: 'https://www.yunyoujun.cn/images/avatar.jpg',
},
/**
* Site favicon
*/
favicon: 'https://www.yunyoujun.cn/favicon.svg',
/**
* Subtitle
*/
subtitle: 'All at sea.',
description: 'Valaxy Theme Yun Preview.',
social: [
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
}
],
sponsor: {
enable: true,
methods: [
{
name: 'Alipay',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
],
},
})Default Frontmatter
为所有文章设置默认的 Frontmatter。
譬如：
设置
time_warning: false，则所有文章都不会显示阅读时间警告。
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
/**
* 默认 Frontmatter
*/
frontmatter: {
time_warning: false,
}
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
/**
* 默认 Frontmatter
*/
frontmatter: {
time_warning: false,
}
})社交图标
Social Icons
ts
export interface SocialLink {
/**
* 社交链接名称
*/
name: string
link: string
/**
* 图标名称
* https://icones.js.org/
*/
icon: string
color: string
}export interface SocialLink {
/**
* 社交链接名称
*/
name: string
link: string
/**
* 图标名称
* https://icones.js.org/
*/
icon: string
color: string
}示例：
ts
export interface SocialLink {
/**
* The title of your link
*/
name: string
link: string
/**
* Icon name
* https://icones.js.org/
*/
icon: string
color: string
}export interface SocialLink {
/**
* The title of your link
*/
name: string
link: string
/**
* Icon name
* https://icones.js.org/
*/
icon: string
color: string
}Example:
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
social: [
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
},
{
name: 'QQ 群 1050458482',
link: 'https://qm.qq.com/cgi-bin/qm/qr?k=kZJzggTTCf4SpvEQ8lXWoi5ZjhAx0ILZ&jump_from=webapi',
icon: 'i-ri-qq-line',
color: '#12B7F5',
},
{
name: 'GitHub',
link: 'https://github.com/YunYouJun',
icon: 'i-ri-github-line',
color: '#6e5494',
},
]
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
social: [
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
},
{
name: 'QQ 群 1050458482',
link: 'https://qm.qq.com/cgi-bin/qm/qr?k=kZJzggTTCf4SpvEQ8lXWoi5ZjhAx0ILZ&jump_from=webapi',
icon: 'i-ri-qq-line',
color: '#12B7F5',
},
{
name: 'GitHub',
link: 'https://github.com/YunYouJun',
icon: 'i-ri-github-line',
color: '#6e5494',
},
]
})赞助
Sponsor
在每篇文章末尾，展示赞助（打赏）信息。
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
sponsor: {
enable: true,
methods: [
{
name: '支付宝',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
{
name: '微信支付',
url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
color: '#2DC100',
icon: 'i-ri-wechat-pay-line',
},
],
},
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
sponsor: {
enable: true,
methods: [
{
name: '支付宝',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
{
name: '微信支付',
url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
color: '#2DC100',
icon: 'i-ri-wechat-pay-line',
},
],
},
})你可以通过 sponsor 属性控制全局是否开启。
At the end of each post, show sponsor information.
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
sponsor: {
enable: true,
methods: [
{
name: 'Alipay',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
{
name: 'WeChat Pay',
url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
color: '#2DC100',
icon: 'i-ri-wechat-pay-line',
},
],
},
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
sponsor: {
enable: true,
methods: [
{
name: 'Alipay',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
{
name: 'WeChat Pay',
url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
color: '#2DC100',
icon: 'i-ri-wechat-pay-line',
},
],
},
})You can use the sponsor property to globally toggle if it's shown.
ts
interface SponsorOption {
enable: boolean
title: string
methods: {
name: string
url: string
color: string
icon: string
}[]
}interface SponsorOption {
enable: boolean
title: string
methods: {
name: string
url: string
color: string
icon: string
}[]
}或为某篇文章的 Front Matter 单独设置：
Or you can set for each post using front matter:
md
---
title: xxx
sponsor: false
------
title: xxx
sponsor: false
---阅读统计
开启阅读统计，将会在每篇文章开头展示阅读统计信息。
需要主题进行适配，即展示
frontmatter中的wordCount和readingTime字段。
wordCount：字数统计readingTime：阅读时长（分钟）- 可以设置不同语言的阅读速度，默认
cn为 300 字/分钟，en为 200 字/分钟。
- 可以设置不同语言的阅读速度，默认
ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
/**
* 开启阅读统计
*/
statistics: {
enable: true,
readTime: {
/**
* 阅读速度
*/
speed: {
cn: 300,
en: 200,
},
},
}
})// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
/**
* 开启阅读统计
*/
statistics: {
enable: true,
readTime: {
/**
* 阅读速度
*/
speed: {
cn: 300,
en: 200,
},
},
}
})代码块高度限制
Code Height Limit
你可以为每篇文章设置代码块高度限制。
You can set the height limit for each article.
譬如设置 codeHeightLimit: 300，则文章中所有代码块高度都不会超过 300px，并自动折叠。
For example, if you set codeHeightLimit: 300, the height of all code blocks in the article will not exceed 300px and will be automatically collapsed.
ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
// ...
codeHeightLimit: 300,
})import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
// ...
codeHeightLimit: 300,
})你也可以在文章的 Front Matter 中单独设置：
You can also set it separately in the Front Matter of the article:
md
---
codeHeightLimit: 300
------
codeHeightLimit: 300
---示例可参见 代码块高度限制。
Example can refer to Code Height Limit.
内容加密
Content Encryption
首先在 site.config.ts 中开启加密
Firstly, enable encryption in site.config.ts.
ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
// ...
encrypt: {
enable: true,
}
})import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
// ...
encrypt: {
enable: true,
}
})- 加密整篇文章
- encrypt the entire article
在文章的 Front Matter 中设置 password：
Set password in the Front Matter of the article:
md
---
password: your_password
------
password: your_password
---- 加密部分内容
- encrypt partial content
TIP提示
If you set password in Front Matter, partial encryption will be ignored.
将待加密的内容包裹在 <!-- valaxy-encrypt-start:your_password --><!-- valaxy-encrypt-end --> 中。
Wrap content to be encrypted in <!-- valaxy-encrypt-start:your_password --><!-- valaxy-encrypt-end -->.
示例可参见 部分内容加密。
Examples can be found in Partial Content Encryption。
主题配置
Theme Config
参照 使用主题 及您所使用的主题文档进行配置。
Please refer to Using Themes and the theme you are using to configure it.
To Be Continued.