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:
// valaxy.config.ts
import { defineValaxyConfig } from 'valaxy'
import type { ThemeConfig } from 'valaxy-theme-yun'
import { addonComponents } from 'valaxy-addon-components'
import { VitePWA } from 'vite-plugin-pwa'
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://vite-pwa-org.netlify.app/
plugins: [VitePWA()],
},
unocss: {
safelist,
},
addons: [
addonComponents()
],
})
站点配置
Site Config
更多详细配置可参见 types/config.ts。
站点信息配置,这部分内容面向站点展示且在任何主题也是通用的格式。
你也可以将其写在 site.config.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 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:
// 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
,则所有文章都不会显示阅读时间警告。
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
/**
* 默认 Frontmatter
*/
frontmatter: {
time_warning: false,
}
})
Set the default Frontmatter for all posts.
For example:
Set
time_warning: false
so that all articles won’t show reading time warnings.
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
/**
* Default Frontmatter
*/
frontmatter: {
time_warning: false,
}
})
社交图标
Social Icons
export interface SocialLink {
/**
* 社交链接名称
*/
name: string
link: string
/**
* 图标名称
* 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:
// 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
在每篇文章末尾,展示赞助(打赏)信息。
// 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.
// 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.
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:
---
title: xxx
sponsor: false
---
阅读统计
开启阅读统计,将会在每篇文章开头展示阅读统计信息。
需要主题进行适配,即展示
frontmatter
中的wordCount
和readingTime
字段。
wordCount
:字数统计readingTime
:阅读时长(分钟)- 可以设置不同语言的阅读速度,默认
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.
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
// ...
codeHeightLimit: 300,
})
你也可以在文章的 Front Matter 中单独设置:
You can also set it separately in the Front Matter of the article:
---
codeHeightLimit: 300
---
示例可参见 代码块高度限制。
Example can refer to Code Height Limit.
内容加密
Content Encryption
首先在 site.config.ts
中开启加密
Firstly, enable encryption in site.config.ts
.
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:
---
password: your_password
---
- 加密部分内容
- encrypt partial content
TIP提示
将待加密的内容包裹在 <!-- 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。
客户端重定向
Client Redirects
interface Redirects {
// https://router.vuejs.org/guide/essentials/redirect-and-alias.html
// Whether to use VueRouter, default is true
useVueRouter?: boolean
rules?: RedirectRule[]
}
interface RedirectRule {
// Redirect original route
from: string | string[]
// Redirect target route
to: string
}
示例:
For example:
// site.config.ts
export default defineSiteConfig({
redirects: {
useVueRouter: true,
rules: [
{
from: ['/foo', '/bar'],
to: '/about',
},
{
from: '/v1/about',
to: '/about',
},
]
},
})
/foo
, /bar
, /v1/about
这些路由会被重定向到 /about
。
/foo
, /bar
, /v1/about
these routes will be redirected to /about
。
你也可以在 Front Matter 中配置:
You can also set it in the Front Matter:
<!-- pages/posts/redirect.md -->
---
from:
- /redirect/old1
- /redirect/old2
---
<!-- pages/posts/redirect.md -->
---
from: /v1/redirect
---
/redirect/old1
, /redirect/old2
, /v1/redirect
这些路由会被重定向到 /posts/redirect
。
/redirect/old1
, /redirect/old2
, /v1/redirect
these routes will be redirected to /posts/redirect
。
TIP提示
图片预览(Medium Zoom)
Image Preview (Medium Zoom)
Valaxy 内置了 medium-zoom 进行图片预览,默认关闭。
- mediumZoom
enable
: 是否开启selector
: 可自定义传入选择器options
: 与 options | medium-zoom 一致
譬如开启 Medium Zoom:
Valaxy has built-in medium-zoom to preview the pictures, which is disabled by default.
- mediumZoom
enable
: Set to true to enable itselector
: Custom CSS selectoroptions
: Refer to options | medium-zoom
a2bbd86 (docs: update vanillaLazyLoad)
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
mediumZoom: { enable: true }
})
除此之外,你也可以单独控制是否在某篇文章中开启。
In addition, you can also enable it in a certain article independently.
---
title: Test Medium Zoom
medium_zoom: true
---
懒加载 Vanilla Lazyload
Lazyload Vanilla Lazyload
Valaxy 内置了 vanilla-lazyload。
vanillaLazyload
默认不开启。 因为 Valaxy 本身会为所有的图片添加 loading="lazy"
,它是浏览器的特性,但如果你希望得到更广泛的兼容,你可以手动开启 vanillaLazyload
。
Valaxy has built-in vanilla-lazyload。
vanillaLazyload
is disabled by default. Because Valaxy itself will add loading="lazy"
to all images, which is a browser feature, but if you want to get more extensive compatibility, you can manually enable it.
export default defineSiteConfig({
vanillaLazyload: {
// 默认不开启
enable: true,
}
})
主题配置
Theme Config
参照 使用主题 及您所使用的主题文档进行配置。
Please refer to Using Themes and the theme you are using to configure it.
To Be Continued.