sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-08 08:44:15 +08:00
Code Activity

article: fix date timezone formatting

Browse Source
This commit is contained in:
sendevia
2026-03-08 00:41:14 +08:00
parent b87a0d2918
commit c856ce009d
7 changed files with 190 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
posts/AincradMix.md
View File

@@ -2,7 +2,7 @@
title: "AincradMix"
description: "一个 osu! 皮肤"
color: "#8400db"
impression:
impression:
- /assets/images/22/s0_amix_vision.webp
- /assets/images/22/screenshot01.webp
categories:
@@ -12,7 +12,7 @@ tags:
- osu!
- 示例文章
- 作品介绍
date: 2022-07-04T04:00:00Z
date: 2022-07-04T04:00:00+08
external_links:
- type: download
label: 直连下载
@@ -29,7 +29,7 @@ external_links:
1. 本皮肤通过游戏补丁的方式，做到了覆盖几乎全部的 osu! 界面元素。
2. 结合更现代的设计，扩展了《刀剑神域》中出现的界面设计。
:::
:::
# 优点
@@ -46,6 +46,7 @@ external_links:
- 本皮肤所提供的 dll 文件仅替换了图像资源，未做其他修改。如果不放心，你可以使用 dnSpy 自行替换文件
[^1]: 通过修改 osu! 的资源 dll。
[^2]: 此为估计得出。
# 皮肤预览

2
posts/Jekylmt.md
View File

@@ -7,7 +7,7 @@ categories:
- 博客主题
tags:
- readme
date: 2026-02-25T21:44:00Z
date: 2026-02-25T21:44:00+08
external_links:
- type: download
icon: rocket_launch

144
posts/components/ButtonGroup.md Normal file
View File

@@ -0,0 +1,144 @@
---
title: "Button group"
description: "按钮组组件"
color: "#42b883"
categories:
- 组件
tags:
- Vue 3
- 开发文档
- UI
date: 2026-02-25T21:20:00+08
---
# ButtonGroup 按钮组组件
`ButtonGroup` 是一个用于聚合多个 `MaterialButton` 的容器组件。它支持灵活的布局切换、统一的属性默认值配置以及全局事件委托监听。
## 核心特性
- **布局自适应**：支持水平（Horizontal）和垂直（Vertical）两种排列方式。
- **属性继承与覆盖**：可以在组级别设置默认的尺寸、颜色、图标等，也可以在具体的按钮项中进行个性化覆盖。
- **智能类型识别**：内置了对 `download` 和 `normal` 类型的样式及图标自动匹配逻辑。
- **事件委托**：支持统一监听 `@click` 事件，便捷获取点击的项信息及索引。
## 组件属性 (Props)
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :---------- | :--------------- | :------------- | :---------------------------------- | :--------------- |
| `links` | `ExternalLink[]` | `[]` | - | 按钮配置数组 |
| `layout` | `string` | `"horizontal"` | `"horizontal"`, `"vertical"` | 布局方向 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 默认按钮尺寸 |
| `color` | `string` | - | - | 默认按钮颜色样式 |
| `icon` | `string` | - | - | 默认按钮图标 |
| `target` | `string` | - | - | 默认链接打开方式 |
| `ariaLabel` | `string` | - | - | 组的无障碍标签 |
## 组件事件 (Emits)
| 事件名 | 回调参数 | 说明 |
| :------- | :-------------------------------------------------- | :------------------------- |
| `@click` | `(event: Event, item: ExternalLink, index: number)` | 当组内任意按钮被点击时触发 |
## 按钮配置项 (ExternalLink)
每一项 `links` 中的对象支持以下配置：
| 属性名 | 类型 | 说明 |
| :---------- | :--------- | :------------------------------------------------------ |
| `label` | `string` | 按钮显示的文本内容 |
| `id` | `string` | (可选) 自定义标识符，方便在事件处理中识别 |
| `link` | `string` | (可选) 点击跳转的链接地址 |
| `type` | `string` | (可选) 预设类型：`download` (充满色), `normal` (色调色) |
| `icon` | `string` | (可选) 覆盖组设置的图标 |
| `color` | `string` | (可选) 覆盖组设置的颜色 |
| `size` | `string` | (可选) 覆盖组设置的尺寸 |
| `target` | `string` | (可选) 覆盖组设置的打开方式 |
| `ariaLabel` | `string` | (可选) 按钮的无障碍标签 |
| `onClick` | `Function` | (可选) 单体独立的点击回调函数 |
## 使用示例
### 1. 基础用法 (水平排列)
```vue
<ButtonGroup
:links="[
{ label: '查看详情', id: 'detail' },
{ label: '下载资源', id: 'download', type: 'download' },
]"
@click="(e, item) => console.log('点击了:', item.id)"
/>
```
<ButtonGroup
:links="[
{ label: '查看详情', id: 'detail' },
{ label: '下载资源', id: 'download', type: 'download' }
]"
@click="(e, item) => console.log('点击了:', item.id)"
/>
### 2. 垂直排列与尺寸控制
```vue
<ButtonGroup
layout="vertical"
size="l"
:links="[
{ label: '选项一', icon: 'settings' },
{ label: '选项二', icon: 'person' },
]"
/>
```
<ButtonGroup
layout="vertical"
size="l"
:links="[
{ label: '选项一', icon: 'settings' },
{ label: '选项二', icon: 'person' }
]"
/>
### 3. 混合图标与文本
```vue
<ButtonGroup
size="m"
:links="[
{ id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
{ id: 'index', label: '1 / 5', color: 'tonal' },
{ id: 'next', icon: 'chevron_right', ariaLabel: '下一页' },
]"
/>
```
<ButtonGroup
size="m"
:links="[
{ id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
{ id: 'index', label: '1 / 5', color: 'tonal' },
{ id: 'next', icon: 'chevron_right', ariaLabel: '下一页' }
]"
/>
### 4. 链接跳转
```vue
<ButtonGroup
target="_blank"
:links="[
{ label: 'GitHub', link: 'https://github.com', icon: 'code' },
{ label: '首页', link: '/', icon: 'home' },
]"
/>
```
<ButtonGroup
target="_blank"
:links="[
{ label: 'GitHub', link: 'https://github.com', icon: 'code' },
{ label: '首页', link: '/', icon: 'home' }
]"
/>

