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:
@@ -28,78 +28,71 @@ const blogTheme = getThemeConfig({
|
||||
// mermaid: false
|
||||
|
||||
// 页脚
|
||||
footer: {
|
||||
// message 字段支持配置为HTML内容，配置多条可以配置为数组
|
||||
// message: '下面 的内容和图标都是可以修改的噢（当然本条内容也是可以隐藏的）',
|
||||
copyright: 'MIT License | 粥里有勺糖',
|
||||
// icpRecord: {
|
||||
// name: '蜀ICP备19011724号',
|
||||
// link: 'https://beian.miit.gov.cn/'
|
||||
// },
|
||||
// securityRecord: {
|
||||
// name: '公网安备xxxxx',
|
||||
// link: 'https://www.beian.gov.cn/portal/index.do'
|
||||
// },
|
||||
},
|
||||
// footer: {
|
||||
// // message 字段支持配置为HTML内容，配置多条可以配置为数组
|
||||
// // message: '下面 的内容和图标都是可以修改的噢（当然本条内容也是可以隐藏的）',
|
||||
// copyright: 'MIT License | SIMON',
|
||||
// // icpRecord: {
|
||||
// // name: '蜀ICP备19011724号',
|
||||
// // link: 'https://beian.miit.gov.cn/'
|
||||
// // },
|
||||
// // securityRecord: {
|
||||
// // name: '公网安备xxxxx',
|
||||
// // link: 'https://www.beian.gov.cn/portal/index.do'
|
||||
// // },
|
||||
// },
|
||||
|
||||
// 主题色修改
|
||||
themeColor: 'el-blue',
|
||||
|
||||
// 文章默认作者
|
||||
author: '粥里有勺糖',
|
||||
author: 'SIMON',
|
||||
|
||||
// 友链
|
||||
friend: [
|
||||
{
|
||||
nickname: '粥里有勺糖',
|
||||
des: '你的指尖用于改变世界的力量',
|
||||
nickname: 'LINUX DO',
|
||||
des: '真诚、友善、团结、专业，共建你我引以为荣之社区。',
|
||||
avatar:
|
||||
'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTE2NzAzMA==674995167030',
|
||||
url: 'https://sugarat.top',
|
||||
},
|
||||
{
|
||||
nickname: 'Vitepress',
|
||||
des: 'Vite & Vue Powered Static Site Generator',
|
||||
avatar:
|
||||
'https://vitepress.dev/vitepress-logo-large.webp',
|
||||
url: 'https://vitepress.dev/',
|
||||
'https://linux.do/uploads/default/original/4X/c/c/d/ccd8c210609d498cbeb3d5201d4c259348447562.png',
|
||||
url: 'https://linux.do/',
|
||||
},
|
||||
],
|
||||
|
||||
// 公告
|
||||
popover: {
|
||||
title: '公告',
|
||||
body: [
|
||||
{ type: 'text', content: '👇公众号👇---👇 微信 👇' },
|
||||
{
|
||||
type: 'image',
|
||||
src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210~fmt.webp'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
content: '欢迎大家加群&私信交流'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
content: '文章首/文尾有群二维码',
|
||||
style: 'padding-top:0'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
content: '作者博客',
|
||||
link: 'https://sugarat.top'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
content: '加群交流',
|
||||
props: {
|
||||
type: 'success'
|
||||
},
|
||||
link: 'https://theme.sugarat.top/group.html',
|
||||
}
|
||||
],
|
||||
duration: 0
|
||||
},
|
||||
// popover: {
|
||||
// title: '公告',
|
||||
// body: [
|
||||
// { type: 'text', content: '👇公众号👇---👇 微信 👇' },
|
||||
// {
|
||||
// type: 'image',
|
||||
// src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210~fmt.webp'
|
||||
// },
|
||||
// {
|
||||
// type: 'text',
|
||||
// content: '欢迎大家加群&私信交流'
|
||||
// },
|
||||
// {
|
||||
// type: 'text',
|
||||
// content: '文章首/文尾有群二维码',
|
||||
// style: 'padding-top:0'
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// content: '作者博客',
|
||||
// link: 'https://sugarat.top'
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// content: '加群交流',
|
||||
// props: {
|
||||
// type: 'success'
|
||||
// },
|
||||
// link: 'https://theme.sugarat.top/group.html',
|
||||
// }
|
||||
// ],
|
||||
// duration: 0
|
||||
//},
|
||||
})
|
||||
|
||||
export { blogTheme }
|
||||
|
||||
@@ -17,8 +17,8 @@ export default defineConfig({
|
||||
extends: blogTheme,
|
||||
// base,
|
||||
lang: 'zh-cn',
|
||||
title: '@sugarat/theme',
|
||||
description: '粥里有勺糖的博客主题，基于 vitepress 实现',
|
||||
title: 'SIMON BLOG',
|
||||
description: 'Simon的博客，基于 vitepress 实现',
|
||||
lastUpdated: true,
|
||||
// 详见：https://vitepress.dev/zh/reference/site-config#head
|
||||
head: [
|
||||
@@ -46,12 +46,13 @@ export default defineConfig({
|
||||
// },
|
||||
nav: [
|
||||
{ text: '首页', link: '/' },
|
||||
{ text: '关于作者', link: 'https://sugarat.top/aboutme.html' }
|
||||
{ text: '主题仓库', link: 'https://github.com/ATQQ/sugar-blog/tree/master/packages/theme' },
|
||||
{ text: '关于作者', link: 'https://github.com/handsomezhuzhu' }
|
||||
],
|
||||
socialLinks: [
|
||||
{
|
||||
icon: 'github',
|
||||
link: 'https://github.com/ATQQ/sugar-blog/tree/master/packages/theme'
|
||||
link: 'https://github.com/handsomezhuzhu'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
|
||||
import BlogTheme from '@sugarat/theme'
|
||||
|
||||
// 自定义样式重载
|
||||
// import './style.scss'
|
||||
import './style.scss'
|
||||
|
||||
// 自定义主题色
|
||||
// import './user-theme.css'
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
.VPHome {
|
||||
// 定义遮罩样式
|
||||
background: radial-gradient(ellipse,
|
||||
rgba(var(--bg-gradient-home), 1) 0%,
|
||||
rgba(var(--bg-gradient-home), 0) 150%);
|
||||
rgba(var(--bg-gradient-home), 0.53) 0%,
|
||||
rgba(var(--bg-gradient-home), 0) 2000%);
|
||||
|
||||
// 自定义首页背景图
|
||||
&::before {
|
||||
// 图片来源：https://zhuanlan.zhihu.com/p/54060187
|
||||
background-image: url(./assets/bg.webp);
|
||||
background-size: cover;
|
||||
// 默认是暗色模式的背景
|
||||
background-image: url(/bg.webp);
|
||||
}
|
||||
}
|
||||
|
||||
// 亮色模式下切换背景
|
||||
html:not(.dark) .VPHome::before {
|
||||
background-image: url(/bgw.jpg);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
---
|
||||
sticky: 1
|
||||
---
|
||||
# 关于主题
|
||||
|
||||
简约风的 Vitepress 博客主题，基于 [vitepress](https://vitepress.dev/) 的自定义主题实现
|
||||
|
||||
|
||||
|
||||
更多细节见 https://theme.sugarat.top
|
||||
|
||||
## 已支持功能
|
||||
介绍一下主要的，非所有
|
||||
|
||||
* 博客首页
|
||||
* 文章列表
|
||||
* 精选文章
|
||||
* 友链
|
||||
* 标签分类
|
||||
* 图片预览
|
||||
* 搜索（基于[pagefind](https://github.com/cloudcannon/pagefind)支持离线全文搜索）
|
||||
* [giscus](https://giscus.app/zh-CN)驱动的评论系统
|
||||
* 推荐文章（类似文章目录）
|
||||
* 阅读时间计算
|
||||
* 全局的提示弹窗 (由 el-alert 驱动)
|
||||
* 全局的公告弹窗，支持设置图片，文字，按钮
|
||||
* 作品聚合页（为个人作品提供一个展示）
|
||||
* tabs（[vitepress-plugin-tabs](https://vitepress-plugins.sapphi.red/tabs/)）
|
||||
* 流程图（[vitepress-plugin-mermaid](https://github.com/emersonbottero/vitepress-plugin-mermaid#readme)）
|
||||
* RSS
|
||||
* 主题色统一
|
||||
* 更多可定制的主题样式
|
||||
|
||||
## 规划中功能
|
||||
* Valine 评论系统
|
||||
* 文章合集（类似于聚合一个内容专题）
|
||||
* 文章时间线页面支持
|
||||
* 背景图自动更换
|
||||
* 首屏铺满slogan，参考reco
|
||||
|
||||
## 参考项目
|
||||
或多或少借鉴&使用了如下的一下开源项目，博客，网站的能力或者UI样式
|
||||
|
||||
* [reco](https://vuepress-theme-reco.recoluan.com/)
|
||||
* [掘金](https://juejin.cn/)
|
||||
* [surmon](https://surmon.me/)
|
||||
* [@vue/theme](https://github.com/vuejs/theme)
|
||||
* [vitest](https://vitest.dev/)
|
||||
* [element-plus](https://element-plus.gitee.io/zh-CN/)
|
||||
* [charles7c.github.io](https://github.com/Charles7c/charles7c.github.io)
|
||||
* [vitepress-blog-zaun](https://github.com/clark-cui/vitepress-blog-zaun)
|
||||
* [vuejs/blog](https://github.com/vuejs/blog/tree/main)
|
||||
* [列表无限滚动轮播效果](https://code.juejin.cn/pen/7145007064350195748)
|
||||
|
||||
## 主题相关资源
|
||||
* 主题地址：https://theme.sugarat.top/
|
||||
* 主题包：[@sugarat/theme](https://www.npmjs.com/package/@sugarat/theme)
|
||||
* 项目地址：https://github.com/ATQQ/sugar-blog/tree/master/packages/theme
|
||||
* 作者博客地址：https://sugarat.top
|
||||
|
||||
|
||||
## 最后
|
||||
如果你有建议的 功能&想法 欢迎 私信&评论区 交流
|
||||
|
||||
如果你觉得主题不错，欢迎分享与使用，可以在评论区留下你的网站地址
|
||||
|
||||
笔者后续会单独开个板块展示大家优秀的博客，感谢大家的支持
|
||||
@@ -2,15 +2,22 @@
|
||||
layout: home
|
||||
# 首页部分元素定制
|
||||
blog:
|
||||
name: '@sugarat/theme'
|
||||
motto: 简约风的 Vitepress 博客主题
|
||||
name: 'SIMON BLOG'
|
||||
minScreenAvatar: true
|
||||
# motto: 简约风的 Vitepress 博客主题
|
||||
inspiring:
|
||||
- 基于 Vitepress 定制的主题🎨
|
||||
- 千万不要因为走得太久，而忘记了我们为什么出发
|
||||
- 人生就像一场修行，你不可能一开始就修成正果
|
||||
- 无论多么沉重的负担，也不要忘记微笑；无论多么漫长的路程，也不要忘记坚持
|
||||
- 生活的真谛不在繁华，而在于淡泊
|
||||
- 同是天涯沦落人，相逢何必曾相识
|
||||
- 一道残阳铺水中，半江瑟瑟半江红
|
||||
- 落霞与孤鹜齐飞，秋水共长天一色
|
||||
- 一道残阳铺水中，半江瑟瑟半江红
|
||||
- 日暮酒醒人已远，满天风雨下西楼
|
||||
- 最爱芦花经雨后，一蓬烟火饭鱼船
|
||||
- 人间四月芳菲尽，山寺桃花始盛开
|
||||
- 乱花渐欲迷人眼，浅草才能没马蹄
|
||||
- 劝君更尽一杯酒，西出阳关无故人
|
||||
- 月落乌啼霜满天，江枫渔火对愁眠
|
||||
|
||||
# 设置 inspiringTimeout 可以实现自动切换
|
||||
inspiringTimeout: 3000
|
||||
pageSize: 6
|
||||
pageSize: 10
|
||||
---
|
||||
BIN
docs/public/bg.webp
Normal file
BIN
docs/public/bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1021 KiB |
BIN
docs/public/bgw.jpg
Normal file
BIN
docs/public/bgw.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 98 KiB |
BIN
docs/public/logo.jpg
Normal file
BIN
docs/public/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 714 KiB |
BIN
docs/public/添加模型.png
Normal file
BIN
docs/public/添加模型.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
@@ -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