关于页
基本原理：
- 新建
source\_data\about.yml存放关于页主要数据，方便修改
yml
- class_name: 关于页数据- 新建
/themes/butterfly/layout/includes/page/about.pug作为关于页项目模板
pug
//- 直接调用source\_data\about.yml里的数据只能调取到第一层，需要通过遍历将第二层数据取出
if site.data.about
- let aboutData = site.data.about
each item in aboutData
- let xxx = item.xxx
//- 关于页项目容器（HTML代码）
#about-page
//- JS 代码内嵌，defer 属性以确保脚本会在页面解析完成后执行
script(defer).- 修改
/themes/butterfly/layout/page.pug，当前页面是关于页时加载about.pug
diff
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 'about'
+ include includes/page/about.pug
when '404'
include includes/page/404.pug
when 'shuoshuo'
include includes/page/shuoshuo.pug
default
include includes/page/default-page.pug
+commentLoad- 新建
themes\butterfly\source\css\about.css作为样式文件，通过主题inject配置项外挂，或者写成styl内置于主题中。 其中公共CSS样式在此处给出，正式教程的CSS不包含公共部分
css
/* 关于页#page容器背景透明，让卡片效果更明显 */
#page:has(#about-page) {
border: 0;
box-shadow: none!important;
padding: 0!important;
background: 0 0!important;
}
/* 去除标题 */
#page:has(#about-page) .page-title {
display: none;
}
/* 单行卡片 */
.author-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 1rem; /* 行间距 */
}
/* 行内小卡片 */
.author-content-item {
width: 49%;
border-radius: 24px;
background: var(--card-bg);
border: var(--style-border-always);
box-shadow: var(--card-box-shadow);
position: relative; /* 为其子元素提供定位 */
padding: 1rem 2rem;
overflow: hidden;
}
.author-content-item:hover {
-webkit-box-shadow: var(--card-hover-box-shadow);
box-shadow: var(--card-hover-box-shadow);
}
/* 行内小卡片tip小标题 */
.author-content-item .author-content-item-tips {
opacity: .8;
font-size: 12px;
margin-bottom: .5rem;
}
/* 行内小卡片标题加粗 */
.author-content-item .author-content-item-title {
font-size: 36px;
font-weight: 700;
line-height: 1;
}
/* 行内小卡片内容调整 */
.author-content-item .card-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
padding: 1rem 2rem;
}
/* 行内小卡片内容里标题间距调整 */
.author-content-item .card-content .author-content-item-title {
margin-bottom: .5rem;
}
/* 行内垂直排布的小卡片组，一般位于行内左或者右 */
.author-content-item-group.column {
display: flex;
flex-direction: column;
width: 49%;
justify-content: space-between;
}
/* 让author-content-item小卡片宽度恢复100%，独占一行 */
.author-content-item.single {
width: 100%;
}
/* 可视宽度小于768px时行内小卡片占满一行 */
@media screen and (max-width: 768px) {
.author-content-item {
width: 100% !important;
margin-top: 1rem;
padding: 1rem;
}
}
/* 可视宽度小于768px时行内垂直排布的小卡片组也占满一行 */
@media screen and (max-width: 768px) {
.author-content-item-group.column {
width: 100% !important;
}
}
/* 卡片左下角提示 */
.post-tips {
color: gray;
font-size: 14px;
position: absolute;
bottom: 1rem;
left: 2rem;
}
.post-tips a {
color: gray;
border: none!important;
}参考文档：
- https://blog.zhheo.com/about/
- https://meuicat.com/blog/78/
- https://github.com/anzhiyu-c/hexo-theme-anzhiyu
author-box
- 在
source\_data\about.yml里添加数据
yml
- class_name: 关于页数据
# 添加的部分
avatarSkills:
left:
- 🤖️ 数码科技爱好者
- 🔍 分享与热心帮助
- 🏠 智能家居小能手
- 🔨 设计开发一条龙
right:
- 专修交互与设计 🤝
- 脚踏实地行动派 🏃
- 团队小组发动机 🧱
- 壮汉人狠话不多 💢- 修改
/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
//- 添加的部分
- let avatarSkills = item.avatarSkills
#about-page
//- 添加的部分
.author-box
if avatarSkills
.author-tag-left
each item in avatarSkills.left
span.author-tag=item
.author-img
img.no-lightbox(src=url_for(site.data.about.avatarImg || theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
if avatarSkills
.author-tag-right
each item in avatarSkills.right
span.author-tag=item
p.p.center.large 关于我
p.p.center.small=site.data.about.subtitle || config.subtitle
script(defer).- CSS
css
/* author-box */
#about-page .author-box {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 16px 0;
}
/* 定义.author-tag动画 */
@keyframes floating {
0% {
transform: translate(0,-4px);
}
50% {
transform: translate(0,4px);
}
100% {
transform: translate(0,-4px);
}
}
#about-page .author-box .author-tag {
transform: translate(0,-4px);
padding: 1px 8px;
background: var(--card-bg);
border: var(--style-border-always);
border-radius: 40px;
margin-top: 6px;
font-size: 14px;
font-weight: 700;
box-shadow: var(--card-box-shadow);
animation: 6s ease-in-out 0s infinite normal none running floating;
}
#about-page .author-box .author-tag-left {
display: flex;
flex-direction: column;
align-items: flex-end;
}
#about-page .author-box .author-tag-right {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#about-page .author-box .author-img {
margin: 0 30px;
border-radius: 50%;
width: 180px;
height: 180px;
position: relative;
background: #f7f7f9;
user-select: none;
transition: .3s;
}
#about-page .author-box .author-img img {
border-radius: 50%;
overflow: hidden;
width: 180px;
height: 180px;
}
#about-page .author-box .author-img:hover {
transform: scale(1.1);
}
#about-page .author-box .author-img:before {
content: '';
transition: 1s;
width: 30px;
height: 30px;
background: #57bd6a;
position: absolute;
border-radius: 50%;
border: 5px solid var(--card-bg);
bottom: 5px;
right: 10px;
z-index: 2;
}
#about-page .author-box .author-tag-left .author-tag:first-child, #about-page .author-box .author-tag-left .author-tag:last-child {
margin-right: -16px;
}
#about-page .author-box .author-tag:nth-child(1) {
animation-delay: 0s;
}
@media screen and (max-width: 768px) {
#about-page .author-box .author-tag-left {
display: none;
}
}
@media screen and (max-width: 768px) {
#about-page .author-box .author-tag-right {
display: none;
}
}
/* 关于我和描述 */
p.p.large, p.p.small {
margin: 0;
padding: 0;
}
p.p.large {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.4;
}
p.p.center {
text-align: center;
}自我介绍
- 在
source\_data\about.yml里添加数据
yml
- class_name: 关于页
# 添加的部分
aboutsiteTips:
tips: 追求
title1: 源于
title2: 热爱而去 感受
word:
- 学习
- 生活
- 程序
- 体验- 修改
/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
//- 添加的部分
#about-page
//- 添加的部分
.author-content
.author-content-item.myInfoAndSayHello
.title1 你好，很高兴认识你👋
.title2
| 我叫
span.inline-word=site.data.about.name || config.author
.title1=site.data.about.description || config.description
.aboutsiteTips.author-content-item
- let { tips, title1, title2, word } = item.aboutsiteTips
.author-content-item-tips= tips
h2
= title1
br
= title2
.mask
each wordItem, index in word
if index < word.length - 2
span(class=(index === 0 ? 'first-tips' : ''))= wordItem
span(data-up)= word[word.length - 2]
|
span(data-show)= word[word.length - 1]
script(defer).
var pursuitInterval = null;
pursuitInterval = setInterval(function () {
const show = document.querySelector("span[data-show]");
const next = show.nextElementSibling || document.querySelector(".first-tips");
const up = document.querySelector("span[data-up]");
if (up) {
up.removeAttribute("data-up");
}
show.removeAttribute("data-show");
show.setAttribute("data-up", "");
next.setAttribute("data-show", "");
}, 2000);
//- 当开始发送 PJAX 请求时动画重新开始
document.addEventListener("pjax:send", function () {
pursuitInterval && clearInterval(pursuitInterval);
});- CSS
css
#about-page .myInfoAndSayHello {
display: flex;
flex-direction: column;
justify-content: center;
color: white;
background: linear-gradient(120deg,#5b27ff 0,#00d4ff 100%);
background-size: 200%;
width: 59%;
}
#about-page .myInfoAndSayHello .title1 {
opacity: .8;
line-height: 1.3;
}
.inline-word {
word-break: keep-all;
white-space: nowrap;
}
#about-page .myInfoAndSayHello .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
margin: .5rem 0;
}
.author-content-item.aboutsiteTips {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
width: 39%;
}
.aboutsiteTips h2 {
margin-right: auto;
font-size: 36px;
font-family: Helvetica;
line-height: 1.06;
letter-spacing: -.02em;
color: var(--font-color);
margin-top: 0;
}
.aboutsiteTips .mask {
height: 36px;
position: relative;
overflow: hidden;
margin-top: 4px;
}
.aboutsiteTips .mask span {
display: block;
box-sizing: border-box;
position: absolute;
top: 36px;
background-size: 100% 100%;
background-clip: text;
color: transparent;
background-repeat: no-repeat;
}
.aboutsiteTips .mask span[data-show] {
transform: translateY(-100%);
transition: .5s transform ease-in-out;
}
.aboutsiteTips .mask span[data-up] {
transform: translateY(-200%);
transition: .5s transform ease-in-out;
}
.aboutsiteTips .mask span:nth-child(1) {
background-image: linear-gradient(45deg,#0ecffe 50%,#07a6f1);
}
.aboutsiteTips .mask span:nth-child(2) {
background-image: linear-gradient(45deg,#18e198 50%,#0ec15d);
}
.aboutsiteTips .mask span:nth-child(3) {
background-image: linear-gradient(45deg,#8a7cfb 50%,#633e9c);
}
.aboutsiteTips .mask span:nth-child(4) {
background-image: linear-gradient(45deg,#fa7671 50%,#f45f7f);
}hello-about
一个单纯的特效卡片，鼠标放上去会从鼠标中心展开三色圆环
- 修改
/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
#about-page
//- 添加的部分
.hello-about
.cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.shapes
.shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.content
h1='Hello there!'
//- 该特效基于gsap.js，需要引入文件
script(src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js")
script(defer).
//- 添加的部分
var helloAboutEl = document.querySelector(".hello-about");
helloAboutEl.addEventListener("mousemove", evt => {
// 获取鼠标相对于目标元素的偏移位置
const mouseX = evt.offsetX;
const mouseY = evt.offsetY;
// 使用 GreenSock Animation Platform (GSAP) 设置鼠标样式的位置
gsap.set(".cursor", {
x: mouseX,
y: mouseY,
});
// 使用 GSAP 动画将元素移动到鼠标的位置
gsap.to(".shape", {
x: mouseX,
y: mouseY,
stagger: -0.1, // 为每个元素之间添加延迟，使得它们依次动画
});
});- CSS
css
.hello-about {
margin: 20px auto;
border-radius: 24px;
background: var(--card-bg);
border: var(--style-border-always);
box-shadow: var(--card-box-shadow);
position: relative;
overflow: hidden;
user-select: none;
}
.cursor {
position: absolute;
background: #2128bd;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
user-select: none;
pointer-events: none;
z-index: 3;
}
.shapes {
position: relative;
height: 315px;
width: 100%;
background: #2128bd;
overflow: hidden;
}
.shape {
position: absolute;
border-radius: 50%;
}
.shape.shape-1 {
background: #005ffe;
width: 650px;
height: 650px;
margin: -325px 0 0 -325px;
}
.shape.shape-2 {
background: #ffe5e3;
width: 440px;
height: 440px;
margin: -220px 0 0 -220px;
}
.shape.shape-3 {
background: #ffcc57;
width: 270px;
height: 270px;
margin: -135px 0 0 -135px;
}
.hello-about .content {
top: 0;
left: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 315px;
width: 100%;
background: var(--card-bg);
mix-blend-mode: screen;
}
.hello-about h1 {
font-size: 200px;
color: #000;
margin: 0;
text-align: center;
font: inherit;
vertical-align: baseline;
line-height: 1;
font-size: calc(.0989119683 * 100vw + 58.5558852621px);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme=dark] .hello-about h1 {
color: #fff;
}技能和生涯
- 由于技能数据比较多，这里新建一个文件
source\_data\creativity.yml存放数据
yml
- class_name: 开启创造力
creativity_list:
- name: Java
color: "#fff"
icon: https://bu.dusays.com/2023/04/09/643293b1184e9.jpg
- name: Docker
color: "#57b6e6"
icon: https://bu.dusays.com/2023/04/09/643293b0f0abe.png
- name: Photoshop
color: "#4082c3"
icon: https://bu.dusays.com/2022/12/15/639aa3a5c240e.png
- name: Node
color: "#333"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg
- name: Webpack
color: "#2e3a41"
icon: https://bu.dusays.com/2023/04/09/643293b68026c.png
- name: Pinia
color: "#fff"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg
- name: Python
color: "#fff"
icon: https://bu.dusays.com/2023/04/09/643293b1230f7.png
- name: Vite
color: "#937df7"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg
- name: Flutter
color: "#4499e4"
icon: https://bu.dusays.com/2023/04/09/643293b1055c2.png
- name: Vue
color: "#b8f0ae"
icon: https://bu.dusays.com/2023/04/09/643293b6788bd.png
- name: React
color: "#222"
icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
- name: CSS3
color: "#2c51db"
icon: https://bu.dusays.com/2022/12/15/639aa3a5c251e.png
- name: JS
color: "#f7cb4f"
icon: https://bu.dusays.com/2023/04/09/643293b121f02.png
- name: HTML
color: "#e9572b"
icon: https://bu.dusays.com/2022/12/15/639aa3a5c241c.png
- name: Git
color: "#df5b40"
icon: https://bu.dusays.com/2023/04/09/643293b10ccdd.webp
- name: Apifox
color: "#e65164"
icon: https://bu.dusays.com/2022/11/19/6378d6458c6b6.png- 在
source\_data\about.yml里添加数据
yml
- class_name: 关于页
# 添加的部分
skillsTips:
tips: 技能
title: 开启创造力
careers:
tips: 生涯
title: 无限进步
list:
- desc: EDU,软件工程专业
color: "#357ef5"
- desc: EDU,软件工程专业
color: "#357ef5"
- desc: EDU,软件工程专业
color: "#357ef5"
img: https://bu.dusays.com/2023/04/21/644287166329b.png- 由于遍历
creativity.yml所用的代码很多，再新建文件theme/layout/includes/xdog/tags-group-all.pug存放
pug
if site.data.creativity
#skills-tags-group-all
.tags-group-wrapper
each i in site.data.creativity
- const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0);
- const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1);
each item, index in i.creativity_list
if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
.tags-group-icon-pair
.tags-group-icon(style=`background: ${evenNum[index].color}`)
img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon, size="60px" alt=evenNum[index].name)
.tags-group-icon(style=`background: ${oddNum[index].color}`)
img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon, size="60px" alt=oddNum[index].name)
each item, index in i.creativity_list
if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
.tags-group-icon-pair
.tags-group-icon(style=`background: ${evenNum[index].color}`)
img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon, size="60px" alt=evenNum[index].name)
.tags-group-icon(style=`background: ${oddNum[index].color}`)
img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon, size="60px" alt=oddNum[index].name)- 修改
/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
//- 添加的部分
- let skillsTips = item.skillsTips
- let careers = item.careers
- let crrList = careers.list
#about-page
//- 添加的部分
.author-content
.author-content-item.skills
.card-content
.author-content-item-tips=skillsTips.tips
span.author-content-item-title=skillsTips.title
.skills-style-group
include ../xdog/tags-group-all.pug
if site.data.creativity
.skills-list
each i in site.data.creativity
each item, index in i.creativity_list
.skill-info
.skill-icon(style=`background: ${item.color}`)
img.no-lightbox(title=item.name, src=item.icon, alt=item.name)
.skill-name
span=item.name
.etc ...
.author-content-item.careers
.card-content
.author-content-item-tips=careers.tips
span.author-content-item-title=careers.title
.careers-group
if crrList
each career in crrList
.career-item
.circle(style=`background:${career.color ? career.color : "#357ef5"}`)
.name=career.desc
else
.careers-none
if careers.img
img.author-content-img.no-lightbox(alt=careers.tips, src=url_for(careers.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
script(defer).- css
css
/* 技能 */
.skills {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
width: 50%;
min-height: 450px;
}
.author-content-item.skills .skills-style-group {
position: relative;
}
#skills-tags-group-all {
display: flex;
transform: rotate(0);
transition: .3s;
}
@keyframes rowleft {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
.author-content-item.skills .tags-group-wrapper {
margin-top: 40px;
display: flex;
flex-wrap: nowrap;
animation: rowleft 60s linear infinite;
}
.tags-group-icon-pair {
margin-left: 1rem;
user-select: none;
}
#skills-tags-group-all .tags-group-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 66px;
font-weight: 700;
box-shadow: var(--card-box-shadow);
width: 120px;
height: 120px;
border-radius: 30px;
}
#skills-tags-group-all .tags-group-icon-pair .tags-group-icon:nth-child(even) {
margin-top: 1rem;
transform: translate(-60px);
}
#skills-tags-group-all .tags-group-icon img {
width: 60px;
margin: 0 auto!important;
}
.author-content-item.skills .skills-list {
display: flex;
opacity: 0;
transition: .3s;
position: absolute;
width: 100%;
top: 0;
left: 0;
flex-wrap: wrap;
flex-direction: row;
margin-top: 10px;
max-height: 310px;
overflow: hidden;
}
.author-content-item.skills .skill-info {
display: flex;
align-items: center;
margin-right: 10px;
margin-top: 10px;
background: var(--xdog-global-bg);
border-radius: 40px;
padding: 8px 12px 8px 8px;
border: var(--style-border-always);
box-shadow: var(--card-box-shadow);
}
.skills .skill-icon {
width: 32px;
height: 32px;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.skills .skill-icon img {
width: 18px;
height: 18px;
margin: 0 auto!important;
}
.skills:hover .skills-style-group #skills-tags-group-all {
opacity: 0;
}
.skills:hover .skills-style-group .skills-list {
opacity: 1;
filter: none;
}
/* 职业 */
.author-content-item.careers {
min-height: 400px;
}
.author-content-item.careers .careers-group {
margin-top: 12px;
}
.author-content-item.careers .career-item {
display: flex;
align-items: center;
}
.author-content-item.careers .career-item .circle {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 16px;
}
.author-content-item.careers .career-item .name {
color: var(--xdog-font-color);
}
.author-content-item.careers img {
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
transition: .6s;
user-select: none;
}站点统计和个人信息
- 在
_config.butterfly.yml主题配置文件中inject下的`head引入51la统计js文件
yml
inject:
head:
bottom:
- <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
- <script>LA.init({id:"{你的ID}",ck:"{你的ck}"})</script>https//sdk.51.la/js-sdk-pro.min.js在本地禁止访问、403是正常现象 其中 ck、id 都可以在 51la统计 后台站点配置-参数设置-统计代码-手动安装（通用）中找到
- 在
source\_data\about.yml里添加数据
yml
- class_name: 关于页数据
# 添加的部分
statistic:
link: /archives
text: 文章统计
cover: https://bu.dusays.com/2023/03/12/640dc8c72f623.webp
map:
title: 我现在住在
StrengthenTitle: 中国，合肥市
background: https://bu.dusays.com/2023/07/05/64a4c61cb20ef.jpg
backgroundDark: https://bu.dusays.com/2023/07/05/64a4c63495ac5.jpg
selfInfo:
selfInfoTips1: 生于
selfInfoContentYear: 1998
selfInfoTips2: 安庆师范大学
selfInfoContent2: 材料化学
selfInfoTips3: 现在职业
selfInfoContent3: 码农烧烤- 修改
/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
#about-page
//- 添加的部分
.author-content
if theme.LA.enable
- let cover = item.statistic.cover
.about-statistic.author-content-item(style=`background: url(${cover}) top / cover no-repeat;`)
.card-content
.author-content-item-tips 数据
span.author-content-item-title 访问统计
#statistic
.post-tips
| 统计信息来自
a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计
.banner-button-group
- let link = item.statistic.link
- let text = item.statistic.text
a.banner-button(href=link)
i.xdog-icon-arrow-circle-right.fa-solid.fa-circle-arrow-right
|
span.banner-button-text=text
.author-content-item-group.column.mapAndInfo
- let mapBackground = item.map.background
- let mapBackgroundDark = item.map.backgroundDark
style.
.author-content-item.map {
background-image: url(#{mapBackground});
}
[data-theme='dark'] .author-content-item.map {
background-image: url(#{mapBackgroundDark});
}
.author-content-item.map.single
- let mapTitle = item.map.title
- let mapStrengthenTitle = item.map.StrengthenTitle
span.map-title=mapTitle
b=mapStrengthenTitle
.author-content-item.selfInfo.single
- let { selfInfoTips1, selfInfoContentYear, selfInfoTips2, selfInfoContent2, selfInfoTips3, selfInfoContent3 } = item.selfInfo
div
span.selfInfo-title=selfInfoTips1
|
span.selfInfo-content#selfInfo-content-year(style='color:#43a6c6')=selfInfoContentYear
div
span.selfInfo-title=selfInfoTips2
|
span.selfInfo-content(style='color:#c69043')=selfInfoContent2
div
span.selfInfo-title=selfInfoTips3
|
span.selfInfo-content(style='color:#b04fe6')=selfInfoContent3
script(defer).
fetch('https://v6-widget.51.la/v6/你的 51la ID/quote.js')
.then(res => res.text())
.then((data) => {
let title = ['今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问']
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)
num = num.map((el) => {
let val = el.replace(/(<\/span><span>)/g, '')
let str = val.replace(/(<\/span><\/p>)/g, '')
return str
})
let statisticEl = document.getElementById('statistic')
let activeVisitors = num[0]
// 添加最近活跃访客的内容
let TBoxEl = document.querySelector('.T-box')
if (TBoxEl) {
TBoxEl.innerHTML = '最近活跃：' + activeVisitors + ' | ' + TBoxEl.innerHTML
}
// 自定义不显示哪个或者显示哪个，如下不显示总访问量
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return
if (i == 0 || i == num.length - 1) continue;
statisticEl.innerHTML += '<div><span class="tips">' + title[i - 1] + '</span><span id=' + title[i - 1] + '>' + num[i] + '</span></div>'
}
});- CSS
css
/* 站点统计 */
#about-page .about-statistic {
min-height: 380px;
width: 39%;
background-size: cover;
color: white;
overflow: hidden;
}
#about-page .about-statistic::after {
/* 黑色遮罩效果 */
box-shadow: 0 -159px 173px 71px #0f1114 inset;
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#statistic {
font-size: 16px;
border-radius: 15px;
width: 100%;
color: white;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 2rem;
}
#statistic div {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 50%;
margin-bottom: .5rem;
}
#statistic div span:first-child {
opacity: .8;
font-size: 12px;
}
#statistic div span:last-child {
font-weight: 700;
font-size: 34px;
line-height: 1;
white-space: nowrap;
}
.author-content-item .card-content .banner-button-group {
position: absolute;
bottom: 1rem;
right: 2rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
height: 40px;
width: 118px;
border-radius: 20px;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
color: white;
display: flex;
align-items: center;
z-index: 1;
transition: .3s;
cursor: pointer;
backdrop-filter: saturate(180%) blur(20px);
transform: translateZ(0);
}
@media screen and (max-width: 768px) {
.author-content-item .card-content .banner-button-group .banner-button {
background: 0 0;
padding: 0;
width: auto;
backdrop-filter: unset;
}
}
.xdog-icon-arrow-circle-right:before {
content: "\f0a9";
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 5px;
font-size: 22px;
}
@media screen and (max-width: 768px) {
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 0;
font-size: 1.5rem;
}
}
@media screen and (max-width: 768px) {
.author-content-item .card-content .banner-button-group .banner-button-text {
display: none;
}
}
/* 位置信息 */
.author-content-item-group.column.mapAndInfo {
width: 59%;
}
.author-content-item.map {
min-height: 160px;
max-height: 400px;
position: relative;
overflow: hidden;
margin-bottom: .5rem;
height: 60%;
transition: 1s ease-in-out;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.author-content-item.map:hover {
background-size: 120%;
transition: 4s ease-in-out;
background-position-x: 0;
background-position-y: 36%;
}
.author-content-item.map .map-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: var(--font-color);
background: var(--xdog-maskbg);
padding: .5rem 2rem;
backdrop-filter: saturate(180%) blur(20px);
transition: all 1s,color 0s ease-in-out;
font-size: 20px;
}
.author-content-item.map:hover .map-title {
bottom: -100%;
}
/* 个人信息 */
.author-content-item.selfInfo {
display: flex;
min-height: 100px;
max-height: 400px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: 40%;
}
.author-content-item.selfInfo div {
display: flex;
flex-direction: column;
margin: .5rem 2rem .5rem 0;
min-width: 120px;
}
.author-content-item.selfInfo .selfInfo-title {
opacity: .8;
font-size: 12px;
line-height: 1;
margin-bottom: 8px;
}
.author-content-item.selfInfo .selfInfo-content {
font-weight: 700;
font-size: 34px;
line-height: 1;
}personalities、maxim、buff
展示更多的个人信息，性格、座右铭、照片等
- 在
source\_data\about.yml里添加数据
yml
- class_name: 关于页数据
# 添加的部分
personalities:
author_name: 执政官
personality_type: ESFJ-A
photo_url: https://bu.dusays.com/2023/03/12/640dc6bed6d2d.jpg
personality_img: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/ESFJ-A.svg
name_url: https://www.16personalities.com/ch/esfj-%E4%BA%BA%E6%A0%BC
maxim:
maxim_tips: 座右铭
maxim_top: 生活明朗，
maxim_bottom: 万物可爱。
buff:
buff_tips: 特长
buff_top: 脑回路新奇的 酸菜鱼
buff_bottom: 二次元指数 MAX- 修改
/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
#about-page
//- 添加的部分
.author-content
.author-content-item.personalities
- let {author_name, personality_type, photo_url, personality_img, name_url, personality_type_color} = item.personalities
.author-content-item-tips 性格
span.author-content-item-title= author_name
.title2(style=`color:${personality_type_color ? personality_type_color : "#ac899c"}`)= personality_type
.post-tips
| 在
a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16personalities
| 了解更多关于
a(target='_blank', rel='noopener external nofollow', href= name_url)= author_name
.image
img.no-lightbox(src=url_for(personality_img), alt='人格')
.author-content-item.myphoto
img.author-content-img.no-lightbox(alt='自拍', src=url_for(photo_url))
.author-content
.author-content-item.maxim
- let {maxim_tips, maxim_top, maxim_bottom} = item.maxim
.author-content-item-tips=maxim_tips
span.maxim-title
span(style='opacity:.6;margin-bottom:8px')=maxim_top
|
span=maxim_bottom
.author-content-item.buff
.card-content
- let {buff_tips, buff_top, buff_bottom} = item.buff
.author-content-item-tips=buff_tips
span.buff-title
span(style='opacity:.6;margin-bottom:8px')=buff_top
|
span=buff_bottom
script(defer).- css
css
/* 性格 */
.author-content-item.personalities {
width: 59%;
}
.author-content-item.personalities .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
}
.author-content-item.personalities .image {
position: absolute;
right: 30px;
top: 10px;
width: 220px;
transition: transform 2s cubic-bezier(.13,.45,.21,1.02);
}
.author-content-item.personalities .image img {
display: block;
margin: 0 auto 20px;
max-width: 100%;
transition: filter 375ms ease-in .2s;
}
@media screen and (max-width: 1200px) {
.author-content-item.personalities .image {
width: 180px;
}
}
.author-content-item.personalities:hover .image {
transform: rotate(-10deg);
}
@media screen and (max-width: 768px) {
.author-content-item.personalities {
height: 200px;
}
}
/* 照片 */
.author-content-item.myphoto img {
position: absolute;
min-width: 100%;
object-fit: cover;
transition: .6s;
}
.author-content-item.myphoto {
height: 60%;
min-height: 240px;
position: relative;
overflow: hidden;
width: 39%;
display: flex;
align-items: center;
justify-content: center;
}
.author-content-item.myphoto:hover img {
transform: scale(1.1);
}
/* 座右铭 */
.author-content-item.maxim {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
width: 39%;
}
.author-content-item.maxim .maxim-title {
display: flex;
flex-direction: column;
}
/* 特长 */
.author-content-item.buff {
height: 200px;
font-size: 36px;
font-weight: 700;
line-height: 1.1;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
background: linear-gradient(120deg,#ff27e8 0,#ff8000 100%);
color: white;
background-size: 200%;
min-height: 200px;
height: fit-content;
width: 59%;
}
.author-content-item.buff .card-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.author-content-item.buff .buff-title {
display: flex;
flex-direction: column;
}心路历程
也就是原本关于页自己写的内容
修改/themes/butterfly/layout/includes/page/about.pug即可显示
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
#about-page
//- 添加的部分
if page.content
.author-content
.create-site-post.author-content-item.single
!= page.content
script(defer).心路历程示例：
md
<div class="author-content-item-tips">心路历程</div>
欢迎来到我的博客 😝，这里是我记笔记的地方 🙌，目前就读于长沙湖南信息学院的软件工程专业，虽然有时候常常会忘记更新笔记，咕咕 ✋~ 但是记笔记真的是一个很棒的习惯 💪，能把学下来的知识进行积累，沉淀，有一句话说的好，能教给别人的知识，才是真正学会了的知识 ⚡ 每周我都会尽量进行更新 ☁️，如果没更的话，可能是我忘了，也可能是我在钻研某个东西的时候太入迷了肯定又熬夜了同学们不要学我，老是熬夜会长痘
- 致力于成为一个前端小姥🐷
- 又菜又爱玩🎮 ctrl + C、ctrl + V高级CV工程师🏆
- 擅长PS、Pr、Ae、Au、Ai、Dw、An、Id等软件的安装与卸载🎃
- 精通Html、CSS、JavaScript、PHP、Java、Python、C、C++、C#、Go、TypeScript等单词的拼写🎲
- 熟悉Windows、Linux、Mac、Android、IOS等系统的开关机👻
todoList
原生微信小程序
vue3、vite、 pinia
重装文档重写
Electron
操作系统
svg绘制
threeJS
Next
Flutter
智慧城市大前端
react18系统学习
工业企业生产管理
语言的魅力打赏名单
- 在
source\_data\about.yml里添加数据
yml
- class_name: 关于页数据
# 添加的部分
reward_QR_code:
- img: https://img.meuicat.com/blog/wechat.webp
text: 微信
- img: https://img.meuicat.com/blog/alipay.webp
text: 支付宝
reward_list:
- name: 张三
amount: 1
datatime: 2023-03-28
- name: 李四
amount: 1
datatime: 2023-03-24
- name: 王五
amount: 1
datatime: 2022-12-14
- name: 老王
amount: 1
datatime: 2022-12-14
- name: 李伟
amount: 1
datatime: 2022-09-20
- name: 王二
amount: 1
datatime: 2023-03-10reward_QR_code若没有设置会自动调用主题配置里的reward:二维码信息 2. 修改/themes/butterfly/layout/includes/page/about.pug
pug
if site.data.about
- let aboutData = site.data.about
each item in aboutData
#about-page
//- 添加的部分
- let rawData = item.reward_list
if rawData
- let sortedByDate = rawData.slice().sort((a, b) => new Date(b.datatime) - new Date(a.datatime));
.author-content
.author-content-item.single.reward#about-reward
.author-content-item-tips 致谢
span.author-content-item-title 赞赏名单
.author-content-item-description 感谢因为有你们，让我更加有创作的动力。
.reward-list-all
- let reward_list_amount = item.reward_list.sort((a,b)=>b.amount - a.amount)
each item, index in reward_list_amount
.reward-list-item
.reward-list-item-name=item.name
.reward-list-bottom-group
if item.amount >= 50
.reward-list-item-money(style='background:#ffc93e;')=`¥${item.amount}`
else
.reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
.datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
.reward-list-updateDate
| 最新更新时间：
time.datatime.reward-list-updateDate-time(datatime=sortedByDate[0].datatime)=new Date(sortedByDate[0].datatime).toISOString().slice(0, -14)
.about-reward
#con
#TA-con
#text-con
#linght
#TA 为TA充电
.reward-main
ul.reward-all
span.reward-title 感谢你赐予我前进的力量
ul.reward-group
each qrCodeItem in item.reward_QR_code || theme.reward.QR_code || []
- var clickTo = qrCodeItem.link ? qrCodeItem.link : qrCodeItem.img
li.reward-item
a(href=url_for(clickTo) target='_blank')
img.post-qr-code-img.entered.loaded(src=url_for(qrCodeItem.img) alt=qrCodeItem.text data-lazy-src=url_for(qrCodeItem.img) data-ll-status="loaded")
div.post-qr-code-desc=qrCodeItem.text
#tube-con
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
rect(y='186', width='236', height='24', fill='#e5e9ef')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
rect(y='186', width='236', height='24', fill='#f25d8e')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#orange-mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
rect(y='186', width='236', height='24', fill='#ffd52b')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
p#people
| 共
b=item.reward_list.length
| 人
script(defer).- CSS
css
/* 赞赏名单 */
.reward-list-all {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: 1rem;
margin-bottom: .5rem;
margin-left: -.25rem;
margin-right: -.25rem;
}
.reward-list-item {
padding: 1rem;
border-radius: 12px;
border: var(--style-border-always);
width: calc((100% / 5) - .5rem);
margin: 0 .25rem .5rem .25rem;
box-shadow: var(--card-box-shadow);
}
@media screen and (max-width: 1200px) {
.reward-list-item {
width: calc((100% / 3) - .5rem);
}
}
@media screen and (max-width: 768px) {
.reward-list-item {
width: 100% !important;
}
}
.reward-list-item .reward-list-item-name {
font-size: 1rem;
font-weight: 700;
line-height: 1;
margin-bottom: .5rem;
}
.reward-list-item .reward-list-bottom-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.reward-list-item .reward-list-item-money {
padding: 4px;
background: var(--font-color);
color: var(--card-bg);
font-size: 12px;
line-height: 1;
border-radius: 4px;
margin-right: 4px;
white-space: nowrap;
}
.reward-list-item .reward-list-item-time {
font-size: 12px;
color: var(--xdog-font-color);
white-space: nowrap;
}
/* 赞赏按钮 */
.about-reward {
position: absolute;
top: 1rem;
right: 2rem;
}
@media screen and (max-width: 768px) {
.about-reward {
display: none;
}
}
.reward #con {
width: 350px;
height: 85px;
position: relative;
border-radius: 4px;
}
.reward #TA-con {
width: 157px;
height: 50px;
background-color: #f25d8e;
box-shadow: 0 4px 4px rgba(255,112,159,.3);
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
border-radius: 4px;
cursor: pointer;
}
.reward #TA-con:hover {
background-color: #ff6b9a;
}
.reward #TA-con:hover+#tube-con>#mask {
width: 157px;
}
@keyframes move1 {
0% {
transform: translateX(-15px);
}
100% {
transform: translateX(140px);
}
}
@keyframes move2 {
0% {
transform: translateX(15px);
}
100% {
transform: translateX(-140px);
}
}
.reward #TA-con:hover+#tube-con>#orange-mask {
animation: move1 .5s linear .2s infinite;
}
.reward #TA-con:hover+#tube-con>#orange-mask svg {
animation: move2 .5s linear .2s infinite;
}
.reward #text-con {
width: 100px;
height: 100%;
margin: 0 auto;
position: relative;
}
.reward #linght {
width: 0;
height: 0;
position: absolute;
top: 36%;
left: 4px;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
border-radius: 4px;
transform: rotate(-55deg);
}
.reward #linght::after {
position: absolute;
top: -13px;
left: -11px;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
transform: rotate(180deg);
border-radius: 4px;
}
.reward #TA {
float: right;
line-height: 50px;
font-size: 15px;
color: #fff;
}
.reward #tube-con {
width: 157px;
height: 55px;
position: absolute;
right: -5px;
top: 15px;
}
.reward svg {
width: 100%;
height: 100%;
}
.reward #mask {
width: 0;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
}
.reward #mask svg {
width: 157px;
height: 55px;
}
.reward #orange-mask {
width: 18px;
height: 100%;
overflow: hidden;
position: absolute;
left: -15px;
top: 0;
}
.reward #orange-mask svg {
position: absolute;
top: 0;
left: 15px;
width: 157px;
height: 55px;
}
.reward #people {
position: absolute;
right: 10px;
top: 4px;
font-size: 12px;
font-family: "雅黑";
color: #aaa;
}
/* 赞赏二维码CSS */
.reward-main {
position: absolute;
padding: .5rem 0 0;
z-index: 100;
min-width: 100%;
display: none;
box-shadow: var(--card-box-shadow);
text-align: center;
}
.reward-main .reward-all {
display: flex;
margin: 0;
padding: .8rem;
border-radius: 12px;
background: var(--card-bg);
border: var(--style-border-always);
box-shadow: var(--card-box-shadow);
flex-direction: column;
transition: .6s;
}
.reward-main .reward-all .reward-title {
font-weight: 700;
color: red;
}
.reward-main .reward-all .reward-group {
display: flex;
margin-top: .5rem;
padding: 0;
}
.reward-main .reward-all .reward-group .reward-item {
display: inline-block;
padding: 0 8px;
list-style-type: none;
vertical-align: top;
}
.reward-main .reward-all .reward-group .reward-item img {
width: 130px;
height: 130px;
border-radius: 8px;
border: var(--style-border-always);
box-shadow: var(--card-box-shadow);
}
.reward-main .reward-all .reward-group .reward-item .post-qr-code-desc {
width: 130px;
color: #858585;
}
#TA-con:hover>.reward-main {
display: block;
}