Revision of 新版Butterfly关于页面 - 清羽飞扬の代码片段

LiuShen revised this gist 5 months ago. Go to revision

4 files changed, 6 insertions, 6 deletions

about.pug

			@@ -106,4 +106,5 @@
106	106		\| #{site.data.about.self_evaluation.work}
107	107		p.summary
108	108		strong 总结:
109		-	\| #{site.data.about.self_evaluation.summary}
	109	+	\| #{site.data.about.self_evaluation.summary}
	110	+

about.styl

			@@ -282,6 +282,4 @@
282	282		right: 15px
283	283		bottom: -35px
284	284		p
285		-	margin-top: 0
286		-
287		-
	285	+	margin-top: 0

about.yml

			@@ -87,4 +87,5 @@ hobbies: # 新增兴趣爱好
87	87		self_evaluation:
88	88		thoughts: 思想上乐观开朗，乐于助人，具有团队协作精神及创新意识。
89	89		work: 工作上极富责任心与信念感，对待工作认真负责，有较强的组织管理及动手能力。
90		-	summary: 人嘎嘎好！
	90	+	summary: 人嘎嘎好！
	91	+

page.pug

			@@ -33,4 +33,4 @@ block content
33	33		include includes/page/404.pug
34	34		default
35	35		include includes/page/default-page.pug
36		-	+commentLoad
	36	+	+commentLoad

LiuShen revised this gist 5 months ago. Go to revision

5 files changed, 571 insertions

about.pug(file created)

		@@ -0,0 +1,109 @@
