魔改前请备份，要不然出错了又不知道怎么改就完啦！！！ 有些内容我没有放出来，但是大体是一致的 可以看看[我的关于页面](https://hexo.seln.cn/about/)
魔改关于页面
主要以安知鱼的关于页面为参考，经行个性化魔改，具体代码如下：
新建about页面
新建source/about/index.md
title: 关于
date: 2025-9-25 17:24:51
type: about
aside: false
top_img: false
comments: false新建about页面模板
新建themes/butterfly/layout/includes/page/about.pug代码如下：
#about-page
.author-box
.author-tag-left
span.author-tag 🚩 攻防赛道指尖争
span.author-tag 🌐 万网互联掌中沙
span.author-tag 📜 秒断漏洞定胜局
span.author-tag 🛠️ Markdown
.author-img
img.no-lightbox(src='https://hexo.seln.cn/img/head.jpg')
.image-dot
.author-tag-right
span.author-tag 脚踏实地行动派 🏃
span.author-tag 攻防路径一手划 🧭
span.author-tag 我立规则御千军 🧱
span.author-tag 安全运营定乾坤 🏆
p.p.center.logo.large 关于我
p.p.center.small 🤔
.author-content
.author-content-item.myInfoAndSayHello
.title1 你好，很高兴认识你👋
.aboutsiteTips.author-content-item
.author-content-item-tips 追求
h2
| 源于
br
| 热爱而去
span.inline-word 感受
.mask
span.first-tips 学习
|
span 生活
|
span(data-show) 体验
.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！
.author-content
.about-statistic.author-content-item
.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
a.banner-button(onclick='pjax.loadUrl("/archives/")', data-pjax-state)
i.fas.fa-circle-right
|
span.banner-button-text 文章隧道
.author-content
.author-content-item.maxim
.author-content-item-tips 座右铭
span.maxim-title
span(style='opacity:.6;margin-bottom:8px') 在迷雾中穿行，本身即是道路；
|
span 驻足于原地苦等晴空，反而会迷失全部的方向。
.author-content-item.buff
.card-content
.author-content-item-tips 特长
span.buff-title
span(style='opacity:.6;margin-bottom:8px')
| 搜索引擎大师 -
span.inline-word 熟练使用各种搜索技巧
|
span
| 二次元指数
span.inline-word MAX
|
span
| CV工程师 -
span.inline-word 擅长各种复制粘贴操作
.card-background-icon
i.fas.fa-dice-d20
.author-content
.author-content-item.game-yuanshen
.card-content
.author-content-item-tips 爱好游戏
span.author-content-item-title 原神
.content-bottom
.icon-group
.tips.game-yuanshen-uid UID: 109468770
.author-content-item.game-starrail
.card-content
.author-content-item-tips 常玩
span.author-content-item-title
.content-bottom
.tips.game-starrail-uid UID: 101786049
.autor-content
.author-content-item.comic-content
.card-content
each item in site.data.comic
- let {comic_tips, comic_title, comic_list} = item
.author-content-item-tips= comic_tips
.author-content-item-title= comic_title
.comic-box
if comic_list
each i in comic_list
a.comic-item(href=i.href, target="_blank", title=i.name)
.comic-item-cover
img(src=i.cover, alt=i.name)
.author-content
.author-content-item.like-technology
.card-content
.author-content-item-tips 关注偏好
span.author-content-item-title 动漫番剧
.content-bottom
.tips 二次元，lovelive
.author-content-item.like-music
.card-content
.author-content-item-tips 音乐偏好
span.author-content-item-title ACGN
|
span.author-content-item-title 游戏
.content-bottom
.tips 和 我 一起欣赏更多音乐
.banner-button-group
a.banner-button(onclick='window.open("https://i.y.qq.com/n2/m/share/details/taoge.html?platform=11&appshare=android_qq&appversion=14100008&hosteuin=oi4z7K4qoKCs7n**&id=9261491370&ADTAG=qfshare&qq_aio_chat_type=3")', data-pjax-state)
i.fas.fa-circle-right
|
span.banner-button-text 更多推荐
.author-content
.create-site-post.author-content-item.single
.author-content-item-tips 文字测试
| 欢迎来到我的博客 😝
//- .checkbox.blue.checked
//- input(type='checkbox', checked)
//- p
//- | 又菜又爱玩🎮
//- kbd ctrl
//- | +
//- kbd C
//- | 、
//- kbd ctrl
//- | +
//- kbd V
//- | 高级CV工程师🏆
//- .checkbox.blue.checked
//- input(type='checkbox', checked)
//- p 擅长PS、Pr、Ae、Au、Ai、Dw、An、Id等软件的安装与卸载🎃
//- .checkbox.blue.checked
//- input(type='checkbox', checked)
//- p 精通Html、CSS、JavaScript、Vue、React、PHP、Java、Python、C、C++、C#、Go、TypeScript等单词的拼写🎲
//- .checkbox.blue.checked
//- input(type='checkbox', checked)
//- p 熟悉Windows、Linux、Mac、Android、IOS等系统的开关机👻
script(src=url_for(theme.CDN.option.countup_js))
script(src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js")
script.
(() => {
function isInViewPortOfOne(el) {
if (!el) return;
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
const offsetTop = el.offsetTop;
const scrollTop = document.documentElement.scrollTop;
const top = offsetTop - scrollTop;
return top <= viewPortHeight;
}
fetch('https://v6-widget.51.la/v6/掩码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 statistic = []
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return
if (i == 0 || i == num.length - 1) continue;
statisticEl.innerHTML += '<div><span>' + title[i] + '</span><span id='+ title[i] + '>' + num[i] + '</span></div>'
queueMicrotask(()=> {
statistic.push(new CountUp(title[i], 0, num[i], 0, 2, {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
}))
})
}
function statisticUP () {
let statisticElment = document.querySelector('.about-statistic.author-content-item');
if(isInViewPortOfOne(statisticElment)) {
for (let i = 0; i < num.length; i++) {
if (i == 0 || i == num.length - 1) continue;
statistic[i-1].start();
}
document.removeEventListener('scroll', throttleStatisticUP);
}
}
function scrollSelfInfoContentYear() {
let selfInfoContentYearElment = document.querySelector('.author-content-item.selfInfo.single');
if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) {
selfInfoContentYear.start()
document.removeEventListener('scroll', throttleScrollSelfInfoContentYear);
}
}
const throttleStatisticUP = btf.throttle(statisticUP, 200)
document.addEventListener('scroll', throttleStatisticUP, {passive: true})
const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200)
document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true})
});
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)
document.addEventListener('pjax:send', function(){
clearInterval(pursuitInterval);
});
var helloAboutEl = document.querySelector('.hello-about')
helloAboutEl.addEventListener("mousemove", evt => {
const mouseX = evt.offsetX;
const mouseY = evt.offsetY;
gsap.set(".cursor", {
x: mouseX,
y: mouseY,
})
gsap.to(".shape", {
x: mouseX,
y: mouseY,
stagger: -0.1
})
})
})()以上代码的个性化文字和图像url需要自己修改第173行的{掩码ID}由51la提供，用于统计网站访问量。后续我会尝试使用umami代替
注册账号并添加网站 访问 51la 官网 注册账号并登录 添加你的网站
开启数据挂件 进入 站点配置 > 参数设置 > 数据挂件 开启数据挂件功能
获取 {掩码ID} 在 嵌入代码 中找到 src 项 提取 https://v6-widget.51.la/v6/ 后的 16 位字符
引入统计代码
如果开启了51la统计，就需要在_config.butterfly.yml中引入统计代码:
bottem:
- <script charset="UTF-8" id="LA_COLLECT" src="https://sdk.51.la/js-sdk-pro.min.js"></script>
- <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script>
- <script> LA.init({id:"你的id",ck:"你的ck"})</script> # 添加完站点后会自动跳转安装，就在代码里面
- <script>new LingQue.Monitor().init({id:"你的灵雀id",sendSuspicious:true});</script> # 开启灵雀功能后，也在安装代码里面注意一定要在51la上开启v6统计和灵雀监控，否则无法统计访问量
配置 countup_js 的 CDN
- 修改_config.butterfly.yml
CDN:
option:
countup_js: /js/countup.js- 新建source/js/countup.js
var CountUp = function (target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function () {
return "1.9.2";
};
self.options = {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
easingFn: easeOutExpo,
formattingFn: formatNumber,
prefix: "",
suffix: "",
numerals: [],
};
if (options && typeof options === "object") {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key];
}
}
}
if (self.options.separator === "") {
self.options.useGrouping = false;
} else {
self.options.separator = "" + self.options.separator;
}
var lastTime = 0;
var vendors = ["webkit", "moz", "ms", "o"];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
window.cancelAnimationFrame =
window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
function formatNumber(num) {
num = num.toFixed(self.decimals);
num += "";
var x, x1, x2, x3, i, l;
x = num.split(".");
x1 = x[0];
x2 = x.length > 1 ? self.options.decimal + x[1] : "";
if (self.options.useGrouping) {
x3 = "";
for (i = 0, l = x1.length; i < l; ++i) {
if (i !== 0 && i % 3 === 0) {
x3 = self.options.separator + x3;
}
x3 = x1[l - i - 1] + x3;
}
x1 = x3;
}
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g, function (w) {
return self.options.numerals[+w];
});
x2 = x2.replace(/[0-9]/g, function (w) {
return self.options.numerals[+w];
});
}
return self.options.prefix + x1 + x2 + self.options.suffix;
}
function easeOutExpo(t, b, c, d) {
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
}
function ensureNumber(n) {
return typeof n === "number" && !isNaN(n);
}
self.initialize = function () {
if (self.initialized) {
return true;
}
self.error = "";
self.d = typeof target === "string" ? document.getElementById(target) : target;
if (!self.d) {
self.error = "[CountUp] target is null or undefined";
return false;
}
self.startVal = Number(startVal);
self.endVal = Number(endVal);
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
self.decimals = Math.max(0, decimals || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = Number(duration) * 1000 || 2000;
self.countDown = self.startVal > self.endVal;
self.frameVal = self.startVal;
self.initialized = true;
return true;
} else {
self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
return false;
}
};
self.printValue = function (value) {
var result = self.options.formattingFn(value);
if (self.d.tagName === "INPUT") {
this.d.value = result;
} else {
if (self.d.tagName === "text" || self.d.tagName === "tspan") {
this.d.textContent = result;
} else {
this.d.innerHTML = result;
}
}
};
self.count = function (timestamp) {
if (!self.startTime) {
self.startTime = timestamp;
}
self.timestamp = timestamp;
var progress = timestamp - self.startTime;
self.remaining = self.duration - progress;
if (self.options.useEasing) {
if (self.countDown) {
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
} else {
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
}
} else {
if (self.countDown) {
self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration);
} else {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
}
}
if (self.countDown) {
self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal;
} else {
self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal;
}
self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
self.printValue(self.frameVal);
if (progress < self.duration) {
self.rAF = requestAnimationFrame(self.count);
} else {
if (self.callback) {
self.callback();
}
}
};
self.start = function (callback) {
if (!self.initialize()) {
return;
}
self.callback = callback;
self.rAF = requestAnimationFrame(self.count);
};
self.pauseResume = function () {
if (!self.paused) {
self.paused = true;
cancelAnimationFrame(self.rAF);
} else {
self.paused = false;
delete self.startTime;
self.duration = self.remaining;
self.startVal = self.frameVal;
requestAnimationFrame(self.count);
}
};
self.reset = function () {
self.paused = false;
delete self.startTime;
self.initialized = false;
if (self.initialize()) {
cancelAnimationFrame(self.rAF);
self.printValue(self.startVal);
}
};
self.update = function (newEndVal) {
if (!self.initialize()) {
return;
}
newEndVal = Number(newEndVal);
if (!ensureNumber(newEndVal)) {
self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
return;
}
self.error = "";
if (newEndVal === self.frameVal) {
return;
}
cancelAnimationFrame(self.rAF);
self.paused = false;
delete self.startTime;
self.startVal = self.frameVal;
self.endVal = newEndVal;
self.countDown = self.startVal > self.endVal;
self.rAF = requestAnimationFrame(self.count);
};
if (self.initialize()) {
self.printValue(self.startVal);
}
};新建CSS
在themes\butterfly\source\css目录下创建_custom然后在_custom里面再次创建about文件夹，然后在about目录下新建about.css
#gitcalendar {
margin: 0 auto;
border-radius: 24px;
background: var(--anzhiyu-card-bg);
border: var(--style-border-always);
box-shadow: var(--anzhiyu-shadow-border);
position: relative;
padding: 1rem 2rem;
overflow: hidden;
}
/*背景面板*/
#page:has(#about-page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: rgba(255, 255, 255, 0.884); /* 添加一个半透明的背景色 */
backdrop-filter: blur(10px); /* 添加背景模糊效果 */
-webkit-backdrop-filter: blur(10px); /* 兼容Safari浏览器 */
border-radius: 26px; /* 设置四个角为圆角，半径为24px */
}
#page:has(#about-page) .page-title {
display: none;
}
.page:has(#about-page) #footer-wrap {
opacity: 1;
overflow: visible;
height: auto !important;
min-height: 16px;
color: #ffffff;
}
#web_bg ~ .page:has(#about-page) {
background: var(--anzhiyu-background);
}
#about-page .author-box {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
gap: 1rem;
width: 100%;
}
/* 头像样式调整 */
#about-page .author-box .author-img {
margin: 0;
border-radius: 50%;
overflow: hidden;
width: 180px;
height: 180px;
flex-shrink: 0;
order: 2; /* 头像在中间 */
position: relative;
}
#about-page .author-box .author-img img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 修复 image-dot 定位 - 现在它是 author-box 的直接子元素 */
#about-page .author-box .image-dot {
width: 30px;
height: 30px;
background: #6bdf8f;
position: absolute;
border-radius: 50%;
border: 4px solid var(--anzhiyu-background);
top: calc(50% + 45px); /* 向下偏移头像半径的一半 */
left: calc(50% + 45px); /* 向右偏移头像半径的一半 */
z-index: 10;
transform: translate(-50%, -50%); /* 居中定位 */
}
.author-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 1rem;
}
#about-page .myInfoAndSayHello {
display: flex;
flex-direction: column;
justify-content: center;
color: var(--anzhiyu-white);
background: linear-gradient(120deg, #5fa8c8 0, #00d4ff 100%);
background-size: 200%;
animation: gradient 15s ease infinite;
width: 59%;
}
.author-content-item {
width: 49%;
border-radius: 24px;
background: var(--anzhiyu-card-bg);
border: var(--style-border-always);
box-shadow: var(--anzhiyu-shadow-border);
position: relative;
padding: 1rem 2rem;
overflow: hidden;
}
#about-page .myInfoAndSayHello .title1 {
opacity: 0.8;
line-height: 1.3;
}
#about-page .myInfoAndSayHello .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
margin: 0.5rem 0;
}
.inline-word {
word-break: keep-all;
white-space: nowrap;
}
#about-page .myInfoAndSayHello .title1 {
opacity: 0.8;
line-height: 1.3;
}
.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: -0.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;
padding-bottom: var(--offset);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: no-repeat;
}
.aboutsiteTips .mask span[data-show] {
transform: translateY(-100%);
transition: 0.5s transform ease-in-out;
}
.aboutsiteTips .mask span[data-up] {
transform: translateY(-200%);
transition: 0.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);
}
@media screen and (max-width: 768px) {
.author-content-item.map {
margin-bottom: 0;
}
}
#about-page .about-statistic {
min-height: 380px;
width: 99.9%;
background: url(https://img02.anheyu.com/adminuploads/1/2022/09/23/632d634f8376d.jpg) no-repeat top;
background-size: cover;
color: var(--anzhiyu-white);
overflow: hidden;
}
#about-page .about-statistic::after {
box-shadow: 0 -159px 173px 71px #0c1c2c inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.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: 0.5rem;
}
.author-content-item .author-content-item-title {
font-size: 36px;
font-weight: 700;
line-height: 1;
}
#statistic {
font-size: 16px;
border-radius: 15px;
width: 100%;
color: var(--anzhiyu-white);
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 2rem;
}
#statistic div span:first-child {
opacity: 0.8;
font-size: 12px;
}
#statistic div span:last-child {
font-weight: 700;
font-size: 34px;
line-height: 1;
white-space: nowrap;
}
#statistic div {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 50%;
margin-bottom: 0.5rem;
}
.post-tips {
color: var(--anzhiyu-gray);
font-size: 14px;
position: absolute;
bottom: 1rem;
left: 2rem;
}
.post-tips a {
color: var(--anzhiyu-gray) !important;
border: none !important;
}
.author-content-item .card-content .banner-button-group {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
height: 40px;
width: 124px;
border-radius: 20px;
justify-content: center;
background: var(--anzhiyu-card-bg);
color: var(--font-color);
display: flex;
align-items: center;
z-index: 1;
transition: 0.3s;
cursor: pointer;
border-bottom: 0 !important;
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 8px;
font-size: 1rem;
}
#about-page .author-content-item .card-content .banner-button-group .banner-button i {
font-size: 1.5rem;
}
.author-content-item .card-content .banner-button-group .banner-button:hover {
background: var(--anzhiyu-main);
color: var(--anzhiyu-white);
border-radius: 20px !important;
}
.author-content-item.personalities {
position: relative;
width: 59%;
}
.author-content-item.personalities .image {
position: absolute;
right: 30px;
top: 10px;
width: 220px;
transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);
}
.author-content-item.personalities .image img {
display: block;
margin: 0 auto 20px;
max-width: 100%;
transition: filter 375ms ease-in 0.2s;
}
.author-content-item.personalities:hover .image {
transform: rotate(-10deg);
}
.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 img {
position: absolute;
min-width: 100%;
object-fit: cover;
transition: 0.6s;
animation: coverIn 2s ease-out forwards;
transition: transform 2s ease-out !important;
}
.author-content-item.myphoto:hover img {
transform: scale(1.1);
}
.author-content-item:hover .card-background-icon {
transform: rotate(20deg);
}
.author-content-item.personalities .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
}
.author-content-item.single {
width: 100%;
}
.author-content-item.map .map-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: var(--anzhiyu-maskbg);
padding: 0.5rem 2rem;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: 1s ease-in-out;
font-size: 20px;
}
.author-content-item.map .map-title b {
color: var(--font-color);
}
.author-content-item.selfInfo {
display: flex;
min-height: 100px;
max-height: 400px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: -webkit-fill-available;
height: 40%;
}
.author-content-item.selfInfo div {
display: flex;
flex-direction: column;
margin: 0.5rem 2rem 0.5rem 0;
}
.author-content-item.selfInfo .selfInfo-title {
opacity: 0.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;
}
.author-content-item-group.column.mapAndInfo {
width: 59%;
}
.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:hover .map-title {
bottom: -100%;
}
.author-content-item-group.column {
display: flex;
flex-direction: column;
width: 49%;
justify-content: space-between;
}
.post-tips a:hover {
color: var(--anzhiyu-main) !important;
background: none !important;
}
.author-content-item.single.reward .reward-list-updateDate {
color: var(--anzhiyu-gray);
font-size: 14px;
}
.author-content-item.single.reward .post-reward {
position: absolute;
margin-top: 0px;
width: auto;
text-align: none;
pointer-events: none;
right: 2rem;
top: 2rem;
}
.tip-button {
border: 0;
border-radius: 2.25rem;
cursor: pointer;
font-size: 20px;
font-weight: 600;
height: 2.6rem;
margin-bottom: -4rem;
outline: 0;
position: relative;
top: 0;
transform-origin: 0 100%;
transition: transform 50ms ease-in-out;
width: auto;
-webkit-tap-highlight-color: transparent;
}
.coin::before,
.coin__back,
.coin__back::after,
.coin__front,
.coin__front::after,
.coin__middle {
border-radius: 50%;
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 3;
}
.coin-wrapper {
background: 0 0;
bottom: 0;
height: 18rem;
left: 0;
opacity: 1;
overflow: hidden;
pointer-events: none;
position: absolute;
transform: none;
transform-origin: 50% 100%;
transition: opacity 0.2s linear 0.1s, transform 0.3s ease-out;
width: 100%;
}
.coin__front::after {
background: rgba(0, 0, 0, 0.2);
content: "";
opacity: var(--front-y-multiplier);
}
.coin__back::after {
background: rgba(0, 0, 0, 0.2);
content: "";
opacity: var(--back-y-multiplier);
}
.coin__middle {
background: #737c99;
transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier));
}
.coin::before {
background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent
calc(var(--shine-bg-multiplier) + 0), #e9f4ff calc(var(--shine-bg-multiplier) + 0), transparent calc(var(
--shine-bg-multiplier
) + 50%));
content: "";
opacity: var(--shine-opacity-multiplier);
transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier))
rotate(calc(var(--coin-rotation-multiplier) * 1deg));
z-index: 10;
}
.coin {
--front-y-multiplier: 0;
--back-y-multiplier: 0;
--coin-y-multiplier: 0;
--coin-x-multiplier: 0;
--coin-scale-multiplier: 0;
--coin-rotation-multiplier: 0;
--shine-opacity-multiplier: 0.4;
--shine-bg-multiplier: 50%;
bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);
height: 3.5rem;
margin-bottom: 3.05rem;
position: absolute;
right: calc(var(--coin-x-multiplier) * 34% + 16%);
transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(
--coin-rotation-multiplier
) * -1deg));
transition: opacity 0.1s linear 0.2s;
width: 3.5rem;
z-index: 3;
}
.coin__back {
background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent
35%);
background-color: #8590b3;
background-size: 100% 100%;
transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier));
}
.coin__front {
background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%),
linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(
to bottom,
#fcfaf9 44%,
transparent 44%,
transparent 65%,
#fcfaf9 65%,
#fcfaf9 71%,
#8590b3 71%
), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9
47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent
72%);
background-color: #8590b3;
background-size: 100% 100%;
transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier));
}
.tip-button__text {
color: #fff;
margin-right: 1.8rem;
opacity: 1;
position: relative;
transition: opacity 0.1s linear 0.5s;
z-index: 3;
}
.author-content .post-reward .reward-main {
bottom: 0;
top: 50px;
left: auto;
right: 0;
}
.author-content .post-reward .reward-main .reward-all:before {
top: -11px;
bottom: auto;
}
#about-page .post-reward .reward-item a:hover {
background: transparent !important;
}
#about-page .post-reward .reward-item a {
border-bottom: none !important;
}
#about-page .post-reward .reward-item a img {
margin-bottom: 0 !important;
}
#about-page .post-reward .reward-main .reward-all {
border-radius: 10px;
padding: 20px 10px !important;
}
.post-reward .reward-main .reward-all .reward-item {
padding: 0 8px !important;
}
.post-reward .reward-main .reward-all li.reward-item::before {
content: none !important;
}
.post-reward .reward-main .reward-all:after {
content: none !important;
}
.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 .author-content-item-tips {
opacity: 0.8;
font-size: 12px;
margin-bottom: 0.5rem;
}
.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: var(--anzhiyu-white);
background-size: 200%;
animation: gradient 15s ease infinite;
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;
}
.card-background-icon {
font-size: 12rem;
opacity: 0.2;
position: absolute;
right: 0;
bottom: -40%;
transform: rotate(30deg);
transition: 2s ease-in-out;
}
/* 在原神卡片样式后面添加星穹铁道卡片样式 */
.author-content-item.game-starrail {
background: url(https://youke1.picui.cn/s1/2025/09/27/68d8000b6120e.jpg) no-repeat top;
background-size: cover;
min-height: 300px;
max-height: 400px; /* 添加最大高度控制 */
height: 300px; /* 固定高度 */
overflow: hidden;
color: var(--anzhiyu-white);
width: 45%;
}
.author-content-item.game-starrail::after {
box-shadow: 0 -69px 203px 11px #2a1a5e inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* 修改原神卡片宽度，添加高度控制 */
.author-content-item.game-yuanshen {
background: url(https://img02.anheyu.com/adminuploads/1/2022/12/19/63a079ca63c8a.webp) no-repeat top;
background-size: cover;
min-height: 300px;
max-height: 400px; /* 添加最大高度控制 */
height: 300px; /* 固定高度 */
overflow: hidden;
color: var(--anzhiyu-white);
width: 45%;
}
/* 为两个游戏卡片添加容器样式 */
.games-container {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
.games-container {
flex-direction: column;
}
.author-content-item.game-yuanshen,
.author-content-item.game-starrail {
width: 100% !important;
height: 250px; /* 移动端调整高度 */
min-height: 250px;
}
.author-content-item.game-yuanshen .content-bottom,
.author-content-item.game-starrail .content-bottom {
padding-bottom: 10px;
}
.author-content-item.game-yuanshen .game-yuanshen-uid,
.author-content-item.game-starrail .game-starrail-uid {
display: none;
}
}
.author-content-item.comic-content {
width: 100%; /* 将宽度设置为100% */
min-height: 300px;
overflow: hidden;
}
.author-content-item.comic-content .comic-box {
display: flex;
width: 99.9%; /* 将宽度设置为100% */
height: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.author-content-item.comic-content .author-content-item-tips, .author-content-item.comic-content .author-content-item-title {
z-index: 2;
color: var(--anzhiyu-white);
pointer-events: none;
}
.author-content-item.comic-content .comic-item {
height: 100%;
color: white;
width: 20%;
transform: skew(-10deg, 0deg);
transition: 0.8s;
position: relative;
overflow: hidden;
}
.author-content-item.comic-content .comic-item:hover {
width: 46%;
}
.author-content-item.comic-content .comic-item:hover .comic-item-cover {
left: 16%;
transform: skew(10deg, 0deg) scale(1.6);
}
.author-content-item.comic-content .comic-item .comic-item-cover {
position: absolute;
top: 0;
left: -50%;
height: 100%;
transform: skew(10deg, 0deg);
object-fit: cover;
transition: scale 0.2s, all 0.8s;
}
.author-content-item.comic-content .comic-item .comic-item-cover img {
height: 100%;
transition: 0.8s;
max-width: none;
border-radius: 0px;
}
.author-content-item.comic-content::after {
box-shadow: 0 -48px 203px 11px #ffffff52 inset;
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.author-content-item.like-technology {
background: url(https://blog.ayeez.cn/imgs/bg/p11.jpg) no-repeat;
background-size: cover;
min-height: 230px;
color: var(--anzhiyu-white);
}
.author-content-item.like-music {
background: url(https://blog.ayeez.cn/imgs/bg/p15.jpg) no-repeat top;
background-size: cover;
min-height: 400px;
color: var(--anzhiyu-white);
overflow: hidden;
}
.author-content-item .card-content .banner-button-group {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}
.author-content-item.like-music::after {
box-shadow: 0 -69px 203px 11px #453e38 inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media screen and (max-width: 768px) {
#gitcalendar {
display: none;
}
[data-theme="dark"] .author-content-item .card-content .banner-button-group .banner-button {
color: var(--anzhiyu-black) !important;
}
.author-content-item .card-content .banner-button-group .banner-button:hover {
background: none !important;
}
.author-content-item.game-yuanshen .content-bottom {
padding-bottom: 10px;
}
.author-content-item.game-yuanshen .game-yuanshen-uid {
display: none;
}
.author-content {
margin-top: 0;
}
.author-content-item {
width: 100% !important;
margin-top: 1rem;
padding: 1rem;
}
.author-content-item.map {
margin-bottom: 0;
}
.author-content-item-group.column {
width: 100% !important;
}
.author-content-item.selfInfo {
height: 95%;
}
.author-content-item.personalities {
height: 170px;
}
.post-tips {
left: auto;
}
.author-content-item.personalities .image {
width: 90px;
}
.site-card-group > a {
width: 100% !important;
}
.post-reward {
display: none;
}
.reward-list-item {
width: 100% !important;
}
.layout > div:first-child:not(.recent-posts) {
/* border-radius: 0; */
padding: 0 1rem !important;
box-shadow: none !important;
background: var(--anzhiyu-background);
}
.author-content-item .card-content .banner-button-group .banner-button-text {
display: none;
}
.author-content-item .card-content .banner-button-group {
right: 1rem;
bottom: 1rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
background: 0 0;
padding: 0;
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 0;
font-size: 1.5rem;
background: white;
border-radius: 50%;
padding: 6px;
margin-left: 80px;
}
.author-content-item .card-content .banner-button-group .banner-button:hover i {
background: var(--anzhiyu-background) !important;
color: var(--anzhiyu-theme);
}
#selfInfo-content-year {
width: 90px;
}
}
@media screen and (min-width: 768px) and (max-width: 896px) {
.author-content-item.like-music .content-bottom .tips {
display: none;
}
}
/* 赞赏的css */
.reward-list-all {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 0.5rem;
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.reward-list-item {
padding: 1rem;
border-radius: 12px;
border: var(--style-border-always);
width: calc((100% / 3) - 0.5rem);
margin: 0 0.25rem 0.5rem 0.25rem;
box-shadow: var(--anzhiyu-shadow-border);
}
.reward-list-item .reward-list-item-name {
font-size: 1rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.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(--anzhiyu-secondtext);
white-space: nowrap;
}
/* 修改头像容器为flex布局，添加标签环绕 */
#about-page .author-box {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
gap: 1rem;
width: 100%;
}
/* 头像样式调整 */
#about-page .author-box .author-img {
margin: 0;
border-radius: 50%;
overflow: visible; /* 改为 visible 允许子元素溢出 */
width: 180px;
height: 180px;
flex-shrink: 0;
order: 2; /* 头像在中间 */
position: relative;
}
#about-page .author-box .author-img img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1; /* 确保图片在 dot 下面 */
}
/* 修改 image-dot 的定位 - 现在它在头像内部 */
#about-page .author-box .image-dot {
width: 30px;
height: 30px;
background: #6bdf8f;
position: absolute;
border-radius: 50%;
border: 7px solid var(--anzhiyu-background);
top: calc(50% + 69px); /* 增加偏移量，使其更靠近右下角 */
left: calc(50% + 60px); /* 增加偏移量，使其更靠近右下角 */
z-index: 10;
transform: translate(-50%, -50%); /* 居中定位 */
}
/* 标签容器样式 */
.author-tag-left,
.author-tag-right {
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
min-width: 0; /* 防止flex项目溢出 */
}
.author-tag-left {
order: 1;
align-items: flex-end;
}
.author-tag-right {
order: 3;
align-items: flex-start;
}
.author-tag {
background: #ffffff;
color: #333333;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e1e1;
transition: all 0.3s ease;
white-space: nowrap;
max-width: 180px;
display: inline-block;
}
.author-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* 为不同标签添加不同的边框颜色 */
.author-tag-left .author-tag:nth-child(1) {
border-color: #ff6b6b;
}
.author-tag-left .author-tag:nth-child(2) {
border-color: #48cae4;
}
.author-tag-left .author-tag:nth-child(3) {
border-color: #51cf66;
}
.author-tag-left .author-tag:nth-child(4) {
border-color: #ffd43b;
}
.author-tag-right .author-tag:nth-child(1) {
border-color: #da77f2;
}
.author-tag-right .author-tag:nth-child(2) {
border-color: #74c0fc;
}
.author-tag-right .author-tag:nth-child(3) {
border-color: #ffa94d;
}
.author-tag-right .author-tag:nth-child(4) {
border-color: #8ce99a;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
#about-page .author-box {
flex-direction: column;
gap: 1.2rem;
}
/* 在移动端隐藏两侧标签 */
.author-tag-left,
.author-tag-right {
display: none; /* 隐藏两侧标签 */
}
/* 确保头像在移动端居中显示 */
#about-page .author-box .author-img {
order: 1; /* 调整顺序，让头像在移动端显示在最上面 */
margin: 0 auto; /* 居中显示 */
}
/* 移动端调整 dot 位置 */
#about-page .author-box .image-dot {
top: calc(50% + 45px);
left: calc(50% + 45px);
width: 25px;
height: 25px;
border: 3px solid var(--anzhiyu-background);
}
}
/* 添加标签漂浮动画效果 */
.author-tag {
background: #ffffff;
color: #333333;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e1e1;
transition: all 0.3s ease;
white-space: nowrap;
max-width: 180px;
display: inline-block;
animation: float 3s ease-in-out infinite; /* 添加漂浮动画 */
}
/* 为不同标签设置不同的动画延迟，形成错落有致的效果 */
.author-tag-left .author-tag:nth-child(1) {
border-color: #ff6b6b;
animation-delay: 0s;
}
.author-tag-left .author-tag:nth-child(2) {
border-color: #48cae4;
animation-delay: 0.5s;
}
.author-tag-left .author-tag:nth-child(3) {
border-color: #51cf66;
animation-delay: 1s;
}
.author-tag-left .author-tag:nth-child(4) {
border-color: #ffd43b;
animation-delay: 1.5s;
}
.author-tag-right .author-tag:nth-child(1) {
border-color: #da77f2;
animation-delay: 0.2s;
}
.author-tag-right .author-tag:nth-child(2) {
border-color: #74c0fc;
animation-delay: 0.7s;
}
.author-tag-right .author-tag:nth-child(3) {
border-color: #ffa94d;
animation-delay: 1.2s;
}
.author-tag-right .author-tag:nth-child(4) {
border-color: #8ce99a;
animation-delay: 1.7s;
}
/* 定义漂浮动画 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px); /* 向上漂浮4像素 */
}
}
/* 悬停时暂停动画并放大 */
.author-tag:hover {
animation-play-state: paused; /* 悬停时暂停动画 */
transform: translateY(-1px) scale(1.05); /* 悬停时上浮并轻微放大 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}新建careers.css
.author-content-item.careers {
min-height: 400px;
}
.author-content-item.careers .careers-group {
margin-top: 12px;
}
.author-content-item.careers .careers-item {
display: flex;
align-items: center;
}
.author-content-item.careers .careers-item .circle {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 16px;
}
.author-content-item.careers .careers-item .name {
color: var(--anzhiyu-secondtext);
}
.author-content-item.careers .careers-item {
display: flex;
align-items: center;
}
.author-content-item.careers .careers-item .circle {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 16px;
}
.author-content-item.careers .careers-item .name {
color: var(--anzhiyu-secondtext);
}
.author-content-item.careers img {
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
transition: 0.6s;
}新建genshinimpact.css
:root {
--loadingbar-background-color: #2c2b30;
--loadingbar-prospect-color: #ece5d8;
}
/* html.dark body {
background-color: #161d22;
} */
.loading-bar {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 62.5px;
transform: translate(-25%, -50%) scale(0.5);
transition: all 0.5s;
user-select: none;
overflow: hidden;
}
.loading-bar img {
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 var(--loadingbar-background-color));
}
.loading-bar::after {
content: "";
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color));
width: 500px;
height: 62.5px;
background: url("https://yuanshen.site/imgs/loading-bar.png") no-repeat left 100%;
background-size: 500px 62.5px;
background-position-x: 0;
}
.author-content-item.game-yuanshen:hover .loading-bar::after {
animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards;
}
@media screen and (max-width: 719px) {
.loading-bar .loading-bar {
display: none;
}
}
@media screen and (max-width: 719px) and (orientation: landscape) {
.loading-bar .loading-bar {
display: block !important;
transform: translate(-50%, -50%) scale(0.7) !important;
}
}
@supports not (filter: drop-shadow(0 0 0 #fff)) {
.loading-bar:before {
content: "Your browser does not support the animation";
}
}
@keyframes loading-bar {
0% {
width: 0;
background-size: 500px 62.5px;
}
16.6% {
}
33.2% {
}
49.8% {
}
66.4% {
}
83% {
width: 475px;
}
83.1% {
width: 475px;
}
83.2% {
width: 475px;
}
83.3% {
width: 475px;
}
83.4% {
width: 475px;
}
83.5% {
width: 475px;
}
83.6% {
width: 475px;
}
83.7% {
width: 475px;
}
83.8% {
width: 475px;
}
83.9% {
width: 475px;
}
84% {
width: 475px;
}
85% {
width: 475px;
}
86% {
width: 475px;
}
87% {
width: 475px;
}
100% {
width: 500px;
}
}在第37行修改图片url即可
新建hello-about.css
.hello-about {
margin: 20px auto;
border-radius: 24px;
background: var(--anzhiyu-card-bg);
border: var(--style-border-always);
box-shadow: var(--anzhiyu-shadow-border);
position: relative;
overflow: hidden;
user-select: none;
}
.shapes {
position: relative;
height: 315px;
width: 100%;
background: #2128bd;
overflow: hidden;
}
.shape {
will-change: transform;
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: #fff;
mix-blend-mode: screen;
}
[data-theme="dark"] .hello-about .content {
background: transparent;
}
[data-theme="dark"] .hello-about h1 {
color: var(--anzhiyu-white);
}
.hello-about h1 {
font-size: 200px;
color: #000;
margin: 0;
text-align: center;
font: inherit;
vertical-align: baseline;
line-height: 1;
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 419px) {
.hello-about h1 {
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
}
}
.cursor {
position: absolute;
background: #2128bd;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
will-change: transform;
user-select: none;
pointer-events: none;
z-index: 3;
}
::selection {
color: #fff;
background: #2128bd;
}新建site.css
.site-card-group .site-card .info {
margin-top: 0;
}
.site-card-group > a {
width: calc(100% / 4 - 0.5rem);
height: 150px;
position: relative;
display: block;
margin: 0.5rem 0.25rem;
float: left;
overflow: hidden;
padding: 0;
border-radius: 8px;
-webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-webkit-box-shadow: none;
box-shadow: none;
border: var(--style-border) !important;
}
.site-card-group > a .wrapper {
position: relative;
}
.site-card-group > a .cover {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
.site-card-group > a .info,
.site-card-group > a .wrapper .cover {
position: absolute;
top: 0;
left: 0;
}
.site-card-group > a .info {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.7);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
}
.site-card-group > a .info img {
position: relative;
top: 45px;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
z-index: 1;
text-align: center;
pointer-events: none;
}
.site-card-group > a .info span {
padding: 20px 10% 60px 10%;
font-size: 16px;
width: 100%;
text-align: center;
-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
background-color: rgba(255, 255, 255, 0.7);
color: var(--font-color);
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.site-card-group .site-card:hover {
border-color: var(--anzhiyu-main) !important;
background-color: var(--anzhiyu-main) !important;
-webkit-box-shadow: var(--anzhiyu-shadow-theme) !important;
box-shadow: var(--anzhiyu-shadow-theme) !important;
}
.site-card-group > a:hover .wrapper img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.site-card-group > a .cover {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
.site-card-group > a .wrapper img {
height: 150px;
pointer-events: none;
}
.site-card-group .site-card .wrapper img {
-webkit-transition: -webkit-transform 0.5s ease-out !important;
-moz-transition: -moz-transform 0.5s ease-out !important;
-o-transition: -o-transform 0.5s ease-out !important;
-ms-transition: -ms-transform 0.5s ease-out !important;
transition: transform 0.5s ease-out !important;
}
.site-card-group > a .wrapper .fadeIn {
-webkit-animation: coverIn 0.8s ease-out forwards;
-moz-animation: coverIn 0.8s ease-out forwards;
-o-animation: coverIn 0.8s ease-out forwards;
-ms-animation: coverIn 0.8s ease-out forwards;
animation: coverIn 0.8s ease-out forwards;
}
.site-card-group > a:hover .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}整合并引入 CSS
修改\themes\butterfly\source\css\index.styl
if hexo-config('css_prefix')
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
@import '_custom/**/*.css'
// search
@import '_search/index'添加番剧数据
新建\source\_data\comic.yml以下是我的数据
- class_name: 番剧
comic_tips: 阅片无数
comic_title: 番剧
comic_list:
- name: 某科学的超电磁炮T
href: https://www.bilibili.com/bangumi/play/ss29325?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/1.webp
- name: Fate/Zero 第二季
href: https://www.bilibili.com/bangumi/play/ss779?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/2.webp
- name: 葬送的芙莉莲
href: https://www.bilibili.com/bangumi/play/ep779775?spm_id_from=333.1387.0.0&from_spmid=666.25.episode.0
cover: https://csjs.eu.org/c/3.webp
- name: 异度侵入 ID:INVADED
href: https://www.bilibili.com/bangumi/play/ss29310?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/4.webp
- name: 我们仍未知道那天所看见的花的名字。
href: https://www.bilibili.com/bangumi/play/ss835?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/5.webp
- name: 孤独摇滚！
href: https://www.bilibili.com/bangumi/play/ss43164?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/6.webp
- name: Re：从零开始的异世界生活
href: https://www.bilibili.com/bangumi/play/ss36429?spm_id_from=333.337.0.0
cover: https://csjs.eu.org/c/7.webp
- name: 百妖谱
href: https://www.bilibili.com/bangumi/play/ep2008512?spm_id_from=333.337.0.0&from_spmid=666.25.episode.0
cover: https://csjs.eu.org/c/8.webp
- name: 石纪元
href: https://www.bilibili.com/bangumi/play/ss42093?spm_id_from=333.1387.0.0&from_spmid=666.25.series.0
cover: https://csjs.eu.org/c/9.webp
- name: 夏目友人帐
href: https://www.bilibili.com/bangumi/play/ss48811?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/10.webp
- name: 异世界舅舅
href: https://www.bilibili.com/bangumi/play/ss42105?spm_id_from=333.1387.0.0
cover: https://csjs.eu.org/c/11.webp
- name: 命运拳台
href: https://www.bilibili.com/bangumi/play/ep789332?spm_id_from=333.1387.0.0&from_spmid=666.25.episode.0
cover: https://csjs.eu.org/c/12.webp
- name: 转生史莱姆日记
href: https://www.bilibili.com/bangumi/play/ep395211?spm_id_from=333.337.0.0&from_spmid=666.25.episode.0
cover: https://csjs.eu.org/c/13.webp修复bug
因为写完才发现有bug，这里通过打补丁方式修改
在themes\butterfly\source\css\_custom\about\里面新建bd.css
.author-content-item .tips,
.author-content-item .author-content-item-title,
.author-content-item .author-content-item-tips,
.author-content-item .banner-button-group .banner-button i,
.author-content-item .banner-button-group .banner-button-text {
color: #ccc2c2;
}
/* UID显示在右下角 - 可点击按钮版本 */
.author-content-item.game-yuanshen .game-yuanshen-uid,
.author-content-item.game-starrail .game-starrail-uid {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
background: transparent;
color: #ffffff;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
z-index: 3;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
text-decoration: none; /* 去掉下划线 */
cursor: pointer; /* 鼠标指针变为手型 */
display: inline-block; /* 确保链接可以正确应用padding */
}
/* 悬停效果 */
.author-content-item.game-yuanshen .game-yuanshen-uid:hover,
.author-content-item.game-starrail .game-starrail-uid:hover {
border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.15); /* 悬停时背景更明显 */
transform: translateY(-1px);
color: #ffffff; /* 确保悬停时文字颜色不变 */
text-decoration: none; /* 确保悬停时没有下划线 */
}
/* 点击效果 */
.author-content-item.game-yuanshen .game-yuanshen-uid:active,
.author-content-item.game-starrail .game-starrail-uid:active {
transform: translateY(0); /* 点击时回到原位 */
background: rgba(255, 255, 255, 0.25); /* 点击时背景更深 */
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
.author-content-item.game-yuanshen .game-yuanshen-uid,
.author-content-item.game-starrail .game-starrail-uid {
bottom: 1rem;
right: 1rem;
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
}
}
/* 所有游戏卡片标题改为白色 */
.author-content-item.game-yuanshen .author-content-item-title,
.author-content-item.game-starrail .author-content-item-title,
.author-content-item.game-yuanshen .author-content-item-tips,
.author-content-item.game-starrail .author-content-item-tips {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.author-content-item.comic-content .author-content-item-title {
color: #ffffff !important;
}大功告成
样式预览：
剩下的东西就自己发挥了，图片在about.css里面更换
进阶操作
- 添加技能和生涯卡片
在
about.pug第43行中插入以下代码
.author-content
.author-content-item.skills
.card-content
.author-content-item-tips 技能
span.author-content-item-title 書到用時方恨少
.skills-style-group
.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)
.tags-group-icon(style=`background: ${oddNum[index].color}`)
img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon)
.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)
.skill-name
span=item.name
.etc ...
.author-content-item.careers
.card-content
.author-content-item-tips 生涯
span.author-content-item-title 無限進步
.careers-group
.careers-item
.circle(style='background:#357ef5')
.name 集成电路设计与集成系统
img.author-content-img.no-lightbox(alt='生涯', src='https://i.postimg.cc/tJ4DXvhx/edu.png')- 添加创造力数据 新建\source_data\creativity.yml
- class_name: creativity
creativity_list:
- name: C
color: "#555555" # 深灰色，常用于C语言的标志性颜色
icon: https://img.icons8.com/?size=100&id=40670&format=png&color=000000
- name: C++
color: "#00599C" # C++的标志性颜色
icon: https://i.postimg.cc/6QHPrz7h/C.png
- name: Python
color: "#3776AB" # Python的标志性颜色
icon: https://i.postimg.cc/V6dVDMnP/python.png
- name: Markdown
color: "#000000" # Markdown通常使用黑色
icon: https://i.postimg.cc/G3TfDFbk/markdown.png
- name: LATEX
color: "#008080" # LATEX的标志性颜色
icon: https://i.postimg.cc/tTNqbt6K/latex.png
- name: Algorithm
color: "#FF6347" # 使用橙红色
icon: https://i.postimg.cc/VvtHc8K7/algorithm.png
- name: Raspberry Pi
color: "#A22036" # Raspberry Pi的标志性颜色
icon: https://i.postimg.cc/jdzkgRw2/Raspberry-Pi.png
- name: Linux
color: "#FCC624" # Linux的标志性颜色
icon: https://i.postimg.cc/RVrDLW02/linux.png
- name: Kali
color: "#557C94" # Kali的标志性颜色
icon: https://i.postimg.cc/4y8X7fBw/kalilinux.png
- name: Blender
color: "#F38027" # Blender的标志性颜色
icon: https://i.postimg.cc/B6kwy6BL/Blender.png
- name: Unity
color: "725757" #使用红棕色
icon: https://i.postimg.cc/k58M1dgX/unity.png
- name: Photoshop
color: "#31A8FF" # Photoshop的标志性颜色
icon: https://i.postimg.cc/qRTJWZNc/Photoshop.png
- name: Powerpoint
color: "#D24726" # Powerpoint的标志性颜色
icon: https://i.postimg.cc/kX4JrSgH/powerpoint.png
- name: Word
color: "#2B579A" # Word的标志性颜色
icon: https://i.postimg.cc/rFP8qpdw/WORD.png
- name: Steam
color: "#1B2838" # Steam的标志性颜色
icon: https://i.postimg.cc/J071zDcG/steam.png
- name: Ubisoft
color: "#3FAEAA" # 使用浅蓝色
icon: https://i.postimg.cc/mZVL6jBM/ubisoft.png
- name: EA
color: "#D3D3D3" # EA的标志性颜色
icon: https://i.postimg.cc/4y0rRm8C/ea.png- 修改文章底部页面卡片宽度
修改
themes\butterfly\source\css\_page\common.styl文件
// 隱藏aside
&.hide-aside
max-width: 1400px // 按喜好修改
+minWidth2000()
max-width: 1400px // 按喜好修改
& > div
width: 100% !important // 不推荐动，但也可以按喜好修改全部结束！！！