Features

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

UnoCSS

内置的类 TailwindCSS 的工具类(基于 UnoCSS)。

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

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

譬如:

这是一份 Markdown 内容。

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

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

这是一份 Markdown 内容。

Icones

海量的图标

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

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

主题默认安装了 RemixIcon

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

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

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

UI

代码高亮

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

譬如:


 

const a = 1
const b = a

自定义主题色

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

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

valaxy-theme-yun 支持

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

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

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

File-based Routing

基于文件的自动路由

Routes will be auto-generated for Vue files in this dir with the same file structure. Check out vite-plugin-pages for more details.

构建

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

SSG

基于 vite-ssg 实现

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

SPA

npm run build:spa
# valaxy build

RSS

独立地 RSS 构建

npm run rss
# valaxy rss

i18n in One Page

单页 i18n

More info see i18n.

KaTeX

KaTeX 已被默认支持并启用。

Katex is enabled by default.

// valaxy.config.ts
import { defineConfig } from 'valaxy'
export default defineConfig({
  features: {
    // disable katex
    katex: false
  }
})

To Be Continued.