100
posts/markdown-examples.md
View File

@@ -8,7 +8,7 @@ tags:
- markdown 语法
- 示例文章
- 组件示例
date: 2007-08-31T00:00:00Z
date: 2007-08-31T00:00:00+08
---
# 语法高亮
@@ -99,14 +99,14 @@ MaterialButton 组件是一个通用的按钮组件，支持多种样式和功
#### 属性列表
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| ---- | ---- | ---- | ---- | ---- |
| `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"` | 链接打开方式 |
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| -------- | -------- | ---------- | ------------------------------------------------------------------------- | -------------------------- |
| `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"` | 链接打开方式 |
#### 使用示例
@@ -140,34 +140,30 @@ Card 组件用于展示内容卡片，支持多种变体和样式。
#### 属性列表
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| ---- | ---- | ---- | ---- | ---- |
| `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` | 是否可下载 |
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| -------------- | ---------- | ---------- | -------------------------------------- | ------------ |
| `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` | 是否可下载 |
#### 使用示例
```vue
<!-- 基础卡片 -->
<Card
title="文章标题"
description="这是一段文章描述，简要介绍文章内容。"
date="2023-10-01"
/>
<Card title="文章标题" description="这是一段文章描述，简要介绍文章内容。" date="2023-10-01" />
```
```vue
<!-- 带图片卡片 -->
<Card
<Card
title="项目展示"
description="展示一个有趣的项目"
impression="['/assets/images/project1.jpg', '/assets/images/project2.jpg']"
@@ -177,22 +173,12 @@ Card 组件用于展示内容卡片，支持多种变体和样式。
```vue
<!-- 可下载资源卡片 -->
<Card
title="资源下载"
description="包含可下载的文件资源"
downloadable
tags="['资源', '下载']"
category="['教程']"
/>
<Card title="资源下载" description="包含可下载的文件资源" downloadable tags="['资源', '下载']" category="['教程']" />
```
```vue
<!-- 不同样式卡片 -->
<Card
title="轮廓样式"
description="使用轮廓样式的卡片"
color="outlined"
/>
<Card title="轮廓样式" description="使用轮廓样式的卡片" color="outlined" />
```
### ButtonGroup 组件 (ButtonGroup.vue)
@@ -201,19 +187,19 @@ ButtonGroup 组件用于将多个按钮组合在一起，支持水平和垂直
#### 属性列表
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| ---- | ---- | ---- | ---- | ---- |
| `links` | `ExternalLink[]` | `[]` | 链接对象数组 | 按钮链接列表 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 按钮尺寸 |
| `layout` | `string` | `"horizontal"` | `"horizontal"`, `"vertical"` | 布局方向 |
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
| -------- | ---------------- | -------------- | ----------------------------------- | ------------ |
| `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; // 链接地址
type: string; // 链接类型：'download' 或 'normal'
label: string; // 按钮标签文本
link: string; // 链接地址
}
```
@@ -225,7 +211,7 @@ interface ExternalLink {
:links="[
{ type: 'normal', label: '查看文档', link: '/docs' },
{ type: 'download', label: '下载资源', link: '/downloads/file.zip' },
{ type: 'normal', label: 'GitHub', link: 'https://github.com/example' }
{ type: 'normal', label: 'GitHub', link: 'https://github.com/example' },
]"
size="m"
layout="horizontal"
@@ -236,26 +222,16 @@ interface ExternalLink {
:links="[
{ type: 'normal', label: '选项一', link: '/option1' },
{ type: 'normal', label: '选项二', link: '/option2' },
{ type: 'normal', label: '选项三', link: '/option3' }
{ type: 'normal', label: '选项三', link: '/option3' },
]"
size="s"
layout="vertical"
/>
<!-- 不同尺寸按钮组 -->
<ButtonGroup
:links="[
{ type: 'download', label: '小尺寸下载', link: '/download' }
]"
size="xs"
/>
<ButtonGroup :links="[{ type: 'download', label: '小尺寸下载', link: '/download' }]" size="xs" />
<ButtonGroup
:links="[
{ type: 'normal', label: '大尺寸按钮', link: '/large' }
]"
size="xl"
/>
<ButtonGroup :links="[{ type: 'normal', label: '大尺寸按钮', link: '/large' }]" size="xl" />
```
# 更多信息

