Extend
Todo:
- English
Valaxy 以约定大于配置的方式提供了强大的扩展功能,如果你有一定开发经验,可以自定义控制站点的每一处细节。
以下内容无论对于用户还是主题开发者来说都同样适用。
自动布局注册
基于 vite-plugin-vue-layouts,Valaxy 提供了布局功能。
新建 layouts
文件,书写 Vue 组件作为布局。
你可以在 Markdown 中如下使用它。
---
title: Photos
layout: album
---
同样,当存在同名布局时,覆盖顺序为 用户目录
-> 主题目录
-> Valaxy 客户端目录
。
自定义 index.html
新建 index.html
,你可以在 <head></head>
与 <body></body>
全局地插入任意内容。
譬如:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/planet-markdown.min.css"
/>
</head>
扩展 Client 上下文
新建 setup/main.ts
:
import { defineAppSetup } from 'valaxy'
export default defineAppSetup((ctx) => {
console.log(ctx)
const { app, head, router, routes, isClient } = ctx
// 任意使用 Vue 生态的插件
app.use(/* */)
})
具体示例可参见 谷歌统计|第三方集成。
多语言支持
新建 locales
文件夹。
zh-CN.yml
: 中文翻译en.yml
: 英文翻译
譬如(请确保文件内容非空):
# en.yml
button:
about: About
# zh-CN.yml
button:
about: 关于
你可以如下方式使用它:
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<button>
{{ t('button.about') }}
</button>
</template>
模版文件
新建某类布局 Markdown 文件的模版。(开发中)
新建 scaffolds
文件夹。
valaxy new <title> -l [layout]
layout
: 默认为post
新建 xxx.md
,xxx 取决于你的布局名称。 譬如 album.md
代表 layout: album
。
valaxy new my-young -l album
其他
To Be Continued.