# 自定义博客名称

> Valaxy 主题云预览

## 代码块图标测试

- **Date**: 2025-11-02

## 内置图标

使用方式参考[添加代码块标题与图标](https://valaxy.site/guide/markdown#%E6%B7%BB%E5%8A%A0%E4%BB%A3%E7%A0%81%E5%9D%97%E6%A0%87%E9%A2%98%E4%B8%8E%E5%9B%BE%E6%A0%87)

`vitepress-plugin-group-icons` 的内置图标。

```typescript [builtin.ts]
const builtinIcons = {
  'pnpm': 'vscode-icons:file-type-light-pnpm',
  'npm': 'vscode-icons:file-type-npm',
  'yarn': 'vscode-icons:file-type-yarn',
  'bun': 'vscode-icons:file-type-bun',
  'deno': 'vscode-icons:file-type-deno',
  'vue': 'vscode-icons:file-type-vue',
  'svelte': 'vscode-icons:file-type-svelte',
  'angular': 'vscode-icons:file-type-angular',
  'react': 'vscode-icons:file-type-reactjs',
  'next': 'vscode-icons:file-type-light-next',
  'nuxt': 'vscode-icons:file-type-nuxt',
  'solid': 'logos:solidjs-icon',
  'astro': 'vscode-icons:file-type-light-astro',
  'qwik': 'logos:qwik-icon',
  'ember': 'vscode-icons:file-type-ember',
  'rollup': 'vscode-icons:file-type-rollup',
  'webpack': 'vscode-icons:file-type-webpack',
  'vite': 'vscode-icons:file-type-vite',
  'esbuild': 'vscode-icons:file-type-esbuild',
  'package.json': 'vscode-icons:file-type-node',
  'tsconfig.json': 'vscode-icons:file-type-tsconfig',
  '.npmrc': 'vscode-icons:file-type-npm',
  '.editorconfig': 'vscode-icons:file-type-editorconfig',
  '.eslintrc': 'vscode-icons:file-type-eslint',
  '.eslintignore': 'vscode-icons:file-type-eslint',
  'eslint.config': 'vscode-icons:file-type-eslint',
  '.gitignore': 'vscode-icons:file-type-git',
  '.gitattributes': 'vscode-icons:file-type-git',
  '.env': 'vscode-icons:file-type-dotenv',
  '.env.example': 'vscode-icons:file-type-dotenv',
  '.vscode': 'vscode-icons:file-type-vscode',
  'tailwind.config': 'vscode-icons:file-type-tailwind',
  'uno.config': 'vscode-icons:file-type-unocss',
  'unocss.config': 'vscode-icons:file-type-unocss',
  '.oxlintrc': 'vscode-icons:file-type-oxlint',
  'vue.config': 'vscode-icons:file-type-vueconfig',
  '.mts': 'vscode-icons:file-type-typescript',
  '.cts': 'vscode-icons:file-type-typescript',
  '.ts': 'vscode-icons:file-type-typescript',
  '.tsx': 'vscode-icons:file-type-typescript',
  '.mjs': 'vscode-icons:file-type-js',
  '.cjs': 'vscode-icons:file-type-js',
  '.json': 'vscode-icons:file-type-json',
  '.js': 'vscode-icons:file-type-js',
  '.jsx': 'vscode-icons:file-type-js',
  '.md': 'vscode-icons:file-type-markdown',
  '.py': 'vscode-icons:file-type-python',
  '.ico': 'vscode-icons:file-type-favicon',
  '.html': 'vscode-icons:file-type-html',
  '.css': 'vscode-icons:file-type-css',
  '.scss': 'vscode-icons:file-type-scss',
  '.yml': 'vscode-icons:file-type-light-yaml',
  '.yaml': 'vscode-icons:file-type-light-yaml',
  '.php': 'vscode-icons:file-type-php',
  '.gjs': 'vscode-icons:file-type-glimmer',
  '.gts': 'vscode-icons:file-type-glimmer'
}
```

::: code-group
```sh [pnpm]
pnpm install
```
```sh [npm]
npm install
```
:::

## Valaxy 内置图标

```typescript [preset.ts]
const builtinCustomIcon = {
  nodejs: 'vscode-icons:file-type-node',
  playwright: 'vscode-icons:file-type-playwright',
  typedoc: 'vscode-icons:file-type-typedoc',
  eslint: 'vscode-icons:file-type-eslint',
}
```

```typescript [valaxy]
export default defineValaxyConfig<ThemeConfig>({
  // ...
})
```

## 自定义图标

部分代码块未配置图标，需手动添加图标，修改 `valaxy.config.ts`。

参考`vitepress-plugin-group-icons`配置[Custom Icons](https://vp.yuy1n.io/features.html#custom-icons)

```typescript [valaxy.config.ts]
export default defineValaxyConfig<ThemeConfig>({
  // ...省略无关代码
  groupIcons: {
    customIcon: {
      // valaxy: 'https://valaxy.site/favicon.svg',
      'valaxy': localIconLoader(import.meta.url, '../../docs/public/favicon.svg'),
      'valaxy.config': localIconLoader(import.meta.url, '../../docs/public/favicon.svg'),
      'dockerfile': 'vscode-icons:file-type-docker',
      'java': 'vscode-icons:file-type-java',
      'xml': 'vscode-icons:file-type-xml',
      'yml': 'vscode-icons:file-type-yaml',
    },
  },
})
```

::: code-group
```java [HelloWorld.java]
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println('Hello, World!');
    }
}
```
```xml [pom.xml]
<?xml version='1.0' encoding='UTF-8'?>
<project xmlns='http://maven.apache.org/POM/4.0.0'
         xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
         xsi:schemaLocation='http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd'>
    <modelVersion>4.0.0</modelVersion>

    <groupId>cn.montaro</groupId>
    <artifactId>font-secret</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <!-- https://mvnrepository.com/artifact/org.apache.pdfbox/pdfbox -->
        <dependency>
            <groupId>org.apache.pdfbox</groupId>
            <artifactId>pdfbox</artifactId>
            <version>3.0.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.27</version>
        </dependency>
    </dependencies>

</project>
```
```yml [application.yml]
spring:
  profiles:
    active: dev
server:
  port: 11451
```
```dockerfile [Sample.dockerfile]
FROM ubuntu

ENV PATH /opt/conda/bin:$PATH
```
:::

## RSS Image Path Test

- **Date**: 2024-12-26
- **Categories**: test
- **Tags**: rss, images

这是一篇测试 RSS feed 中图片路径的文章。

## 绝对路径图片

下面是使用绝对路径的图片（以 `/` 开头）：

![RSS Test Image](/images/rss-test.svg)

<!-- more -->

## 说明

在 RSS feed 中，这个图片路径应该被转换为完整的 URL：
- Markdown 中：`/images/rss-test.svg`
- RSS 中应该是：`https://yun.valaxy.site/images/rss-test.svg`

这样 RSS 阅读器才能正确加载图片。

## Test Relative Images

- **Date**: 2024-12-26
- **Categories**: test
- **Tags**: test, images

这是一篇测试相对路径图片的文章。

## 相对路径图片测试

下面是使用 `./` 前缀的相对路径：

![Test Image with ./](./bg-img.jpg)

<!-- more -->

## 更多内容

这篇文章主要用于测试在构建时相对路径图片是如何被处理的。

- 图片文件名：`bg-img.jpg`
- Markdown 引用：`![Test Image](./bg-img.jpg)`
- 预期构建后会带 hash：`/assets/bg-image.xxxxx.jpg`

让我们看看 RSS feed 中会如何展示这些图片路径。

## 链接跳转测试

- **Date**: 2024-10-06
- **Categories**: 云游的小笔记
- **Tags**: 四元数, 万向锁

在使用 Babylon 写 [ADV.JS VRM 模型编辑器](https://vrm.advjs.org/) 的人物骨骼旋转动画的时候，我发现几乎所有的骨骼旋转均使用四元数（Quaternion）实现。

于是我便打算好好了解一下相关的内容，但是网上搜到的不少帖子比如 Unity 欧拉角的旋转顺序都是互相矛盾的，导致自己也不知道相信哪个为好，决定还是自己实验下。

同时写了下自己对四元数和万向锁的直观理解，希望能对有兴趣了解这方面的后来者有所帮助。

因为有不少随手的截图和公式，所以就先放在了语雀上。也欢迎随时勘误！

<!-- more -->

---

Q.E.D.

## 代码块测试

- **Date**: 2024-07-10
- **Categories**: test

```dockerfile [Sample.dockerfile]
FROM ubuntu

ENV PATH /opt/conda/bin:$PATH
```

```bash
ffmpeg -i input.avi -b:v 64k -bufsize 64k output.mp4
```

```ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

const safelist = [
  'i-ri-home-line',
]

export default defineValaxyConfig<ThemeConfig>({
  // site config see site.config.ts or write in siteConfig
  // siteConfig: {},

  theme: 'yun',
  themeConfig: {

    banner: {
      enable: true,
      title: '云游君的小站',
    },

    notice: {
      enable: true,
      content: '公告测试',
    },
  },

  unocss: {
    safelist,
  },
})
```

```css
:root {
  --va-code-line-height: 1.7;
  --va-code-font-size: 0.875em;

  --va-code-block-color: var(--va-c-text-2);
  --va-code-block-bg: var(--va-c-bg-alt);
  --va-code-block-divider-color: var(--va-c-gutter);

  --va-code-lang-color: var(--va-c-text-3);

  --va-code-line-highlight-color: rgba(0, 0, 0, 0.5);
  --va-code-line-number-color: var(--va-c-text-dark-3);

  // copy
  --va-code-copy-code-border-color: var(--va-c-divider);
  --va-code-copy-code-bg: var(--va-c-bg-soft);
  --va-code-copy-code-hover-border-color: var(--va-c-divider);
  --va-code-copy-code-hover-bg: var(--va-c-bg);
  --va-code-copy-code-active-text: var(--va-c-text-2);
  --va-code-copy-copied-text-content: 'Copied';
}
```

## Markdown 样式

- **Date**: 2024-06-12
- **Categories**: test > Markdown

1. a
    - b

## Markdown 扩展测试

- **Date**: 2024-06-11
- **Categories**: test > Markdown

::: tip

More info see [Markdown Extensions](https://valaxy.site/guide/markdown).

:::

## Emoji :tada:

**Input**

```md
:tada: :100:
```

**Output**

:tada: :100:

A [list of all emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json) is available.
<!-- more -->

## Table of Contents

**Input**

```md
[[toc]]
```

**Output**

[[toc]]

Rendering of the TOC can be configured using the `markdown.toc` option.

## 代码行高亮

**Input**

````md
```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```
````

**Output**

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

**Input**

````md
```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```
````

**Output**

```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
````

## Colored Diffs in Code Blocks

Adding the `// [!code --]` or `// [!code ++]` comments on a line will create a diff of that line, while keeping the colors of the codeblock.

**Input**

````md
```js
export default {
  data () {
    return {
      msg: 'Removed' // [!!code --]
      msg: 'Added' // [!!code ++]
    }
  }
}
```
````

**Output**

```js
export default {
  data() {
    return {
      msg: 'Removed', // [!code --]
      msg: 'Added', // [!code ++]
    }
  }
}
```

## Errors and Warnings in Code Blocks

Adding the `// [!code warning]` or `// [!code error]` comments on a line will color it accordingly.

**Input**

````md
```js
export default {
  data () {
    return {
      msg: 'Error', // [!!code error]
      msg: 'Warning' // [!code warning]
    }
  }
}
```
````

**Output**

```js
export default {
  data() {
    return {
      msg: 'Error', // [!code error]
      msg: 'Warning' // [!code warning]
    }
  }
}
```

## Import Code Snippets

You can import code snippets from existing files via following syntax:

```md
<<< @/filepath
```

It also supports [line highlighting](#代码行高亮):

```md
<<< @/filepath{highlightLines}
```

**Input**

```md
<<< @/snippets/snippet.js{2}
```

**Code file**

<<< @/snippets/snippet.js

**Output**

<<< @/snippets/snippet.js

::: tip
The value of `@` corresponds to the source root. By default it's the blog root, unless `srcDir` is configured. Alternatively, you can also import from relative paths:

```md
<<< ../snippets/snippet.js
```

:::

You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath:

**Input**

```md
<<< @/snippets/snippet-with-region.js#snippet{1}
```

**Code file**

<<< @/snippets/snippet-with-region.js

**Output**

<<< @/snippets/snippet-with-region.js#snippet{1}

You can also specify the language inside the braces (`{}`) like this:

```md
<<< @/snippets/snippet.cs{c#}

<!-- with line highlighting: -->

<<< @/snippets/snippet.cs{1,2,4-6 c#}

<!-- with line numbers: -->

<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
```

This is helpful if source language cannot be inferred from your file extension.

## Code Groups

You can group multiple code blocks like this:

**Input**

````md
::: code-group

```js [config.js]
/**
 * @type {import('valaxy').UserConfig}
 */
const config = {
  // ...
}

export default config
```

```ts [config.ts]
import type { UserConfig } from 'valaxy'

const config: UserConfig = {
  // ...
}

export default config
```

:::
````

**Output**

::: code-group

```js [config.js]
/**
 * @type {import('valaxy').UserConfig}
 */
const config = {
  // ...
}

export default config
```

```ts [config.ts]
import type { UserConfig } from 'valaxy'

const config: UserConfig = {
  // ...
}

export default config
```

:::

You can also [import snippets](#import-code-snippets) in code groups:

**Input**

```md
::: code-group

<!-- filename is used as title by default -->

<<< @/snippets/snippet.js

<!-- you can provide a custom one too -->

<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]

:::
```

**Output**

::: code-group

<<< @/snippets/snippet.js

<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]

:::

## Container

::: zh-CN

通过对 `markdownIt` 进行配置，你可以自由设置自定义块区域的文字以及图标及图标的颜色。

:::

::: en

By configuring `markdownIt`, you can set the text and icon (and its color) for
custom block.

:::

::: tip

tip

:::

::: warning

warning

:::

::: danger

danger

:::

::: info

info

:::

::: details Click to expand

details

:::

## KaTeX

**Input**

```md
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

**Maxwell's equations:**

| equation                                                                                                                                                                  | description                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |
```

**Output**

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

**Maxwell's equations:**

| equation                                                                                                                                                                  | description                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |

## abbrlink 短链接

- **Date**: 2024-04-21

短链接文章测试

## excerpt_type: html

- **Date**: 2024-03-22

::: tip

Tip Style by `excerpt_type: html`

:::

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content

[/about](/about)

## Footer `INLINE CODE`

## KaTeX

- **Date**: 2023-12-21
- **Categories**: examples

## [$\KaTeX$](https://katex.org/)

- <https://katex.org/docs/autorender.html>
- [KaTeX Supported Functions](https://katex.org/docs/supported.html)
- [KaTeX Support Table](https://katex.org/docs/support_table.html)

### 行内公式

$\{x | Ax = b\}$

```md
$\{x | Ax = b\}$
```

$\mathcal{X}_{c^*}<1, \mathcal{X}_{q^*}<1$

$E = mc^2$

$\frac{\partial}{\partial t}$

```latex
$E = mc^2$
$\frac{\partial}{\partial t}$
```

### 行间公式

$$ E = mc^2 $$

```latex
$$ E = mc^2 $$
```

---

$$ \vec a=\frac{d\vec v}{dt}=\frac{d(\frac{dr}{dt}\vec e*{i}+r\frac{d\theta}{dt}\vec e*{j})}{dt}=\frac{d^2r}{dt^2}\vec e*{i}+\frac{dr}{dt}\frac{d\vec e*{i}}{dt}+\frac{dr}{dt}\frac{d\theta}{dt}\vec e*{j}+r\frac{d^2\theta}{dt^2}\vec e*{j}+r\frac{d\theta}{dt}\frac{d\vec e\_{j}}{dt} $$

```latex
$$ \vec a=\frac{d\vec v}{dt}=\frac{d(\frac{dr}{dt}\vec e_{i}+r\frac{d\theta}{dt}\vec e_{j})}{dt}=\frac{d^2r}{dt^2}\vec e_{i}+\frac{dr}{dt}\frac{d\vec e_{i}}{dt}+\frac{dr}{dt}\frac{d\theta}{dt}\vec e_{j}+r\frac{d^2\theta}{dt^2}\vec e_{j}+r\frac{d\theta}{dt}\frac{d\vec e_{j}}{dt} $$
```

$$ m_t=g_t $$

$$ V_t=1 $$

```latex
$$ m_t=g_t $$
$$ V_t=1 $$
```

$$ \eta_t=lr*{\frac {m_t}{\sqrt V_t}}=lr*g_t $$

$$ w\_{t+1}=w_t-\eta_t=w_t-lr*{\frac {m_t}{\sqrt V_t}}=w_t-lr*g_t $$

<div text="red">

$$
q''_s = -k \left.\frac{\partial }{\partial x} (T_1+T_2) \right|_{x=0} = \underbrace{-k \left.\frac{\partial T_1}{\partial x} \right|_{x=0}}_{q''_s}  -k \left.\frac{\partial T_2}{\partial x} \right|_{x=0} \rightarrow \boxed{0 = -k \left.\frac{\partial T_2}{\partial x} \right|_{x=0}}
$$

</div>

```latex
$$ \eta_t=lr*{\frac {m_t}{\sqrt V_t}}=lr*g_t $$
$$ w_{t+1}=w_t-\eta_t=w_t-lr*{\frac {m_t}{\sqrt V_t}}=w_t-lr*g_t $$

<div text="red">

$$
q''_s = -k \left.\frac{\partial }{\partial x} (T_1+T_2) \right|_{x=0} = \underbrace{-k \left.\frac{\partial T_1}{\partial x} \right|_{x=0}}_{q''_s}  -k \left.\frac{\partial T_2}{\partial x} \right|_{x=0} \rightarrow \boxed{0 = -k \left.\frac{\partial T_2}{\partial x} \right|_{x=0}}
$$

</div>
```

$$
\begin{bmatrix}
  a & b \\
  c & d
\end{bmatrix}
$$

```latex
$$
\begin{bmatrix}
  a & b \\
  c & d
\end{bmatrix}
$$
```

$$
\begin{equation}
  \left\{
    \begin{aligned}
      x=a\cos\theta\\
      y=b\sin\theta\\
    \end{aligned}
  \right.
\end{equation}
$$

```latex
$$
\begin{equation}
  \left\{
    \begin{aligned}
      x=a\cos\theta\\
      y=b\sin\theta\\
    end{aligned}
  \right.
\end{equation}
$$
```

## 加密文章部分内容测试 - 密码 valaxy

- **Date**: 2023-11-02
- **Categories**: Test

## 实现文章部分内容加密

> 密码：`valaxy`

使用 [Web Crypto API | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)

<!-- valaxy-encrypt-start:valaxy -->

```md
{{ frontmatter }}
```

<!-- valaxy-encrypt-end -->

---

中间未被加密的内容

---

<!-- valaxy-encrypt-start:valaxy -->

::: details 动态渲染的 frontmatter
{{ frontmatter }}
:::

<!-- valaxy-encrypt-end -->

```md
<!-- valaxy-encrypt-start:valaxy -->
This should not be encrypted.
<!-- valaxy-encrypt-end -->
```

## excerpt_type: ai

- **Date**: 2023-10-21

## Header

AI 摘要文章测试

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content

[/about](/about)

## Valaxy LazyLoad 图片懒加载测试

- **Date**: 2023-09-09
- **Categories**: Test

图片懒加载测试。

基于 [markdown-it-image-figures](https://github.com/Antonio-Laguna/markdown-it-image-figures) + [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) 实现。

![girl-in-water-tank](https://cdn.yunyoujun.cn/img/bg/girl-in-water-tank.webp "Girl In Water Tank")

![stars-timing-0-blur-30px](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg "Stars Timing BG")

![galaxy.jpg](https://cdn.yunyoujun.cn/img/bg/galaxy.jpg)

![mountain-blur-30px.jpg](https://cdn.yunyoujun.cn/img/bg/mountain-blur-30px.jpg)

![astronaut.webp](https://cdn.yunyoujun.cn/img/bg/astronaut.webp "Astronaut")

![stars-timing-1.jpg](https://cdn.yunyoujun.cn/img/bg/stars-timing-1.jpg)

![stars-timing-2.jpg](https://cdn.yunyoujun.cn/img/bg/stars-timing-2.jpg)

![stars-timing-3.jpg](https://cdn.yunyoujun.cn/img/bg/stars-timing-3.jpg)

![stars-timing-4.jpg](https://cdn.yunyoujun.cn/img/bg/stars-timing-4.jpg)

![stars-timing-5.jpg](https://cdn.yunyoujun.cn/img/bg/stars-timing-5.jpg)

![mountain.jpg](https://cdn.yunyoujun.cn/img/bg/mountain.jpg)

![bow-to-good-society.jpg](https://cdn.yunyoujun.cn/img/meme/bow-to-good-society.jpg)

![no-bug.gif](https://cdn.yunyoujun.cn/img/meme/no-bug.gif "我写的代码没有 bug")

![no-work.jpg](https://cdn.yunyoujun.cn/img/meme/no-work.jpg "打工是不可能打工的")

## Date test

- **Date**: 2023-07-19

<TestFormatDate format="MMM d" />

<TestFormatDate format="MMM d, yyyy" />

<TestFormatDate date="2023-07-19T00:00:00+08:00" format="d MMM yyyy" />

<TestFormatDate date="1847-05-16T00:01:15.000Z" format="YYYY-MM-DD HH:mm:ss" />

<TestFormatDate format="EEEE, MMMM d, yyyy" />

<TestFormatDate format="EEEE, d MMMM yyyy" />

<TestFormatDate format="YYYYMMDD" />

<TestFormatDate format="yy/MM/dd" />

<TestFormatDate format="HH:mm:ss" />

<TestFormatDate format="h:mm a" />

<TestFormatDate format="hh 'o''clock' a, zzzz" />

<TestFormatDate format="K:mm a, z" />

<TestFormatDate date="2023-07-19T00:00:00+08:00" format="EEEE, d MMMM YYYY" />

<TestFormatDate :date="1722589089" format="YYYYMMDD" />

<TestFormatDate format="yyMMdd" />

<TestFormatDate date="2021/3/1 12:00" format="YYYY/MM/DD" />

<TestFormatDate format="X" />

<TestFormatDate format="x" />

<TestFormatDate date="2023-07-19 10:55:53Z" format="YYYY-MM-DD'T'HH:mm:ssXXX" />

<TestFormatDate format="YYYY-MM-DD'T'HH:mm:ss.SSSXXX" />

<TestFormatDate :date="1722589089" format="T" />

<TestFormatDate format="R" />

<TestFormatDate format="do" />

---

<TestFormatDateExamples />

## 静态站点生成器与托管平台

- **Date**: 2022-07-07

## 静态站点生成器

## 静态站点托管平台

目前已有很多第三方静态站点托管平台。

[GitHub Pages](https://pages.github.com/) 是其中的代表。
此外还有：

- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/)
- [Pages | Cloudflare](https://pages.cloudflare.com/)
- [Render](https://render.com/)

GitHub Pages 固然方便，但相对它们也有一些缺点。

- 单个项目的 GitHub Pages 往往只能托管在一个 gh-pages 分支上
- 且需要自定义 CNAME 其他灵活性相对不如第三方托管站点

| 平台             | Repo 对应数量 |
| ---------------- | ------------- |
| GitHub Pages     | 1             |
| Cloudflare Pages | 1             |
| Vercel           | 3             |
| Netlify           |              |

## 博文

- **Date**: 2022-04-09

::: zh-CN
我会写些 Valaxy 的开发笔记和使用说明。

- [Valaxy 设计原则](/posts/design)
- [Valaxy 开发笔记](/posts/dev)
:::

::: en
I will write some development notes and instructions of Valaxy.

- [Design principles of Valaxy](/posts/design)
- [Development notes of Valaxy](/posts/dev)
:::

## Post Updated Test

- **Date**: 2022-04-09
- **Tags**: test



## Nested Post

- **Date**: 2022-04-01

This is a nested post.

## Valaxy 设计原则

- **Date**: 2022-03-29
- **Tags**: design

## 特点 {lang="zh-CN"}

::: zh-CN
与 Hexo 相比，没有 `_drafts` 文件夹。（当然自己新建也完全没问题……）

当在 drafts 文件夹下编写博文时，我不得不在它和 posts 文件夹下来回移动，以预览最终效果。

Valaxy 认为这完全没有必要，您只需在 `frontmatter` 中添加 `draft: true` 属性，即可将其设置为草稿。
草稿状态的文章在构建以及生成 RSS 时会被过滤，但你仍然可以在开发时预览它。

当需要发布时，注释掉它即可。

譬如：
:::

## Features {lang="en"}

::: en
Compared with Hexo, There is no `_drafts` folder. (Of course, it is no problem to create the folder……)

When writing a blog post under the drafts folder, I had to move back and forth under it and the posts folder to preview the final effect.

Valaxy doesn't think this is necessary at all. You can set it as draft by adding the 'draft: true' attribute to 'frontmatter'.
Articles with status draft are filtered when building and generating RSS, but you can still preview it at development time.

When you need to publish, just comment it out.

For example:
:::

```markdown
---
draft: true
---
```

::: zh-CN
也许你可能认为放在对应文件夹下适合快速查找拥有哪些草稿，但是你通过编辑器的全局搜索 `draft: true` 同样可以快速做到。
并且你还能知道你之前打算把它发布在哪个文件夹（路径）下。
:::

::: en
You may think that putting it in the corresponding folder is suitable for quickly finding which drafts you have, but you can also do it quickly through the editor's global search 'draft: true'.
And you can also know which folder (path) you planned to publish it in.
:::

## Valaxy 开发笔记

- **Date**: 2022-03-23
- **Tags**: notes, valaxy

::: zh-CN
还什么都没写呢……
:::

::: en
Nothing has been written……
:::

<!-- more -->

## FAQ

### Why add `width` & `height` for `img`

- [优化 Cumulative Layout Shift 累积布局偏移 | web.dev](https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions)

## Valaxy Test 文章内容测试

- **Date**: 2022-03-23
- **Categories**: AAA > BBB > CCC
- **Tags**: valaxy, 测试, test

::: zh-CN
[[toc]]

标题是一级标题

## 二级标题 {lang="zh-CN"}

### 三级标题 {lang="zh-CN"}

#### 四级标题 {lang="zh-CN"}

##### 五级标题 {lang="zh-CN"}

###### 六级标题 {lang="zh-CN"}

## 标题 {lang="zh-CN"}

## 列表测试 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE

### 有序列表

1. 一级
    1. TEST
2. 二级
3. 三级

### Checkbox

- [ ] FLAG
- [x] FLAG
:::

::: en
[[toc]]

The title is a primary title

## Secondary title {lang="en"}

### Tertiary title {lang="en"}

#### Level four title {lang="en"}

##### Level five title {lang="en"}

###### Level six title {lang="en"}

## Title {lang="en"}

## List title {lang="en"}

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox {lang="en"}

- [ ] FLAG
- [x] FLAG
:::

![]()
_a_

## Dead Links

<!-- [/api/app?name=test](/api/app?name=test) -->

## 一个非常长的长标题测试一个非常长的长标题测试

## Hello, Valaxy!

- **Date**: 2022-03-22
- **Categories**: Valaxy Notes
- **Tags**: valaxy, notes

```md
{{ frontmatter }}
```

{{ frontmatter }}

## What is Valaxy? {lang="en"}

::: en
Valaxy aims to be a next generation of static blogging frameworks/generators.
:::

## 什么是 Valaxy? {lang="zh-CN"}

::: zh-CN
Valaxy 的目标是成为新一代的静态博客框架/生成器。
:::

More info see [valaxy.site](https://valaxy.site).

## A Vue component in your post

This cover is drawn entirely with Vue and inline SVG, without image assets. Click to draw the constellation and start the orbit; click again to pause. This instance has its own state.

<HelloValaxyCover subtitle="The same component, inside your story." />

```ts [valaxy.config.ts]
/**
 * User Config
 * do not use export const, because c12 will set as child property
 */
export default defineValaxyConfig<ThemeConfig>({
  theme: 'yun',

  themeConfig: {
    banner: {
      enable: true,
      title: '云游君的小站',
    },
  },
})
```

---

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

## 中文分类测试

- **Date**: 2021-06-30
- **Categories**: 中文 > 分类 > 测试



## Aplayer 测试

- **Categories**: test

```md
aplayer: false
```

## Categories A > B > C

- **Categories**: A > B > C
- **Tags**: A



## Categories A > B

- **Categories**: Test



## excerpt_type: md

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content

## excerpt_type: text

## Header

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

<!-- more -->

Main Content

## 如何使用广告板？

## 自定义广告板

- 在你的 Valaxy 博客目录下，新建 `components/YunAdBoard.vue` 组件
- 自由地自定义你的广告板样式与内容吧

```vue
<script setup lang="ts">
// 广告板
</script>

<template>
  <YunCard>
    <RouterLink to="/posts/how-to-use-adboard">
      如何使用广告板？
    </RouterLink>
  </YunCard>
</template>
```

## 长目录测试

- **Categories**: Test

::: zh-CN
[[toc]]

标题是一级标题

## 二级标题 {lang="zh-CN"}

### 三级标题 {lang="zh-CN"}

#### 四级标题 {lang="zh-CN"}

##### 五级标题 {lang="zh-CN"}

###### 六级标题 {lang="zh-CN"}

## 标题 {lang="zh-CN"}

[二级标题](#二级标题)

## 列表测试 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE

## 列表测试1 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE
- fff

## 列表测试2 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE
- fff

## 列表测试3 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE
- fff

## 列表测试4 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE
- fff

## 列表测试5 {lang="zh-CN"}

- AAA
- BBB
- CCC
  - DDD
    - EEE
- fff

### 有序列表

1. 一级
    1. TEST
2. 二级
3. 三级

### Checkbox

- [ ] FLAG
- [x] FLAG
:::

::: en
[[toc]]

The title is a primary title

## Secondary title {lang="en"}

### Tertiary title {lang="en"}

#### Level four title {lang="en"}

##### Level five title {lang="en"}

###### Level six title {lang="en"}

## Title {lang="en"}

## List title {lang="en"}

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox {lang="en"}

- [ ] FLAG
- [x] FLAG
:::

![]()
_a_

## Dead Links

<!-- [/api/app?name=test](/api/app?name=test) -->

## 一个非常长的长标题测试一个非常长的长标题测试

## List title1

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox1

- [ ] FLAG
- [x] FLAG

## List title2

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox2

- [ ] FLAG
- [x] FLAG

## List title3

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox3

- [ ] FLAG
- [x] FLAG

## List title4

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox4

- [ ] FLAG
- [x] FLAG

## List title5

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox5

- [ ] FLAG
- [x] FLAG

## List title6

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox6

- [ ] FLAG
- [x] FLAG

## List title7

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox7

- [ ] FLAG
- [x] FLAG

## List title8

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox8

- [ ] FLAG
- [x] FLAG

## List title9

- AAA
- BBB
- CCC
  - DDD
    - EEE

- AAA
- BBB
- CCC
  - DDD
    - EEE

### Checkbox9

- [ ] FLAG
- [x] FLAG
- [x] FLAG

## TOC 1

### Sub TOC 1

## TOC 2

### Sub TOC 2

## TOC 3

### Sub TOC 3

## TOC 4

### Sub TOC 4

## TOC 5

### Sub TOC 5

## TOC 6

### Sub TOC 6

## TOC 7

### Sub TOC 7

## TOC 8

### Sub TOC 8

## TOC 9

### Sub TOC 9

## TOC 10

### Sub TOC 10

## TOC 11

### Sub TOC 11

## TOC 12

### Sub TOC 12

## TOC 13

### Sub TOC 13

## TOC 14

### Sub TOC 14

## TOC 15

### Sub TOC 15

## Mermaid

- [Mermaid](https://mermaid.js.org/) - Diagramming and charting tool

## Flowchart

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

````txt
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
````

## Sequence diagram

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

````txt
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```
````

## Gantt diagram

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
```

````txt
```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
```
````

## Class diagram

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

````txt
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
````

## Git graph

```mermaid
    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
```

````txt
```mermaid
    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit
```
````

## Quadrant Chart

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

````txt
```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```
````

## XY Chart

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

````txt
```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
````

## Nested Z

Nested Z Test for Fuse Search index

## 帖子国际化

帖子国际化测试描述

::: zh-CN
帖子国际化测试内容
:::

::: en
Post i18n test content
:::

## 重定向



## 图片测试

![yun-bg](https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg)

![astronaut](https://fastly.jsdelivr.net/gh/YunYouJun/cdn/img/bg/astronaut.webp)

![喜欢二次元这件事很恶心这一点我还是知道的](https://cdn.yunyoujun.cn/img/meme/love-er-ci-yuan-is-sick.jpg)

![爷就是二次元](https://cdn.yunyoujun.cn/img/meme/i-am-er-ci-yuan.jpg)

![她们是点阵、是数据、这种事情我知道。](https://cdn.yunyoujun.cn/img/meme/i-like-paper-girls.jpg)

## Test Too long tags & categories

- **Categories**: 这是一个很长的分类
- **Tags**: 这是一个很长的 TAG, 这是第二个很长的 TAG, 这是第三个很长的 TAG



## 中文 Post 测试

- **Tags**: 中文, 多标签测试, 测试, Test

新的一年即将到来。

> 但是……很不幸，时间的流逝永远不会停止。
时光如箭，你的过去在不停增多，你的未来在不断减少，未知的可能性只会越来越少，而无法改变的后悔在累积如山。
你明白了吗？

中文测试

<!-- more -->