2
posts/一切开始的地方.md
View File

@@ -5,7 +5,7 @@ color: "#39c5bb"
impression: "/assets/images/132307491_p0.webp"
categories:
tags:
date: 2007-08-31T00:00:00Z
date: 2007-08-31T00:00:00+08
---
这只是一篇示例文章。

144
posts/组件/ButtonGroup.md
View File

@@ -1,144 +0,0 @@
---
title: "Button group"
description: "按钮组组件"
color: "#42b883"
categories:
- 开发文档
tags:
- Vue 3
- 组件
- UI
date: 2026-02-25T21:20:00Z
---
# ButtonGroup 按钮组组件
`ButtonGroup` 是一个用于聚合多个 `MaterialButton` 的容器组件。它支持灵活的布局切换、统一的属性默认值配置以及全局事件委托监听。
## 核心特性
- **布局自适应**：支持水平（Horizontal）和垂直（Vertical）两种排列方式。
- **属性继承与覆盖**：可以在组级别设置默认的尺寸、颜色、图标等，也可以在具体的按钮项中进行个性化覆盖。
- **智能类型识别**：内置了对 `download` 和 `normal` 类型的样式及图标自动匹配逻辑。
- **事件委托**：支持统一监听 `@click` 事件，便捷获取点击的项信息及索引。
## 组件属性 (Props)
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :--- | :--- | :--- | :--- | :--- |
| `links` | `ExternalLink[]` | `[]` | - | 按钮配置数组 |
| `layout` | `string` | `"horizontal"` | `"horizontal"`, `"vertical"` | 布局方向 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 默认按钮尺寸 |
| `color` | `string` | - | - | 默认按钮颜色样式 |
| `icon` | `string` | - | - | 默认按钮图标 |
| `target` | `string` | - | - | 默认链接打开方式 |
| `ariaLabel` | `string` | - | - | 组的无障碍标签 |
## 组件事件 (Emits)
| 事件名 | 回调参数 | 说明 |
| :--- | :--- | :--- |
| `@click` | `(event: Event, item: ExternalLink, index: number)` | 当组内任意按钮被点击时触发 |
## 按钮配置项 (ExternalLink)
每一项 `links` 中的对象支持以下配置：
| 属性名 | 类型 | 说明 |
| :--- | :--- | :--- |
| `label` | `string` | 按钮显示的文本内容 |
| `id` | `string` | (可选) 自定义标识符，方便在事件处理中识别 |
| `link` | `string` | (可选) 点击跳转的链接地址 |
| `type` | `string` | (可选) 预设类型：`download` (充满色), `normal` (色调色) |
| `icon` | `string` | (可选) 覆盖组设置的图标 |
| `color` | `string` | (可选) 覆盖组设置的颜色 |
| `size` | `string` | (可选) 覆盖组设置的尺寸 |
| `target` | `string` | (可选) 覆盖组设置的打开方式 |
| `ariaLabel` | `string` | (可选) 按钮的无障碍标签 |
| `onClick` | `Function` | (可选) 单体独立的点击回调函数 |
## 使用示例
### 1. 基础用法 (水平排列)
```vue
<ButtonGroup
:links="[
{ label: '查看详情', id: 'detail' },
{ label: '下载资源', id: 'download', type: 'download' }
]"
@click="(e, item) => console.log('点击了:', item.id)"
/>
```
<ButtonGroup
:links="[
{ label: '查看详情', id: 'detail' },
{ label: '下载资源', id: 'download', type: 'download' }
]"
@click="(e, item) => console.log('点击了:', item.id)"
/>
### 2. 垂直排列与尺寸控制
```vue
<ButtonGroup
layout="vertical"
size="l"
:links="[
{ label: '选项一', icon: 'settings' },
{ label: '选项二', icon: 'person' }
]"
/>
```
<ButtonGroup
layout="vertical"
size="l"
:links="[
{ label: '选项一', icon: 'settings' },
{ label: '选项二', icon: 'person' }
]"
/>
### 3. 混合图标与文本
```vue
<ButtonGroup
size="m"
:links="[
{ id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
{ id: 'index', label: '1 / 5', color: 'tonal' },
{ id: 'next', icon: 'chevron_right', ariaLabel: '下一页' }
]"
/>
```
<ButtonGroup
size="m"
:links="[
{ id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
{ id: 'index', label: '1 / 5', color: 'tonal' },
{ id: 'next', icon: 'chevron_right', ariaLabel: '下一页' }
]"
/>
### 4. 链接跳转
```vue
<ButtonGroup
target="_blank"
:links="[
{ label: 'GitHub', link: 'https://github.com', icon: 'code' },
{ label: '首页', link: '/', icon: 'home' }
]"
/>
```
<ButtonGroup
target="_blank"
:links="[
{ label: 'GitHub', link: 'https://github.com', icon: 'code' },
{ label: '首页', link: '/', icon: 'home' }
]"
/>

4
posts/设置开机自启动的 Jekyll 服务.md
View File

@@ -3,11 +3,11 @@ title: "设置开机自启动的 Jekyll 服务"
description: "通过 systemd 实现一个开机自启的 Jekyll 服务，通常来说，这对使用 Jekyll 作为服务后端的网站很有用。"
color: "#aa0c2b"
impression: "/assets/images/120678678_p0.webp"
categories:
categories:
- 随笔
tags:
- jekyll
date: 2024-07-11T04:00:00Z
date: 2024-07-11T04:00:00+08
---
::: info