mirror of
https://github.com/handsomezhuzhu/handsomezhuzhu.github.io.git
synced 2026-02-20 11:50:14 +00:00
初始化项目
This commit is contained in:
99
.github/workflows/deploy.yml
vendored
Normal file
99
.github/workflows/deploy.yml
vendored
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
name: Deploy Pages
|
||||||
|
|
||||||
|
# 触发条件，push到main分支或者pull request到main分支
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
pull_request:
|
||||||
|
branches: [main]
|
||||||
|
|
||||||
|
# 支持手动在工作流上触发
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
# 设置时区
|
||||||
|
env:
|
||||||
|
TZ: Asia/Shanghai
|
||||||
|
|
||||||
|
# 权限设置
|
||||||
|
permissions:
|
||||||
|
# 允许读取仓库内容的权限。
|
||||||
|
contents: read
|
||||||
|
# 允许写入 GitHub Pages 的权限。
|
||||||
|
pages: write
|
||||||
|
# 允许写入 id-token 的权限。
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
# 并发控制配置
|
||||||
|
concurrency:
|
||||||
|
group: pages
|
||||||
|
cancel-in-progress: false
|
||||||
|
|
||||||
|
# 定义执行任务
|
||||||
|
jobs:
|
||||||
|
# 构建任务
|
||||||
|
build:
|
||||||
|
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
# node v20 运行
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [20]
|
||||||
|
|
||||||
|
steps:
|
||||||
|
# 拉取代码
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
with:
|
||||||
|
# 保留 Git 信息
|
||||||
|
fetch-depth: 0
|
||||||
|
|
||||||
|
# 设置使用 Node.js 版本
|
||||||
|
- name: Use Node.js ${{ matrix.node-version }}
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
||||||
|
# 使用 最新的 PNPM
|
||||||
|
# 你也可以指定为具体的版本
|
||||||
|
- uses: pnpm/action-setup@v4
|
||||||
|
name: Install pnpm
|
||||||
|
with:
|
||||||
|
version: latest
|
||||||
|
# version: 9
|
||||||
|
run_install: false
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
- name: Install dependencies
|
||||||
|
run: pnpm install --no-frozen-lockfile
|
||||||
|
# 锁定依赖版本
|
||||||
|
# run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
# 构建项目
|
||||||
|
- name: Build blog project
|
||||||
|
run: |
|
||||||
|
echo ${{ github.workspace }}
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# 资源拷贝
|
||||||
|
- name: Build with Jekyll
|
||||||
|
uses: actions/jekyll-build-pages@v1
|
||||||
|
with:
|
||||||
|
source: ./docs/.vitepress/dist
|
||||||
|
destination: ./_site
|
||||||
|
|
||||||
|
# 上传 _site 的资源，用于后续部署
|
||||||
|
- name: Upload artifact
|
||||||
|
uses: actions/upload-pages-artifact@v3
|
||||||
|
|
||||||
|
# 部署任务
|
||||||
|
deploy:
|
||||||
|
environment:
|
||||||
|
name: github-pages
|
||||||
|
url: ${{ steps.deployment.outputs.page_url }}
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: build
|
||||||
|
steps:
|
||||||
|
- name: Deploy to GitHub Pages
|
||||||
|
id: deployment
|
||||||
|
uses: actions/deploy-pages@v4
|
||||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
cache
|
||||||
|
.temp
|
||||||
|
.DS_Store
|
||||||
69
README.md
Normal file
69
README.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<h1 align="center"> VitePress @sugarat/theme </h1>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
简约风的 <a href="https://theme.sugarat.top" target="_blank"target="_blank">VitePress 博客主题</a> 示例运行项目。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://atqq.github.io/vitepress-blog-sugar-template/" target="_blank">GitHub Pages Demo</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
先安装 `pnpm`
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -g pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
安装依赖
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
开发启动
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
构建
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
预览产物
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm serve
|
||||||
|
```
|
||||||
|
|
||||||
|
## Github Pages 部署
|
||||||
|
|
||||||
|
① Github Pages 开启 Git Actions 部署支持
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
② 复制文件 `.github/workflows/deploy.yml` 到自己的项目相同目录下
|
||||||
|
|
||||||
|
示例项目已包含，可以直接进行下一步
|
||||||
|
|
||||||
|
③ 修改 `docs/.vitepress/config.mts` 里的构建配置
|
||||||
|
|
||||||
|
**如果项目名已经为 name.github.io 域名，则不需要修改，保持默认值 `/` 即可**
|
||||||
|
|
||||||
|
`base` 改为 `"/仓库名/"` 即可
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// 省略无关代码
|
||||||
|
const base = '/vitepress-blog-sugar-template/'
|
||||||
|
export default defineConfig({
|
||||||
|
base,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
④ 推送 `main` 分支即可
|
||||||
|
|
||||||
|
需要进一步修改部署和构建配置，详见`deploy.yml` 文件。
|
||||||
105
docs/.vitepress/blog-theme.ts
Normal file
105
docs/.vitepress/blog-theme.ts
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
// 主题独有配置
|
||||||
|
import { getThemeConfig } from '@sugarat/theme/node'
|
||||||
|
|
||||||
|
// 开启RSS支持（RSS配置）
|
||||||
|
// import type { Theme } from '@sugarat/theme'
|
||||||
|
|
||||||
|
// const baseUrl = 'https://sugarat.top'
|
||||||
|
// const RSS: Theme.RSSOptions = {
|
||||||
|
// title: '粥里有勺糖',
|
||||||
|
// baseUrl,
|
||||||
|
// copyright: 'Copyright (c) 2018-present, 粥里有勺糖',
|
||||||
|
// description: '你的指尖,拥有改变世界的力量（大前端相关技术分享）',
|
||||||
|
// language: 'zh-cn',
|
||||||
|
// image: 'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTE2NzAzMA==674995167030',
|
||||||
|
// favicon: 'https://sugarat.top/favicon.ico',
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 所有配置项，详见文档: https://theme.sugarat.top/
|
||||||
|
const blogTheme = getThemeConfig({
|
||||||
|
// 开启RSS支持
|
||||||
|
// RSS,
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
// 默认开启pagefind离线的全文搜索支持（如使用其它的可以设置为false）
|
||||||
|
// search: false,
|
||||||
|
|
||||||
|
// 默认开启 markdown 图表支持（会增加一定的构建耗时）
|
||||||
|
// 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'
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
|
// 主题色修改
|
||||||
|
themeColor: 'el-blue',
|
||||||
|
|
||||||
|
// 文章默认作者
|
||||||
|
author: '粥里有勺糖',
|
||||||
|
|
||||||
|
// 友链
|
||||||
|
friend: [
|
||||||
|
{
|
||||||
|
nickname: '粥里有勺糖',
|
||||||
|
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/',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 公告
|
||||||
|
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 }
|
||||||
58
docs/.vitepress/config.mts
Normal file
58
docs/.vitepress/config.mts
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
// 导入主题的配置
|
||||||
|
import { blogTheme } from './blog-theme'
|
||||||
|
|
||||||
|
// 如果使用 GitHub/Gitee Pages 等公共平台部署
|
||||||
|
// 通常需要修改 base 路径，通常为“/仓库名/”
|
||||||
|
// 如果项目名已经为 name.github.io 域名，则不需要修改！
|
||||||
|
// const base = process.env.GITHUB_ACTIONS === 'true'
|
||||||
|
// ? '/vitepress-blog-sugar-template/'
|
||||||
|
// : '/'
|
||||||
|
|
||||||
|
// Vitepress 默认配置
|
||||||
|
// 详见文档：https://vitepress.dev/reference/site-config
|
||||||
|
export default defineConfig({
|
||||||
|
// 继承博客主题(@sugarat/theme)
|
||||||
|
extends: blogTheme,
|
||||||
|
// base,
|
||||||
|
lang: 'zh-cn',
|
||||||
|
title: '@sugarat/theme',
|
||||||
|
description: '粥里有勺糖的博客主题，基于 vitepress 实现',
|
||||||
|
lastUpdated: true,
|
||||||
|
// 详见：https://vitepress.dev/zh/reference/site-config#head
|
||||||
|
head: [
|
||||||
|
// 配置网站的图标（显示在浏览器的 tab 上）
|
||||||
|
// ['link', { rel: 'icon', href: `${base}favicon.ico` }], // 修改了 base 这里也需要同步修改
|
||||||
|
['link', { rel: 'icon', href: '/favicon.ico' }]
|
||||||
|
],
|
||||||
|
themeConfig: {
|
||||||
|
// 展示 2,3 级标题在目录中
|
||||||
|
outline: {
|
||||||
|
level: [2, 3],
|
||||||
|
label: '目录'
|
||||||
|
},
|
||||||
|
// 默认文案修改
|
||||||
|
returnToTopLabel: '回到顶部',
|
||||||
|
sidebarMenuLabel: '相关文章',
|
||||||
|
lastUpdatedText: '上次更新于',
|
||||||
|
|
||||||
|
// 设置logo
|
||||||
|
logo: '/logo.png',
|
||||||
|
// editLink: {
|
||||||
|
// pattern:
|
||||||
|
// 'https://github.com/ATQQ/sugar-blog/tree/master/packages/blogpress/:path',
|
||||||
|
// text: '去 GitHub 上编辑内容'
|
||||||
|
// },
|
||||||
|
nav: [
|
||||||
|
{ text: '首页', link: '/' },
|
||||||
|
{ text: '关于作者', link: 'https://sugarat.top/aboutme.html' }
|
||||||
|
],
|
||||||
|
socialLinks: [
|
||||||
|
{
|
||||||
|
icon: 'github',
|
||||||
|
link: 'https://github.com/ATQQ/sugar-blog/tree/master/packages/theme'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
BIN
docs/.vitepress/theme/assets/bg.webp
Normal file
BIN
docs/.vitepress/theme/assets/bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
9
docs/.vitepress/theme/index.ts
Normal file
9
docs/.vitepress/theme/index.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import BlogTheme from '@sugarat/theme'
|
||||||
|
|
||||||
|
// 自定义样式重载
|
||||||
|
// import './style.scss'
|
||||||
|
|
||||||
|
// 自定义主题色
|
||||||
|
// import './user-theme.css'
|
||||||
|
|
||||||
|
export default BlogTheme
|
||||||
13
docs/.vitepress/theme/style.scss
Normal file
13
docs/.vitepress/theme/style.scss
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
.VPHome {
|
||||||
|
// 定义遮罩样式
|
||||||
|
background: radial-gradient(ellipse,
|
||||||
|
rgba(var(--bg-gradient-home), 1) 0%,
|
||||||
|
rgba(var(--bg-gradient-home), 0) 150%);
|
||||||
|
|
||||||
|
// 自定义首页背景图
|
||||||
|
&::before {
|
||||||
|
// 图片来源：https://zhuanlan.zhihu.com/p/54060187
|
||||||
|
background-image: url(./assets/bg.webp);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
26
docs/.vitepress/theme/user-theme.css
Normal file
26
docs/.vitepress/theme/user-theme.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
/* 所有变量：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);
|
||||||
|
}
|
||||||
67
docs/about.md
Normal file
67
docs/about.md
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
|
||||||
|
|
||||||
|
## 最后
|
||||||
|
如果你有建议的 功能&想法 欢迎 私信&评论区 交流
|
||||||
|
|
||||||
|
如果你觉得主题不错，欢迎分享与使用，可以在评论区留下你的网站地址
|
||||||
|
|
||||||
|
笔者后续会单独开个板块展示大家优秀的博客，感谢大家的支持
|
||||||
16
docs/index.md
Normal file
16
docs/index.md
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
# 首页部分元素定制
|
||||||
|
blog:
|
||||||
|
name: '@sugarat/theme'
|
||||||
|
motto: 简约风的 Vitepress 博客主题
|
||||||
|
inspiring:
|
||||||
|
- 基于 Vitepress 定制的主题🎨
|
||||||
|
- 千万不要因为走得太久，而忘记了我们为什么出发
|
||||||
|
- 人生就像一场修行，你不可能一开始就修成正果
|
||||||
|
- 无论多么沉重的负担，也不要忘记微笑；无论多么漫长的路程，也不要忘记坚持
|
||||||
|
- 生活的真谛不在繁华，而在于淡泊
|
||||||
|
# 设置 inspiringTimeout 可以实现自动切换
|
||||||
|
inspiringTimeout: 3000
|
||||||
|
pageSize: 6
|
||||||
|
---
|
||||||
0
docs/public/.spa
Normal file
0
docs/public/.spa
Normal file
BIN
docs/public/favicon.ico
Normal file
BIN
docs/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/public/logo.png
Normal file
BIN
docs/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
2
docs/public/robots.txt
Normal file
2
docs/public/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
411
docs/sop/component.md
Normal file
411
docs/sop/component.md
Normal file
@@ -0,0 +1,411 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
11
docs/sop/more.md
Normal file
11
docs/sop/more.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
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) - 自定义博客样式介绍
|
||||||
181
docs/sop/quickStart.md
Normal file
181
docs/sop/quickStart.md
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
---
|
||||||
|
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) - 自定义博客样式介绍
|
||||||
138
docs/sop/style.md
Normal file
138
docs/sop/style.md
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
5595
package-lock.json
generated
Normal file
5595
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "vitepress-blog",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"author": "粥里有勺糖",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vitepress dev docs",
|
||||||
|
"build": "vitepress build docs",
|
||||||
|
"serve": "vitepress serve docs"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"@sugarat/theme": "0.5.6",
|
||||||
|
"element-plus": "^2.7.2",
|
||||||
|
"vue": "3.5.12"
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"doc": "docs"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"pagefind": "^1.3.0",
|
||||||
|
"sass": "^1.76.0",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vitepress": "1.6.3"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"peerDependencyRules": {
|
||||||
|
"ignoreMissing": [
|
||||||
|
"@algolia/client-search",
|
||||||
|
"search-insights"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user