LiuShen / 新版Butterfly关于页面

#about-container section.top-section .top-content .float-texts each text, index in site.data.about.top_info.float_text.slice(0, 4) .float-text(class=`float-text-${index + 1}`) #{text} .avatar-container 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="") .float-texts each text, index in site.data.about.top_info.float_text.slice(4, 8) .float-text(class=`float-text-${index + 5}`) #{text} .site-name #{site.data.about.top_info.site_name} .motto #{site.data.about.top_info.motto} section.info-section .left-column.card .personal-info h2.section-title 个人信息 .info-grid p strong 姓名: | #{site.data.about.personal_info.name} p strong 性别: | #{site.data.about.personal_info.gender} p strong 地址: | #{site.data.about.personal_info.address} p strong 学校: | #{site.data.about.personal_info.school} p strong 年级: | #{site.data.about.personal_info.grade} p strong 专业: | #{site.data.about.personal_info.major} p strong 邮箱: a(href=`mailto:${site.data.about.personal_info.email}`) #{site.data.about.personal_info.email} p strong QQ: | #{site.data.about.personal_info.QQ} p strong 生日: | #{site.data.about.personal_info.birthday} .flex-1 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="") .right-column .personality.card .personality-info p.type | #{site.data.about.personality.type} p.type_name #{site.data.about.personality.type_name} .flex-1 p.learn_more | 点击在 a(href=url_for(site.data.about.personality.url), target="_blank" ref="noopener nofollower") 16Personalities | 上了解更多 .personality-svg 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") .description-and-social.card p.description #{site.data.about.description_and_social_links.description} .social-links each link in site.data.about.description_and_social_links.social_links a(href=link.url, target="_blank") img.no-lightbox(src=url_for(link.icon) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=link.platform) section.skills-and-projects .skills.card h2.section-title 技能 .skills-grid .skill-category each skill in site.data.about.skills.technical .skill-card img(src=url_for(skill) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="技术图标") .skill-category.category-2 each skill in site.data.about.skills.general .skill-card img(src=url_for(skill) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="通用图标") p.learning | #{site.data.about.skills.learning} .projects.card h2.section-title 项目 .projects-grid each project in site.data.about.projects .project a(href=project.url, target="_blank") h3 #{project.name} p #{project.description} section.hobbies-and-evaluation .hobbies.card h2.section-title 爱好 ul.hobbies-list each hobby in site.data.about.hobbies li #{hobby} .self-evaluation.card h2.section-title 评价 p strong 思想: | #{site.data.about.self_evaluation.thoughts} p strong 工作: | #{site.data.about.self_evaluation.work} p.summary strong 总结: | #{site.data.about.self_evaluation.summary}

