mirror of
https://github.com/handsomezhuzhu/handsomezhuzhu.github.io.git
synced 2026-02-20 20:00:14 +00:00
feat: 初始化博客并完成首篇博文和样式调整
This commit is contained in:
@@ -1,411 +0,0 @@
|
||||
---
|
||||
description: 默认支持流程图，tabs面板，待办列表，作品页面
|
||||
---
|
||||
|
||||
# 内置第三方插件能力
|
||||
|
||||
部分内置组件（插件），来源 [vitepress.yiov.top](https://vitepress.yiov.top/plugin.html) 推荐
|
||||
|
||||
## oml2d - 看板娘集成
|
||||
* Type：[oml2dOptions](https://oml2d.hacxy.cn/api/interfaces/Options.html)
|
||||
|
||||
为网站提供一个 Live2D 看板组件。
|
||||
|
||||
:::tip 一点说明
|
||||
通过内置 [oh-my-live2d](https://oml2d.hacxy.cn) 实现, 可以通过 `oml2d` 选项配置。
|
||||
|
||||
通过这个能力可以快速加入并定制属于自己的看板娘, 开启只需要为其传递一个 [配置选项](https://oml2d.hacxy.cn/options/Options.html) 即可
|
||||
:::
|
||||
|
||||
以下是一个简单的使用示例，当模型加载成功时它将出现在您网站的左下角。
|
||||
|
||||
```ts
|
||||
const blogTheme = getThemeConfig({
|
||||
oml2d: {
|
||||
mobileDisplay: true,
|
||||
models: [
|
||||
{
|
||||
path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
效果图如下
|
||||
|
||||
|
||||
|
||||
之后您还可以前往[配置选项](https://oml2d.hacxy.cn/options/Options.html)查阅更多自定义内容
|
||||
|
||||
:::tip 版本说明
|
||||
由于时间原因，主题内置的版本不一定都是最新的，可以通过 `resolutions` 配置指定要使用的版本。
|
||||
|
||||
下面是使用示例，配置在 `package.json` 中，其它依赖覆盖版本也是这样操作。
|
||||
```json
|
||||
{
|
||||
"resolutions": {
|
||||
"oh-my-live2d": "^0.17.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## task-checkbox
|
||||
* Type: `boolean | TaskCheckbox`
|
||||
|
||||
支持渲染 markdown 任务列表，内置 [markdown-it-task-checkbox](https://github.com/linsir/markdown-it-task-checkbox) 插件提供支持
|
||||
|
||||
* [ ] 🥔 TODO
|
||||
* [ ] 真不戳
|
||||
* [x] 内置任务列表
|
||||
|
||||
语法如下
|
||||
```md
|
||||
* [ ] 🥔 TODO
|
||||
* [ ] 真不戳
|
||||
* [x] 内置任务列表
|
||||
```
|
||||
|
||||
默认开启，你可以进一步配置
|
||||
|
||||
:::code-group
|
||||
```ts [① 关闭]
|
||||
const blogTheme = getThemeConfig({
|
||||
taskCheckbox: false
|
||||
})
|
||||
```
|
||||
```ts [② 进一步配置]
|
||||
const blogTheme = getThemeConfig({
|
||||
taskCheckbox: {
|
||||
// refer https://github.com/linsir/markdown-it-task-checkbox for options
|
||||
}
|
||||
})
|
||||
```
|
||||
```ts [③ type]
|
||||
interface TaskCheckbox {
|
||||
disabled?: boolean
|
||||
divWrap?: boolean
|
||||
divClass?: string
|
||||
idPrefix?: string
|
||||
ulClass?: string
|
||||
liClass?: string
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## timeline
|
||||
* Type: `boolean`
|
||||
* default: `true`
|
||||
|
||||
提供 markdown 时间线语法，在 vitepress 中使用 markdown 渲染时间线（时间轴）样式。
|
||||
|
||||
:::tip 一点说明
|
||||
内置 [vitepress-markdown-timeline](https://github.com/HanochMa/vitepress-markdown-timeline) 实现
|
||||
:::
|
||||
|
||||
效果如下
|
||||
|
||||
::: timeline 2023-05-24
|
||||
- **do some thing1**
|
||||
- do some thing2
|
||||
:::
|
||||
|
||||
::: timeline 2023-05-23
|
||||
do some thing3
|
||||
do some thing4
|
||||
:::
|
||||
|
||||
语法如下
|
||||
```md
|
||||
::: timeline 2023-05-24
|
||||
- **do some thing1**
|
||||
- do some thing2
|
||||
:::
|
||||
|
||||
::: timeline 2023-05-23
|
||||
do some thing3
|
||||
do some thing4
|
||||
:::
|
||||
```
|
||||
|
||||
:::code-group
|
||||
```ts [关闭]
|
||||
const blogTheme = getThemeConfig({
|
||||
timeline: false
|
||||
})
|
||||
```
|
||||
:::
|
||||
## tabs
|
||||
* Type: `boolean`
|
||||
|
||||
支持局部的`tabs`面板，**默认开启**
|
||||
|
||||
:::details 我之前手动安装配置了怎么办？
|
||||
① package.json 中移除 vitepress-plugin-tabs 依赖
|
||||
|
||||
② .vitepress/theme/index.ts 中移除注册的组件`enhanceAppWithTabs`
|
||||
|
||||
③ （可选）`getThemeConfig` 中移除配置项`tabs`
|
||||
:::
|
||||
:::tip 一点说明
|
||||
基于 [vitepress-plugin-tabs@0.2.0](https://www.npmjs.com/package/vitepress-plugin-tabs) 内置实现
|
||||
:::
|
||||
|
||||
效果如下
|
||||
|
||||
:::=tabs
|
||||
::tab1
|
||||
一些内容
|
||||
|
||||
一些内容
|
||||
|
||||
一些内容
|
||||
|
||||
::tab2
|
||||
一些内容 。。。
|
||||
:::
|
||||
|
||||
简单的使用方式如下（效果如上面的示例）
|
||||
|
||||
```md
|
||||
:::=tabs
|
||||
::tab1
|
||||
一些内容
|
||||
|
||||
一些内容
|
||||
|
||||
一些内容
|
||||
|
||||
::tab2
|
||||
一些内容 。。。
|
||||
:::
|
||||
```
|
||||
|
||||
共享状态的使用方式如下
|
||||
|
||||
```md
|
||||
:::=tabs=ab
|
||||
::a
|
||||
a content
|
||||
|
||||
::b
|
||||
b content
|
||||
:::
|
||||
|
||||
:::=tabs=ab
|
||||
::a
|
||||
a content 2
|
||||
|
||||
::b
|
||||
b content 2
|
||||
:::
|
||||
```
|
||||
|
||||
|
||||
:::=tabs=ab
|
||||
::a
|
||||
a content
|
||||
|
||||
::b
|
||||
b content
|
||||
:::
|
||||
|
||||
:::=tabs=ab
|
||||
::a
|
||||
a content 2
|
||||
|
||||
::b
|
||||
b content 2
|
||||
:::
|
||||
|
||||
不需要也可以关闭
|
||||
|
||||
```ts
|
||||
// .vitepress/blog-theme.ts
|
||||
const blogTheme = getThemeConfig({
|
||||
tabs: false
|
||||
})
|
||||
```
|
||||
|
||||
## Mermaid - 图表
|
||||
* Type: `boolean`|`object`
|
||||
|
||||
>通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
|
||||
|
||||
:::tip 一点说明
|
||||
基于 [vitepress-plugin-mermaid](https://github.com/emersonbottero/vitepress-plugin-mermaid) 实现
|
||||
:::
|
||||
|
||||
简单语法如下，详细流程图语法见 [Mermaid 中文文档](https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md)
|
||||
|
||||
<pre>
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start --> Stop
|
||||
```
|
||||
</pre>
|
||||
|
||||
|
||||
效果如下
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start --> Stop
|
||||
```
|
||||
|
||||
**默认关闭**，可以通过设置 `mermaid: true` 开启，或进行进一步配置。
|
||||
|
||||
:::code-group
|
||||
```ts [① 开启]
|
||||
const blogTheme = getThemeConfig({
|
||||
mermaid: true
|
||||
})
|
||||
```
|
||||
```ts [② 进一步配置]
|
||||
const blogTheme = getThemeConfig({
|
||||
mermaid: {
|
||||
// refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
|
||||
}
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
下面看一下官方其它案例
|
||||
|
||||
**时序图**
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
**甘特图**
|
||||
```mermaid
|
||||
gantt
|
||||
section Section
|
||||
Completed :done, des1, 2014-01-06,2014-01-08
|
||||
Active :active, des2, 2014-01-07, 3d
|
||||
Parallel 1 : des3, after des1, 1d
|
||||
Parallel 2 : des4, after des1, 1d
|
||||
Parallel 3 : des5, after des3, 1d
|
||||
Parallel 4 : des6, after des4, 1d
|
||||
```
|
||||
|
||||
|
||||
## UserWorksPage
|
||||
* Type: `UserWorks`
|
||||
|
||||
用于作品列表展示
|
||||
|
||||
效果如下，详见 [个人作品展示](https://theme.sugarat.top/work.html)
|
||||
|
||||
|
||||
|
||||
新建一个`works.md`文件，放入以下内容
|
||||
|
||||
```md
|
||||
---
|
||||
layout: page
|
||||
title: 个人作品展示
|
||||
sidebar: false
|
||||
outline: [2,3]
|
||||
sticky: 1
|
||||
---
|
||||
<UserWorksPage />
|
||||
```
|
||||
|
||||
内容配置方式如下
|
||||
|
||||
::: code-group
|
||||
|
||||
```ts [default]
|
||||
const blogTheme = getThemeConfig({
|
||||
works: {
|
||||
title: '个人项目/线上作品',
|
||||
description: '记录开发的点点滴滴',
|
||||
topTitle: '举些🌰',
|
||||
list: [
|
||||
{
|
||||
title: '博客主题 @sugarat/theme',
|
||||
description: '基于 vitepress 实现的博客主题',
|
||||
time: {
|
||||
start: '2023/01/29'
|
||||
},
|
||||
github: {
|
||||
owner: 'ATQQ',
|
||||
repo: 'sugar-blog',
|
||||
branch: 'master',
|
||||
path: 'packages/theme'
|
||||
},
|
||||
status: {
|
||||
text: '自定义badge'
|
||||
},
|
||||
url: 'https://theme.sugarat.top',
|
||||
cover:
|
||||
'https://img.cdn.sugarat.top/mdImg/MTY3MzE3MDUxOTMwMw==673170519303',
|
||||
tags: ['Vitepress', 'Vue'],
|
||||
links: [
|
||||
{
|
||||
title: '一个简约风的VitePress博客主题',
|
||||
url: 'https://juejin.cn/post/7196517835380293693'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```ts [type]
|
||||
interface UserWorks {
|
||||
title: string
|
||||
description?: string
|
||||
topTitle?: string
|
||||
list: UserWork[]
|
||||
}
|
||||
interface UserWork {
|
||||
title: string
|
||||
description: string
|
||||
time:
|
||||
| string
|
||||
| {
|
||||
start: string
|
||||
end?: string
|
||||
lastupdate?: string
|
||||
}
|
||||
status?: {
|
||||
text: string
|
||||
type?: 'tip' | 'warning' | 'danger'
|
||||
}
|
||||
url?: string
|
||||
github?:
|
||||
| string
|
||||
| {
|
||||
owner: string
|
||||
repo: string
|
||||
branch?: string
|
||||
path?: string
|
||||
}
|
||||
cover?:
|
||||
| string
|
||||
| string[]
|
||||
| {
|
||||
urls: string[]
|
||||
layout?: 'swiper' | 'list'
|
||||
}
|
||||
links?: {
|
||||
title: string
|
||||
url: string
|
||||
}[]
|
||||
tags?: string[]
|
||||
top?: number
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
75
docs/sop/how-to-use-cherry-studio.md
Normal file
75
docs/sop/how-to-use-cherry-studio.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
sticky: 1
|
||||
description: 如何使用 Cherry Studio
|
||||
descriptionHTML: '
|
||||
<span style="color:var(--description-font-color);">学习如何有效使用Cherry Studio的入门指南</span>
|
||||
'
|
||||
tag:
|
||||
- Cherry Studio
|
||||
- 教程
|
||||
top: 1
|
||||
sidebar: false
|
||||
---
|
||||
|
||||
# 如何使用 Cherry Studio
|
||||
|
||||
本指南将向您介绍如何开始使用 Cherry Studio。
|
||||
|
||||
## 什么是 Cherry Studio？
|
||||
|
||||
CherryStudio 是一个功能强大的 AI 聚合工具，它集成了多模型对话、知识库管理、AI 绘画等多种功能。由于所有内容都存储在本地，因此它提供了出色的隐私保护。使用 CherryStudio 的主要目的是提升您的工作效率。
|
||||
|
||||
## 下载与安装
|
||||
|
||||
1. **下载**:
|
||||
访问 [CherryStudio 官网](https://cherry-ai.com/download) 下载适用于您操作系统的客户端。
|
||||
|
||||
2. **安装**:
|
||||
双击下载的 `.exe` 文件，然后按照安装向导的指示进行操作。建议您将软件安装在C盘以外的驱动器。
|
||||
|
||||
## 核心功能
|
||||
|
||||
CherryStudio 提供了多种强大的功能，以下是一些核心功能介绍：
|
||||
|
||||
### 添加模型
|
||||
|
||||
|
||||
|
||||
您可以在 CherryStudio 中添加和管理来自不同提供商的 AI 模型，支持 API 调用和本地调用两种方式。
|
||||
|
||||
#### API 调用
|
||||
|
||||
1. 在模型服务提供商（例如，硅基流动）的网站上注册账户并创建一个 API 密钥。
|
||||
2. 在 CherryStudio 的设置中，选择“模型服务”，然后添加您的 API 密钥。
|
||||
3. 添加成功后，您可以选择相应的模型进行对话。
|
||||
|
||||
#### 本地调用
|
||||
|
||||
1. 如果您在本地部署了模型（例如，使用 Ollama），您也可以将其添加到 CherryStudio。
|
||||
2. 在模型服务设置中，选择本地调用，并填写正确的 API 地址（通常是 `localhost`）和模型名称。
|
||||
|
||||
### 联网功能
|
||||
|
||||
为了让模型能够获取最新信息，您可以为其启用联网功能。
|
||||
|
||||
1. **添加网络搜索服务**: 在设置中选择“网络搜索”，然后添加一个搜索服务（如 Tavily）。您需要获取该服务的 API 密钥并填入。
|
||||
2. **使用网络搜索**: 在聊天界面，点击输入框下方的网络图标（🌐）即可启用联网功能。
|
||||
|
||||
### 知识库
|
||||
|
||||
CherryStudio 允许您创建自己的本地知识库，让 AI 根据您的文档回答问题。
|
||||
|
||||
1. **创建知识库**: 在侧边栏选择“知识库”并创建一个新的知识库。
|
||||
2. **添加文档**: 将您的文档（请确保为 UTF-8 编码）拖入知识库中，系统会自动进行向量化处理。
|
||||
3. **使用知识库**: 在聊天时，您可以选择加载特定的知识库，AI 将会基于库中的内容进行回答，并能标注引用来源。
|
||||
|
||||
### 配置迁移
|
||||
|
||||
如果您需要在多台设备上使用 CherryStudio，可以使用配置迁移功能来同步您的设置。
|
||||
|
||||
1. **备份**: 在“数据设置”中，您可以将当前的所有配置（包括模型、知识库等）备份为一个 ZIP 文件。
|
||||
2. **恢复**: 在另一台设备上，通过“恢复”功能选择之前备份的 ZIP 文件，即可快速恢复您的所有配置。
|
||||
|
||||
---
|
||||
|
||||
希望本指南对您有所帮助！
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
top: 3
|
||||
---
|
||||
# 更多能力
|
||||
|
||||
主题还提供了许多开箱即用的能力，详见文档 https://theme.sugarat.top
|
||||
|
||||
* [主题配置：首页&文章](https://theme.sugarat.top/config/frontmatter.html) - 主题提供的一些 `frontmatter`
|
||||
* [主题配置：全局](https://theme.sugarat.top/config/global.html) - 主题提供的额外能力
|
||||
* [主题配置：样式](https://theme.sugarat.top/config/style.html) - 自定义博客样式介绍
|
||||
* [主题配置：组件能力](https://theme.sugarat.top/config/component.html) - 自定义博客样式介绍
|
||||
@@ -1,181 +0,0 @@
|
||||
---
|
||||
sticky: 999
|
||||
description: 1分钟内完成自己的博客创建
|
||||
descriptionHTML: '
|
||||
<span style="color:var(--description-font-color);">1分钟内完成自己的博客创建</span>
|
||||
<pre style="background-color: #292b30; padding: 15px; border-radius: 10px;" class="shiki material-theme-palenight"><code>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@sugarat/theme@latest</span></span>
|
||||
<br/>
|
||||
<br/>
|
||||
<span class="line"><span style="color:#B392F0;">bun create</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">@sugarat/theme</span><span style="color:#E1E4E8;"> </span></span>
|
||||
</code>
|
||||
</pre>'
|
||||
tag:
|
||||
- SOP
|
||||
top: 1
|
||||
sidebar: false
|
||||
---
|
||||
|
||||
# 快速上手
|
||||
1分钟内完成自己的博客创建
|
||||
|
||||
:::warning 注意事项
|
||||
使用 [pnpm](https://pnpm.io)，[yarn](https://www.npmjs.com/package/yarn)，[bun](https://bun.sh/) ，需要单独安装
|
||||
|
||||
**如果喜欢尝鲜，想体验更快的启动和构建速度，推荐使用 bun**（<i style="color:red">windows 用户不建议使用 bun</i>）
|
||||
|
||||
其它情况推荐使用 pnpm，*不推荐使用 yarn*
|
||||
|
||||
:::code-group
|
||||
|
||||
```sh [安装 PNPM]
|
||||
npm install -g pnpm
|
||||
```
|
||||
```sh [安装 bun]
|
||||
npm install -g bun
|
||||
```
|
||||
:::
|
||||
|
||||
## 快速创建项目
|
||||
使用 [@sugarat/create-theme](https://github.com/ATQQ/sugar-blog/tree/master/packages/create-theme) 快速创建模板项目
|
||||
|
||||
:::code-group
|
||||
```sh [npm]
|
||||
npm create @sugarat/theme@latest
|
||||
```
|
||||
```sh [yarn]
|
||||
yarn create @sugarat/theme
|
||||
```
|
||||
```sh [pnpm]
|
||||
pnpm create @sugarat/theme
|
||||
```
|
||||
```sh [bun]
|
||||
bun create @sugarat/theme
|
||||
```
|
||||
:::
|
||||
|
||||
:::details bun创建的项目不一样之处
|
||||
① 会多出一个配置文件 `bunfig.toml`，默认配置了淘宝镜像源
|
||||
|
||||
② 安装依赖后对应lock文件 `bun.lockb`
|
||||
|
||||
③ 运行命令需添加一个 `--bun` 参数，不加就是Node运行，体验不到快速(未来官方会做优化)
|
||||
:::
|
||||
|
||||
当然你也可以自定义项目名创建
|
||||
:::code-group
|
||||
```sh [npm]
|
||||
npm create @sugarat/theme@latest my-first-blog
|
||||
```
|
||||
```sh [yarn]
|
||||
yarn create @sugarat/theme my-first-blog
|
||||
```
|
||||
```sh [pnpm]
|
||||
pnpm create @sugarat/theme my-first-blog
|
||||
```
|
||||
```sh [bun]
|
||||
bun create @sugarat/theme my-first-blog
|
||||
```
|
||||
:::
|
||||
|
||||
接下来按照 [操作指引](https://app.warp.dev/block/lZAFeRnRFgOcsRSUOU5ApV) 进行操作即可
|
||||
|
||||
| npm/yarn/pnpm | bun |
|
||||
| :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
|
||||
|  |  |
|
||||
|
||||
|
||||
① 切换到项目的目录
|
||||
```sh
|
||||
cd my-blog
|
||||
```
|
||||
|
||||
② 安装依赖
|
||||
::: code-group
|
||||
|
||||
```sh [pnpm]
|
||||
pnpm install
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
bun install
|
||||
```
|
||||
:::
|
||||
|
||||
③ 开发启动
|
||||
:::code-group
|
||||
```sh [pnpm]
|
||||
pnpm dev
|
||||
```
|
||||
```sh [bun]
|
||||
bun run --bun dev
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
你就会得到一个这样的页面
|
||||
|
||||
|
||||
|
||||
④ 构建产物
|
||||
:::code-group
|
||||
```sh [pnpm]
|
||||
pnpm build
|
||||
```
|
||||
```sh [bun]
|
||||
bun run --bun build
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
默认会开启内置的离线全文搜索（基于 `pagefind` 实现）
|
||||
|
||||
如果不需要可以在 `docs/.vitepress/blog-theme.ts` 中关闭
|
||||
* 如果`npx pagefind` 时间过长，可以手动将其安装为项目依赖 `pnpm add pagefind`
|
||||
```ts
|
||||
const blogTheme = getThemeConfig({
|
||||
// 默认开启pagefind离线的全文搜索支持（如使用其它的可以设置为false）
|
||||
// 如果npx pagefind 时间过长，可以手动将其安装为项目依赖 pnpm add pagefind
|
||||
search: false,
|
||||
})
|
||||
```
|
||||
|
||||
⑤ 预览构建产物
|
||||
|
||||
:::code-group
|
||||
```sh [pnpm]
|
||||
pnpm serve
|
||||
```
|
||||
```sh [bun]
|
||||
bun run --bun serve
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
## 升级
|
||||
|
||||
如果主题更新了，升级主题，原项目只需执行如下指令即可
|
||||
:::code-group
|
||||
```sh [pnpm]
|
||||
pnpm add @sugarat/theme@latest
|
||||
|
||||
# 更新 vitepress 版本（通常安装最新的即可，主题包每次更新不出意外都会使用最新的VitePress）
|
||||
pnpm add vitepress@latest
|
||||
```
|
||||
```sh [bun]
|
||||
bun update @sugarat/theme
|
||||
|
||||
# 更新 vitepress 版本（通常安装最新的即可，主题包每次更新不出意外都会使用最新的VitePress）
|
||||
bun install vitepress@latest
|
||||
```
|
||||
:::
|
||||
|
||||
## 更多
|
||||
* [主题配置：首页&文章](https://theme.sugarat.top/config/frontmatter.html) - 主题提供的一些 `frontmatter`
|
||||
* [主题配置：全局](https://theme.sugarat.top/config/global.html) - 主题提供的额外能力
|
||||
* [主题配置：样式](https://theme.sugarat.top/config/style.html) - 自定义博客样式介绍
|
||||
* [主题配置：组件能力](https://theme.sugarat.top/config/component.html) - 自定义博客样式介绍
|
||||
@@ -1,138 +0,0 @@
|
||||
---
|
||||
description: 介绍一下自定义主题的部分样式
|
||||
title: 🔧 主题样式定制
|
||||
readingTime: false
|
||||
tag:
|
||||
- 配置
|
||||
recommend: 3
|
||||
---
|
||||
|
||||
# 样式配置
|
||||
样式自定义，参考[官方文档思路](https://vitepress.dev/guide/extending-default-theme#customizing-css)
|
||||
|
||||
在 `.vitepress/theme/index.ts` 中引入自定义的样式文件，覆盖默认主题样式即可
|
||||
|
||||
例如:
|
||||
|
||||
博客模板里，提供了一个如下例子
|
||||
|
||||
```ts
|
||||
// .vitepress/theme/index.ts
|
||||
import BlogTheme from '@sugarat/theme'
|
||||
|
||||
// 自定义样式重载 // [!code focus]
|
||||
import './style.scss' // [!code focus]
|
||||
|
||||
export default BlogTheme
|
||||
```
|
||||
|
||||
里面有如下内容
|
||||
```scss
|
||||
.VPHome {
|
||||
// 自定义首页背景图
|
||||
&::before {
|
||||
// 图片来源：https://zhuanlan.zhihu.com/p/54060187
|
||||
background-image: url(./assets/bg.webp);
|
||||
background-size: cover;
|
||||
}
|
||||
// 定义遮罩样式
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
rgba(var(--bg-gradient-home), 1) 0%,
|
||||
rgba(var(--bg-gradient-home), 0) 150%
|
||||
);
|
||||
}
|
||||
```
|
||||
解除文件`index.ts` 中`import './style.scss'` 注释后，就能看到模板首页背景图发生了变化
|
||||
|
||||
|
||||
|
||||
## 首页背景
|
||||
```scss
|
||||
.VPHome {// [!code focus]
|
||||
&::before {// [!code focus]
|
||||
background-image: url(./assets/bg.webp); // [!code focus]
|
||||
background-size: cover; // [!code focus]
|
||||
} // [!code focus]
|
||||
} // [!code focus]
|
||||
|
||||
.VPHome {
|
||||
// 定义遮罩样式，控制图片展示的程度
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
rgba(var(--bg-gradient-home), 1) 0%,
|
||||
rgba(var(--bg-gradient-home), 0) 150%
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 置顶样式
|
||||
可以自行修改置顶icon的样式
|
||||
```scss
|
||||
.blog-item .pin.pin::before {
|
||||
// 修改颜色
|
||||
background-image: linear-gradient(red, red);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
```scss
|
||||
// 隐藏置顶的icon
|
||||
.blog-item .pin.pin::before {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 主题色
|
||||
vitepress 最新的默认主题色偏紫色，看着感觉有点不习惯
|
||||
|
||||
|
||||
|
||||
主题包内置了一些主题色，可以自行选择，详见[全局配置:themeColor](https://theme.sugarat.top/config/global.html#themecolor)
|
||||
|
||||
如果内置的不满足要求，也可以进行自定义，自定义的方式是通过覆盖变量的方式
|
||||
|
||||
例如可以创建`user-theme.css`文件，内容如下
|
||||
```css
|
||||
/* 所有变量：https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
|
||||
/* 自定义主题色示例，如下 */
|
||||
|
||||
/* 浅色模式使用的变量 */
|
||||
html[theme] {
|
||||
--vp-c-user-1:red;
|
||||
--vp-c-user-2:blue;
|
||||
--vp-c-user-3:green;
|
||||
--vp-c-user-soft:rgba(255,0,0,.5);
|
||||
}
|
||||
|
||||
/* 深色模式使用的变量 */
|
||||
html[theme].dark {
|
||||
--vp-c-user-1:yellow;
|
||||
--vp-c-user-2:purple;
|
||||
--vp-c-user-3:orange;
|
||||
--vp-c-user-soft:rgba(255,255,0,.5);
|
||||
}
|
||||
|
||||
/* 覆盖默认变量 */
|
||||
html[theme],html[theme].dark {
|
||||
--vp-c-brand-1: var(--vp-c-user-1);
|
||||
--vp-c-brand-2: var(--vp-c-user-2);
|
||||
--vp-c-brand-3: var(--vp-c-user-3);
|
||||
--vp-c-brand-soft: var(--vp-c-user-soft);
|
||||
}
|
||||
```
|
||||
将其引入到`.vitepress/theme/index.ts`中即可
|
||||
|
||||
```ts
|
||||
import BlogTheme from '@sugarat/theme'
|
||||
|
||||
// 导入自定义主题色 // [!code focus]
|
||||
import './user-theme.css' // [!code focus]
|
||||
|
||||
export default BlogTheme
|
||||
```
|
||||
|
||||
## More
|
||||
... wait a moment
|
||||
Reference in New Issue
Block a user