零基础搭建博客网站-Valaxy-配置篇
一下子就到重头戏之一—代码编辑了呢，以下内容请边服用凉水观看，以防烧脑，嗯最好再敷用冰袋，效果更佳。那么，好戏开场喽。
关于博客文件夹下的文件：
前言:
为了方便管理,Valaxy人性化地将大部分基础配置都放在了两个文件之下:valaxy.config.ts和site.config.ts.
在完成了本地部署的步骤之后,基本就只需要对这两个文件进行一些个性化的修改就行了
10元懒人配置使用教程
打开存放我博客站点文件的github仓库
点击
code(使用汉化插件则是代码),然后Download zip(使用汉化插件则是下载压缩包)下载速度慢请看这里
下载完之后再解压压缩包,解压到合适的地方.
警告
路径不得含有中文等其他字符
在文件夹下打开
cmd,输入以下指令:安装依赖:
npm i -g pnpm安装包体:
pnpm istall安装插件:
通用组件pnpm add valaxy-addon-components相册组件npm i valaxy-addon-lightgallery统计组件pnpm add valaxy-addon-vercount打开文件
valaxy.config.ts和config.ts,对照里面的注释,自己进行修改把
valaxy.config.ts:
大体内容:
这个文件是Valaxy的主配置,里面包含了站点的主题配置,以及一部分功能配置(面向全局)
小白看过来:
站长踩过的坑😭:
引入代码:
在文件内容的最上端,会有这样一些代码:
import { ... } from '...'这些属于引入代码,在文件中引入其他东西,在别的大佬教程里,配置
valaxy.config.ts的一部分代码都会有,这里由于文件自带了,所以站长就不写了.(但这些配置一定要有!)注释代码:
在代码块中,你可能会看见这样的字符:
// 这是一串注释 /** *这也是一串注释 */其实,这都是注释,给你看的,能够方便你进行修改,一般注释写在内容上面.
同样,为了方便理解,站长把注释都写在代码后面了
区域完整:
如果你看见一个字符串后有
‘’,[],{},{( )}…请一定要保证完全包裹住配置内容
一般如果出现问题,VScode会提醒的,例如:
title: '星海坠入云端这里我少了
‘,vscode提醒我:“未终止的字符串字面量”即这一串配置没有终止,点击这一个消息就会跳转到问题所在的那一行,
我们只要在末尾加上
’就行了再如这样:
colors: { primary: '#4B9BE1' //网站的主题色,用16进制代码 }我在
}后少了,,vscode提醒我:应为“,”点击跳转到问题行,在那一行上面的花括号后添加
,即可
具体配置:
根据文件,我会从上往下地讲述配置,你只需要找到对应代码的位置,并替换就行了
主题名:
这里一般不用改,除非你使用了其他主题(默认主题为Yun)
// 主题名字
theme: 'yun',theme config:
主题站点名(瞬时显示):
在这里把你的开始动画标题更改,默认为“云游君的小站”
banner: {
enable: true,
title: '星海坠入云端', //在这里填写你的站点名字
},站点的背景图片:
在这里粘贴图片链接,一定要指向源文件(后缀为图片后缀名)
bg_image: { //网站的背景图片,粘贴链接
enable: true, //是否启用背景图片
//亮色模式背景图片
url: 'https://cdn.jsdelivr.net/gh/Fuyunxiyu/fuyunxinyu.github.io/image/site/White-background.jpg',
//暗色模式背景图片
dark: 'https://cdn.jsdelivr.net/gh/Fuyunxinyu/fuyunxinyu.github.io/image/site/Black-background.jpg',
opacity: 0.7
},站点主题色:
修改站点的主要配色,采用颜色名或16进制代码
//网站的主题色,推荐使用16进制代码
colors: {
primary: '#4B9BE1'
},站点的页面:
这里添加你站点的快捷页面链接,页面一般为导航倾向页面
pages: [ //在这里添加你的界面
//仿照以下格式添加,排除"*"和开头的"/"(他们起注释作用)
/*{
*name: '页面名字',
*url: '/页面链接/',
*icon: '图标',
*color: '图标颜色',
*},
*/
{
name: '我的小伙伴们',
url: '/links/',
icon: 'i-line-md-emoji-smile-wink',
color: 'dodgerblue',
},
{
name: '喜欢的艺术家',
url: '/Artist/',
icon: 'i-line-md-heart-filled',
color: 'hotpink',
},
{
name: '相册',
url: '/albums/',
icon: 'i-line-md-image-filled',
color: '#43abee',
},
{
name: '不明图标',
url: '/surprise/',
icon: 'i-line-md-star-pulsating-filled-loop',
color: 'yellow',
},
],站点的脚注:
在网站的末尾添加脚注内容,包括备案信息,自己修改吧
footer: { //脚注
since: 2025, //网站运行时间
icon: {
enable: true, //是否启用
name: 'i-line-md-moon-rising-filled-alt-loop', //图标名字
animated: true, //是否启用
color: '#d69b54', //图标颜色
url: 'https://fuyuntechnology.github.io/', //图标链接
title: '回到首页' //鼠标悬停注释
},
beian: { //备案
enable: true, //是否启用
icp: '备案号:xxxx 真的备案了吗', // 备案信息
},
},Markdown警示框:
Valaxy默认不支持警示框写法,但通过添加以下代码可以实现.支持自定义
markdown: { //markdown扩展警示框
// default material-theme-palenight
// theme: 'material-theme-palenight',
theme: {
// light: 'material-theme-lighter',
light: 'github-light',
// dark: 'material-theme-darker',
dark: 'github-dark',
},
blocks: {
tip: { //名字,不可改变
icon: 'i-line-md-compass-loop', //图标,自由选择
text: '小提示：', //文字,可改变
},
warning: {
icon: 'i-line-md-bell-alert-twotone-loop',
text: '警告！',
},
danger: {
icon: 'i-line-md-hazard-lights-loop',
text: '请注意！',
},
info: {
icon:'i-line-md-cloud-alt-print-twotone-loop',
text: '更多信息：',
},
},
codeTransformers: [ //代码转换器,不可更改
// We use `[!code` in demo to prevent transformation, here we revert it back.
{
postprocess(code) {
return code.replace(/\[!!code/g, '[!code')
},
},
],
config(md) {
// md.use(xxx)
}
},完整的示例文件如下:
import type { UserThemeConfig } from 'valaxy-theme-yun' //引入主题yun
import { defineValaxyConfig } from 'valaxy'
import { addonComponents } from 'valaxy-addon-components' //引入插件通用插件
//import { addonFace } from 'valaxy-addon-face' //引入表情包插件
// add icons what you will need
const safelist = [
'i-ri-home-line',
]
/**
* User Config
*/
export default defineValaxyConfig<UserThemeConfig>({
// site config see site.config.ts
// 主题名字
theme: 'yun',
//主题配置,在这里修改
themeConfig: {
banner: {
enable: true,
title: '星海坠入云端', //在这里填写你的站点名字
},
bg_image: { //网站的背景图片,粘贴链接
enable: true, //是否启用背景图片
//亮色模式背景图片
url: 'https://cdn.jsdelivr.net/gh/Fuyunxiyu/fuyunxinyu.github.io/image/site/White-background.jpg',
//暗色模式背景图片
dark: 'https://cdn.jsdelivr.net/gh/Fuyunxinyu/fuyunxinyu.github.io/image/site/Black-background.jpg',
opacity: 0.7
},
pages: [ //在这里添加你的界面
//仿照以下格式添加,排除"*"和开头的"/"(他们起注释作用)
/*{
*name: '页面名字',
*url: '/页面链接/',
*icon: '图标',
*color: '图标颜色',
*},
*/
{
name: '我的小伙伴们',
url: '/links/',
icon: 'i-line-md-emoji-smile-wink',
color: 'dodgerblue',
},
{
name: '喜欢的艺术家',
url: '/Artist/',
icon: 'i-line-md-heart-filled',
color: 'hotpink',
},
{
name: '相册',
url: '/albums/',
icon: 'i-line-md-image-filled',
color: '#43abee',
},
{
name: '不明图标',
url: '/surprise/',
icon: 'i-line-md-star-pulsating-filled-loop',
color: 'yellow',
},
],
//网站的主题色,推荐使用16进制代码
colors: {
primary: '#4B9BE1'
},
footer: { //脚注
since: 2025, //网站运行时间
icon: {
enable: true, //是否启用
name: 'i-line-md-moon-rising-filled-alt-loop', //图标名字
animated: true, //是否启用
color: '#d69b54', //图标颜色
url: 'https://fuyuntechnology.github.io/', //图标链接
title: '回到首页' //鼠标悬停注释
},
beian: { //备案
enable: true, //是否启用
icp: '备案号:xxxx 真的备案了吗', // 备案信息
},
},
},
addons: [
addonComponents(), //导入通用组件
],
markdown: { //markdown扩展警示框
// default material-theme-palenight
// theme: 'material-theme-palenight',
theme: {
// light: 'material-theme-lighter',
light: 'github-light',
// dark: 'material-theme-darker',
dark: 'github-dark',
},
blocks: {
tip: { //名字,不可改变
icon: 'i-line-md-compass-loop', //图标,自由选择
text: '小提示：', //文字,可改变
},
warning: {
icon: 'i-line-md-bell-alert-twotone-loop',
text: '警告！',
},
danger: {
icon: 'i-line-md-hazard-lights-loop',
text: '请注意！',
},
info: {
icon:'i-line-md-cloud-alt-print-twotone-loop',
text: '更多信息：',
},
},
codeTransformers: [ //代码转换器,不可更改
// We use `[!code` in demo to prevent transformation, here we revert it back.
{
postprocess(code) {
return code.replace(/\[!!code/g, '[!code')
},
},
],
config(md) {
// md.use(xxx)
}
},
unocss: { safelist },
})site.congfig.ts:(这里的配置主要与站点相关)
站点默认语言:
这里就不多说了,基本不需要改
//默认语言
lang: 'zh-CN',站点标题(常驻):
在这里写上你的站点名字,比如我的站点名是“芸端之上”
//站点名字
title: '芸端之上',站点副标题:
显示在标题之下,字号略小
//站点副标题
subtitle: 'Roof above the sea star',站点描述:
在站点副标题之下,比他略大一点,起描述作用
//站点描述
description: '编辑博客还是太难了',站点图标:
修改你站点的图标,显示在标签页上
//站点图标
favicon: 'https://media.githubusercontent.com/media/Fuyunxinyu/fuyunxinyu.github.io/main/image/site/Site%20Icon.png',author:(站长相关信息)
name:站长名字
avatar:站长头像
status:站长状态相关
emoji:状态显示的emoji表情
message:鼠标悬停时显示的文字
总代码(示例):
//站长信息
author: {
name: '仰望星空', //站长名字
avatar: "https://cdn.jsdelivr.net/gh/Fuyunxinyu/fuyunxinyu.github.io/image/site/Avatar.jpg", //站长头像
status: //状态
{
emoji: '💡', //在这里填写emoji
message: '我有一计!' //鼠标悬停时显示的文字
}
},社交媒体/联系方式:
添加联系方式链接,常驻显示
social: [
/**
* 按以下格式添加社媒方式,排除"*"和"/"(他们起注释作用)
{
name: '媒体和图标名称',
link: '图标链接',
icon: '图标名字',
color: '图标颜色,请使用16进制格式',
},
*/
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-fill',
color: 'orange',
},
{
name: 'QQ 3404889047',
link: 'https://qun.qq.com/universal-share/share?ac=1&authKey=A9%2BrXFxkXkc3XCSNK7iBO0bkirxVjmHe7MfHxj6XI1COBry9sIMl%2BWwEr0cCaw2i&busi_data=eyJncm91cENvZGUiOiIzNjk0MTE2OTEiLCJ0b2tlbiI6IldXU2RDUDM5b0RDWTRLL2RaT0hZOXY0dnZTSjJqWEhtclQ1REpBNkp5MHlKQmdBaG9FelYyVXUrWmdPYkYzS0YiLCJ1aW4iOiIzNDA0ODg5MDQ3In0%3D&data=9UIxAslXBqDLmXF53Zx8iqQ86q9MUKPQGPofNJKY68C4x4HeObaRaX7Tt5KTBSJTZv8uNI0CSBOg_w88fzNTOA&svctype=4&tempid=h5_group_info',
icon: 'i-ri-qq-line',
color: '#12B7F5',
},
{
name: 'GitHub',
link: 'https://github.com/FuyunTechnology',
icon: 'i-ri-github-fill',
color: '#6e5494',
},
{
name: '哔哩哔哩',
link: 'https://space.bilibili.com/1579790',
icon: 'i-ri-bilibili-line',
color: '#FF8EB3',
},
{
name: 'Telegram Channel',
link: 'https://t.me/elpsycn',
icon: 'i-ri-telegram-line',
color: '#0088CC',
},
{
name: 'E-Mail(暂时还没有合适的)',
link: '',
icon: 'i-ri-mail-line',
color: '#8E71C1',
},
],搜索:
这里的配置主要是与搜索相关,创建一个搜索索引,方便在站点内搜索文章
search: { //搜索相关
enable: true, //启用搜索
type: 'Local', //搜索样式,有 "engine" "algolia" "fuse",选填一个
},使用fuse作为引擎(不推荐新手使用😑)
search: { //搜索相关
enable: true, //启用搜索
type: 'fuse', //搜索样式,有 "engine" "algolia" "fuse",选填一个
},
fuse:
{ //fuse配置
options:
{
keys: ['title', 'tags', 'categories', 'excerpt', 'content'],
/**
* @default 0.6
* @see https://www.fusejs.io/api/options.html#threshold
* 设置匹配阈值，越低越精确
*/
// threshold: 0.6,
/**
* @default false
* @see https://www.fusejs.io/api/options.html#ignoreLocation
* 忽略位置
* 这对于搜索文档全文内容有用，若无需全文搜索，则无需设置此项
*/
ignoreLocation: true,
},
},时间警告:
在Valaxy中,这一项配制用于在文章的时间跨度大时使用,为文章自动添加时间警告,提醒读者
//是否启用时间警告
frontmatter:
{
time_warning: false,
},加密:
Valaxy拥有对文章加密的功能,不过需要谨慎使用,不要把重要数据对此进行加密
encrypt: {
// 开启加密，默认关闭
enable: true
// algorithm
// iv
// salt
},图片预览:
是否启用图片预览功能
//开启图片预览
mediumZoom: { enable: true },阅读统计:
用于在文章开头统计文章字数并计算阅读时长
/**
* 开启阅读统计
*/
statistics: { //显示阅读信息
enable: true,
readTime: {
/**
* 阅读速度
*/
speed: {
cn: 300,
en: 200,
},
},
},赞助:
在文章末显示赞助按钮,全局配置,会被文章配置覆盖
sponsor: { //赞助功能
enable: false, //赞助开关
title: '看在写了这么多的份上,给点钱吧', //赞助描述
methods: [ //赞助方式
/**按以下格式添加赞助方式
{
name: '赞助方式',
url: '赞助图片,收款码链接',
color: '图标颜色,16进制',
icon: '赞助图标',
},
到此处结束*/
{
name: '支付宝',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
{
name: 'QQ 支付',
url: 'https://cdn.yunyoujun.cn/img/donate/qqpay-qrcode.png',
color: '#12B7F5',
icon: 'i-ri-qq-line',
},
{
name: '微信支付',
url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
color: '#2DC100',
icon: 'i-ri-wechat-pay-line',
},
],
},完整的示例文件如下
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
url: 'https://valaxy.site/',
//默认语言
lang: 'zh-CN',
//站点名字
title: '芸端之上',
//站点副标题
subtitle: 'Roof above the sea star',
//站点描述
description: '编辑博客还是太难了',
//站点图标
favicon: 'https://media.githubusercontent.com/media/Fuyunxinyu/fuyunxinyu.github.io/main/image/site/Site%20Icon.png',
//站长信息
author: {
name: '仰望星空', //站长名字
avatar: "https://cdn.jsdelivr.net/gh/Fuyunxinyu/fuyunxinyu.github.io/image/site/Avatar.jpg", //站长头像
status: //状态
{
emoji: '💡', //在这里填写emoji
message: '我有一计!' //鼠标悬停时显示的文字
}
},
social: [
/**
* 按以下格式添加社媒方式,排除"*"和"/"(他们起注释作用)
{
name: '媒体和图标名称',
link: '图标链接',
icon: '图标名字',
color: '图标颜色,请使用16进制格式',
},
*/
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-fill',
color: 'orange',
},
{
name: 'QQ 3404889047',
link: 'https://qun.qq.com/universal-share/share?ac=1&authKey=A9%2BrXFxkXkc3XCSNK7iBO0bkirxVjmHe7MfHxj6XI1COBry9sIMl%2BWwEr0cCaw2i&busi_data=eyJncm91cENvZGUiOiIzNjk0MTE2OTEiLCJ0b2tlbiI6IldXU2RDUDM5b0RDWTRLL2RaT0hZOXY0dnZTSjJqWEhtclQ1REpBNkp5MHlKQmdBaG9FelYyVXUrWmdPYkYzS0YiLCJ1aW4iOiIzNDA0ODg5MDQ3In0%3D&data=9UIxAslXBqDLmXF53Zx8iqQ86q9MUKPQGPofNJKY68C4x4HeObaRaX7Tt5KTBSJTZv8uNI0CSBOg_w88fzNTOA&svctype=4&tempid=h5_group_info',
icon: 'i-ri-qq-line',
color: '#12B7F5',
},
{
name: 'GitHub',
link: 'https://github.com/FuyunTechnology',
icon: 'i-ri-github-fill',
color: '#6e5494',
},
{
name: '哔哩哔哩',
link: 'https://space.bilibili.com/1579790',
icon: 'i-ri-bilibili-line',
color: '#FF8EB3',
},
{
name: 'Telegram Channel',
link: 'https://t.me/elpsycn',
icon: 'i-ri-telegram-line',
color: '#0088CC',
},
{
name: 'E-Mail(暂时还没有合适的)',
link: '',
icon: 'i-ri-mail-line',
color: '#8E71C1',
},
],
search: { //搜索相关
enable: true, //启用搜索
type: 'fuse', //搜索样式,有 "engine" "algolia" "fuse",选填一个
},
fuse:
{ //fuse配置
options:
{
keys: ['title', 'tags', 'categories', 'excerpt', 'content'],
/**
* @default 0.6
* @see https://www.fusejs.io/api/options.html#threshold
* 设置匹配阈值，越低越精确
*/
// threshold: 0.6,
/**
* @default false
* @see https://www.fusejs.io/api/options.html#ignoreLocation
* 忽略位置
* 这对于搜索文档全文内容有用，若无需全文搜索，则无需设置此项
*/
ignoreLocation: true,
},
},
//是否启用时间警告
frontmatter:
{
time_warning: false,
},
encrypt: {
// 开启加密，默认关闭
enable: true
// algorithm
// iv
// salt
},
//开启图片预览
mediumZoom: { enable: true },
/**
* 开启阅读统计
*/
statistics: { //显示阅读信息
enable: true,
readTime: {
/**
* 阅读速度
*/
speed: {
cn: 300,
en: 200,
},
},
},
sponsor: { //赞助功能
enable: false, //赞助开关
title: '看在写了这么多的份上,给点钱吧', //赞助描述
methods: [ //赞助方式
/**按以下格式添加赞助方式
{
name: '赞助方式',
url: '赞助图片,收款码链接',
color: '图标颜色,16进制',
icon: '赞助图标',
},
到此处结束*/
{
name: '支付宝',
url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
},
{
name: 'QQ 支付',
url: 'https://cdn.yunyoujun.cn/img/donate/qqpay-qrcode.png',
color: '#12B7F5',
icon: 'i-ri-qq-line',
},
{
name: '微信支付',
url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
color: '#2DC100',
icon: 'i-ri-wechat-pay-line',
},
],
},
})尾声
到此,Valaxy的配置项也说得差不多了,下一步,就是进行站点部署了