mirror of https://github.com/YunYouJun/valaxy
docs: en translation (#193)
This commit is contained in:
RotCool
GitHub
parent
14604091b5
commit
30da4590c6
|
|
@ -363,7 +363,9 @@ sponsor: false
|
|||
Please refer to [Using Themes](/themes/use) and the theme you are using to configure it.
|
||||
:::
|
||||
|
||||
## Valaxy 扩展配置
|
||||
## Valaxy 扩展配置 {lang="zh-CN"}
|
||||
|
||||
## Valaxy Extended Configuration {lang="zh-CN"}
|
||||
|
||||
> [packages/valaxy/node/type.ts](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy/node/types.ts)
|
||||
|
||||
|
|
@ -415,7 +417,13 @@ export interface ValaxyExtendConfig {
|
|||
}
|
||||
```
|
||||
|
||||
::: zh-CN
|
||||
所以，你可以像这样使用：
|
||||
:::
|
||||
|
||||
::: en
|
||||
So you can use it like this:
|
||||
:::
|
||||
|
||||
```ts
|
||||
// valaxy.config.ts
|
||||
|
|
|
|||
|
|
@ -6,16 +6,32 @@ categories:
|
|||
end: false
|
||||
---
|
||||
|
||||
## 自动组件注册
|
||||
## 自动组件注册 {lang="zh-CN"}
|
||||
|
||||
## Automatic Component Registration {lang="en"}
|
||||
|
||||
:::zh-CN
|
||||
新建 `components` 文件夹，书写任意 Vue 组件。
|
||||
它们会被自动注册，你甚至可以在你的 Markdown 文件中使用它。
|
||||
|
||||
如果存在与主题、Valaxy 的同名组件，覆盖顺序为 `用户目录` -> `主题目录` -> `Valaxy 客户端目录`。
|
||||
这也意味着你可以只覆盖主题的某个组件，来达到自定义局部主题的效果！
|
||||
:::
|
||||
|
||||
### 自定义覆盖主题组件
|
||||
:::en
|
||||
Create `components` folder, write any Vue components.
|
||||
They will be registered automatically and you can even use them in your Markdown files.
|
||||
|
||||
If there are components with the same name as the theme and Valaxy, the order of overriding is `user directory` -> `theme directory` -> `Valaxy client directory`.
|
||||
|
||||
This also means that you can cover one component of the theme to achieve customizing the local theme!
|
||||
:::
|
||||
|
||||
### 自定义覆盖主题组件 {lang="zh-CN"}
|
||||
|
||||
### Custom Override Theme Component {lang="en"}
|
||||
|
||||
:::zh-CN
|
||||
基于此，你可以非常容易地自定义主题的任何地方！
|
||||
|
||||
譬如自定义页脚：
|
||||
|
|
@ -45,11 +61,49 @@ import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
|
|||
</YunFooter>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
## 更多示例
|
||||
:::en
|
||||
Based on this, you can easily customize the theme anywhere!
|
||||
|
||||
### 插入不蒜子统计
|
||||
For example, custom footer:
|
||||
|
||||
> Refer to [demo/yun/components/YunFooter.vue | GitHub](https://github.com/YunYouJun/valaxy/blob/main/demo/yun/components/YunFooter.vue)
|
||||
|
||||
In the `components` directory of the blog folder, create a new `YunFooter.vue` to overwrite the footer file of your theme.
|
||||
|
||||
You can replace the footer directly:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>Footer content</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
You can also inherit and extend the previous footer:
|
||||
|
||||
```vue
|
||||
<script lang="ts" setup>
|
||||
import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<YunFooter>
|
||||
Customize footer content
|
||||
</YunFooter>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 更多示例 {lang="zh-CN"}
|
||||
|
||||
### More Examples {lang="en"}
|
||||
|
||||
### 插入不蒜子统计 {lang="zh-CN"}
|
||||
|
||||
### Insert Busuanzi Statistics {lang="en"}
|
||||
|
||||
:::zh-CN
|
||||
> [不蒜子统计](http://ibruce.info/2015/04/04/busuanzi/)
|
||||
|
||||
以 valaxy-theme-yun 为例：
|
||||
|
|
@ -102,9 +156,75 @@ const isPost = useLayout('post')
|
|||
```
|
||||
|
||||
原理即覆盖组件，您还可以自由覆盖主题的任意其他组件。
|
||||
:::
|
||||
|
||||
### 其他
|
||||
:::en
|
||||
> [Busuanzi Statistics](http://ibruce.info/2015/04/04/busuanzi/)
|
||||
|
||||
Take valaxy-theme-yun as an example:
|
||||
|
||||
> By default, operate in your blog folder.
|
||||
|
||||
Create a new `YunFooter.vue` under the `components/` folder to customize the footer and display *Busuanzi Statistics*.
|
||||
You can customize its style freely according to your needs.
|
||||
|
||||
```vue
|
||||
<script lang="ts" setup>
|
||||
import { useScriptTag } from '@vueuse/core'
|
||||
import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
|
||||
|
||||
useScriptTag('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<YunFooter>
|
||||
<!-- Customize footer content -->
|
||||
<div>Total visits of this site <span id="busuanzi_value_site_pv" /></div>
|
||||
<div>Number of visitors <span id="busuanzi_value_site_uv" /></div>
|
||||
</YunFooter>
|
||||
</template>
|
||||
```
|
||||
|
||||
Create a new `YunPostMeta.vue` under the `components/` folder to customize the information of each article and display the statistics of each article.
|
||||
|
||||
```vue
|
||||
<script lang="ts" setup>
|
||||
import type { Post } from 'valaxy'
|
||||
import { useLayout } from 'valaxy'
|
||||
import YunPostMeta from 'valaxy-theme-yun/components/YunPostMeta.vue'
|
||||
|
||||
defineProps<{
|
||||
frontmatter: Post
|
||||
}>()
|
||||
|
||||
// Display only in Post layout
|
||||
const isPost = useLayout('post')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<YunPostMeta :frontmatter="frontmatter">
|
||||
<span v-if="isPost" id="busuanzi_container_page_pv">
|
||||
Total reading of this article <span id="busuanzi_value_page_pv" />
|
||||
</span>
|
||||
</YunPostMeta>
|
||||
</template>
|
||||
```
|
||||
|
||||
The principle is to cover components. You can also freely cover any other components of the theme.
|
||||
:::
|
||||
|
||||
### 其他 {lang="zh-CN"}
|
||||
|
||||
### Other {lang="en"}
|
||||
|
||||
:::zh-CN
|
||||
[valaxy-addon-components](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components) 也是一个充分利用该机制的插件，你也可以参考它的实现方式，以 Valaxy 插件的形式自由发布你的自定义组件。
|
||||
|
||||
> 由于发布的是原生的 Vue 组件，所以打包时它将会完全是**按需**的，无需您额外担忧。
|
||||
:::
|
||||
|
||||
:::en
|
||||
[valaxy-addon-components](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components) is also a plugin that makes full use of this mechanism. You can also refer to its implementation method and freely publish your custom components in the form of Valaxy plugin.
|
||||
|
||||
> Because Vue components published is native, it will be completely **on-demand** when packaging, without your extra worry.
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -6,8 +6,11 @@ categories:
|
|||
end: false
|
||||
---
|
||||
|
||||
## 自动样式注入
|
||||
## 自动样式注入 {lang="zh-CN"}
|
||||
|
||||
## Automatic Style Injection {lang="en"}
|
||||
|
||||
:::zh-CN
|
||||
新建 `styles` 文件夹，目录下的以下文件将会被自动引入：
|
||||
|
||||
- `index.scss`
|
||||
|
|
@ -19,14 +22,41 @@ end: false
|
|||
|
||||
- 新建 `index.scss` 书写全局样式，并可在其中导入其他样式，它会被自动引入。
|
||||
- 新建 `css-vars.scss` 书写 CSS 变量，它会被自动引入。
|
||||
:::
|
||||
|
||||
## 自定义字体
|
||||
:::en
|
||||
Create `styles` folder, and the following files under the directory will be automatically imported:
|
||||
|
||||
- `index.scss`
|
||||
- `index.css`
|
||||
- `css-vars.scss`
|
||||
- `css-vars.css`
|
||||
|
||||
We recommend you:
|
||||
|
||||
- Create `index.scss` file to write a global style and import other styles in it. It will be imported automatically.
|
||||
- Create `css-vars.scss` file to write CSS variables. It will be imported automatically.
|
||||
:::
|
||||
|
||||
## 自定义字体 {lang="zh-CN"}
|
||||
|
||||
## Custom Font {lang="en"}
|
||||
|
||||
:::zh-CN
|
||||
譬如你可以在 `styles/css-vars.scss` 中覆盖默认的字体。
|
||||
|
||||
- `serif`: 衬线字体：<span font="serif">字体 abcd 123</span>
|
||||
- `sans`: 非衬线字体：<span font="sans">字体 abcd 123</span>
|
||||
- `mono`: 等宽字体：<span font="mono">字体 abcd 123</span>
|
||||
:::
|
||||
|
||||
:::en
|
||||
For example, you can override the default font in 'styles/css-vars.scss'.
|
||||
|
||||
- `serif`: serif font: <span font="serif">Font abcd 123</span>
|
||||
- `sans`: sans-serif font: <span font="sans">Font abcd 123</span>
|
||||
- `mono`: monospaced font: <span font="mono">Font abcd 123</span>
|
||||
:::
|
||||
|
||||
```scss
|
||||
:root {
|
||||
|
|
|
|||
Loading…
Reference in New Issue