#about-container // 竖着，垂直方向居中 display: flex flex-direction: column .card @extend .cardHover background-color: var(--liushen-card-bg) border-radius: 12px overflow: hidden position: relative border: var(--liushen-card-border) .section-title // 宋体 font-family: 'SimSun', 'Microsoft YaHei', sans-serif font-size: 60px font-weight: 1000 color: #00000000 -webkit-text-stroke: 1px var(--liushen-secondtext) position: absolute .flex-1 flex 1 .top-section display: flex flex-direction: column align-items: center justify-content: center border-bottom: 1px solid #888888b0 width: 100% padding-bottom: 20px margin-bottom: 20px .top-content display: flex align-items: center margin-bottom: 20px .float-texts font-size: 14px font-weight: bold +maxWidth600() display: none .float-text margin-top: 10px background-color: var(--liushen-card-secondbg) border-radius: 20px padding: 1px 20px border: var(--liushen-card-border) width: fit-content // 上下不停轻微浮动 @keyframes floatUpDown 0% transform: translateY(0px) 50% transform: translateY(-4px) 100% transform: translateY(0px) animation: floatUpDown 4s ease-in-out infinite &.float-text-1, &.float-text-4, &.float-text-6, &.float-text-7 // 向左边偏移 margin-left: 20px &.float-text-1, &.float-text-5 animation-delay: 0.5s &.float-text-2, &.float-text-6 animation-delay: 1.0s &.float-text-3, &.float-text-7 animation-delay: 1.5s &.float-text-4, &.float-text-8 animation-delay: 2.0s .avatar-container background-color: var(--liushen-card-bg) width: 180px height: 180px border-radius: 50% padding: 15px margin: 0 10px .avatar width: 100% height: 100% border-radius: 50% .site-name font-size: 20px font-weight: bold .motto font-size: 14px font-weight: bold .info-section display: flex width: 100% margin-bottom: 20px .left-column width: 30% display: flex flex-direction: column padding: 0 +maxWidth768() display: none .personal-info padding: 20px 20px 0 20px .section-title top: 0 right: -15px // 文本竖向显示 writing-mode: vertical-rl text-orientation: upright .info-grid p margin-top: 0 margin-bottom: 10px img.left-column-bottom width: 100% margin-top: 20px transition: transform 0.3s ease-in-out &:hover transform: scale(1.2) .right-column width: 70% margin-left: 20px display: flex flex-direction: column +maxWidth768() width: 100% margin-left: 0 .personality height: 220px display: flex flex-direction: row align-items: center margin-bottom: 20px .personality-info flex: 1 display: flex flex-direction: column padding: 20px height: 100% p margin: 0 .type font-size: 23px font-weight: bold .type_name font-size: 30px font-weight: bold .personality-svg width: 200px height: 200px transition: transform 0.3s ease-in-out &:hover transform: rotate(20deg) .description-and-social display: flex flex: 1 flex-direction: column .description padding: 20px .social-links display: flex flex-direction: row justify-content: flex-start margin-left: 20px a display: flex align-items: center border-radius: 12px height: 80px width: 80px img width: 65px border-radius: 12px height: 65px .skills-and-projects display: flex flex-direction: row margin-bottom: 20px .learning margin-left: 20px .skills width: 60% margin-right: 20px +maxWidth600() width: 100% margin-right: 0 .section-title top: -35px left: 15px .skills-grid margin-top: 90px // 竖直方向居中 display: flex flex-direction: column // align-items: center justify-content: center .skill-category display: flex flex-direction: row padding-left: 20px // 不换行，超出部分直接省略 overflow: hidden text-overflow: ellipsis white-space: nowrap &.category-2 // 从右往左，反过来，右边超出部分省略 flex-direction: row-reverse margin-top: 20px padding-right: 20px .skill-card width: 80px height: 80px padding: 10px background-color: #87878780 margin-right: 10px border-radius: 12px img width: 60px height: 60px object-fit: cover object-position: center border-radius: 10px .projects width: 40% padding: 20px 20px 0 20px +maxWidth600() display: none .section-title top: -35px left: 15px .projects-grid margin-top: 70px .project background-color: var(--liushen-card-secondbg) border-radius: 12px padding: 10px margin-bottom: 20px h3,p margin: 0 .hobbies-and-evaluation display: flex flex-direction: row .hobbies width: 40% margin-right: 20px +maxWidth600() display: none .section-title right: 15px bottom: -35px .self-evaluation width: 60% padding: 20px +maxWidth600() width: 100% .section-title right: 15px bottom: -35px p margin-top: 0

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

extends includes/layout.pug block content - const noCardLayout = ['shuoshuo', '404'].includes(page.type) ? 'nc' : '' - var commentsJsLoad = false mixin commentLoad if page.comments !== false && theme.comments.use - commentsJsLoad = true !=partial('includes/third-party/comments/index', {}, {cache: true}) #page(class=noCardLayout) if top_img === false && page.title page-title= page.title case page.type when 'tags' include includes/page/tags.pug +commentLoad when 'link' include includes/page/flink.pug +commentLoad when 'categories' include includes/page/categories.pug +commentLoad when 'devices' include includes/page/devices.pug when 'shuoshuo' include includes/page/shuoshuo.pug when 'about' include includes/page/about.pug when '404' include includes/page/404.pug default include includes/page/default-page.pug +commentLoad

## Hexo 自定义 About 页面说明 本项目修改自 Hexo 博客主题 `liushen`，用于添加自定义的 About 页面，包含数据、模板与样式支持。 ### 修改说明 #### 1. 创建数据文件 创建 `[blogroot]/source/_data/about.yml` 用于定义 About 页面所需的数据内容（如个人简介、联系方式等）。 --- #### 2. 修改页面布局逻辑 编辑 `[blogroot]/themes/liushen/layout/page.pug` 文件，添加如下内容以接入自定义模板： ```pug when 'about' include includes/page/about.pug ``` 注意不要完全按照本站，复制粘贴，可能会出现问题，下方文件仅供示例。 --- #### 3. 添加 Pug 模板 创建 `[blogroot]/themes/liushen/layout/includes/page/about.pug` 该文件将根据 `about.yml` 数据渲染对应页面内容，支持自定义结构和排版。 --- #### 4. 添加样式文件 创建 `[blogroot]/themes/liushen/source/css/_page/about.styl` 用于为 About 页面提供独立样式，按需定义页面布局、字体样式等。 --- ### 使用说明 * 配置 `_config.yml` 中的 `menu` 项添加 `about` 页面入口； * 在 `about.yml` 中填入所需数据； * 修改 `about.pug` 与 `about.styl` 来实现所需视觉样式和页面布局。 --- 完整代码请看当前gist中其余文件