本文介绍了如何对安知鱼主题的关于本人界面中的生涯模块进行修改，以添加恋爱记、恋爱时间和恋爱时长功能。作者通过修改pug文件、添加script代码、修改styl文件和about.yml文件，实现了这一功能。具体操作包括修改about.pug文件中的相关代码，添加恋爱记的相关元素；在about.pug文件的script部分添加JavaScript代码，用于计算恋爱时长和显示恋爱纪念日；修改about.styl文件，调整样式以适应恋爱记模块；最后，在about.yml文件中添加恋爱记的相关信息。该方法适用于本界面的所有模块，但仅适用于安知鱼主题，其他主题需谨慎采用。
更新日志
完成了模块的基本样式，恋爱时间可以自动计时。
这篇文章只适用于安知鱼主题。（学习方法是没有问题的） 。
前言
在配置关于本人界面的时候，我发现生涯这一个模块我并用不上，所以就对其进行了一些些的改动来实现了我想要的可以显示恋爱时间的功能。
恋爱记
教程
修改pug文件
首先呢我们需要修改about.pug文件，修改\layout\page\about.pug，大概在76行，代码如下:
diff
- .author-content-item.careers
- .card-content
- .author-content-item-tips=careers.tips
- span.author-content-item-title=careers.title
- .careers-group
- if crrList
- each career in crrList
- .career-item
- .circle(style=`background:${career.color ? career.color : "#357ef5"}`)
- .name=career.desc
- else
- .careers-none
- if careers.img
- img.author-content-img.no-lightbox(alt=careers.tips, src=url_for(careers.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+ .author-content-item.loveNotes(style=`background: url(${loveNotes.img}) top / cover no-repeat;`)
+ .card-content
+ .author-content-item-tips=loveNotes.tips
+ span.author-content-item-title=loveNotes.title
+ .loveNotes-group
+ .name=loveNotes.name
+ #lovetime
+ #loveAnniversary
下面给出一个可以直接复制的代码，复制的时候请严格按照pug格式
pug
.author-content-item.loveNotes(style=`background: url(${loveNotes.img} ) top / cover no-repeat;`)
.card-content
.author-content-item-tips=loveNotes.tips
span.author-content-item-title=loveNotes.title
.loveNotes-group
.name=loveNotes.name
在最上方中修改添加
diff
each item in aboutData
- - let careers = item.careers
- - let crrList = careers.list
- - let crrItem = careers.item
+ - let loveNotes = item.loveNotes
+ - let lovetime = loveNotes.time
添加script代码
修改\layout\page\about.pug，在{% p cyan, about.pug %}文件的script(defer)的上方添加如下代码，大约在291行的位置：
js
script.
lovetimeDate = new Date ("!{lovetime}" );
function loveTime (new Date ();
timeMsAll = (today.getTime () - lovetimeDate.getTime ());
timeSecondAll = (timeMsAll / 1000 );
daysDiffer = Math .floor (timeSecondAll / (24 *3600 ));
hourDiffer = Math .floor ((timeSecondAll-daysDiffer*24 *3600 )/3600 );
minDiffer = Math .floor ((timeSecondAll-daysDiffer*24 *3600 -hourDiffer*3600 )/60 );
seconds = Math .floor ((timeSecondAll-daysDiffer*24 *3600 -hourDiffer*3600 -minDiffer*60 ));
if (hourDiffer<10 ){
hourDiffer="0" +hourDiffer
}
if (minDiffer<10 ){
minDiffer="0" +minDiffer
}
if (seconds<10 ){
seconds="0" +seconds
}
document .getElementById ("lovetime" ).innerHTML = "<div>" + '<font id="lovetimezh">已经 </font>' +'<font id="lovetimeen">' +daysDiffer+'</font>' +'<font id="lovetimezh"> 天 </font>' +'<font id="lovetimeen">' +hourDiffer+'</font>' +'<font id="lovetimezh"> 时 </font>' +'<font id="lovetimeen">' +minDiffer+'</font>' +'<font id="lovetimezh"> 分 </font>' +'<font id="lovetimeen">' +seconds+'</font>' +'<font id="lovetimezh"> 秒 </font>' + "</div>" ;
setTimeout (loveTime,1000 );
}
function loveAnniversary (getFullYear ();
month = lovetimeDate.getMonth ()+1 ;
day = lovetimeDate.getDate ();
document .getElementById ("loveAnniversary" ).innerHTML = "<div>" +year+"年" +month+"月" +day+"日" + "</div>" ;
}
loveTime ()
loveAnniversary ()
修改styl文件
然后呢我们需要修改about.styl文件，修改\source\css\_page\about.styl，将如下的代码全部删除，大约是在951行到1008行:
css
.author-content-item .careers {
min-height : 400px ;
background-size : contain;
background-repeat : no-repeat;
background-position -x : right;
background-position -y : bottom;
}
.author-content-item .careers .careers-group {
display : flex;
flex-direction : column;
height : 100% ;
margin-top : 12px ;
margin-bottom : 12px ;
}
.author-content-item .careers .career-item {
display : flex;
justify-content : flex-start;
align-items : center;
}
.author-content-item .careers .career-item .circle {
width : 16px ;
height : 16px ;
margin-top : 3px ;
margin-right : 8px ;
border-radius : 50% ;
}
.author-content-item .careers .career-item .text {
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 ;
z-index : -1 ;
}
添加如下代码：
css
.author-content-item .loveNotes {
min-height : 400px ;
background-size : contain;
background-repeat : no-repeat;
background-position -x : right;
background-position -y : bottom;
}
.author-content-item .loveNotes .author-content-item-tips {
color : var (--anzhiyu-white)
}
.author-content-item .loveNotes .author-content-item-title {
color : var (--anzhiyu-white)
}
.author-content-item .loveNotes .loveNotes-group {
color : var (--anzhiyu-white)
display: flex;
flex-direction : column;
height : 100% ;
justify-content : center;
align-items : center;
}
.author-content-item .loveNotes .loveNotes-group .name {
font-size : 30px ;
font-weight : 500 ;
}
#lovetimezh {
font-size : 35px ;
font-weight : 600 ;
}
#lovetimeen {
font-size : 50px ;
font-weight : 700 ;
}
#loveAnniversary {
font-size : 30px ;
font-weight : 500 ;
}
@media (max-width : 960px ){
.author-content-item .loveNotes .loveNotes-group .name {
font-size : 20px ;
font-weight : 400 ;
}
#lovetimezh {
font-size : 20px ;
font-weight : 400 ;
}
#lovetimeen {
font-size : 28px ;
font-weight : 500 ;
}
#loveAnniversary {
font-size : 20px ;
font-weight : 400 ;
}
}
修改about.yml文件
然后我们修改about.yml文件，打开\_date\about.yml，将如下代码进行替换,大约在30行到40行:
yml
- careers:
- tips: 生涯
- title: 无限进步
- list:
- - desc: EDU,软件工程专业
- color: "#357ef5"
- - desc: EDU,软件工程专业
- color: "#357ef5"
- - desc: EDU,软件工程专业
- color: "#357ef5"
- img: https://bu.dusays.com/2023/04/21/644287166329b.png
+ loveNotes:
+ tips: 恋爱记
+ time: 2021 /12/21 00 :00:00 //暂时未实现
+ title: 纪念点点滴滴
+ name: 凌&爱凌
+ img: https://bu.dusays.com/2023/09/29/651685d586a58.png
如下是可以复制的代码:
yml
loveNotes:
tips: 恋爱记
time: 2021 /12/21 00 :00:00
title: 纪念点点滴滴
name: 凌&爱凌
img: https://bu.dusays.com/2023/09/29/651685d586a58.png
