Features

首先，我们来介绍一下 Valaxy 有哪些便捷的特性。

First, I’ll introduce you to some easy

热更新 ​

Hot Reloading ​

最值得一提的是，Valaxy 从配置到文章内容、动画到全局的标签、分类，全部都是支持热更新的！局部的！

譬如，你修改了 valaxy.config.ts/site.config.ts 或是 xxx.md 文章中的内容或 frontmatter（tags/categories）所有的变动会立刻显示在预览界面上，无需手动刷新。同时热更新也是局部的，它只变动有修改的地方，不会重新刷新整个页面。

It’s most worth mentioning that Valaxy supports partial hot reloading, for configuration, post contents, animation, tags, categories, and much more!

For example, if you modified valaxy.config.ts/site.config.ts, the content in xxx.md, or frontmatter (tags/categories), all changes will immediately appear on the preview page, and there is no need for manual refreshing. Also, hot reloads are local, meaning that only the place modified will change, and other elements on the page will not be refreshed.

自定义 ​

Customization ​

强大的自定义能力，你可以如忒修斯之船一样组件粒度地继承定制主题与你的博客。

更多请参见 自定义组件。

Valaxy provides powerful customization support. You can customize every component for your theme and blog just like the Ship of Theseus.

See more at Customizing Components.

UnoCSS ​

内置的类 TailwindCSS 的工具类（基于 UnoCSS）。

如果你使用过 TailwindCSS，那么一定能迅速领会到它的便捷之处。

你可以在你的 Markdown 和 Vue 组件中肆无忌惮地使用它，而且最终它会被按需打包并加载。

譬如：

md
这是一份 Markdown 内容。

<div class="bg-white text-blue shadow" p="4">
这是一份 Markdown 内容。
</div>

你可以迅速得到这样的效果：

这是一份 Markdown 内容。

The builtin TailwindCSS-like util class (based on UnoCSS).

If you have used TailwindCSS before, then you will rapidly learn it’s convenience.

You can use it at will in your Markdown and Vue components, and it will finally get packaged by need and loaded.

For example:

md
This is markdown.

<div class="bg-white text-blue shadow" p="4">
This is markdown.
</div>

You will get the effect immediately like this:

This is markdown.

Icones ​

海量的图标

你可以任意使用 Icones 中可搜索到的任意图标。

命名规范为 i-${collection}-${name}，例如 i-ri-home-line。

主题默认安装了 RemixIcon。

如果你需要其他集合下的图标，可以自行安装。如：

bash
# collection 为对应的图标集名称，如 @iconify-json/ri
npm i @iconify-json/collection

被添加至 config.unocss.safelist 的图标名称将全部是热加载的！

Massive amount of icons

You can use any icons that are from Icônes.

The naming rule is i-${collection}-${name}, e.g. i-ri-home-line.

The theme by default has RemixIcon installed.

If you need any icons from other collections, you can install yourself. For example:

bash
# `collection` is the name of the icon collection, e.g. @iconify-json/ri
npm i @iconify-json/collection

All icon names added to config.unocss.safelist will be ready for hot reloading.

UI ​

代码高亮 ​

Syntax Highlighting ​

More info about syntax highlighting can be found at Markdown Syntax Highlighting.

更多关于代码高亮的信息请参见 Markdown 代码高亮。

基于 Shiki 实现。 Valaxy 支持 vue 等语法高亮，拷贝代码，高亮其中某一行。

譬如：

Based on Shiki. Valaxy supports syntax highlighting for languages like vue, and also supports copying code and highlighting a particular line in the code block.

For example:

js
const a = 1
const b = a

自定义主题色 ​

Custom Theme Color ​

你只需传入一个主题色，全局各处的色彩会动态进行计算得出最终的效果。

譬如我希望主题色是红色：

valaxy-theme-yun 支持

You only need to provide a theme color for the global color dynamics to work and show effect.

For example, if I want my theme color to be red:

Supported by valaxy-theme-yun

ts
// valaxy.config.ts
export default {
  themeConfig: {
    colors: {
      primary: 'red',
    },
  },
}

但不仅如此，其他主题同样可复用 Valaxy 默认提供的色彩及变量函数来快速构建自身。

更多请参见 valaxy-theme-yun 代码。

Even more, other themes can also re-use the default color dynamic functions provided by Valaxy to build their own.

Please refer to code in valaxy-theme-yun for more.

File-based Routing ​

基于文件的自动路由 ​

路由会自动遵循相同目录结构从当前路径中的 Vue/Markdown 文件生成。更多请参考 unplugin-vue-router。

Routes will be auto-generated for Vue/Markdown files in this dir with the same file structure. Check out unplugin-vue-router for more details.

构建 ​

Building ​

同时支持 SPA 与 SSG 两种方案。

Supports SPA and SSG.

SSG ​

基于 vite-ssg 实现

Based on vite-ssg

bash
# SSG
npm run build:ssg
# valaxy build --ssg

SPA ​

bash
npm run build:spa
# valaxy build

SEO ​

Valaxy 已经默认集成了 Open Graph 的 SEO 优化，您无需为此操心。 但需要注意的是，对于许多搜索引擎来说，他们可能只青睐 SSG 的构建模式。

Valaxy by default has integrated SEO optimization by Open Graph, and you don’t need to worry about that. Note that for many search engines, they like SSG builds more.

RSS ​

自带命令生成 RSS 订阅源。

RSS 是什么？

Valaxy comes with a command to generate RSS feeds.

What is RSS?

bash
npm run rss
# valaxy rss

i18n in One Page ​

单页 i18n ​

详情请见 i18n。

For more info, see i18n.

KaTeX ​

KaTeX 已被默认支持并启用。

Katex is enabled by default.

ts
// valaxy.config.ts
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig({
  features: {
    // disable katex
    katex: false
  }
})

自动路由替换 ​

Auto Route Replacing ​

当 Valaxy 检测到文章的 a 链接为站内链接时，会自动将其替换为 RouterLink，享受丝滑的动态切换吧！

When Valaxy detects that an a hyperlink in a post is an intra-site link (relative link), it will automatically replace it with a RouterLink. Enjoy the dynamic page switching!

Contributors

To Be Continued.
Edit this page on GitHub

Last updated: