Skip to content

Commit b8fb937

Browse files
yzqdevyzqdev
committed
theme, 2024-04-18 21:39:13
1 parent 507cf98 commit b8fb937

File tree

12 files changed

+221
-50
lines changed

12 files changed

+221
-50
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
.yarn
12
pnpm-lock.yaml
23
package-lock.json
34
yarn.lock

‎package.json

+10-8
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,21 @@
99
"scripts": {
1010
"build": "vitepress build src",
1111
"dev": "vitepress dev src --host",
12-
"preview": "vitepress preview src",
12+
"preview": "vitepress preview src",
1313
"lint": "prettier --write src/**/*.{vue,ts,css,scss,html,js} docs/**/*.ts"
1414
},
1515
"dependencies": {
16+
"@element-plus/icons-vue": "^2.3.1",
17+
"@sugarat/theme": "^0.3.0",
1618
"dayjs": "^1.11.10",
17-
"element-plus": "^2.4.1",
18-
"vue": "^3.3.6"
19+
"element-plus": "^2.5.3",
20+
"vue": "^3.4.23"
1921
},
2022
"devDependencies": {
21-
"@types/node": "^18.18.6",
22-
"prettier": "^3.0.3",
23-
"sass": "^1.69.4",
24-
"typescript": "^5.2.2",
25-
"vitepress": "^1.0.0-rc.23"
23+
"@types/node": "^20.12.7",
24+
"prettier": "^3.2.5",
25+
"sass": "^1.75.0",
26+
"typescript": "^5.4.5",
27+
"vitepress": "^1.1.0"
2628
}
2729
}

‎src/.vitepress/blog-theme.ts

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// 主题独有配置
2+
import { getThemeConfig } from '@sugarat/theme/node'
3+
4+
// 开启RSS支持（RSS配置）
5+
// import type { Theme } from '@sugarat/theme'
6+
7+
// const baseUrl = 'https://sugarat.top'
8+
// const RSS: Theme.RSSOptions = {
9+
// title: '粥里有勺糖',
10+
// baseUrl,
11+
// copyright: 'Copyright (c) 2018-present, 粥里有勺糖',
12+
// description: '你的指尖,拥有改变世界的力量（大前端相关技术分享）',
13+
// language: 'zh-cn',
14+
// image: 'https://img.cdn.sugarat.top/mdImg/MTY3NDk5NTE2NzAzMA==674995167030',
15+
// favicon: 'https://sugarat.top/favicon.ico',
16+
// }
17+
18+
// 所有配置项，详见文档: https://theme.sugarat.top/
19+
const blogTheme = getThemeConfig({
20+
// 开启RSS支持
21+
// RSS,
22+
23+
// 搜索
24+
// 默认开启pagefind离线的全文搜索支持（如使用其它的可以设置为false）
25+
// 如果npx pagefind 时间过长，可以手动将其安装为项目依赖 pnpm add pagefind
26+
// search: false,
27+
28+
// 页脚
29+
footer: {
30+
// message 字段支持配置为HTML内容，配置多条可以配置为数组
31+
// message: '下面 的内容和图标都是可以修改的噢（当然本条内容也是可以隐藏的）',
32+
copyright: 'MIT License | yzqdev',
33+
// icpRecord: {
34+
// name: '蜀ICP备19011724号',
35+
// link: 'https://beian.miit.gov.cn/'
36+
// },
37+
// securityRecord: {
38+
// name: '公网安备xxxxx',
39+
// link: 'https://www.beian.gov.cn/portal/index.do'
40+
// },
41+
},
42+
43+
// 主题色修改
44+
themeColor: 'el-blue',
45+
46+
// 文章默认作者
47+
author: 'yzqdev',
48+
49+
// 友链
50+
friend: [
51+
52+
{
53+
nickname: 'Vitepress',
54+
des: 'Vite & Vue Powered Static Site Generator',
55+
avatar:
56+
'https://vitepress.dev/vitepress-logo-large.webp',
57+
url: 'https://vitepress.dev/',
58+
},
59+
],
60+
61+
// 公告
62+
63+
})
64+
65+
export { blogTheme }

‎src/.vitepress/config.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { defineConfig } from 'vitepress'
22
import { navbar } from './nav'
33
import { sidebar } from './sidebar'
4+
// 导入主题的配置
5+
import { blogTheme } from './blog-theme'
46
export default defineConfig({
57
base: '/html-tutor/',
68

79
// site-level locales config
8-
outDir:"../dist",
10+
outDir: '../dist',
911
head: [
1012
// ['link', { rel: 'shortcut icon', type: 'image/png', href: '/hero.png' }],
1113
// ['link', { rel: 'shortcut icon', type: 'image/png', href: '/hero.png' }],
@@ -15,14 +17,21 @@ outDir:"../dist",
1517
title: 'html教程',
1618
description: 'Vue 驱动的静态网站生成器',
1719
vue: {},
18-
markdown:{
19-
theme: {light:'github-light',dark:'solarized-light'}
20-
},
20+
markdown: {
21+
theme: { light: 'github-light', dark: 'solarized-light' },
22+
},
23+
extends: blogTheme,
2124
themeConfig: {
2225
logo: '/vue.svg',
2326
search: {
2427
provider: 'local',
2528
},
29+
// 展示 2,3 级标题在目录中
30+
31+
// 默认文案修改
32+
returnToTopLabel: '回到顶部',
33+
sidebarMenuLabel: '相关文章',
34+
lastUpdatedText: '上次更新于',
2635
// theme-level locales config
2736

2837
// navbar
@@ -33,8 +42,7 @@ theme: {light:'github-light',dark:'solarized-light'}
3342
{ icon: 'github', link: 'https://github.com/yzqdev/html-tutor' },
3443
],
3544
editLink: {
36-
pattern:
37-
'https://github.com/yzqdev/html-tutor/edit/main/src/:path',
45+
pattern: 'https://github.com/yzqdev/html-tutor/edit/main/src/:path',
3846
text: 'Edit this page on GitHub',
3947
},
4048
footer: {

‎src/.vitepress/nav.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DefaultTheme } from 'vitepress/types/default-theme'
1+
import { DefaultTheme } from 'vitepress'
22

33
export const navbar: DefaultTheme.NavItem[] = [
44
{
@@ -9,7 +9,10 @@ export const navbar: DefaultTheme.NavItem[] = [
99
{
1010
text: 'css',
1111
activeMatch: '^/css-tutor/',
12-
link: '/css-tutor/',
12+
13+
items:[{text:'css tutor', link: '/css-tutor/',},
14+
{text:'css selector', link: '/css-tutor/selector/index', activeMatch: '^/css-tutor/selector/',}
15+
]
1316
},
1417
{
1518
text: 'dom',

‎src/.vitepress/sidebar.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,14 @@ export const sidebar: DefaultTheme.Sidebar = {
107107
{ text: 'layout', link: '/css-tutor/css-layout' },
108108
{ text: '三角形', link: '/css-tutor/triangle' },
109109
],
110-
},
110+
},{
111+
text:'css选择器',
112+
collapsed:false,
113+
items:[
114+
{ text: '主页', link: '/css-tutor/selector/' },
115+
{ text: '元素', link: '/css-tutor/selector/element' },
116+
]
117+
}
111118
],
112119
'/others': [
113120
{

‎src/.vitepress/theme/index.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
// .vitepress/theme/index.js
2-
import DefaultTheme from 'vitepress/theme'
3-
import './custom.css'
1+
import BlogTheme from '@sugarat/theme'
42

5-
export default DefaultTheme
3+
// 自定义样式重载
4+
// import './style.scss'
5+
6+
// 自定义主题色
7+
import './user-theme.css'
8+
9+
export default BlogTheme

‎src/.vitepress/theme/custom.css renamed to ‎src/.vitepress/theme/user-theme.css

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
--vp-layout-max-width: 95%;
33
--vp-sidebar-width: 15rem;
44
--vp-nav-height-desktop: 50px;
5+
6+
--vp-c-brand-1: #42b883;
7+
--vp-c-brand-2: #747bff;
8+
59
}
610
.content-container {
711
max-width: 100% !important;

‎src/css-tutor/selector/comp/Selector.vue

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<div>
7+
<h2>选择器列表</h2>
8+
<div class="box">
9+
<p>颜色是</p>
10+
<div>
11+
<p>孙子的颜色是</p>
12+
</div>
13+
</div>
14+
<h2>后代选择器</h2>
15+
<div class="box1">
16+
<p>颜色是</p>
17+
<div>
18+
<p>孙子的颜色是</p>
19+
</div>
20+
</div>
21+
22+
<h2>子代关系选择器</h2>
23+
<div class="box2">
24+
<p>颜色是</p>
25+
<div>
26+
<p>孙子的颜色是</p>
27+
</div>
28+
</div>
29+
30+
<h2>邻接兄弟 </h2>
31+
<div class="box3">
32+
<p>颜色是</p>
33+
<div>
34+
<p>孙子的颜色是</p>
35+
</div>
36+
</div>
37+
<p>我的兄弟</p>
38+
<p>我的兄弟2</p>
39+
40+
<h2>通用兄弟</h2>
41+
<div class="box4">
42+
<p>颜色是</p>
43+
<div>
44+
<p>孙子的颜色是</p>
45+
</div>
46+
</div>
47+
<p>我的兄弟</p>
48+
<p>我的兄弟2</p>
49+
</div>
50+
</template>
51+
52+
<style lang="scss" scoped>
53+
.box {
54+
&,p{
55+
color:cyan;
56+
}
57+
58+
}
59+
.box1 {
60+
p {
61+
color: cyan
62+
}
63+
}
64+
.box2 {
65+
> p {
66+
color: cyan
67+
}
68+
}
69+
.box3{
70+
+p{
71+
color:cyan;
72+
}
73+
}
74+
.box4 {
75+
~p {
76+
color: cyan;
77+
}
78+
}
79+
</style>

‎src/css-tutor/selector/element.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# 元素选择
2+
3+
<script setup>
4+
import Selector from './comp/Selector.vue'
5+
6+
</script>
7+
8+
## 元素选择演示
9+
10+
<Selector></Selector>
11+
12+
<<< ./comp/Selector.vue

‎src/css-tutor/selector/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 选择器
2+
3+
## hello

‎src/index.md

+12-29
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,15 @@
11
---
22
layout: home
3-
4-
title: VitePress
5-
titleTemplate: Vite & Vue Powered Static Site Generator
6-
7-
hero:
8-
name: VitePress
9-
text: Vite & Vue Powered Static Site Generator
10-
tagline: Simple, powerful, and fast. Meet the modern SSG framework you've always wanted.
11-
actions:
12-
- theme: brand
13-
text: Get Started
14-
link: /guide/
15-
- theme: alt
16-
text: View on GitHub
17-
link: https://github.com/vuejs/vitepress
18-
19-
features:
20-
- icon: 📝
21-
title: Focus on Your Content
22-
details: Effortlessly create beautiful documentation sites with just markdown.
23-
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 256.32"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
24-
title: Enjoy the Vite DX
25-
details: Instant server start, lightning fast hot updates, and leverage Vite ecosystem plugins.
26-
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 220.8"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>
27-
title: Customize with Vue
28-
details: Use Vue syntax and components directly in markdown, or build custom themes with Vue.
29-
- icon: 🚀
30-
title: Ship Fast Sites
31-
details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
3+
# 首页部分元素定制
4+
blog:
5+
name: 'html tutor'
6+
motto: html教程
7+
inspiring:
8+
- 千万不要因为走得太久，而忘记了我们为什么出发
9+
- 人生就像一场修行，你不可能一开始就修成正果
10+
- 无论多么沉重的负担，也不要忘记微笑；无论多么漫长的路程，也不要忘记坚持
11+
- 生活的真谛不在繁华，而在于淡泊
12+
# 设置 inspiringTimeout 可以实现自动切换
13+
inspiringTimeout: 3000
14+
pageSize: 6
3215
---

0 commit comments

Comments
 (0)