@sugarat/create-theme 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/move/gitignore +5 -0
- package/dist/move/npmrc +1 -0
- package/dist/template/docs/.vitepress/blog-theme.ts +59 -0
- package/dist/template/docs/.vitepress/config.mts +44 -0
- package/dist/template/docs/.vitepress/theme/green-theme.var.css +13 -0
- package/dist/template/docs/.vitepress/theme/index.ts +2 -0
- package/dist/template/docs/about.md +2 -1
- package/dist/template/docs/sop/style.md +36 -0
- package/dist/template/package.json +5 -2
- package/package.json +6 -2
- package/CHANGELOG.md +0 -49
- package/dist/template/docs/.vitepress/config.ts +0 -94
- package/public/template/README.md +0 -29
- package/public/template/docs/.vitepress/config.ts +0 -94
- package/public/template/docs/.vitepress/theme/assets/bg.webp +0 -0
- package/public/template/docs/.vitepress/theme/index.ts +0 -5
- package/public/template/docs/.vitepress/theme/style.scss +0 -14
- package/public/template/docs/about.md +0 -66
- package/public/template/docs/index.md +0 -16
- package/public/template/docs/public/favicon.ico +0 -0
- package/public/template/docs/public/logo.png +0 -0
- package/public/template/docs/public/robots.txt +0 -2
- package/public/template/docs/sop/mermaid.md +0 -71
- package/public/template/docs/sop/more.md +0 -11
- package/public/template/docs/sop/quickStart.md +0 -99
- package/public/template/docs/sop/style.md +0 -88
- package/public/template/package.json +0 -23
- package/src/index.ts +0 -36
- package/tsup.config.ts +0 -9
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var
|
|
2
|
+
var y=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(o,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of _(n))!v.call(o,c)&&c!==e&&a(o,c,{get:()=>n[c],enumerable:!(s=d(n,c))||s.enumerable});return o};var i=(o,n,e)=>(e=o!=null?y(h(o)):{},w(n||!o||!o.__esModule?a(e,"default",{value:o,enumerable:!0}):e,o));var g=(o,n,e)=>new Promise((s,c)=>{var u=l=>{try{p(e.next(l))}catch(t){c(t)}},f=l=>{try{p(e.throw(l))}catch(t){c(t)}},p=l=>l.done?s(l.value):Promise.resolve(l.value).then(u,f);p((e=e.apply(o,n)).next())});var m=i(require("fs-extra")),r=i(require("path"));function b(o){let n=r.default.join(__dirname,"template");m.default.copy(n,o,e=>g(this,null,function*(){if(yield m.default.copy(r.default.join(__dirname,"move/gitignore"),r.default.join(o,".gitignore")),yield m.default.copy(r.default.join(__dirname,"move/npmrc"),r.default.join(o,".npmrc")),e)console.error("An error occurred while copying template files:",e);else{console.log("\u{1F389} \u{1F389} created successfully!"),console.log(),console.log(`project in ${o}`),console.log();let s=`Done. Now run:
|
|
3
3
|
|
|
4
|
-
\u2460 cd ${r.default.parse(
|
|
4
|
+
\u2460 cd ${r.default.parse(j).name}
|
|
5
5
|
\u2461 pnpm install
|
|
6
|
-
\u2462 pnpm run dev`;console.log(
|
|
6
|
+
\u2462 pnpm run dev`;console.log(s)}}))}console.log("Creating @sugarat/theme project...");console.log();var j=process.argv[2]||"my-blog";b(r.default.join(process.cwd(),j));
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["#!/usr/bin/env node\n\n/* eslint-disable no-console */\nimport fs from 'fs-extra'\nimport path from 'path'\n\nfunction createThemeProject(destination) {\n const templatePath = path.join(__dirname, 'template')\n\n fs.copy(templatePath, destination, (err) => {\n if (err) {\n console.error('An error occurred while copying template files:', err)\n } else {\n console.log('🎉 🎉 created successfully!')\n console.log()\n\n console.log(`project in ${destination}`)\n\n console.log()\n\n const msg = `Done. Now run:\n\n ① cd ${path.parse(projectName).name}\n ② pnpm install\n ③ pnpm run dev`\n\n console.log(msg)\n }\n })\n}\n\nconsole.log('Creating @sugarat/theme project...')\nconsole.log()\n\nconst projectName = process.argv[2] || 'my-blog'\ncreateThemeProject(path.join(process.cwd(), projectName))\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["#!/usr/bin/env node\n\n/* eslint-disable no-console */\nimport fs from 'fs-extra'\nimport path from 'path'\n\nfunction createThemeProject(destination) {\n const templatePath = path.join(__dirname, 'template')\n\n fs.copy(templatePath, destination, async (err) => {\n // 同步创建.gitignore文件和.npmrc文件\n await fs.copy(\n path.join(__dirname, 'move/gitignore'),\n path.join(destination, '.gitignore')\n )\n await fs.copy(\n path.join(__dirname, 'move/npmrc'),\n path.join(destination, '.npmrc')\n )\n if (err) {\n console.error('An error occurred while copying template files:', err)\n } else {\n console.log('🎉 🎉 created successfully!')\n console.log()\n\n console.log(`project in ${destination}`)\n\n console.log()\n\n const msg = `Done. Now run:\n\n ① cd ${path.parse(projectName).name}\n ② pnpm install\n ③ pnpm run dev`\n\n console.log(msg)\n }\n })\n}\n\nconsole.log('Creating @sugarat/theme project...')\nconsole.log()\n\nconst projectName = process.argv[2] || 'my-blog'\ncreateThemeProject(path.join(process.cwd(), projectName))\n"],"mappings":";wpBAGA,IAAAA,EAAe,uBACfC,EAAiB,mBAEjB,SAASC,EAAmBC,EAAa,CACvC,IAAMC,EAAe,EAAAC,QAAK,KAAK,UAAW,UAAU,EAEpD,EAAAC,QAAG,KAAKF,EAAcD,EAAoBI,GAAQC,EAAA,sBAUhD,GARA,MAAM,EAAAF,QAAG,KACP,EAAAD,QAAK,KAAK,UAAW,gBAAgB,EACrC,EAAAA,QAAK,KAAKF,EAAa,YAAY,CACrC,EACA,MAAM,EAAAG,QAAG,KACP,EAAAD,QAAK,KAAK,UAAW,YAAY,EACjC,EAAAA,QAAK,KAAKF,EAAa,QAAQ,CACjC,EACII,EACF,QAAQ,MAAM,kDAAmDA,CAAG,MAC/D,CACL,QAAQ,IAAI,2CAA6B,EACzC,QAAQ,IAAI,EAEZ,QAAQ,IAAI,cAAcJ,GAAa,EAEvC,QAAQ,IAAI,EAEZ,IAAMM,EAAM;AAAA;AAAA,eAER,EAAAJ,QAAK,MAAMK,CAAW,EAAE;AAAA;AAAA,wBAI5B,QAAQ,IAAID,CAAG,CACjB,CACF,EAAC,CACH,CAEA,QAAQ,IAAI,oCAAoC,EAChD,QAAQ,IAAI,EAEZ,IAAMC,EAAc,QAAQ,KAAK,IAAM,UACvCR,EAAmB,EAAAG,QAAK,KAAK,QAAQ,IAAI,EAAGK,CAAW,CAAC","names":["import_fs_extra","import_path","createThemeProject","destination","templatePath","path","fs","err","__async","msg","projectName"]}
|
package/dist/move/npmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
strict-peer-dependencies=false
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// 主题独有配置
|
|
2
|
+
import { getThemeConfig } from '@sugarat/theme/node';
|
|
3
|
+
|
|
4
|
+
// 详见文档: https://theme.sugarat.top/
|
|
5
|
+
const blogTheme = getThemeConfig({
|
|
6
|
+
// 文章默认作者
|
|
7
|
+
author: '粥里有勺糖',
|
|
8
|
+
// 友链
|
|
9
|
+
friend: [
|
|
10
|
+
{
|
|
11
|
+
nickname: '粥里有勺糖',
|
|
12
|
+
des: '你的指尖用于改变世界的力量',
|
|
13
|
+
avatar:
|
|
14
|
+
'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTE2NzAzMA==674995167030',
|
|
15
|
+
url: 'https://sugarat.top',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
nickname: 'Vitepress',
|
|
19
|
+
des: 'Vite & Vue Powered Static Site Generator',
|
|
20
|
+
avatar:
|
|
21
|
+
'https://vitepress.dev/vitepress-logo-large.webp',
|
|
22
|
+
url: 'https://vitepress.dev/',
|
|
23
|
+
},
|
|
24
|
+
],
|
|
25
|
+
// 开启离线的全文搜索支持(如构建报错可注释下面的配置再次尝试)
|
|
26
|
+
search: 'pagefind',
|
|
27
|
+
popover: {
|
|
28
|
+
title: '公告',
|
|
29
|
+
body: [
|
|
30
|
+
{
|
|
31
|
+
type: 'text',
|
|
32
|
+
content:
|
|
33
|
+
'QQ交流群:681489336 🎉🎉',
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
type: 'text',
|
|
37
|
+
content:
|
|
38
|
+
'👇公众号👇---👇 微信 👇',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
type: 'image',
|
|
42
|
+
src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
type: 'text',
|
|
46
|
+
content:
|
|
47
|
+
'欢迎大家加群&私信交流',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'button',
|
|
51
|
+
content: '博客',
|
|
52
|
+
link: 'https://sugarat.top',
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
duration: 0,
|
|
56
|
+
},
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
export { blogTheme };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { defineConfig } from '@sugarat/theme/node'
|
|
2
|
+
import { blogTheme } from './blog-theme'
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
// Vitepress 默认配置
|
|
6
|
+
// 详见文档:https://vitepress.dev/reference/site-config
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
// 继承博客主题配置
|
|
9
|
+
extends: blogTheme,
|
|
10
|
+
lang: 'zh-cn',
|
|
11
|
+
title: '@sugarat/theme',
|
|
12
|
+
description: '粥里有勺糖的博客主题,基于 vitepress 实现',
|
|
13
|
+
vite: {
|
|
14
|
+
optimizeDeps: {
|
|
15
|
+
include: ['element-plus'],
|
|
16
|
+
exclude: ['@sugarat/theme']
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
lastUpdated: true,
|
|
20
|
+
themeConfig: {
|
|
21
|
+
lastUpdatedText: '上次更新于',
|
|
22
|
+
footer: {
|
|
23
|
+
message: '自定义底部内容',
|
|
24
|
+
copyright:
|
|
25
|
+
'MIT Licensed | <a target="_blank" href="https://theme.sugarat.top/"> @sugarat/theme </a>'
|
|
26
|
+
},
|
|
27
|
+
logo: '/logo.png',
|
|
28
|
+
// editLink: {
|
|
29
|
+
// pattern:
|
|
30
|
+
// 'https://github.com/ATQQ/sugar-blog/tree/master/packages/blogpress/:path',
|
|
31
|
+
// text: '去 GitHub 上编辑内容'
|
|
32
|
+
// },
|
|
33
|
+
nav: [
|
|
34
|
+
{ text: '首页', link: '/' },
|
|
35
|
+
{ text: '关于作者', link: 'https://sugarat.top/aboutme.html' }
|
|
36
|
+
],
|
|
37
|
+
socialLinks: [
|
|
38
|
+
{
|
|
39
|
+
icon: 'github',
|
|
40
|
+
link: 'https://github.com/ATQQ/sugar-blog/tree/master/packages/theme'
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
})
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* 使用之前的绿色主题,重写当前紫色的 */
|
|
3
|
+
/* 所有变量:https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
|
|
4
|
+
--vp-c-brand: var(--vp-c-green);
|
|
5
|
+
--vp-c-brand-light: var(--vp-c-green-light);
|
|
6
|
+
--vp-c-brand-lighter: var(--vp-c-green-lighter);
|
|
7
|
+
--vp-c-brand-dark: var(--vp-c-green-dark);
|
|
8
|
+
--vp-c-brand-darker: var(--vp-c-green-darker);
|
|
9
|
+
--vp-c-brand-dimm-1: var(--vp-c-green-dimm-1);
|
|
10
|
+
--vp-c-brand-dimm-2: var(--vp-c-green-dimm-2);
|
|
11
|
+
--vp-c-brand-dimm-3: var(--vp-c-green-dimm-3);
|
|
12
|
+
--vp-c-brand-text: var(--vp-c-green);
|
|
13
|
+
}
|
|
@@ -27,12 +27,12 @@ sticky: 1
|
|
|
27
27
|
* 作品聚合页(为个人作品提供一个展示)
|
|
28
28
|
* tabs([vitepress-plugin-tabs](https://vitepress-plugins.sapphi.red/tabs/))
|
|
29
29
|
* 流程图([vitepress-plugin-mermaid](https://github.com/emersonbottero/vitepress-plugin-mermaid#readme))
|
|
30
|
+
* RSS
|
|
30
31
|
|
|
31
32
|
## 规划中功能
|
|
32
33
|
* Valine 评论系统
|
|
33
34
|
* 文章合集(类似于聚合一个内容专题)
|
|
34
35
|
* 更多可定制的主题样式
|
|
35
|
-
* RSS
|
|
36
36
|
* 文章时间线页面支持
|
|
37
37
|
* 博客案例集合
|
|
38
38
|
* 背景图自动更换
|
|
@@ -50,6 +50,7 @@ sticky: 1
|
|
|
50
50
|
* [element-plus](https://element-plus.gitee.io/zh-CN/)
|
|
51
51
|
* [charles7c.github.io](https://github.com/Charles7c/charles7c.github.io)
|
|
52
52
|
* [vitepress-blog-zaun](https://github.com/clark-cui/vitepress-blog-zaun)
|
|
53
|
+
* [vuejs/blog](https://github.com/vuejs/blog/tree/main)
|
|
53
54
|
|
|
54
55
|
## 主题相关资源
|
|
55
56
|
* 主题地址:https://theme.sugarat.top/
|
|
@@ -84,5 +84,41 @@ export default BlogTheme
|
|
|
84
84
|

|
|
85
85
|
|
|
86
86
|
|
|
87
|
+
## 主题色
|
|
88
|
+
vitepress 最新的默认主题色偏紫色,看着感觉有点不习惯
|
|
89
|
+
|
|
90
|
+

|
|
91
|
+
|
|
92
|
+
可以默认将其还原了为之前的绿色
|
|
93
|
+
|
|
94
|
+
绿色主题的代码如下
|
|
95
|
+
|
|
96
|
+
`.vitepress/theme/green-theme.var.css`
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
:root{
|
|
100
|
+
/* 使用之前的绿色主题,重写当前紫色的 */
|
|
101
|
+
/* 所有变量:https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
|
|
102
|
+
--vp-c-brand: var(--vp-c-green);
|
|
103
|
+
--vp-c-brand-light: var(--vp-c-green-light);
|
|
104
|
+
--vp-c-brand-lighter: var(--vp-c-green-lighter);
|
|
105
|
+
--vp-c-brand-dark: var(--vp-c-green-dark);
|
|
106
|
+
--vp-c-brand-darker: var(--vp-c-green-darker);
|
|
107
|
+
--vp-c-brand-dimm-1: var(--vp-c-green-dimm-1);
|
|
108
|
+
--vp-c-brand-dimm-2: var(--vp-c-green-dimm-2);
|
|
109
|
+
--vp-c-brand-dimm-3: var(--vp-c-green-dimm-3);
|
|
110
|
+
--vp-c-brand-text: var(--vp-c-green);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
将其引入到`.vitepress/theme/index.ts`中即可
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
import BlogTheme from '@sugarat/theme'
|
|
117
|
+
// 导入绿色主题
|
|
118
|
+
import './green-theme.var.css'
|
|
119
|
+
|
|
120
|
+
export default BlogTheme
|
|
121
|
+
```
|
|
122
|
+
|
|
87
123
|
## More
|
|
88
124
|
... wait a moment
|
|
@@ -9,14 +9,17 @@
|
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@element-plus/icons-vue": "^2.1.0",
|
|
12
|
-
"@sugarat/theme": "^0.1.
|
|
12
|
+
"@sugarat/theme": "^0.1.40",
|
|
13
13
|
"element-plus": "^2.3.8",
|
|
14
14
|
"vue": "^3.3.4"
|
|
15
15
|
},
|
|
16
|
+
"directories": {
|
|
17
|
+
"doc": "docs"
|
|
18
|
+
},
|
|
16
19
|
"devDependencies": {
|
|
17
20
|
"sass": "^1.64.1",
|
|
18
21
|
"typescript": "^5.1.6",
|
|
19
|
-
"vitepress": "1.0.0-
|
|
22
|
+
"vitepress": "1.0.0-rc.4"
|
|
20
23
|
},
|
|
21
24
|
"author": "粥里有勺糖",
|
|
22
25
|
"license": "MIT"
|
package/package.json
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sugarat/create-theme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"description": "简约风的 Vitepress 博客主题,sugarat vitepress blog theme",
|
|
5
5
|
"bin": {
|
|
6
6
|
"create-theme": "./dist/index.js"
|
|
7
7
|
},
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
8
11
|
"repository": {
|
|
9
12
|
"type": "git",
|
|
10
13
|
"url": "git+https://github.com/ATQQ/sugar-blog.git"
|
|
@@ -19,6 +22,7 @@
|
|
|
19
22
|
"author": "粥里有勺糖",
|
|
20
23
|
"license": "MIT",
|
|
21
24
|
"devDependencies": {
|
|
25
|
+
"rimraf": "^5.0.1",
|
|
22
26
|
"tsup": " ^6.5.0"
|
|
23
27
|
},
|
|
24
28
|
"dependencies": {
|
|
@@ -26,6 +30,6 @@
|
|
|
26
30
|
},
|
|
27
31
|
"scripts": {
|
|
28
32
|
"dev": "tsup --watch --publicDir",
|
|
29
|
-
"build": "tsup --minify --publicDir"
|
|
33
|
+
"build": "rimraf dist && tsup --minify --publicDir"
|
|
30
34
|
}
|
|
31
35
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
# @sugarat/create-theme
|
|
2
|
-
|
|
3
|
-
## 0.0.8
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- chore: update deps
|
|
8
|
-
|
|
9
|
-
## 0.0.7
|
|
10
|
-
|
|
11
|
-
### Patch Changes
|
|
12
|
-
|
|
13
|
-
- fix: vitepress error
|
|
14
|
-
|
|
15
|
-
## 0.0.6
|
|
16
|
-
|
|
17
|
-
### Patch Changes
|
|
18
|
-
|
|
19
|
-
- chore: 模板依赖版本变更
|
|
20
|
-
|
|
21
|
-
## 0.0.5
|
|
22
|
-
|
|
23
|
-
### Patch Changes
|
|
24
|
-
|
|
25
|
-
- feat: 默认模板更新
|
|
26
|
-
|
|
27
|
-
## 0.0.4
|
|
28
|
-
|
|
29
|
-
### Patch Changes
|
|
30
|
-
|
|
31
|
-
- chore: 修改 package.json 中描述信息
|
|
32
|
-
|
|
33
|
-
## 0.0.3
|
|
34
|
-
|
|
35
|
-
### Patch Changes
|
|
36
|
-
|
|
37
|
-
- chore: add hashbang
|
|
38
|
-
|
|
39
|
-
## 0.0.2
|
|
40
|
-
|
|
41
|
-
### Patch Changes
|
|
42
|
-
|
|
43
|
-
- chore: Rename READNE.md to README.md
|
|
44
|
-
|
|
45
|
-
## 0.0.1
|
|
46
|
-
|
|
47
|
-
### Patch Changes
|
|
48
|
-
|
|
49
|
-
- feat: init create-theme
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { getThemeConfig, defineConfig } from '@sugarat/theme/node'
|
|
2
|
-
|
|
3
|
-
// 主题独有配置
|
|
4
|
-
// 详见文档: https://theme.sugarat.top/
|
|
5
|
-
const blogTheme = getThemeConfig({
|
|
6
|
-
// 文章默认作者
|
|
7
|
-
author: '粥里有勺糖',
|
|
8
|
-
// 友链
|
|
9
|
-
friend: [
|
|
10
|
-
{
|
|
11
|
-
nickname: '粥里有勺糖',
|
|
12
|
-
des: '你的指尖用于改变世界的力量',
|
|
13
|
-
avatar:
|
|
14
|
-
'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTE2NzAzMA==674995167030',
|
|
15
|
-
url: 'https://sugarat.top'
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
nickname: 'Vitepress',
|
|
19
|
-
des: 'Vite & Vue Powered Static Site Generator',
|
|
20
|
-
avatar:
|
|
21
|
-
'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTI2NzY1Ng==674995267656',
|
|
22
|
-
url: 'https://vitepress.vuejs.org/'
|
|
23
|
-
}
|
|
24
|
-
],
|
|
25
|
-
recommend: {
|
|
26
|
-
showSelf: true
|
|
27
|
-
},
|
|
28
|
-
// 开启离线的全文搜索支持(如构建报错可注释下面的配置再次尝试)
|
|
29
|
-
search: 'pagefind',
|
|
30
|
-
popover: {
|
|
31
|
-
title: '公告',
|
|
32
|
-
body: [
|
|
33
|
-
{
|
|
34
|
-
type: 'text',
|
|
35
|
-
content: 'QQ交流群:681489336 🎉🎉'
|
|
36
|
-
},
|
|
37
|
-
{ type: 'text', content: '👇公众号👇---👇 微信 👇' },
|
|
38
|
-
{
|
|
39
|
-
type: 'image',
|
|
40
|
-
src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210'
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
type: 'text',
|
|
44
|
-
content: '欢迎大家加群&私信交流'
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
type: 'button',
|
|
48
|
-
content: '博客',
|
|
49
|
-
link: 'https://sugarat.top'
|
|
50
|
-
}
|
|
51
|
-
],
|
|
52
|
-
duration: 0
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
|
|
56
|
-
// Vitepress 默认配置
|
|
57
|
-
// 详见文档:https://vitepress.dev/reference/site-config
|
|
58
|
-
export default defineConfig({
|
|
59
|
-
extends: blogTheme,
|
|
60
|
-
lang: 'zh-cn',
|
|
61
|
-
title: '@sugarat/theme',
|
|
62
|
-
description: '粥里有勺糖的博客主题,基于 vitepress 实现',
|
|
63
|
-
vite: {
|
|
64
|
-
optimizeDeps: {
|
|
65
|
-
include: ['element-plus'],
|
|
66
|
-
exclude: ['@sugarat/theme']
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
lastUpdated: true,
|
|
70
|
-
themeConfig: {
|
|
71
|
-
lastUpdatedText: '上次更新于',
|
|
72
|
-
footer: {
|
|
73
|
-
message: '自定义底部内容',
|
|
74
|
-
copyright:
|
|
75
|
-
'MIT Licensed | <a target="_blank" href="https://theme.sugarat.top/"> @sugarat/theme </a>'
|
|
76
|
-
},
|
|
77
|
-
logo: '/logo.png',
|
|
78
|
-
// editLink: {
|
|
79
|
-
// pattern:
|
|
80
|
-
// 'https://github.com/ATQQ/sugar-blog/tree/master/packages/blogpress/:path',
|
|
81
|
-
// text: '去 GitHub 上编辑内容'
|
|
82
|
-
// },
|
|
83
|
-
nav: [
|
|
84
|
-
{ text: '首页', link: '/' },
|
|
85
|
-
{ text: '关于作者', link: 'https://sugarat.top/aboutme.html' }
|
|
86
|
-
],
|
|
87
|
-
socialLinks: [
|
|
88
|
-
{
|
|
89
|
-
icon: 'github',
|
|
90
|
-
link: 'https://github.com/ATQQ/sugar-blog/tree/master/packages/theme'
|
|
91
|
-
}
|
|
92
|
-
]
|
|
93
|
-
}
|
|
94
|
-
})
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# vitepress @sugarat/theme
|
|
2
|
-
简约风的 [Vitepress 博客主题](https://theme.sugarat.top)
|
|
3
|
-
|
|
4
|
-
## Usage
|
|
5
|
-
先安装 `pnpm`
|
|
6
|
-
|
|
7
|
-
```sh
|
|
8
|
-
npm i -g pnpm
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
安装依赖
|
|
12
|
-
```sh
|
|
13
|
-
pnpm install
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
开发启动
|
|
17
|
-
```sh
|
|
18
|
-
pnpm dev
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
构建
|
|
22
|
-
```sh
|
|
23
|
-
pnpm build
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
预览产物
|
|
27
|
-
```sh
|
|
28
|
-
pnpm serve
|
|
29
|
-
```
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { getThemeConfig, defineConfig } from '@sugarat/theme/node'
|
|
2
|
-
|
|
3
|
-
// 主题独有配置
|
|
4
|
-
// 详见文档: https://theme.sugarat.top/
|
|
5
|
-
const blogTheme = getThemeConfig({
|
|
6
|
-
// 文章默认作者
|
|
7
|
-
author: '粥里有勺糖',
|
|
8
|
-
// 友链
|
|
9
|
-
friend: [
|
|
10
|
-
{
|
|
11
|
-
nickname: '粥里有勺糖',
|
|
12
|
-
des: '你的指尖用于改变世界的力量',
|
|
13
|
-
avatar:
|
|
14
|
-
'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTE2NzAzMA==674995167030',
|
|
15
|
-
url: 'https://sugarat.top'
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
nickname: 'Vitepress',
|
|
19
|
-
des: 'Vite & Vue Powered Static Site Generator',
|
|
20
|
-
avatar:
|
|
21
|
-
'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTI2NzY1Ng==674995267656',
|
|
22
|
-
url: 'https://vitepress.vuejs.org/'
|
|
23
|
-
}
|
|
24
|
-
],
|
|
25
|
-
recommend: {
|
|
26
|
-
showSelf: true
|
|
27
|
-
},
|
|
28
|
-
// 开启离线的全文搜索支持(如构建报错可注释下面的配置再次尝试)
|
|
29
|
-
search: 'pagefind',
|
|
30
|
-
popover: {
|
|
31
|
-
title: '公告',
|
|
32
|
-
body: [
|
|
33
|
-
{
|
|
34
|
-
type: 'text',
|
|
35
|
-
content: 'QQ交流群:681489336 🎉🎉'
|
|
36
|
-
},
|
|
37
|
-
{ type: 'text', content: '👇公众号👇---👇 微信 👇' },
|
|
38
|
-
{
|
|
39
|
-
type: 'image',
|
|
40
|
-
src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210'
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
type: 'text',
|
|
44
|
-
content: '欢迎大家加群&私信交流'
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
type: 'button',
|
|
48
|
-
content: '博客',
|
|
49
|
-
link: 'https://sugarat.top'
|
|
50
|
-
}
|
|
51
|
-
],
|
|
52
|
-
duration: 0
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
|
|
56
|
-
// Vitepress 默认配置
|
|
57
|
-
// 详见文档:https://vitepress.dev/reference/site-config
|
|
58
|
-
export default defineConfig({
|
|
59
|
-
extends: blogTheme,
|
|
60
|
-
lang: 'zh-cn',
|
|
61
|
-
title: '@sugarat/theme',
|
|
62
|
-
description: '粥里有勺糖的博客主题,基于 vitepress 实现',
|
|
63
|
-
vite: {
|
|
64
|
-
optimizeDeps: {
|
|
65
|
-
include: ['element-plus'],
|
|
66
|
-
exclude: ['@sugarat/theme']
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
lastUpdated: true,
|
|
70
|
-
themeConfig: {
|
|
71
|
-
lastUpdatedText: '上次更新于',
|
|
72
|
-
footer: {
|
|
73
|
-
message: '自定义底部内容',
|
|
74
|
-
copyright:
|
|
75
|
-
'MIT Licensed | <a target="_blank" href="https://theme.sugarat.top/"> @sugarat/theme </a>'
|
|
76
|
-
},
|
|
77
|
-
logo: '/logo.png',
|
|
78
|
-
// editLink: {
|
|
79
|
-
// pattern:
|
|
80
|
-
// 'https://github.com/ATQQ/sugar-blog/tree/master/packages/blogpress/:path',
|
|
81
|
-
// text: '去 GitHub 上编辑内容'
|
|
82
|
-
// },
|
|
83
|
-
nav: [
|
|
84
|
-
{ text: '首页', link: '/' },
|
|
85
|
-
{ text: '关于作者', link: 'https://sugarat.top/aboutme.html' }
|
|
86
|
-
],
|
|
87
|
-
socialLinks: [
|
|
88
|
-
{
|
|
89
|
-
icon: 'github',
|
|
90
|
-
link: 'https://github.com/ATQQ/sugar-blog/tree/master/packages/theme'
|
|
91
|
-
}
|
|
92
|
-
]
|
|
93
|
-
}
|
|
94
|
-
})
|
|
Binary file
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
.VPHome {
|
|
2
|
-
// 自定义首页背景图
|
|
3
|
-
&::before {
|
|
4
|
-
// 图片来源:https://zhuanlan.zhihu.com/p/54060187
|
|
5
|
-
background-image: url(./assets/bg.webp);
|
|
6
|
-
background-size: cover;
|
|
7
|
-
}
|
|
8
|
-
// 定义遮罩样式
|
|
9
|
-
background: radial-gradient(
|
|
10
|
-
ellipse,
|
|
11
|
-
rgba(var(--bg-gradient-home), 1) 0%,
|
|
12
|
-
rgba(var(--bg-gradient-home), 0) 150%
|
|
13
|
-
);
|
|
14
|
-
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sticky: 1
|
|
3
|
-
---
|
|
4
|
-
# 关于主题
|
|
5
|
-
|
|
6
|
-
简约风的 Vitepress 博客主题,基于 [vitepress](https://vitepress.vuejs.org/) 的自定义主题实现
|
|
7
|
-
|
|
8
|
-

|
|
9
|
-
|
|
10
|
-
更多细节见 https://theme.sugarat.top
|
|
11
|
-
|
|
12
|
-
## 已支持功能
|
|
13
|
-
介绍一下主要的,非所有
|
|
14
|
-
|
|
15
|
-
* 博客首页
|
|
16
|
-
* 文章列表
|
|
17
|
-
* 精选文章
|
|
18
|
-
* 友链
|
|
19
|
-
* 标签分类
|
|
20
|
-
* 图片预览
|
|
21
|
-
* 搜索(基于[pagefind](https://github.com/cloudcannon/pagefind)支持离线全文搜索)
|
|
22
|
-
* [giscus](https://giscus.app/zh-CN)驱动的评论系统
|
|
23
|
-
* 推荐文章(类似文章目录)
|
|
24
|
-
* 阅读时间计算
|
|
25
|
-
* 全局的提示弹窗 (由 el-alert 驱动)
|
|
26
|
-
* 全局的公告弹窗,支持设置图片,文字,按钮
|
|
27
|
-
* 作品聚合页(为个人作品提供一个展示)
|
|
28
|
-
* tabs([vitepress-plugin-tabs](https://vitepress-plugins.sapphi.red/tabs/))
|
|
29
|
-
* 流程图([vitepress-plugin-mermaid](https://github.com/emersonbottero/vitepress-plugin-mermaid#readme))
|
|
30
|
-
|
|
31
|
-
## 规划中功能
|
|
32
|
-
* Valine 评论系统
|
|
33
|
-
* 文章合集(类似于聚合一个内容专题)
|
|
34
|
-
* 更多可定制的主题样式
|
|
35
|
-
* RSS
|
|
36
|
-
* 文章时间线页面支持
|
|
37
|
-
* 博客案例集合
|
|
38
|
-
* 背景图自动更换
|
|
39
|
-
* 首屏铺满slogan,参考reco
|
|
40
|
-
* 主题色统一
|
|
41
|
-
|
|
42
|
-
## 参考项目
|
|
43
|
-
或多或少借鉴&使用了如下的一下开源项目,博客,网站的能力或者UI样式
|
|
44
|
-
|
|
45
|
-
* [reco](https://vuepress-theme-reco.recoluan.com/)
|
|
46
|
-
* [掘金](https://juejin.cn/)
|
|
47
|
-
* [surmon](https://surmon.me/)
|
|
48
|
-
* [@vue/theme](https://github.com/vuejs/theme)
|
|
49
|
-
* [vitest](https://vitest.dev/)
|
|
50
|
-
* [element-plus](https://element-plus.gitee.io/zh-CN/)
|
|
51
|
-
* [charles7c.github.io](https://github.com/Charles7c/charles7c.github.io)
|
|
52
|
-
* [vitepress-blog-zaun](https://github.com/clark-cui/vitepress-blog-zaun)
|
|
53
|
-
|
|
54
|
-
## 主题相关资源
|
|
55
|
-
* 主题地址:https://theme.sugarat.top/
|
|
56
|
-
* 主题包:[@sugarat/theme](https://www.npmjs.com/package/@sugarat/theme)
|
|
57
|
-
* 项目地址:https://github.com/ATQQ/sugar-blog/tree/master/packages/theme
|
|
58
|
-
* 作者博客地址:https://sugarat.top
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
## 最后
|
|
62
|
-
如果你有建议的 功能&想法 欢迎 私信&评论区 交流
|
|
63
|
-
|
|
64
|
-
如果你觉得主题不错,欢迎分享与使用,可以在评论区留下你的网站地址
|
|
65
|
-
|
|
66
|
-
笔者后续会单独开个板块展示大家优秀的博客,感谢大家的支持
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: home
|
|
3
|
-
# 首页部分元素定制
|
|
4
|
-
blog:
|
|
5
|
-
name: '@sugarat/theme'
|
|
6
|
-
motto: 简约风的 Vitepress 博客主题
|
|
7
|
-
inspiring:
|
|
8
|
-
- 基于 Vitepress 定制的主题🎨
|
|
9
|
-
- 千万不要因为走得太久,而忘记了我们为什么出发
|
|
10
|
-
- 人生就像一场修行,你不可能一开始就修成正果
|
|
11
|
-
- 无论多么沉重的负担,也不要忘记微笑;无论多么漫长的路程,也不要忘记坚持
|
|
12
|
-
- 生活的真谛不在繁华,而在于淡泊
|
|
13
|
-
# 设置 inspiringTimeout 可以实现自动切换
|
|
14
|
-
inspiringTimeout: 3000
|
|
15
|
-
pageSize: 6
|
|
16
|
-
---
|
|
Binary file
|
|
Binary file
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: 通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
|
|
3
|
-
---
|
|
4
|
-
# Mermaid - 流程图
|
|
5
|
-
|
|
6
|
-
>通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
|
|
7
|
-
|
|
8
|
-
:::tip 一点说明
|
|
9
|
-
基于 [vitepress-plugin-mermaid](https://github.com/emersonbottero/vitepress-plugin-mermaid) 实现
|
|
10
|
-
:::
|
|
11
|
-
|
|
12
|
-
简单语法如下,详细流程图语法见 [Mermaid 中文文档](https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md)
|
|
13
|
-
|
|
14
|
-
<pre>
|
|
15
|
-
```mermaid
|
|
16
|
-
flowchart TD
|
|
17
|
-
Start --> Stop
|
|
18
|
-
```
|
|
19
|
-
</pre>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
效果如下
|
|
23
|
-
|
|
24
|
-
```mermaid
|
|
25
|
-
flowchart TD
|
|
26
|
-
Start --> Stop
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
默认开启,可以通过`mermaid`进行进一步配置,或关闭
|
|
30
|
-
|
|
31
|
-
:::code-group
|
|
32
|
-
```ts [① 关闭]
|
|
33
|
-
const blogTheme = getThemeConfig({
|
|
34
|
-
mermaid: false
|
|
35
|
-
})
|
|
36
|
-
```
|
|
37
|
-
```ts [② 进一步配置]
|
|
38
|
-
const blogTheme = getThemeConfig({
|
|
39
|
-
mermaid: {
|
|
40
|
-
// refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
|
|
41
|
-
}
|
|
42
|
-
})
|
|
43
|
-
```
|
|
44
|
-
:::
|
|
45
|
-
|
|
46
|
-
下面看一下官方其它案例
|
|
47
|
-
|
|
48
|
-
**时序图**
|
|
49
|
-
```mermaid
|
|
50
|
-
sequenceDiagram
|
|
51
|
-
Alice->>John: Hello John, how are you?
|
|
52
|
-
loop Healthcheck
|
|
53
|
-
John->>John: Fight against hypochondria
|
|
54
|
-
end
|
|
55
|
-
Note right of John: Rational thoughts!
|
|
56
|
-
John-->>Alice: Great!
|
|
57
|
-
John->>Bob: How about you?
|
|
58
|
-
Bob-->>John: Jolly good!
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
**甘特图**
|
|
62
|
-
```mermaid
|
|
63
|
-
gantt
|
|
64
|
-
section Section
|
|
65
|
-
Completed :done, des1, 2014-01-06,2014-01-08
|
|
66
|
-
Active :active, des2, 2014-01-07, 3d
|
|
67
|
-
Parallel 1 : des3, after des1, 1d
|
|
68
|
-
Parallel 2 : des4, after des1, 1d
|
|
69
|
-
Parallel 3 : des5, after des3, 1d
|
|
70
|
-
Parallel 4 : des6, after des4, 1d
|
|
71
|
-
```
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
top: 3
|
|
3
|
-
---
|
|
4
|
-
# 更多能力
|
|
5
|
-
|
|
6
|
-
主题还提供了许多开箱即用的能力,项见文档 https://theme.sugarat.top
|
|
7
|
-
|
|
8
|
-
* [主题配置:首页&文章](https://theme.sugarat.top/config/frontmatter.html) - 主题提供的一些 `frontmatter`
|
|
9
|
-
* [主题配置:全局](https://theme.sugarat.top/config/global.html) - 主题提供的额外能力
|
|
10
|
-
* [主题配置:样式](https://theme.sugarat.top/config/style.html) - 自定义博客样式介绍
|
|
11
|
-
* [主题配置:组件能力](https://theme.sugarat.top/config/component.html) - 自定义博客样式介绍
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sticky: 999
|
|
3
|
-
description: 1分钟内完成自己的博客创建
|
|
4
|
-
descriptionHTML: '
|
|
5
|
-
<span style="color:var(--description-font-color);">1分钟内完成自己的博客创建</span>
|
|
6
|
-
<pre style="background-color: #292b30; padding: 15px; border-radius: 10px;" class="shiki material-theme-palenight"><code>
|
|
7
|
-
<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>
|
|
8
|
-
</code>
|
|
9
|
-
</pre>'
|
|
10
|
-
tag:
|
|
11
|
-
- SOP
|
|
12
|
-
top: 1
|
|
13
|
-
sidebar: false
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
# 快速上手
|
|
17
|
-
1分钟内完成自己的博客创建
|
|
18
|
-
|
|
19
|
-
## 快速创建项目
|
|
20
|
-
使用 [@sugarat/create-theme](https://github.com/ATQQ/sugar-blog/tree/master/packages/create-theme) 快速创建模板项目
|
|
21
|
-
|
|
22
|
-
:::code-group
|
|
23
|
-
```sh [npm]
|
|
24
|
-
npm create @sugarat/theme@latest
|
|
25
|
-
```
|
|
26
|
-
```sh [yarn]
|
|
27
|
-
yarn create @sugarat/theme
|
|
28
|
-
```
|
|
29
|
-
```sh [pnpm]
|
|
30
|
-
pnpm create @sugarat/theme
|
|
31
|
-
```
|
|
32
|
-
:::
|
|
33
|
-
|
|
34
|
-
当然你也可以自定义项目名创建
|
|
35
|
-
:::code-group
|
|
36
|
-
```sh [npm]
|
|
37
|
-
npm create @sugarat/theme@latest my-first-blog
|
|
38
|
-
```
|
|
39
|
-
```sh [yarn]
|
|
40
|
-
yarn create @sugarat/theme my-first-blog
|
|
41
|
-
```
|
|
42
|
-
```sh [pnpm]
|
|
43
|
-
pnpm create @sugarat/theme my-first-blog
|
|
44
|
-
```
|
|
45
|
-
:::
|
|
46
|
-
|
|
47
|
-
接下来按照 [操作指引](https://app.warp.dev/block/lZAFeRnRFgOcsRSUOU5ApV) 进行操作即可
|
|
48
|
-
|
|
49
|
-

|
|
50
|
-
|
|
51
|
-
① 切换到项目的目录
|
|
52
|
-
```sh
|
|
53
|
-
cd my-blog
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
② 安装依赖
|
|
57
|
-
::: code-group
|
|
58
|
-
|
|
59
|
-
```sh [pnpm]
|
|
60
|
-
pnpm install
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
```sh [安装 PNPM]
|
|
64
|
-
# 如果你没有 PNPM 请先安装
|
|
65
|
-
npm i -g pnpm
|
|
66
|
-
```
|
|
67
|
-
:::
|
|
68
|
-
|
|
69
|
-
③ 开发启动
|
|
70
|
-
```sh
|
|
71
|
-
pnpm dev
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
你就会得到一个这样的页面
|
|
75
|
-
|
|
76
|
-

|
|
77
|
-
|
|
78
|
-
④ 构建产物
|
|
79
|
-
```sh
|
|
80
|
-
pnpm build
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
⑤ 预览构建产物
|
|
84
|
-
```sh
|
|
85
|
-
pnpm serve
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
## 升级
|
|
89
|
-
|
|
90
|
-
如果主题更新了,升级主题,原项目只需执行如下指令即可
|
|
91
|
-
```sh
|
|
92
|
-
pnpm up @sugarat/theme
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## 更多
|
|
96
|
-
* [主题配置:首页&文章](https://theme.sugarat.top/config/frontmatter.html) - 主题提供的一些 `frontmatter`
|
|
97
|
-
* [主题配置:全局](https://theme.sugarat.top/config/global.html) - 主题提供的额外能力
|
|
98
|
-
* [主题配置:样式](https://theme.sugarat.top/config/style.html) - 自定义博客样式介绍
|
|
99
|
-
* [主题配置:组件能力](https://theme.sugarat.top/config/component.html) - 自定义博客样式介绍
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: 介绍一下自定义主题的部分样式
|
|
3
|
-
title: 🔧 主题样式定制
|
|
4
|
-
readingTime: false
|
|
5
|
-
tag:
|
|
6
|
-
- 配置
|
|
7
|
-
recommend: 3
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
# 样式配置
|
|
11
|
-
样式自定义,参考[官方文档思路](https://vitepress.vuejs.org/guide/theme-introduction#customizing-css)
|
|
12
|
-
|
|
13
|
-
在 `.vitepress/theme/index.ts` 中引入自定义的样式文件,覆盖默认主题样式即可
|
|
14
|
-
|
|
15
|
-
例如:
|
|
16
|
-
|
|
17
|
-
博客模板里,提供了一个如下例子
|
|
18
|
-
|
|
19
|
-
```ts
|
|
20
|
-
// .vitepress/theme/index.ts [!code focus]
|
|
21
|
-
import BlogTheme from '@sugarat/theme'
|
|
22
|
-
// 自定义样式重载 // [!code focus]
|
|
23
|
-
import './style.scss' // [!code focus]
|
|
24
|
-
|
|
25
|
-
export default BlogTheme
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
里面有如下内容
|
|
29
|
-
```scss
|
|
30
|
-
.VPHome {
|
|
31
|
-
// 自定义首页背景图
|
|
32
|
-
&::before {
|
|
33
|
-
// 图片来源:https://zhuanlan.zhihu.com/p/54060187
|
|
34
|
-
background-image: url(./assets/bg.webp);
|
|
35
|
-
background-size: cover;
|
|
36
|
-
}
|
|
37
|
-
// 定义遮罩样式
|
|
38
|
-
background: radial-gradient(
|
|
39
|
-
ellipse,
|
|
40
|
-
rgba(var(--bg-gradient-home), 1) 0%,
|
|
41
|
-
rgba(var(--bg-gradient-home), 0) 150%
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
```
|
|
45
|
-
解除注释后,就能看到模板首页背景图发生了变化
|
|
46
|
-
|
|
47
|
-

|
|
48
|
-
|
|
49
|
-
## 首页背景
|
|
50
|
-
```scss
|
|
51
|
-
.VPHome {// [!code focus]
|
|
52
|
-
&::before {// [!code focus]
|
|
53
|
-
background-image: url(./assets/bg.webp); // [!code focus]
|
|
54
|
-
background-size: cover; // [!code focus]
|
|
55
|
-
} // [!code focus]
|
|
56
|
-
} // [!code focus]
|
|
57
|
-
|
|
58
|
-
.VPHome {
|
|
59
|
-
// 定义遮罩样式,控制图片展示的程度
|
|
60
|
-
background: radial-gradient(
|
|
61
|
-
ellipse,
|
|
62
|
-
rgba(var(--bg-gradient-home), 1) 0%,
|
|
63
|
-
rgba(var(--bg-gradient-home), 0) 150%
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## 置顶样式
|
|
69
|
-
可以自行修改置顶icon的样式
|
|
70
|
-
```scss
|
|
71
|
-
.blog-item .pin.pin::before {
|
|
72
|
-
// 修改颜色
|
|
73
|
-
background-image: linear-gradient(red, red);
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-

|
|
77
|
-
|
|
78
|
-
```scss
|
|
79
|
-
// 隐藏置顶的icon
|
|
80
|
-
.blog-item .pin.pin::before {
|
|
81
|
-
display: none;
|
|
82
|
-
}
|
|
83
|
-
```
|
|
84
|
-

|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
## More
|
|
88
|
-
... wait a moment
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "vitepress-blog",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"private": true,
|
|
5
|
-
"scripts": {
|
|
6
|
-
"dev": "vitepress dev docs",
|
|
7
|
-
"build": "vitepress build docs",
|
|
8
|
-
"serve": "vitepress serve docs"
|
|
9
|
-
},
|
|
10
|
-
"dependencies": {
|
|
11
|
-
"@element-plus/icons-vue": "^2.1.0",
|
|
12
|
-
"@sugarat/theme": "^0.1.39",
|
|
13
|
-
"element-plus": "^2.3.8",
|
|
14
|
-
"vue": "^3.3.4"
|
|
15
|
-
},
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"sass": "^1.64.1",
|
|
18
|
-
"typescript": "^5.1.6",
|
|
19
|
-
"vitepress": "1.0.0-beta.7"
|
|
20
|
-
},
|
|
21
|
-
"author": "粥里有勺糖",
|
|
22
|
-
"license": "MIT"
|
|
23
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
/* eslint-disable no-console */
|
|
4
|
-
import fs from 'fs-extra'
|
|
5
|
-
import path from 'path'
|
|
6
|
-
|
|
7
|
-
function createThemeProject(destination) {
|
|
8
|
-
const templatePath = path.join(__dirname, 'template')
|
|
9
|
-
|
|
10
|
-
fs.copy(templatePath, destination, (err) => {
|
|
11
|
-
if (err) {
|
|
12
|
-
console.error('An error occurred while copying template files:', err)
|
|
13
|
-
} else {
|
|
14
|
-
console.log('🎉 🎉 created successfully!')
|
|
15
|
-
console.log()
|
|
16
|
-
|
|
17
|
-
console.log(`project in ${destination}`)
|
|
18
|
-
|
|
19
|
-
console.log()
|
|
20
|
-
|
|
21
|
-
const msg = `Done. Now run:
|
|
22
|
-
|
|
23
|
-
① cd ${path.parse(projectName).name}
|
|
24
|
-
② pnpm install
|
|
25
|
-
③ pnpm run dev`
|
|
26
|
-
|
|
27
|
-
console.log(msg)
|
|
28
|
-
}
|
|
29
|
-
})
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
console.log('Creating @sugarat/theme project...')
|
|
33
|
-
console.log()
|
|
34
|
-
|
|
35
|
-
const projectName = process.argv[2] || 'my-blog'
|
|
36
|
-
createThemeProject(path.join(process.cwd(), projectName))
|