AIOVTUE-雪 - valaxy美化
type: channel
link: https://ty.yybb.us/index.php/category/valaxy/
items: valaxy博客全局美化教程（十）
items: valaxy博客全局美化教程（九）
items: valaxy博客全局美化教程（八）
items: valaxy博客全局美化教程（七）
items: valaxy博客全局美化教程（六）
items: valaxy博客全局美化教程（五）
items: valaxy博客全局美化教程（四）
items: valaxy博客全局美化教程（三）
items: valaxy博客全局美化教程（二）
items: valaxy博客全局美化教程（一）

valaxy博客全局美化教程（十）
type: item
date: 2026-06-06T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住覆盖文件覆盖文件的意思就是，这个文件已存在，删除原本全部内容，替换为下方内容，不过删之前建议备份哦覆盖scripts\build-ssg.mjsimport { spawn } from 'node:child_process' import { createRequire } from 'node:module' import { existsSync } from 'node:fs' import { resolve } from 'node:path' const BUILD_DONE_MARKERS = [ '[HOOK] build:after done', 'RSS Feed Files', ] const GRACE_MS = 800 const HEARTBEAT_MS = 45_000 const MAX_MS = 20 * 60 * 1000 const require = createRequire(import.meta.url) const valaxyBin = require.resolve('valaxy/bin/valaxy.mjs') const distIndex = resolve(process.cwd(), 'dist/index.html') const child = spawn(process.execPath, [valaxyBin, 'build', '--ssg'], { stdio: ['inherit', 'pipe', 'pipe'], env: process.env, windowsHide: true, }) let finished = false let successTimer let outputBuffer = '' function killChildTree() { if (!child.pid) return if (process.platform === 'win32') { spawn('taskkill', ['/PID', String(child.pid), '/T', '/F'], { stdio: 'ignore', windowsHide: true, }) return } try { child.kill('SIGKILL') } catch {} } function finishSuccess() { if (finished) return finished = true clearTimeout(maxTimer) clearTimeout(successTimer) clearInterval(heartbeatTimer) if (!existsSync(distIndex)) { console.error('\n构建流程已结束，但未找到 dist/index.html，请检查构建日志。\n') killChildTree() process.exit(1) return } console.log('\n✓ 构建已完成，正在结束进程…\n') killChildTree() setTimeout(() => process.exit(0), 200) } function finishError(code) { if (finished) return finished = true clearTimeout(maxTimer) clearTimeout(successTimer) clearInterval(heartbeatTimer) process.exit(code ?? 1) } function scheduleSuccess() { clearTimeout(successTimer) successTimer = setTimeout(finishSuccess, GRACE_MS) } function inspectOutput(text) { …

valaxy博客全局美化教程（九）
type: item
date: 2026-06-05T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住效果展示支持图床相册或者webdav网盘相册，均支持加密，支持时间轴显示（图床需要自己设置时间，webdav没测试时间轴），图片预览界面和之前的预览界面一样的，安装本美化之前请先安装valaxy博客全局美化教程（四），否则可能会出奇奇怪怪的问题开始美化由于相册功能改动十分大，有涉及到三四十个新建文件，如果让你们一个个添加的话，那也太累了，所以我将所有新建文件全部打包，按照项目根目录路径打包，解压之后可以直接覆盖导入，不放心的话可以一个个导入，注意，修改相册之前记得备份一份博客文件，由于本次美化设计文件过多，一个个回退不太现实，万一出问题造成后果自己负责哦，环境变量说明一下，由于要使用webdav相册，需要在部署到托管时增加环境变量，以下是环境变量名称WEBDAV_PASSWORD值是你的webdav访问密码，记得类型选择秘钥类型哦~修改文件以下全部是修改文件的操作文件valaxy.config.ts增加import { albumWebdavConfigPlugin } from './plugins/album-webdav-config' import { albumWebdavProxy } from './plugins/album-webdav-proxy' { text: '相册', link: '/gallery', },export default defineValaxyConfig({ vite: { plugins: [vaFoucLoader({ avatar: siteConfig.author?.avatar, title: siteConfig.title, subtitle: siteConfig.subtitle, primary: '#E9CCCC', }), albumWebdavConfigPlugin(), albumWebdavProxy()], }, })一共增加三段代码，第一段头部引入，第二段增加页面入口，第三段启用相册效果，请对应位置哦，第三段是完整代码哦~文件.gitignore增加!.env.example文件netlify.toml增加redirects from = "/api/album-webdav/*" to = "/.netlify/functions/album-webdav/:splat" status = 200修改vercel.json{ "cleanUrls": true, "buildCommand": "pnpm run build", "outputDirectory": "dist", "functions": { "api/**/*.ts": { "includeFiles": "server/**,types/**,utils/**" } } }导入文件修改部分上面结束了，现在进行新建文件部分，这里给出文件下载地址点我跳转下载链接解压后文件夹里面长这样里面有一个readme.md文件，里面写了怎么使用，可以看看，也可以看我这里写的，解压之后将文件覆盖进你的项目就行了，这里的文件包含了页面文件，这里和你们讲一下index.md代码使用方法pages\gallery文件夹就是相册页面文件夹，这个文件夹内的index.md写的是相册--- layout: gallery title: 相册 icon: i-ri-gallery-line cover: https://你的图床.png comment: false albums: - bizhi - web-jiami - jiamio - web-kaif ---例如这样，下面的albums下方的四个就是相册，和这个目录下的文件夹名称要一样，每一个文件夹对应一个相册这里以bizhi举例，pages\gallery\bizhi文件夹就是bizhi相册，在这个文件夹内有一个index.md文件，这是该相册的索引文件，在里面设置照片这些--- layou…

valaxy博客全局美化教程（八）
type: item
date: 2026-06-04T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住页脚添加计时功能预览效果新建文件以下是新建文件部分新增components\SakuraFooter.vue <SakuraCopyright /> 本站已经流畅运行 {{ runtime.days }}天 {{ runtime.hours }}小时 {{ runtime.minutes }}分钟 {{ runtime.seconds }}秒 <SakuraPowered v-if="footer.powered" /> <slot /> 修改文件以下是修改文件部分在valaxy.config.ts文件footer部分（在（themeconfig内部）增加以下代码 runtimeSince: '2026-6-01',最终效果 footer: { //... runtimeSince: '2026-6-01', //... },这是控制计时起始时间的搜索问题修复前景提要这个没有预览图哈，不知道你们遇到没有，反正主播遇到了，我使用搜索功能的时候老搜不到东西，很奇怪，顺便说一下怎么开启搜索功能，你直接点那个按钮他是有一个空壳哈，得先新建搜索页面pages\search新建文件index.md在里面写：--- layout: search title: 搜索 icon: i-ri-search-line cover: /path/to/your/cover-image.jpg comment: false ---然后还要开启搜索支持：本地搜索（基于 fuse.js）Valaxy 内置了基于 fuse.js 的离线搜索（须预先通过 valaxy fuse 构建生成本地缓存）。valaxy fuse 默认将 fuse 生成在 public 目录下，并在 .gitignore 中添加 public/valaxy-fuse-list.json 忽略。 在执行 valaxy build 之前，会自动执行 valaxy fuse。如果你想要使用全文搜索，需要进行如下设置 ：编辑site.config.ts文件，以下给的完整代码，注意哦export default defineSiteConfig({ search: { enable: true, type: 'fuse', }, fuse: { /** * 设置搜索的文件路径 */ // pattern: 'pages/**/*.md', 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, }, }, })还需要在文件中设置启用搜素：编辑site.config.ts文件，这里也是完整代码哦import { defineSiteConfig } from 'valaxy' export default defineSiteConfig({ search: { enable: true, // 设置类型为 Fuse provider: 'fuse', }, })还需要在你的 package.json 中添加 fuse 生成脚本编辑package.json文件主要加这两行："build": "npm run build:ssg", "fuse": "valaxy fuse",添加位置看下方完整代码{ "name": "yun-demo", "valaxy": { "…

valaxy博客全局美化教程（七）
type: item
date: 2026-06-03T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住效果演示这个页面效果有点多，其中有一个随机网站抽卡界面，大家最好还是亲自体验一下比较好前往体验站长的小巧思，点击到处转转按钮有惊喜哦~文件修改以下是文件修改部分，共1个修改文件注意这里给的完整代码哦文件valaxy.config.ts增加 themeConfig: { //... // 导航页「随机网站跳转」抽卡视频：weight 越大越容易抽到 navigation: { randomDrawVideos: [ { url: 'https://img.naixiai.cn/2026/06/09/_compressed.mp4', weight: 1, }, { url: 'https://img.naixiai.cn/2026/06/09/_compresseddbc6ff3507fddbf4.mp4', weight: 2, }, { url: 'https://img.naixiai.cn/2026/06/09/_compressedf1fc8ccd127613ac.fr.jpeg', weight: 3, }, ], }, //... }上面这个解释一下，三个url链接是点击随机跳转按钮后的抽卡视频，最好自己准备哦，下面的是概率，挺好玩的上下两部分都需要添加，下面这部分就是给你的网页增加导航页面按钮，具体放置位置可以看看官方文档的顶栏按钮怎么写的，点我去看看 { text: '导航', link: '/navigation', },新建文件以下部分是新建文件哦，共7个文件，别漏了哦这是第一个文件，也是导航页面的索引文件，导航页面所有导航都写在里面，这里写了几个示例，可以自己按格式新增新增pages\navigation\index.md--- layout: navigation title: 导航 icon: i-ri-compass-3-line comment: false cover: https://你的图床.png # 抽卡视频与概率见 valaxy.config.ts → themeConfig.navigation.randomDrawVideos navGroups: - name: 软件资源 desc: 绿色软件、应用下载与资源分享 sites: - name: 果核剥壳 url: https://www.ghxi.com desc: 精品软件分享与绿色资源下载站 avatar: https://api.dicebear.com/7.x/shapes/svg?seed=ghxi color: "#e67e22" - name: ZAPRO 杂铺 url: https://tmioe.com desc: 软件资源整理与工具分享博客 avatar: https://api.dicebear.com/7.x/shapes/svg?seed=tmioe color: "#3498db" - name: 易破解 url: https://www.ypojie.com desc: 软件破解教程与资源下载社区 avatar: https://api.dicebear.com/7.x/shapes/svg?seed=ypojie color: "#9b59b6" - name: MEFCL url: https://www.mefcl.com desc: 软件绿标资源与下载分享站 avatar: https://api.dicebear.com/7.x/shapes/svg?seed=mefcl color: "#1abc9c" - name: 绿库吧 url: https://www.lkuba.com desc: 绿色软件与驱动程序下载 avatar: https://api.dicebear.com/7.x/shapes/svg?seed=lkuba color: "#27ae60" - name: 优盟盒子 url: https://www.umsbox.com de…

valaxy博客全局美化教程（六）
type: item
date: 2026-06-02T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住话不多说，先看效果 页面下滑时信封自动展开，上划自动闭合，可以自己换图片，但是尺寸要一样哈，由于涉及到图床，大家尽量只下载图片，不要直接使用站长的链接，因为站长不能保证什么时候就失效了给出所有图片的图床链接：https://pic1.imgdb.cn/item/6a26e5483c9809430d376f88.png https://pic1.imgdb.cn/item/6a26e5483c9809430d376f87.png https://pic1.imgdb.cn/item/6a26e5483c9809430d376f85.png https://pic1.imgdb.cn/item/6a26e5483c9809430d376f86.png从上到下分别是信纸、顶部信封、底部信封和横条，下面链接和这里一样，大家最好修改一下，测试用着可以，不要生产环境使用哦新增文件新增文件咯，只有一个文件，有点长哦新增文件components\layouts\SakuraCommentLayout.vue <SakuraPage class="sakura-comment-page"> <RouterView v-slot="{ Component }"> <component :is="Component"> <div id="form-wrap" ref="formWrapRef" class="form-wrap envelope-desktop" :class="{ opened: isOpened }" :style="{ '--wrap-height': `${envelopeConfig.wrapHeight}px`, '--open-height': `${envelopeConfig.openHeight}px`, '--open-offset': `${envelopeConfig.openOffset}px`, }" @click="handleEnvelopeClick" > ✨来自{{ authorName }}的留言: {{ msg }} {{ bottomText }} ✨来自{{ authorName }}的留言: {{ msg }} {{ bottomText }} <SakuraComment /> </component> </RouterView> </SakuraPage> 提一句留言页面要新建页面，index.md文件如下配置：--- layout: comment title: 不留下点什么吗 icon: i-ri-chat-1-line nav: false cover: https://你的图床.jpg ---具体怎么创建页面看第一章教程末尾，顺便提一句，页面的访问方法，比如pages文件夹有一个comment文件夹，comment文件夹中有index.md文件，这就是一个页面了，在浏览器打开页面的方式就是：https://你的域名.com/comment。

valaxy博客全局美化教程（五）
type: item
date: 2026-06-01T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住效果演示原本的友链页面比较单调，也没有留言板，就改了一下新增文件以下是新增文件部分哦，共4个文件第一个比较特殊，说明一下，公告部分再次修改const rules = [ { icon: '🎉', text: '本站支持交换友链，在您提出申请之前，请将本站添加到友链' }, { icon: '🍵', text: '为了保障本站用户，本站仅支持个人网站的友链申请' }, { icon: '💡', text: '申请本站友链需要拥有独立域名（非免费域名），建议开启全站 HTTPS' }, { icon: '⌛', text: '如果友情链接已经添加，请保持网站的正常访问，会定期清理僵尸网站' }, { icon: '🐚', text: '网站有一定的实质性内容和主题，不能是空壳网站和练手网站' }, { icon: '💕', text: '感谢您对本站的支持，如果您已经满足上述要求，请在下方表单提交友链申请~~~' }, ]这里面的中文可以自由修改下面这部分是自己站点的友链信息： 本站友链信息如下： 站点名称：{{ siteInfo.name }} 站点链接：{{ siteInfo.url }} 站长头像：{{ siteInfo.avatar }} 站点描述：{{ siteInfo.desc }} 站点截图：{{ siteInfo.siteshot }}正常情况会自动获取配置文件的链接、名称、头像等东西自动获取，但是如果你发现获取的信息不对，或者你就是想不一样，可以修改，举个例子，我要修改站点截图，就将{{ siteInfo.siteshot }}整个替换为你想加的链接，完整示例如下： 站点截图：https://你的图床.png还有，开头的：const props = withDefaults(defineProps<{ siteshot?: string }>(), { siteshot: 'https://你的图床.png', })图片链接记得替换好啦，开始新增第一个文件吧新增 components\FriendLinkNotice.vue ✦ 加入本站友链方式 参照以下格式留言即可 YML 📋 {{ index + 1 }}{{ line }} 🐱 + {{ rule.icon }} {{ rule.text }} 📍 本站友链信息如下： 站点名称：{{ siteInfo.name }} 站点链接：{{ siteInfo.url }} 站长头像：{{ siteInfo.avatar }} 站点描述：{{ siteInfo.desc }} 站点截图：{{ siteInfo.siteshot }} 第二个~下方文件内部有一行代码图床要替换哦，不换也行，上面自己站点信息站点截图链接自己写就行，不影响const previewFallback = 'https://你的图床.png'好啦，开始新增~新增components\SakuraLinks.vue 📌 {{ group.name }} 分类描述 🌸：{{ group.desc }} {{ link.blog }} {{ link.desc }} 第三~新增components\layouts\SakuraLinksLayout.vue <SakuraTitle :fm="frontmatter" /> <RouterView v-slot="{ Component }"> <component :is="Component"> <SakuraLinks :links="frontmatter.links" :link-groups="frontmatter.linkGroups" :random="frontmatter.random" :error-img="frontmatter.errorImg" /> <FriendLinkNotice :siteshot="frontmatter.cover" /> </component> <…

valaxy博客全局美化教程（四）
type: item
date: 2026-05-31T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住效果预览简单介绍一下，我用的时候这个博客没有图片预览，就加了一个，大概效果是这样的，底部有预览栏，可以点击切换，移动端可以滑动切换，支持图片缩放，效果还是不错的，对了，后续有一个相册页面，如果想要加入相册页面的话，这个部分必须得加哦，否则可能会出小问题，因为这两个东西是一起写的，虽然二者的图片预览是单独分开的，但是说不好哦~开始美化修改文件修改文件部分共2个文件需要修改下面这个是css文件，控制组件特效的，默认文件时空的，直接新增即可在styles\index.scss文件增加以下代码/* 文章图片点击放大 */ .markdown-body img, .prose img { cursor: zoom-in; } html.image-gallery-open { overflow: hidden; }下面也是修改哦，下面给的是纯净代码，记得格式哦~文件site.config.ts的export default defineSiteConfig({})内增加以下代码 // 关闭自带的图片预览 mediumZoom: { enable: false, },解释一下，官方说自带了一个预览功能，我也没怎么研究，因为说的是很基本，不如自己加~这里就是给他关掉，放置两个一起生效（虽然压根就没开，其实大概不加这个也行）新增文件下面是新增文件部分啦，本部分共新增5个文件，有点长哦，别漏啦新增App.vue <ImageGalleryViewer /> 第二个文件~新增utils\imageGallery.tsimport { ref, shallowRef } from 'vue' export interface GalleryImage { src: string alt: string } export const galleryVisible = ref(false) export const galleryImages = shallowRef<GalleryImage[]>([]) export const galleryIndex = ref(0) function getImageSrc(img: HTMLImageElement) { return img.currentSrc || img.src || img.getAttribute('data-src') || '' } function isGalleryImage(img: HTMLImageElement) { if (!img.closest('.markdown-body')) return false if (img.closest('pre, code, .sakura-comment, .twikoo, nav, header, footer, .sakura-navbar, .sakura-post-nav')) return false const src = getImageSrc(img) if (!src || src.startsWith('data:')) return false return true } function collectImages(container: Element) { return Array.from(container.querySelectorAll<HTMLImageElement>('img')) .filter(isGalleryImage) .map(el => ({ el, src: getImageSrc(el), alt: el.alt || '', })) } export function openGallery(images: GalleryImage[], index: number) { if (!images.length) return galleryImages.value = images galleryIndex.value …

valaxy博客全局美化教程（三）
type: item
date: 2026-05-30T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住效果预览老规矩，先看效果 前置步骤本效果基于valaxy内置的foucGuard服务，需要先开启，全名叫FOUC（Flash of Unstyled Content）防护配置。效果是，通过在 中内联 body { opacity: 0 !important } 隐藏页面，并通过 JS 监测所有样式表加载完成后，移除该隐藏样式标签以显示页面，防止首屏样式闪烁和样式分批渲染的问题。简单来说就是在你的页面加载完成之前一直白屏，以防加载出乱码来，但是白屏不太美观，所以我加入了加载动画先开启服务：这是控制该组件的代码enabled（默认 true）：是否启用 FOUC 防护maxDuration（默认 5000）：最大等待时间（毫秒），作为 CSS 加载失败时的安全兜底。设为 0 可禁用超时兜底启用方式如下：修改valaxy.config.ts文件，在其中export default defineValaxyConfig({})部分增加以下代码： build: { ssgForPagination: false, foucGuard: { enabled: true, maxDuration: 5000, }, },最终的效果是这样的，别加错了：import { defineValaxyConfig } from 'valaxy' export default defineValaxyConfig({ //... build: { ssgForPagination: false, foucGuard: { enabled: true, maxDuration: 5000, }, }, //... })好啦，到这里服务就已经开起来，现在重启服务，刷新页面就能看到白屏了开始美化修改文件以下部分是修改文件，不是新增哦~文件valaxy.config.ts增加以下代码，下面是最终效果，注意这增加了两部分哦import { vaFoucLoader } from './plugins/va-fouc-loader' import siteConfig from './site.config'上面是第一部分，下面是第二部分，都要添加哦，而且给出的是完整代码，注意不要重复哦export default defineValaxyConfig({ //.... vite: { plugins: [vaFoucLoader({ avatar: siteConfig.author?.avatar, title: siteConfig.title, subtitle: siteConfig.subtitle, primary: '#E9CCCC', })], }, //..... })新增文件下面是新增文件部分，一共新增1个文件~新增文件plugins\va-fouc-loader.tsimport type { Plugin } from 'vite' export interface VaFoucLoaderOptions { avatar?: string title?: string subtitle?: string primary?: string } function buildSiteName(options: VaFoucLoaderOptions) { const title = options.title?.trim() const subtitle = options.subtitle?.trim() if (title && subtitle) return `${title}-${subtitle}` return title || subtitle || '' } const FOUC_STYLE = ' ' function escapeHtml(value: string) { return value .replace(/&/g, '&') .replace(/"/g, '"') .r…

valaxy博客全局美化教程（二）
type: item
date: 2026-05-29T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住最终效果展示老样子，先看看最终效果左侧部分是公告栏，会自动识别连接，点击跳转，右侧部分是随机文章，会在这部分显示随机文章，并且会随时间自动切换，当然也可以滚轮手动切换开始美化那么久开始咯，大部分操作和上一篇类似，不会的可以回去看，这里不赘述了修改文件这部分内容是修改配置文件哦，本部分修改文件1这里我就是将themeConfig: {},一起给出了，注意区份哦文件valaxy.config.ts新增代码： themeConfig: { //... notice: { rotateInterval: 5000, title: '公告栏', sections: [ { label: '--- 主域名 ---', lines: [ 'daily.yybb.us', 'hexo.yybb.us', // 也支持对象：{ text: '显示文字', url: 'https://example.com' } ], }, { label: '--- 备用域名 ---', lines: [ 'vercel.yybb.us', 'aiovtue.onrender.com', 'aiovtue.zeabur.app', ], }, ], }, //... }修改文件到此结束啦，下面是新增文件新增文件以下是新增文件类型，本部分共新增文件1个，有点长哦新建文件components\SakuraNoticeBoard.vue {{ noticeTitle }} {{ section.label }} {{ line.text }} {{ line.text }} <RouterLink class="notice-board-wrap__article-link" :to="currentPost.path" :aria-label="`查看文章：${currentPost.title}`" /> 0 ? '后' : '前'}${Math.abs(dot.offset)}篇`" :aria-selected="dot.offset === 0" role="tab" @click="goToDot(dot.offset)" /> <Transition name="notice-post-fade" mode="out-in"> </Transition> <Transition name="notice-post-fade" mode="out-in"> <SakuraPostDate :date="currentPost.updated || currentPost.date" class="post-date order-1" pb-4 text-sm /> {{ currentPost.title }} <SakuraPostMeta pb-2 class="order-3" :post="currentPost" /> <SakuraPostExcerpt v-if="currentPost.excerpt" pb-2 class="order-4" :excerpt="currentPost.excerpt" /> </Transition> 暂无文章 好啦，刷新一下终端即可看到效果啦，不会的回去看第一篇最后部分

valaxy博客全局美化教程（一）
type: item
date: 2026-05-28T00:00:00+07:00
description: 本系列教程共十篇valaxy博客全局美化教程（一）：分类、标签、归档三个页面的美化教程valaxy博客全局美化教程（二）：首页公告栏美化，新增随机文章展示板块valaxy博客全局美化教程（三）：给网页增加加载动画valaxy博客全局美化教程（四）：增加图片预览功能valaxy博客全局美化教程（五）：友链页面美化，修改了友链样式以及增加留言板valaxy博客全局美化教程（六）：留言页面增加信封展开效果valaxy博客全局美化教程（七）：新增网址导航页面valaxy博客全局美化教程（八）：页脚倒计时、搜索问题修复valaxy博客全局美化教程（九）：新增相册页面，支持使用webdav作为相册valaxy博客全局美化教程（十）：修复构建结束的时候会卡住最初部署简介简单介绍一下valaxy，Valaxy = V + Galaxy 旨在成为下一代静态博客框架，提供更好的热更新与用户加载体验、更强大更便捷的自定义开发可能性。附上开源地址valaxy本系列教程使用的主题是Sakura主题，附上开源地址sakura在开始教程之前先看一下最终的页面效果先：开始部署本教程基于windows端选择一个合适的地方新建一个文件夹。由于后期这个文件夹会变得非常大，所以建议一开始就选择合适的位置，推荐路径不要出现中文，虽然我弄下来没啥问题。使用管理员身份打开powershell终端虽然官方文档没要求必须管理员运行，但是我拉取文件的时候遇到一些问题，所有还是建议用一下。在终端cd到你的文件夹以防你不懂，加入你刚刚创建的文件夹路径是这个C:\demo\demo,那么你只需要输入cd加上你的文件夹路径即可，示例：cd C:\demo\demo。安装valaxy和主题该操作基于电脑安装了pnpm或npm的基础上，没安装的搜一下教程，或者看这个pnpm安装教程(主播也是百度找的~) 推荐安装pnpm，因为我用的这个，你们使用另一个的话后面可能会出一些奇奇怪怪的问题，毕竟我没用过 在刚刚的终端运行以下命令pnpm create valaxy，运行之后程序会开始创建流程会经理一下过程这个界面是问你用来干什么，选择第一个blog作为博客这是让你选择主题，我们选第三行custom,这行的意思是自己输入主题名输入主题名sakura，本教程所有修改基于此主题，虽然没改主题文件，但是选其他主题可能会遇到奇奇怪怪的问题这是问你项目名称叫什么，就是文件夹名称，随便起一个英文就行然后会问你是否运行，输入y就行这里选择pnpm即可开始自动安装出现下面的界面就是安装完成了上面的链接就是你的网站，ctrl+鼠标点击即可在浏览器打开链接，到此可以初步预览你的博客开始美化一共分为两大步，其中要增加六个文件，修改三个文件，由于大部分教程重复，只拿第一次出现的地方进行说明，后面忘记了回来看前面分类页面分类页面公新增两个文件，别漏了哦新增文件所谓新增文件的意思就是新增文件夹，哈哈哈，这里解释一下我的写法是什么意思，博客的目录类似于项目根目录/ │ ├─ .valaxy/ ├─ .vscode/ ├─ components/ ├─ layouts/ ├─ locales/ ├─ node_modules/ ├─ pages/ ├─ public/ ├─ styles/ │ ├─ .dockerignore ├─ .editorconfig ├─ .gitignore ├─ .npmrc ├─ Dockerfile ├─ netlify.toml ├─ nginx.conf ├─ package.json ├─ pnpm-lock.yaml ├─ README.md ├─ site.config.ts ├─ tsconfig.json ├─ valaxy.config.ts └─ vercel.json这个就是你刚才创建的文件夹，拉取valaxy博客之后的文件夹目录，我写的路径是基于此根目录的，举个例子，下方的\components\SakuraCategoriesChart.vue文件的意思就是，在文件夹components内部，新建一个名为SakuraCategoriesChart.vue的文件（windows创建这种文件的办法是右键，新建文本文档，然后把文件名连同后缀更改为这个即可），接着将文件下方的代码 这里就是第二个文件啦，我就赘述了，要看清楚路径哦~新增components\layouts\SakuraCategoriesLayout.vue <SakuraPage class="sakura-categories-page"> <RouterView v-slot="{ Component }"> <component :is="Component"> <slot name="content"…