1
0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00

article: update

This commit is contained in:
2025-12-31 22:02:58 +08:00
parent 8168f27d31
commit 7d0325689c
4 changed files with 176 additions and 155 deletions

View File

@@ -1,7 +1,7 @@
---
title: "AincradMix"
description: "一个 osu! 皮肤"
color: "#00318b"
color: "#8400db"
impression:
- /assets/images/22/s0_amix_vision.webp
- /assets/images/22/screenshot01.webp
@@ -22,8 +22,8 @@ external_links:
::: tip 简介
- 本皮肤通过游戏补丁的方式,做到了覆盖几乎全部的 osu! 界面元素。
- 结合更现代的设计,扩展了《刀剑神域》中出现的界面设计。
1. 本皮肤通过游戏补丁的方式,做到了覆盖几乎全部的 osu! 界面元素。
2. 结合更现代的设计,扩展了《刀剑神域》中出现的界面设计。
:::
# 优点
@@ -83,7 +83,7 @@ catch 模式
# 推荐设置
### 详细设置
**详细设置**
> - [x] 渐出滑条
> - [x] 连击提示图
@@ -91,23 +91,23 @@ catch 模式
> - [x] 着色器效果
> - [ ] 柔化滤镜
### 主菜单
**主菜单**
> - [x] 飘雪效果
### 选歌页面
**选歌页面**
> - [x] 显示略缩图
### 常规
**常规**
> - [x] 进度条位置: 右上角(条状)
### 音量
**音量**
> - [ ] 禁用谱面自带音效
### 皮肤
**皮肤**
> - [x] 忽略所有谱面自带的皮肤
> - [ ] 使用皮肤的音效
@@ -116,14 +116,12 @@ catch 模式
> - [ ] 自动缩放光标
> - [ ] 拖球的颜色随滑条改变
### 鼠标
**鼠标**
> - [ ] 点击波纹
# 引用素材来源
### 音效
- 来自 [`ppy/osu-resources`](https://github.com/ppy/osu-resources/)
- **音效**来自 [`ppy/osu-resources`](https://github.com/ppy/osu-resources/)
> _非常感谢这些资源的贡献者_

View File

@@ -1,58 +0,0 @@
---
title: "Runtime API Examples"
description: "Runtime API Examples"
color: ""
impression: ""
categories:
tags:
date: 2007-08-31T00:00:00Z
---
# Runtime API Examples
This page demonstrates usage of some of the runtime APIs provided by VitePress.
The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
```md
<script setup>
import { useData } from 'vitepress'
const { theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```
<script setup>
import { useData } from 'vitepress'
const { site, theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>
## More
Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

View File

@@ -1,180 +1,261 @@
---
title: "Markdown Extension Examples"
description: "This page demonstrates some of the built-in markdown extensions provided by VitePress."
title: "Markdown 扩展示例"
description: "本页面展示了 VitePress 提供的一些内置 markdown 扩展功能。"
color: ""
impression: ""
categories:
tags:
date: 2007-08-31T00:00:00Z
date: time
---
# Markdown Extension Examples
# 语法高亮
This page demonstrates some of the built-in markdown extensions provided by VitePress.
VitePress 提供由 [Shiki](https://github.com/shikijs/shiki) 驱动的语法高亮功能,并附带行高亮等额外特性:
## Syntax Highlighting
VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
**Input**
**输入**
````md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
msg: '已高亮显示!'
}
}
}
```
````
**Output**
**输出**
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
msg: '已高亮显示!'
}
}
}
```
## Custom Containers
# 自定义容器
**Input**
**输入**
```md
::: info
This is an info box.
这是一个信息框。
:::
::: tip
This is a tip.
这是一个提示。
:::
::: warning
This is a warning.
这是一个警告。
:::
::: danger
This is a dangerous warning.
这是一个危险警告。
:::
::: details
This is a details block.
这是一个详情块。
:::
```
**Output**
**输出**
::: info
This is an info box.
这是一个信息框。
:::
::: tip
This is a tip.
这是一个提示。
:::
::: warning
This is a warning.
这是一个警告。
:::
::: danger
This is a dangerous warning.
这是一个危险警告。
:::
::: details
This is a details block.
这是一个详情块。
:::
## Material Buttons
# 组件使用范例
MaterialButton 组件是一个遵循 Material Design 3 规范的按钮组件,支持多种样式和功能。
以下是项目中可用组件的使用示例:
### 属性列表
### MaterialButton 组件 (Button.vue)
MaterialButton 组件是一个通用的按钮组件,支持多种样式和功能。
#### 属性列表
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
|------|------|--------|--------|------|
| `text` | `string` | - | 任意字符串 | 按钮显示的文本内容 |
| `href` | `string` | - | 任意URL | 如果提供,按钮将渲染为链接 |
| `icon` | `string` | - | Material Icons 名称 | 按钮左侧的图标 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 按钮尺寸 |
| ---- | ---- | ---- | ---- | ---- |
| `shape` | `string` | `"round"` | `"round"`, `"square"` | 按钮形状 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 按钮尺寸 |
| `color` | `string` | `"filled"` | `"elevated"`, `"filled"`, `"tonal"`, `"outlined"`, `"standard"`, `"text"` | 按钮颜色样式 |
| `icon` | `string` | - | Material Icons 名称 | 按钮图标 |
| `href` | `string` | - | 任意URL | 如果提供,按钮将渲染为链接 |
| `target` | `string` | `"_blank"` | `"_blank"`, `"_self"`, `"_parent"`, `"_top"` | 链接打开方式 |
### 尺寸规格
#### 使用示例
| 尺寸 | 高度 | 内边距 | 字体大小 | 图标大小 |
|------|------|--------|----------|----------|
| `xs` | 32px | 12px | label-large | 20px |
| `s` | 40px | 16px | label-large | 20px |
| `m` | 56px | 24px | title-medium | 24px |
| `l` | 96px | 48px | headline-small | 32px |
| `xl` | 136px | 64px | headline-large | 40px |
### 使用示例
**Input**
```md
```vue
<!-- 基础按钮 -->
<MaterialButton text="默认按钮" />
<MaterialButton>点击我</MaterialButton>
<!-- 带图标按钮 -->
<MaterialButton text="带图标按钮" icon="favorite" />
<MaterialButton icon="favorite">收藏</MaterialButton>
<!-- 链接按钮 -->
<MaterialButton text="链接按钮" href="https://example.com" />
<MaterialButton href="https://example.com" target="_blank">访问网站</MaterialButton>
<!-- 不同尺寸 -->
<MaterialButton text="大号按钮" size="l" />
<MaterialButton text="小号按钮" size="xs" />
<MaterialButton size="xs">超小按钮</MaterialButton>
<MaterialButton size="l">大按钮</MaterialButton>
<!-- 不同形状 -->
<MaterialButton text="方形按钮" shape="square" />
<MaterialButton shape="square">方形按钮</MaterialButton>
<!-- 不同颜色样式 -->
<MaterialButton text="轮廓按钮" color="outlined" />
<MaterialButton text="强调按钮" color="tonal" />
<MaterialButton text="提升按钮" color="elevated" />
<MaterialButton text="文本按钮" color="text" />
<!-- 组合使用 -->
<MaterialButton text="带图标链接" href="/" icon="home" target="_self" />
<MaterialButton color="outlined">轮廓按钮</MaterialButton>
<MaterialButton color="tonal">强调按钮</MaterialButton>
<MaterialButton color="elevated">提升按钮</MaterialButton>
<MaterialButton color="text">文本按钮</MaterialButton>
```
**Output**
### Card 组件 (Card.vue)
<!-- 基础按钮 -->
<MaterialButton text="默认按钮" />
Card 组件用于展示内容卡片,支持多种变体和样式。
<!-- 带图标按钮 -->
<MaterialButton text="带图标按钮" icon="favorite" />
#### 属性列表
<!-- 链接按钮 -->
<MaterialButton text="链接按钮" href="https://example.com" />
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| ---- | ---- | ---- | ---- | ---- |
| `variant` | `string` | `"feed"` | `"feed"` | 卡片变体 |
| `size` | `string` | `"m"` | `"s"`, `"m"`, `"l"` | 卡片尺寸 |
| `color` | `string` | `"filled"` | `"elevated"`, `"filled"`, `"outlined"` | 卡片颜色样式 |
| `title` | `string` | - | 任意字符串 | 卡片标题 |
| `description` | `string` | - | 任意字符串 | 卡片描述 |
| `date` | `string` | - | 日期字符串 | 发布日期 |
| `tags` | `string[]` | - | 字符串数组 | 标签列表 |
| `category` | `string[]` | - | 字符串数组 | 分类列表 |
| `impression` | `string[]` | `[]` | 图片URL数组 | 印象图片 |
| `href` | `string` | - | 任意URL | 卡片链接 |
| `downloadable` | `boolean` | `false` | `true`, `false` | 是否可下载 |
<!-- 不同尺寸 -->
<MaterialButton text="大号按钮" size="l" />
<MaterialButton text="小号按钮" size="xs" />
#### 使用示例
<!-- 不同形状 -->
<MaterialButton text="方形按钮" shape="square" />
```vue
<!-- 基础卡片 -->
<Card
title="文章标题"
description="这是一段文章描述,简要介绍文章内容。"
date="2023-10-01"
/>
```
<!-- 不同颜色样式 -->
<MaterialButton text="轮廓按钮" color="outlined" />
<MaterialButton text="强调按钮" color="tonal" />
<MaterialButton text="提升按钮" color="elevated" />
<MaterialButton text="文本按钮" color="text" />
```vue
<!-- 带图片卡片 -->
<Card
title="项目展示"
description="展示一个有趣的项目"
impression="['/assets/images/project1.jpg', '/assets/images/project2.jpg']"
href="/projects/example"
/>
```
<!-- 组合使用 -->
<MaterialButton text="带图标链接" href="/" icon="home" target="_self" />
```vue
<!-- 可下载资源卡片 -->
<Card
title="资源下载"
description="包含可下载的文件资源"
downloadable
tags="['资源', '下载']"
category="['教程']"
/>
```
## More
```vue
<!-- 不同样式卡片 -->
<Card
title="轮廓样式"
description="使用轮廓样式的卡片"
color="outlined"
/>
```
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
### ButtonGroup 组件 (ButtonGroup.vue)
ButtonGroup 组件用于将多个按钮组合在一起,支持水平和垂直布局。
#### 属性列表
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| ---- | ---- | ---- | ---- | ---- |
| `links` | `ExternalLink[]` | `[]` | 链接对象数组 | 按钮链接列表 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 按钮尺寸 |
| `layout` | `string` | `"horizontal"` | `"horizontal"`, `"vertical"` | 布局方向 |
#### ExternalLink 类型
```typescript
interface ExternalLink {
type: string; // 链接类型:'download' 或 'normal'
label: string; // 按钮标签文本
link: string; // 链接地址
}
```
#### 使用示例
```vue
<!-- 水平按钮组 -->
<ButtonGroup
:links="[
{ type: 'normal', label: '查看文档', link: '/docs' },
{ type: 'download', label: '下载资源', link: '/downloads/file.zip' },
{ type: 'normal', label: 'GitHub', link: 'https://github.com/example' }
]"
size="m"
layout="horizontal"
/>
<!-- 垂直按钮组 -->
<ButtonGroup
:links="[
{ type: 'normal', label: '选项一', link: '/option1' },
{ type: 'normal', label: '选项二', link: '/option2' },
{ type: 'normal', label: '选项三', link: '/option3' }
]"
size="s"
layout="vertical"
/>
<!-- 不同尺寸按钮组 -->
<ButtonGroup
:links="[
{ type: 'download', label: '小尺寸下载', link: '/download' }
]"
size="xs"
/>
<ButtonGroup
:links="[
{ type: 'normal', label: '大尺寸按钮', link: '/large' }
]"
size="xl"
/>
```
# 更多信息
查看 [完整 markdown 扩展列表](https://vitepress.dev/guide/markdown) 的文档。

View File

@@ -44,13 +44,13 @@ SyslogIdentifier = jekyll
WantedBy = multi-user.target
```
保存之后执行
# 保存之后执行
```bash
sudo systemctl daemon-reload
```
启动自启服务并检查运行状况
# 启动自启服务并检查运行状况
```bash
sudo systemctl enable jekyll --now