Custom Extensions
Valaxy 以约定大于配置的方式提供了强大的扩展功能,如果你有一定开发经验,可以自定义控制站点的每一处细节。
Valaxy provides strong extensibility by "Convension over Configuration". If you have some development experience, you should be able to control every detail in the website.
以下内容无论对于用户还是主题开发者来说都同样适用。
The following content applies to either users or theme developers.
TIP提示
By default, the operations are done in the root directory of the site or the theme.
If you want some reference, you can refer to valaxy-theme-yun.
自动布局注册
Automatic Layout Registration
Valaxy provides custom layouts based on vite-plugin-vue-layouts.
Create a layouts
file, and write Vue components as layouts.
You can use it in your Markdown as follows.
---
title: Photos
layout: album
---
同样,当存在同名布局时,覆盖顺序为 用户目录
-> 主题目录
-> Valaxy 客户端目录
。
Likewise, when there are layouts with the same name, the order to use is user directory
-> theme directory
-> Valaxy directory
.
自定义 index.html
Customizing index.html
新建 index.html
,你可以在 <head></head>
与 <body></body>
全局地插入任意内容。
譬如:
Create a new index.html
file. You can globally insert anything in between <head></head>
or <body></body>
tags.
For example:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/planet-markdown.min.css"
/>
</head>
扩展 Client 上下文
Extending Client Context
新建 setup/main.ts
:
import { defineAppSetup } from 'valaxy'
export default defineAppSetup((ctx) => {
console.log(ctx)
const { app, head, router, routes, isClient } = ctx
// 任意使用 Vue 生态的插件
app.use(/* */)
})
具体示例可参见 谷歌统计|第三方集成。
Create a new file setup/main.ts
:
import { defineAppSetup } from 'valaxy'
export default defineAppSetup((ctx) => {
console.log(ctx)
const { app, head, router, routes, isClient } = ctx
// Use any Vue plugins
app.use(/* */)
})
For a detailed example, please see Google Analytics | Third Party Integration。
多语言支持
I18n
新建 locales
文件夹。
zh-CN.yml
: 中文翻译en.yml
: 英文翻译
譬如(请确保文件内容非空):
Create locales
folder.
zh-CN.yml
: Chinese translationen.yml
: English translation
For example (make sure that the file is not empty):
# en.yml
button:
about: About
# zh-CN.yml
button:
about: 关于
你可以如下方式使用它:
You can use it like this:
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<button>
{{ t('button.about') }}
</button>
</template>
模版文件
Template Files
新建某类布局 Markdown 文件的模版。(开发中)
新建 scaffolds
文件夹。
Create some templates for Markdown layout. (Work in progress)
Create scaffolds
folder.
valaxy new <title> -l [layout]
layout
: 默认为post
新建 xxx.md
,xxx 取决于你的布局名称。 譬如 album.md
代表 layout: album
。
layout
: Default ispost
Create a new file xxx.md
, where xxx
is your layout name. For example, album.md
represents layout: album
.
valaxy new my-young -l album
其他
Others
To Be Continued.