进行主题修改前必看
博客魔改有风险，请务必备份 你的原代码
因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器 进行修改。
本文涉及修改内容会以diff代码块 进行标识,复制时请不要忘记删除 前面的+,-符号
本帖基于Anzhiyu主题进行修改方案编写，因此请读者优先掌握Anzhiyu主题官方文档 的内容后再来进行魔改。
前言 在逛Mo的记事簿 大佬的博客时,本着偷窥人家隐私为目的,去看看大佬的设计时发现之前用着Solitude主题时候一个设计比较美丽的进度条–十年之约
随后我也想着要不把这个进度条搬过来吧,就安置在原Solitude主题的模块位置–关于,说干就干,之前琢磨这么久的主题不就是为了偷代码学习嘛
修改 以下内容涉及的文件 about.pug(重点备份) tenyear.pug(新建) tenyear.styl(新建) 首先需要决定十年之约 模块的运作方式,路径anzhiyu>layout>includes>widget>tenyear.pug,新建tenyear.pug文件 tenyear.pug的内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 - var tenyear = site.data.about.tenyear if tenyear .author-content#tenyear .create-site-post.author-content-item.single .author-content-item-tips= tenyear.tips .author-content-item-title= tenyear.title p= tenyear.text .tenyear-timeline .progress .past-time .percentage-label .time-labels .start-time#tenyear-start-time= new Date(tenyear.start).toLocaleDateString() .end-time#tenyear-end-time= new Date(tenyear.end).toLocaleDateString() script. function updateTenYearProgress() { let progressElement = document.querySelector(".progress"); let pastTimeElement = document.querySelector(".past-time"); let percentageLabelElement = document.querySelector(".percentage-label"); let startTimeElement = document.getElementById("tenyear-start-time"); let endTimeElement = document.getElementById("tenyear-end-time"); let startTime = new Date(startTimeElement.textContent).getTime(); let endTime = new Date(endTimeElement.textContent).getTime(); const currentTime = new Date().getTime(); const progress = ((currentTime - startTime) / (endTime - startTime) * 100); const progressPercentage = Math.min(progress, 100) + "%"; pastTimeElement.style.setProperty("--past-time-percentage", progress + "%"); progressElement.style.setProperty("--progress-percentage", progressPercentage); if (progress > 5) { percentageLabelElement.textContent = `${progress.toFixed(0)}%`; percentageLabelElement.style.left = `calc(${progress}% - 35px)`; } percentageLabelElement.style.visibility = "visible"; } if (document.getElementById("tenyear")) { updateTenYearProgress(); }
决定完模块运作方式还需要确定它的样子.路径anzhiyu>source>css>_page>tenyear.styl下新建tenyear.styl tenyear.styl内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 .percentage-label position absolute left 0 font-size 14px color var (--anzhiyu-card-bg) font-weight bold top 10px white-space nowrap transition left 0.5s linear visibility hidden .time-labels display flex justify-content space-between width 100% > div font-size 14px color var (--anzhiyu-fontcolor) .tenyear-timeline width 100% background-color var (--anzhiyu-background) position relative overflow hidden margin-bottom 20px border-radius 0.5rem height 2.5rem .progress width 0 height 100% background-color #f25d8e position absolute animation-delay -0.1s border-radius 0.5rem animation renamedProgressAnimation 2s linear forwards .past-time animation renamedPastTimeAnimation 3s linear forwards width 2px height 20px position absolute transform-origin left @keyframes renamedProgressAnimation 0% width 0 100% width var (--progress-percentage, 0 ) @keyframes renamedPastTimeAnimation 0% transform scaleX (0 ) 100% transform scaleX (var (--past-time-percentage, 0 ))
其中.process.background-color是进度条前半的颜色,即达到进度.我在此处修改为了#f25d8e粉红色,与打赏按钮的颜色一致.
.tenyear-timeline.background-color为进度条后半的颜色,即剩余进度.我在此处修改为了var(--anzhiyu-background)安知鱼的背景颜色,主要是为了适配暗色模式,如果单纯的设计为白色,会导致暗色模式下进度条后半为白色,瞎眼剩余可修改样式可以自行琢磨,基本只用修改这两处,
颜色适配方面,因为我用不到其他的颜色修改与字体大小,所以我将颜色原var(--efu--color--)修改为了var(--anzhiyu--color),主要是efu的颜色未定义,需要做出修改,加之我的技术力也不允许我进行修改.
路径anzhiyu>layout>includes>page>about.pug需要做出三处修改.内容修改如下:
顶部判定条件加入,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 if site.data.about - let aboutData = site.data.about each item in aboutData - let subtitle = item.subtitle || config.subtitle - let avatarImg = item.avatarImg || theme.avatar.img - let aboutName = item.name || theme.author - let aboutDescription = item.description || config.description - let helloAbout = item.helloAbout - let skillsTips = item.skillsTips - let careers = item.careers - let crrList = careers.list - let crrItem = careers.item - let avatarSkills = item.avatarSkills + - let tenyear = item.tenyear
添加tenyear模块,这里我选择放置在打赏模块与音乐喜好模块之间,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 .tips=`跟 ${aboutName} 一起欣赏更多音乐` .banner-button-group a.banner-button(onclick=`pjax.loadUrl("${music_link}")`) i.anzhiyufont.anzhiyu-icon-arrow-circle-right | span.banner-button-text 更多推荐 + // ✅ 添加 Tenyear 模块 + if tenyear + .author-content#tenyear + .create-site-post.author-content-item.single + .author-content-item-tips= tenyear.tips + .author-content-item-title= tenyear.title + p= tenyear.text + .tenyear-timeline + .progress + .past-time + .percentage-label + .time-labels + .start-time#tenyear-start-time= new Date(tenyear.start).toLocaleDateString() + .end-time#tenyear-end-time= new Date(tenyear.end).toLocaleDateString() if page.content .author-content .create-site-post.author-content-item.single != page.content
进度函数,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 + // ✅ 十年之约进度函数 + function updateTenYearProgress() { + let progressElement = document.querySelector(".progress"); + let pastTimeElement = document.querySelector(".past-time"); + let percentageLabelElement = document.querySelector(".percentage-label"); + let startTimeElement = document.getElementById("tenyear-start-time"); + let endTimeElement = document.getElementById("tenyear-end-time"); + if (!startTimeElement || !endTimeElement) return; + let startTime = new Date(startTimeElement.textContent).getTime(); + let endTime = new Date(endTimeElement.textContent).getTime(); + const currentTime = new Date().getTime(); + const progress = ((currentTime - startTime) / (endTime - startTime) * 100); + const progressPercentage = Math.min(progress, 100) + "%"; + pastTimeElement.style.setProperty("--past-time-percentage", progress + "%"); + progressElement.style.setProperty("--progress-percentage", progressPercentage); + if (progress > 5) { + percentageLabelElement.textContent = `${progress.toFixed(0)}%`; + percentageLabelElement.style.left = `calc(${progress}% - 35px)`; + } + percentageLabelElement.style.visibility = "visible"; + } + if (document.getElementById("tenyear")) { + updateTenYearProgress(); + }
4.模块开关,路径source>_data>about.yml添加,
1 2 3 4 5 6 tenyear: enable: true tips: 十年之约 title: 寻找更合适的自己。 start: 2022 /05/28 end: 2032 /05/28
我选择放置在打赏模块之上.
最后三连即可见.
