LiuShen / 新版Butterfly关于页面

Last active 3 months ago

Like 0

清羽飞扬新版关于页面魔改文件备份

about butterfly new-version page

LiuShen revised this gist 1 year ago · 4444c8f

4 files changed, 6 insertions, 6 deletions

about.pug

about.styl

about.yml

page.pug

LiuShen revised this gist 1 year ago · 68f338c

5 files changed, 571 insertions

about.pug (file created)

about.styl (file created)

Diff is too large to be shown

about.yml (file created)

page.pug (file created)

readme.md (file created)

			@@ -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	+

			@@ -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

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

			@@ -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

		@@ -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}

		@@ -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: 人嘎嘎好！

		@@ -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

		@@ -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中其余文件