mirror of https://github.com/YunYouJun/valaxy
docs: addon & theme & fix 404
This commit is contained in:
parent
9a4a6c6cb4
commit
9f73652ca3
|
|
@ -1,4 +1,9 @@
|
|||
# Why Addon?
|
||||
---
|
||||
title: Why Addon?
|
||||
title_zh: 为什么需要插件
|
||||
categories:
|
||||
- Addon
|
||||
---
|
||||
|
||||
我们需要一个插件系统允许用户仅使用/快速加在部分功能。
|
||||
|
||||
|
|
@ -15,3 +20,10 @@
|
|||
> 除此之外，我们可能还需要支持一些针对 Valaxy 并（在 Vite/Vue 插件运行前）可控制整个流程的插件。
|
||||
>
|
||||
> 此时，Addon 的 API 仅仅适用于 Valaxy 平台。
|
||||
|
||||
## 说明
|
||||
|
||||
插件可以做什么？
|
||||
|
||||
譬如制作一个 Live2D 挂件，一个全局音乐播放器，或是修改 Vite 以及内置插件的一些配置等。
|
||||
它用于补充 Vite 插件无法做到或者 Vue 插件加载繁琐的内容。
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Use Addon
|
||||
title_zh: 使用插件
|
||||
categories:
|
||||
- Addon
|
||||
---
|
||||
|
||||
## How To Use
|
||||
|
||||
```bash
|
||||
pnpm add [valaxy-addon-package1] [valaxy-addon-package2]
|
||||
# npm i [valaxy-addon-package1] [valaxy-addon-package2]
|
||||
```
|
||||
|
||||
使用
|
||||
|
||||
```ts
|
||||
// site.config.ts
|
||||
import { defineSite } from 'valaxy'
|
||||
export default defineSite({
|
||||
addons: [
|
||||
'valaxy-addon-package1',
|
||||
// pass addon options
|
||||
['valaxy-addon-package2', { global: false }],
|
||||
]
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: Write a Addon
|
||||
title_zh: 编写一个插件
|
||||
categories:
|
||||
- Addon
|
||||
---
|
||||
|
||||
## 开始编写
|
||||
|
||||
::: tip
|
||||
**约定大于配置**
|
||||
|
||||
插件与主题类似，但做的事情更少。
|
||||
|
||||
一个站点只能使用一个主题，但可以使用多个插件。
|
||||
:::
|
||||
|
||||
- [ ] `App.vue` 如果插件作者希望插件被使用时立刻全局挂载，可以将内容放置于 `valaxy-addon-<name>/App.vue` 中，并设置 `package.json` 中 `global: true`。
|
||||
|
||||
- `components`: 放置于 `components` 文件夹下的组件将会被自动注册，但不会被挂载。用户可以手动加载使用。
|
||||
|
|
@ -6,6 +6,53 @@ categories:
|
|||
end: false
|
||||
---
|
||||
|
||||
## 社交图标
|
||||
|
||||
```ts
|
||||
export interface SocialLink {
|
||||
/**
|
||||
* The title of your link
|
||||
*/
|
||||
name: string
|
||||
link: string
|
||||
/**
|
||||
* 图标名称
|
||||
* https://icones.js.org/
|
||||
*/
|
||||
icon: string
|
||||
color: string
|
||||
}
|
||||
```
|
||||
|
||||
示例：
|
||||
|
||||
```ts
|
||||
// site.config.ts
|
||||
import { defineSite } from 'valaxy'
|
||||
export default defineSite({
|
||||
social: [
|
||||
{
|
||||
name: 'RSS',
|
||||
link: '/atom.xml',
|
||||
icon: 'i-ri-rss-line',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
name: 'QQ 群 1050458482',
|
||||
link: 'https://qm.qq.com/cgi-bin/qm/qr?k=kZJzggTTCf4SpvEQ8lXWoi5ZjhAx0ILZ&jump_from=webapi',
|
||||
icon: 'i-ri-qq-line',
|
||||
color: '#12B7F5',
|
||||
},
|
||||
{
|
||||
name: 'GitHub',
|
||||
link: 'https://github.com/YunYouJun',
|
||||
icon: 'i-ri-github-line',
|
||||
color: '#6e5494',
|
||||
},
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
## 赞助
|
||||
|
||||
> 在每篇文章末尾，展示赞助（打赏）信息。
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ end: false
|
|||
top: 99
|
||||
---
|
||||
|
||||
> Example: [valaxy.yyj.moe](https://valaxy.yyj.moe)
|
||||
> Example: [yun.valaxy.site](https://yun.valaxy.site)
|
||||
|
||||
<div lang="zh-CN">
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Valaxy **提出**了一种基于 CSS 面向博客的 i18n 解决方案。
|
|||
|
||||
:::
|
||||
|
||||
> 如果你想了解实现原理，可参考 [i18n](/posts/i18n)。
|
||||
> 如果你想了解实现原理，可参考 [i18n](/guide/i18n)。
|
||||
|
||||
::: zh-CN
|
||||
**效果如下**（点击按钮切换）：
|
||||
|
|
@ -23,7 +23,7 @@ Valaxy **提出**了一种基于 CSS 面向博客的 i18n 解决方案。
|
|||
**The effect is as follows** (click the button to switch).
|
||||
:::
|
||||
|
||||
<PressToggleLocale class="shadow" />
|
||||
<PressToggleLocale class="shadow p-2 rounded-full" bg="$va-c-brand" text="white" />
|
||||
|
||||
::: zh-CN
|
||||
另一种 i18n 方案。
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: Guide
|
||||
title_zh: 指南
|
||||
categories:
|
||||
- Guide
|
||||
end: false
|
||||
top: 97
|
||||
---
|
||||
|
||||
- [What is Valaxy?](/posts/hello-valaxy)
|
||||
|
||||
更多请参见[文档](/docs)。
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
title: Implement Comments
|
||||
title_zh: 实现评论
|
||||
end: false
|
||||
categories:
|
||||
- Theme
|
||||
---
|
||||
|
||||
作为博客，用户通常会有评论的需求。
|
||||
|
||||
而由于评论系统各不相同，如 Hexo 等主题开发者们通常需在主题侧重复实现多款评论系统。
|
||||
这显然是繁琐的。
|
||||
|
||||
Valaxy 决定中心化地提供各类封装好的评论钩子函数。
|
||||
|
||||
譬如主题开发者，可以快速通过 `useWaline` 来实现 [Waline](https://waline.js.org/) 评论系统的集成。
|
||||
而用户则可以使用相同的配置穿梭漫游于不同的主题之间。
|
||||
|
||||
```vue {2}
|
||||
<script lang="ts" setup>
|
||||
import { useSite, useWaline } from 'valaxy'
|
||||
|
||||
// 读取用户配置
|
||||
const config = useSite()
|
||||
// 挂载 Waline
|
||||
useWaline(config.value.comment.waline)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- waline html 挂载点，将其写入布局中 -->
|
||||
<div id="waline" w="full" />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// 可以在此处覆盖 waline 样式
|
||||
#waline {
|
||||
--waline-theme-color: var(--va-c-primary);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -60,4 +60,37 @@ export interface ValaxyConfig {
|
|||
|
||||
## Third Plugin
|
||||
|
||||
- [关于评论](/themes/comment)
|
||||
### 实现评论
|
||||
|
||||
作为博客，用户通常会有评论的需求。
|
||||
|
||||
而由于评论系统各不相同，如 Hexo 等主题开发者们通常需在主题侧重复实现多款评论系统。
|
||||
这显然是繁琐的。
|
||||
|
||||
Valaxy 决定中心化地提供各类封装好的评论钩子函数。
|
||||
|
||||
譬如主题开发者，可以快速通过 `useWaline` 来实现 [Waline](https://waline.js.org/) 评论系统的集成。
|
||||
而用户则可以使用相同的配置穿梭漫游于不同的主题之间。
|
||||
|
||||
```vue {2}
|
||||
<script lang="ts" setup>
|
||||
import { useSite, useWaline } from 'valaxy'
|
||||
|
||||
// 读取用户配置
|
||||
const config = useSite()
|
||||
// 挂载 Waline
|
||||
useWaline(config.value.comment.waline)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- waline html 挂载点，将其写入布局中 -->
|
||||
<div id="waline" w="full" />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// 可以在此处覆盖 waline 样式
|
||||
#waline {
|
||||
--waline-theme-color: var(--va-c-primary);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
title: Use Theme
|
||||
title_zh: 使用主题
|
||||
categories:
|
||||
- Theme
|
||||
---
|
||||
|
||||
## 安装主题
|
||||
|
||||
```bash
|
||||
npm i valaxy-theme-yun
|
||||
# pnpm add valaxy-theme-yun
|
||||
```
|
||||
|
||||
## 启用主题
|
||||
|
||||
配置 `theme` 字段为主题名称，如 `yun`。
|
||||
|
||||
```ts
|
||||
// site.config.ts
|
||||
import { defineSite } from 'valaxy'
|
||||
export default defineSite({
|
||||
theme: 'yun'
|
||||
})
|
||||
```
|
||||
|
||||
## 主题配置
|
||||
|
||||
参见对应主题文档，配置 `themeConfig`。
|
||||
|
||||
```ts
|
||||
// site.config.ts
|
||||
import { defineSite } from 'valaxy'
|
||||
export default defineSite({
|
||||
theme: 'yun',
|
||||
themeConfig: {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
|
@ -27,7 +27,7 @@ const app = useAppStore()
|
|||
z="10"
|
||||
:class="app.isRightSidebarOpen && 'open'"
|
||||
>
|
||||
<div class="aside-container lt-xl:mt-60" flex="~ col">
|
||||
<div class="aside-container" flex="~ col">
|
||||
<PressToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
|
||||
<div class="flex-grow" />
|
||||
<div v-if="$slots.default" class="custom-container">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const fm = useFrontmatter()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<h1 m="md:t-24 t-20" text="center">
|
||||
<h1 m="md:t-24 t-10 md:t-20" text="center">
|
||||
<span text="5rem" font="black" class="gradient-text from-purple-800 to-blue-500" bg="gradient-to-r">
|
||||
{{ fm.hero.name }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -8,18 +8,19 @@ const { t } = useI18n()
|
|||
|
||||
<template>
|
||||
<Layout>
|
||||
<template #content>
|
||||
<div text="center">
|
||||
<div text-4xl>
|
||||
<div i-ri-alarm-warning-line inline-block />
|
||||
</div>
|
||||
<router-view />
|
||||
<div>
|
||||
<button btn text-sm m="3 t8" @click="router.back()">
|
||||
{{ t('button.back') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template #sidebar>
|
||||
<div />
|
||||
</template>
|
||||
<div text="center" m="t-20">
|
||||
<div text-4xl>
|
||||
<div i-ri-alarm-warning-line inline-block />
|
||||
</div>
|
||||
<router-view />
|
||||
<div>
|
||||
<button btn text-sm m="3 t8" @click="router.back()">
|
||||
{{ t('button.back') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSid
|
|||
<div class="layout antialiased">
|
||||
<PressNav />
|
||||
<PressLocalNav :open="isSidebarOpen" @open-menu="openSidebar()" />
|
||||
<PressSidebar :open="isSidebarOpen" />
|
||||
<slot name="sidebar">
|
||||
<PressSidebar :open="isSidebarOpen" />
|
||||
</slot>
|
||||
<PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
|
||||
|
||||
<slot>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ t('not-found') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
layout: 404
|
||||
</route>
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
:root {
|
||||
--pr-c-indigo-lighter: #c9def1;
|
||||
}
|
||||
|
||||
:root {
|
||||
--pr-c-text-code: #374562;
|
||||
|
||||
// aside
|
||||
--pr-aside-text-1: #213547;
|
||||
--pr-aside-text-2: #3c3c3cb3;
|
||||
|
|
@ -24,6 +30,8 @@
|
|||
}
|
||||
|
||||
.dark {
|
||||
--pr-c-text-code: var(--pr-c-indigo-lighter);
|
||||
|
||||
// aside
|
||||
--pr-aside-text-1: #ffffffde;
|
||||
--pr-aside-text-2: #ebebeb99;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,31 @@
|
|||
--un-prose-body: var(--va-c-text);
|
||||
--un-prose-hr: var(--va-c-text);
|
||||
--un-prose-borders: var(--va-c-brand);
|
||||
--un-prose-links: var(--va-c-brand);
|
||||
--un-prose-code: var(--va-c-text);
|
||||
--un-prose-font-mono: var(--va-font-mono);
|
||||
|
||||
blockquote {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all 0.4s;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: var(--va-c-brand);
|
||||
}
|
||||
}
|
||||
|
||||
code:not(pre > code) {
|
||||
color: var(--pr-c-text-code);
|
||||
background-color: var(--va-c-bg-mute);
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
|
|
|
|||
Loading…
Reference in New Issue