亮点
首先,我们来介绍一下 Valaxy 有哪些便捷的特性。
热更新
最值得一提的是,Valaxy 从配置到文章内容、动画到全局的标签、分类,全部都是支持热更新的!局部的!
譬如,你修改了 valaxy.config.ts/site.config.ts 或是 xxx.md 文章中的内容或 frontmatter(tags/categories)所有的变动会立刻显示在预览界面上,无需手动刷新。同时热更新也是局部的,它只变动有修改的地方,不会重新刷新整个页面。
自定义
强大的自定义能力,你可以如忒修斯之船一样组件粒度地继承定制主题与你的博客。
更多请参见 自定义组件。
UnoCSS
内置的类 TailwindCSS 的工具类(基于 UnoCSS)。
如果你使用过 TailwindCSS,那么一定能迅速领会到它的便捷之处。
你可以在你的 Markdown 和 Vue 组件中肆无忌惮地使用它,而且最终它会被按需打包并加载。
譬如:
你可以迅速得到这样的效果:
Icones
海量的图标
你可以任意使用 Icones 中可搜索到的任意图标。
命名规范为 i-${collection}-${name},例如 i-ri-home-line。
主题默认安装了 RemixIcon。
如果你需要其他集合下的图标,可以自行安装。如:
被添加至 config.unocss.safelist 的图标名称将全部是热加载的!
UI
代码高亮
更多关于代码高亮的信息请参见 Markdown 代码高亮。
基于 Shiki 实现。 Valaxy 支持 vue 等语法高亮,拷贝代码,高亮其中某一行。
譬如:
自定义主题色
你只需传入一个主题色,全局各处的色彩会动态进行计算得出最终的效果。
譬如我希望主题色是红色:
valaxy-theme-yun支持
但不仅如此,其他主题同样可复用 Valaxy 默认提供的色彩及变量函数来快速构建自身。
更多请参见 valaxy-theme-yun 代码。
基于文件的自动路由
路由会自动遵循相同目录结构从当前路径中的 Vue/Markdown 文件生成。更多请参考 vue-router 基于文件的路由。
构建
同时支持 SPA 与 SSG 两种方案。
SSG
基于 vite-ssg 实现
SPA
SEO
Valaxy 已经默认集成了 Open Graph 的 SEO 优化,您无需为此操心。 但需要注意的是,对于许多搜索引擎来说,他们可能只青睐 SSG 的构建模式。
RSS
自带命令生成 RSS 订阅源。
更多配置选项请参见 RSS 配置。
单页 i18n
详情请见 i18n。
Math | 数学公式
Valaxy 支持两种数学渲染引擎:KaTeX(默认,渲染快)和 MathJax(SVG 输出,无需外部 CSS/字体)。
- 数学公式 | 示例
- 通过 CDN 加载 KaTeX (实验性)
自动路由替换
当 Valaxy 检测到文章的 a 链接为站内链接时,会自动将其替换为 RouterLink,享受丝滑的动态切换吧!
To Be Continued.