1	+	#about-container
2	+	section.top-section
3	+	.top-content
4	+	.float-texts
5	+	each text, index in site.data.about.top_info.float_text.slice(0, 4)
6	+	.float-text(class=`float-text-${index + 1}`) #{text}
7	+	.avatar-container
8	+	img.no-lightbox.avatar(src=url_for(site.data.about.top_info.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="")
9	+	.float-texts
10	+	each text, index in site.data.about.top_info.float_text.slice(4, 8)
11	+	.float-text(class=`float-text-${index + 5}`) #{text}
12	+	.site-name #{site.data.about.top_info.site_name}
13	+	.motto #{site.data.about.top_info.motto}
14	+
15	+	section.info-section
16	+	.left-column.card
17	+	.personal-info
18	+	h2.section-title 个人信息
19	+	.info-grid
20	+	p
21	+	strong 姓名:
22	+	\| #{site.data.about.personal_info.name}
23	+	p
24	+	strong 性别:
25	+	\| #{site.data.about.personal_info.gender}
26	+	p
27	+	strong 地址:
28	+	\| #{site.data.about.personal_info.address}
29	+	p
30	+	strong 学校:
31	+	\| #{site.data.about.personal_info.school}
32	+	p
33	+	strong 年级:
34	+	\| #{site.data.about.personal_info.grade}
35	+	p
36	+	strong 专业:
37	+	\| #{site.data.about.personal_info.major}
38	+	p
39	+	strong 邮箱:
40	+	a(href=`mailto:${site.data.about.personal_info.email}`) #{site.data.about.personal_info.email}
41	+	p
42	+	strong QQ:
43	+	\| #{site.data.about.personal_info.QQ}
44	+	p
45	+	strong 生日:
46	+	\| #{site.data.about.personal_info.birthday}
47	+	.flex-1
48	+	img.left-column-bottom(src=url_for(site.data.about.personal_info.bottom_img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="")
49	+	.right-column
50	+	.personality.card
51	+	.personality-info
52	+	p.type
53	+	\| #{site.data.about.personality.type}
54	+	p.type_name #{site.data.about.personality.type_name}
55	+	.flex-1
56	+	p.learn_more
57	+	\| 点击在
58	+	a(href=url_for(site.data.about.personality.url), target="_blank" ref="noopener nofollower") 16Personalities
59	+	\| 上了解更多
60	+	.personality-svg
61	+	img.no-lightbox.svg(src=site.data.about.personality.svg onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="Personality SVG")
62	+
63	+	.description-and-social.card
64	+	p.description #{site.data.about.description_and_social_links.description}
65	+	.social-links
66	+	each link in site.data.about.description_and_social_links.social_links
67	+	a(href=link.url, target="_blank")
68	+	img.no-lightbox(src=url_for(link.icon) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=link.platform)
69	+
70	+	section.skills-and-projects
71	+	.skills.card
72	+	h2.section-title 技能
73	+	.skills-grid
74	+	.skill-category
75	+	each skill in site.data.about.skills.technical
76	+	.skill-card
77	+	img(src=url_for(skill) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="技术图标")
78	+	.skill-category.category-2
79	+	each skill in site.data.about.skills.general
80	+	.skill-card
81	+	img(src=url_for(skill) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="通用图标")
82	+	p.learning
83	+	\| #{site.data.about.skills.learning}
84	+	.projects.card
85	+	h2.section-title 项目
86	+	.projects-grid
87	+	each project in site.data.about.projects
88	+	.project
89	+	a(href=project.url, target="_blank")
90	+	h3 #{project.name}
91	+	p #{project.description}
92	+
93	+	section.hobbies-and-evaluation
94	+	.hobbies.card
95	+	h2.section-title 爱好
96	+	ul.hobbies-list
97	+	each hobby in site.data.about.hobbies
98	+	li #{hobby}
99	+	.self-evaluation.card
100	+	h2.section-title 评价
101	+	p
102	+	strong 思想:
103	+	\| #{site.data.about.self_evaluation.thoughts}
104	+	p
105	+	strong 工作:
106	+	\| #{site.data.about.self_evaluation.work}
107	+	p.summary
108	+	strong 总结:
109	+	\| #{site.data.about.self_evaluation.summary}

about.styl(file created)

		@@ -0,0 +1,287 @@
1	+	#about-container
2	+	// 竖着，垂直方向居中
3	+	display: flex
4	+	flex-direction: column
5	+
6	+	.card
7	+	@extend .cardHover
8	+	background-color: var(--liushen-card-bg)
9	+	border-radius: 12px
10	+	overflow: hidden
11	+	position: relative
12	+	border: var(--liushen-card-border)
13	+
14	+	.section-title
15	+	// 宋体
16	+	font-family: 'SimSun', 'Microsoft YaHei', sans-serif
17	+	font-size: 60px
18	+	font-weight: 1000
19	+	color: #00000000
20	+	-webkit-text-stroke: 1px var(--liushen-secondtext)
21	+	position: absolute
22	+
23	+	.flex-1
24	+	flex 1
25	+
26	+	.top-section
27	+	display: flex
28	+	flex-direction: column
29	+	align-items: center
30	+	justify-content: center
31	+	border-bottom: 1px solid #888888b0
32	+	width: 100%
33	+	padding-bottom: 20px
34	+	margin-bottom: 20px
35	+
36	+	.top-content
37	+	display: flex
38	+	align-items: center
39	+	margin-bottom: 20px
40	+
41	+	.float-texts
42	+	font-size: 14px
43	+	font-weight: bold
44	+	+maxWidth600()
45	+	display: none
46	+
47	+	.float-text
48	+	margin-top: 10px
49	+	background-color: var(--liushen-card-secondbg)
50	+	border-radius: 20px
51	+	padding: 1px 20px
52	+	border: var(--liushen-card-border)
53	+	width: fit-content
54	+	// 上下不停轻微浮动
55	+	@keyframes floatUpDown
56	+	0%
57	+	transform: translateY(0px)
58	+	50%
59	+	transform: translateY(-4px)
60	+	100%
61	+	transform: translateY(0px)
62	+	animation: floatUpDown 4s ease-in-out infinite
63	+
64	+	&.float-text-1,
65	+	&.float-text-4,
66	+	&.float-text-6,
67	+	&.float-text-7
68	+	// 向左边偏移
69	+	margin-left: 20px
70	+
71	+	&.float-text-1,
72	+	&.float-text-5
73	+	animation-delay: 0.5s
74	+	&.float-text-2,
75	+	&.float-text-6
76	+	animation-delay: 1.0s
77	+	&.float-text-3,
78	+	&.float-text-7
79	+	animation-delay: 1.5s
80	+	&.float-text-4,
81	+	&.float-text-8
82	+	animation-delay: 2.0s
83	+
84	+	.avatar-container
85	+	background-color: var(--liushen-card-bg)
86	+	width: 180px
87	+	height: 180px
88	+	border-radius: 50%
89	+	padding: 15px
90	+	margin: 0 10px
91	+
92	+	.avatar
93	+	width: 100%
94	+	height: 100%
95	+	border-radius: 50%
96	+
97	+	.site-name
98	+	font-size: 20px
99	+	font-weight: bold
100	+
101	+	.motto
102	+	font-size: 14px
103	+	font-weight: bold
104	+
105	+	.info-section
106	+	display: flex
107	+	width: 100%
108	+	margin-bottom: 20px
109	+
110	+	.left-column
111	+	width: 30%
112	+	display: flex
113	+	flex-direction: column
114	+	padding: 0
115	+	+maxWidth768()
116	+	display: none
117	+
118	+	.personal-info
119	+	padding: 20px 20px 0 20px
120	+	.section-title
121	+	top: 0
122	+	right: -15px
123	+	// 文本竖向显示
124	+	writing-mode: vertical-rl
125	+	text-orientation: upright
126	+
127	+	.info-grid
128	+	p
129	+	margin-top: 0
130	+	margin-bottom: 10px
131	+
132	+	img.left-column-bottom
133	+	width: 100%
134	+	margin-top: 20px
135	+	transition: transform 0.3s ease-in-out
136	+
137	+	&:hover
138	+	transform: scale(1.2)
139	+
140	+	.right-column
141	+	width: 70%
142	+	margin-left: 20px
143	+	display: flex
144	+	flex-direction: column
145	+	+maxWidth768()
146	+	width: 100%
147	+	margin-left: 0
148	+	.personality
149	+	height: 220px
150	+	display: flex
151	+	flex-direction: row
152	+	align-items: center
153	+	margin-bottom: 20px
154	+	.personality-info
155	+	flex: 1
156	+	display: flex
157	+	flex-direction: column
158	+	padding: 20px
159	+	height: 100%
160	+	p
161	+	margin: 0
162	+	.type
163	+	font-size: 23px
164	+	font-weight: bold
165	+	.type_name
166	+	font-size: 30px
167	+	font-weight: bold
168	+	.personality-svg
169	+	width: 200px
170	+	height: 200px
171	+	transition: transform 0.3s ease-in-out
172	+	&:hover
173	+	transform: rotate(20deg)
174	+
175	+	.description-and-social
176	+	display: flex
177	+	flex: 1
178	+	flex-direction: column
179	+	.description
180	+	padding: 20px
181	+	.social-links
182	+	display: flex
183	+	flex-direction: row
184	+	justify-content: flex-start
185	+	margin-left: 20px
186	+	a
187	+	display: flex
188	+	align-items: center
189	+	border-radius: 12px
190	+	height: 80px
191	+	width: 80px
192	+	img
193	+	width: 65px
194	+	border-radius: 12px
195	+	height: 65px
196	+	.skills-and-projects
197	+	display: flex
198	+	flex-direction: row
199	+	margin-bottom: 20px
200	+	.learning
201	+	margin-left: 20px
202	+	.skills
203	+	width: 60%
204	+	margin-right: 20px
205	+	+maxWidth600()
206	+	width: 100%
207	+	margin-right: 0
208	+	.section-title
209	+	top: -35px
210	+	left: 15px
211	+	.skills-grid
212	+	margin-top: 90px
213	+	// 竖直方向居中
214	+	display: flex
215	+	flex-direction: column
216	+	// align-items: center
217	+	justify-content: center
218	+	.skill-category
219	+	display: flex
220	+	flex-direction: row
221	+	padding-left: 20px
222	+	// 不换行，超出部分直接省略
223	+	overflow: hidden
224	+	text-overflow: ellipsis
225	+	white-space: nowrap
226	+
227	+	&.category-2
228	+	// 从右往左，反过来，右边超出部分省略
229	+	flex-direction: row-reverse
230	+	margin-top: 20px
231	+	padding-right: 20px
232	+
233	+	.skill-card
234	+	width: 80px
235	+	height: 80px
236	+	padding: 10px
237	+	background-color: #87878780
238	+	margin-right: 10px
239	+	border-radius: 12px
240	+	img
241	+	width: 60px
242	+	height: 60px
243	+	object-fit: cover
244	+	object-position: center
245	+	border-radius: 10px
246	+
247	+	.projects
248	+	width: 40%
249	+	padding: 20px 20px 0 20px
250	+	+maxWidth600()
251	+	display: none
252	+	.section-title
253	+	top: -35px
254	+	left: 15px
255	+	.projects-grid
256	+	margin-top: 70px
257	+	.project
258	+	background-color: var(--liushen-card-secondbg)
259	+	border-radius: 12px
260	+	padding: 10px
261	+	margin-bottom: 20px
262	+	h3,p
263	+	margin: 0
264	+
265	+	.hobbies-and-evaluation
266	+	display: flex
267	+	flex-direction: row
268	+	.hobbies
269	+	width: 40%
270	+	margin-right: 20px
271	+	+maxWidth600()
272	+	display: none
273	+	.section-title
274	+	right: 15px
275	+	bottom: -35px
276	+	.self-evaluation
277	+	width: 60%
278	+	padding: 20px
279	+	+maxWidth600()
280	+	width: 100%
281	+	.section-title
282	+	right: 15px
283	+	bottom: -35px
284	+	p
285	+	margin-top: 0
286	+
287	+

about.yml(file created)

		@@ -0,0 +1,90 @@
1	+	# 个人信息配置文件
2	+	# 该文件用于配置个人信息、社交链接、性格分析、教育背景、技能、项目经历、兴趣爱好、自我评价等信息
3	+	# 该文件的内容会在个人信息页面中展示
4	+	top_info:
5	+	avatar: https://blog.liushen.fun/info/avatar.ico # 新增头像
6	+	site_name: 清羽飞扬 # 新增网站名称
7	+	motto: "柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜" # 新增座右铭
8	+	float_text: # 八条，漂浮在头像顶上
9	+	- "🐝 勤劳小蜜蜂"
10	+	- "🧱 踏实实在人"
11	+	- "👷‍♀️ 努力小天使"
12	+	- "🐔 乐观大白鹅"
13	+	- "阳光小少年 👱‍♀️"
14	+	- "温暖小太阳 ☀️"
15	+	- "可爱小白兔 🐰"
16	+	- "懒惰小胖猪 🐗"
17	+
18	+	personal_info:
19	+	name: 柳清扬
20	+	gender: 男
21	+	address: 陕西西安
22	+	school: 武汉理工大学
23	+	grade: 二〇二一级
24	+	major: 人工智能
25	+	email: 01@liushen.fun
26	+	QQ: 3162475700
27	+	birthday: "2003/01/01"
28	+	bottom_img: https://p.liiiu.cn/i/2024/04/14/661ab09243659.png
29	+
30	+	personality:
31	+	type: ENFJ-T
32	+	type_name: 主人公
33	+	svg: /config/img/enfj.svg
34	+	url: https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC
35	+
36	+	# 个人描述及社交链接配置
37	+	description_and_social_links:
38	+	description: 大家好！这里是清羽飞扬的小站。为什么叫清羽飞扬呢？因为“清扬”是我的名字，而“飞扬”代表着自由和轻盈，这与我的性格不谋而合。我是一个充满热情、富有同情心的人，喜欢与人交流，乐于分享我的想法和见解。在这里，我会分享我的生活点滴、兴趣爱好以及对世界的观察和思考。希望我的小站能给大家带来一些启发和乐趣。
39	+	social_links:
40	+	- platform: GitHub
41	+	url: https://github.com/willow-god
42	+	icon: https://p.liiiu.cn/i/2024/07/27/66a461a3098aa.webp
43	+	- platform: Gitee
44	+	url: https://gitee.com/willow-god
45	+	icon: https://p.liiiu.cn/i/2024/07/27/66a461c3dea80.webp
46	+	- platform: QQ
47	+	url: https://qm.qq.com/cgi-bin/qm_share/open_source_page?uin=3162475700&jump_from=webapi
48	+	icon: https://p.liiiu.cn/i/2024/07/27/66a461b627dc2.webp
49	+
50	+	skills:
51	+	technical:
52	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633005bf0fd1e.jpg
53	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647df7fa.png
54	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647e1f10.png
55	+	- https://img02.anheyu.com/adminuploads/1/2022/09/26/6330ff27e5c9b.png
56	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647dea51.png
57	+	- https://img02.anheyu.com/adminuploads/1/2023/05/09/645a45854e093.png
58	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633001374747b.png
59	+
60	+	general:
61	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633006cc55e07.png
62	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633006eee047b.png
63	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633006f9ab27d.png
64	+	- https://img02.anheyu.com/adminuploads/1/2023/04/11/6434a635e9726.webp
65	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633007087a4dc.webp
66	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/633005bf0fd1e.jpg
67	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647df7fa.png
68	+	- https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647e1f10.png
69	+	- https://img02.anheyu.com/adminuploads/1/2022/09/26/6330ff27e5c9b.png
70	+
71	+	learning: 正在持续学习中
72	+
73	+	projects: # 新增项目或作品集
74	+	- name: Friend-Circle-lite
75	+	description: 轻量化友链朋友圈
76	+	url: https://github.com/willow-god/Friend-Circle-Lite
77	+	- name: Hexo-Safego
78	+	description: hexo插件之安全跳转中转页
79	+	url: https://github.com/willow-god/hexo-safego
80	+
81	+	hobbies: # 新增兴趣爱好
82	+	- 阅读
83	+	- 写作
84	+	- 编程
85	+	- 摄影
86	+
87	+	self_evaluation:
88	+	thoughts: 思想上乐观开朗，乐于助人，具有团队协作精神及创新意识。
89	+	work: 工作上极富责任心与信念感，对待工作认真负责，有较强的组织管理及动手能力。
90	+	summary: 人嘎嘎好！

page.pug(file created)

		@@ -0,0 +1,36 @@
1	+	extends includes/layout.pug
2	+
3	+	block content
4	+	- const noCardLayout = ['shuoshuo', '404'].includes(page.type) ? 'nc' : ''
5	+	- var commentsJsLoad = false
6	+
7	+	mixin commentLoad
8	+	if page.comments !== false && theme.comments.use
9	+	- commentsJsLoad = true
10	+	!=partial('includes/third-party/comments/index', {}, {cache: true})
11	+
12	+	#page(class=noCardLayout)
13	+	if top_img === false && page.title
14	+	page-title= page.title
15	+
16	+	case page.type
17	+	when 'tags'
18	+	include includes/page/tags.pug
19	+	+commentLoad
20	+	when 'link'
21	+	include includes/page/flink.pug
22	+	+commentLoad
23	+	when 'categories'
24	+	include includes/page/categories.pug
25	+	+commentLoad
26	+	when 'devices'
27	+	include includes/page/devices.pug
28	+	when 'shuoshuo'
29	+	include includes/page/shuoshuo.pug
30	+	when 'about'
31	+	include includes/page/about.pug
32	+	when '404'
33	+	include includes/page/404.pug
34	+	default
35	+	include includes/page/default-page.pug
36	+	+commentLoad

readme.md(file created)

		@@ -0,0 +1,49 @@
1	+	## Hexo 自定义 About 页面说明
2	+
3	+	本项目修改自 Hexo 博客主题 `liushen`，用于添加自定义的 About 页面，包含数据、模板与样式支持。
4	+
5	+	### 修改说明
6	+
7	+	#### 1. 创建数据文件
8	+
9	+	创建 `[blogroot]/source/_data/about.yml`
10	+	用于定义 About 页面所需的数据内容（如个人简介、联系方式等）。
11	+
12	+	---
13	+
14	+	#### 2. 修改页面布局逻辑
15	+
16	+	编辑 `[blogroot]/themes/liushen/layout/page.pug` 文件，添加如下内容以接入自定义模板：
17	+
18	+	```pug
19	+	when 'about'
20	+	include includes/page/about.pug
21	+	```
22	+
23	+	注意不要完全按照本站，复制粘贴，可能会出现问题，下方文件仅供示例。
24	+
25	+	---
26	+
27	+	#### 3. 添加 Pug 模板
28	+
29	+	创建 `[blogroot]/themes/liushen/layout/includes/page/about.pug`
30	+	该文件将根据 `about.yml` 数据渲染对应页面内容，支持自定义结构和排版。
31	+
32	+	---
33	+
34	+	#### 4. 添加样式文件
35	+
36	+	创建 `[blogroot]/themes/liushen/source/css/_page/about.styl`
37	+	用于为 About 页面提供独立样式，按需定义页面布局、字体样式等。
38	+
39	+	---
40	+
41	+	### 使用说明
42	+
43	+	* 配置 `_config.yml` 中的 `menu` 项添加 `about` 页面入口；
44	+	* 在 `about.yml` 中填入所需数据；
45	+	* 修改 `about.pug` 与 `about.styl` 来实现所需视觉样式和页面布局。
46	+
47	+	---
48	+
49	+	完整代码请看当前gist中其余文件

Newer Older