Utoljára aktív 1748673120

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

LiuShen's Avatar LiuShen gist felülvizsgálása 1748673120. Revízióhoz ugrás

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's Avatar LiuShen gist felülvizsgálása 1748673062. Revízióhoz ugrás

5 files changed, 571 insertions

about.pug(fájl létrehozva)

@@ -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(fájl létrehozva)

@@ -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(fájl létrehozva)

@@ -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(fájl létrehozva)

@@ -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(fájl létrehozva)

@@ -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中其余文件
Újabb Régebbi