hexo-butterfly魔改about页面

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！有些内容我没有放出来，但是大体是一致的可以看看[我的关于页面](https://hexo.seln.cn/about/)

# 魔改关于页面主要以[安知鱼的关于页面](https://blog.anheyu.com/)为参考，经行个性化魔改，具体代码如下： ### 新建about页面新建`source/about/index.md` ```markdown 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`代码如下： ```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><\/p>)/g) num = num.map((el) => { let val = el.replace(/(<\/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 += '

' + title[i] + '' + num[i] + '

' 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 }) }) })() ```

第173行的{掩码ID}由[51la](https://www.51.la/)提供，用于统计网站访问量。后续我会尝试使用umami代替 1. 注册账号并添加网站访问 51la 官网注册账号并登录添加你的网站 2. 开启数据挂件进入站点配置 > 参数设置 > 数据挂件开启数据挂件功能 3. 获取 {掩码ID} 在嵌入代码中找到 src 项提取 https://v6-widget.51.la/v6/ 后的 16 位字符

以上代码的个性化文字和图像url需要自己修改 ### 引入统计代码如果开启了51la统计，就需要在_config.butterfly.yml中引入统计代码: ```yml bottem: - - - # 添加完站点后会自动跳转安装，就在代码里面 - # 开启灵雀功能后，也在安装代码里面 ``` 注意一定要在51la上开启v6统计和灵雀监控，否则无法统计访问量 ### 配置 countup_js 的 CDN 1. 修改_config.butterfly.yml ```yml CDN: option: countup_js: /js/countup.js ``` 2. 新建source/js/countup.js ```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 ```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 ```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 ```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 ```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 ```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` ```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`以下是我的数据 ```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` ```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里面更换 ### 进阶操作 1. 添加技能和生涯卡片在`about.pug`第43行中插入以下代码 ```pug .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') ``` 2. 添加创造力数据新建\source\_data\creativity.yml ```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 ``` 3. 修改文章底部页面卡片宽度修改`themes\butterfly\source\css\_page\common.styl`文件 ```styl // 隱藏aside &.hide-aside max-width: 1400px // 按喜好修改 +minWidth2000() max-width: 1400px // 按喜好修改 & > div width: 100% !important // 不推荐动，但也可以按喜好修改 ``` 全部结束！！！

评论