hexo-安知鱼(anzhiyu)主题1.6.12修改记录

修改aside_content

作者卡片

自定义Css

myself.css

/*作者卡片颜色*/
/*下面我设置了五个颜色
rgb颜色 后面的百分比是阶段
rgba(34,193,195,1) 0%,
rgba(1,194,255,1) 23%,
rgba(18,216,250,1) 48%,
rgba(142,227,177,1) 78%,
rgba(255,214,127,1) 100%
*/
#aside-content >.card-widget.card-info::before {
background: linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(1,194,255,1) 23%, rgba(18,216,250,1) 48%, rgba(142,227,177,1) 78%, rgba(255,214,127,1) 100%); background-size: 400%; /* 增加大小以创建动画的空间,这里将宽度减半 */
animation: gradient 12s ease-in-out infinite;
}

/* 定义名为 gradient 的 @keyframes 规则 */
@keyframes gradient {
0% {
background-position: left center; /* 使用 to 关键字来简化起始位置 */
}
100% {
background-position: right center; /* 使用 to 关键字来简化结束位置 */
}
}

categories样式

自定义css代码块

/*取消分类背景方块及阴影*/
#aside-content .card-widget{
box-shadow: none;
border: none;
}
/*隐藏分类字样及图标*/
#aside-content .item-headline{
display: none;
}
/*添加样式*/
#aside-content .card-archives ul.card-archive-list>.card-archive-list-item, #aside-content .card-categories ul.card-category-list>.card-category-list-item{
width: calc(50% - .25rem);
}
.card-widget card-categories{
padding-left: 20px;
}
#aside-content :only-child > .card-widget{
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#aside-content .card-tag-cloud a{
display: inline-block;
font-size: 95% !important;
padding: 0 .4em;
margin: .1em .2em 0 0;
border-radius: 8px;
background: var(--suyi-rightside-bg);
transition: all .3s ease-in-out;
}
/*添加'篇'字及样式*/
#aside-content .card-categories ul.card-category-list>.card-category-list-item a span.card-category-list-count::after{
opacity: .8;
font-size: 1rem;
margin-left: .5rem;
}
#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a span.card-archive-list-count, #aside-content .card-categories ul.card-category-list>.card-category-list-item a span.card-category-list-count{
position: relative;
line-height: 2rem;
font-size: 1.5rem;
font-weight: bold;
text-align: right;
}
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child{
margin-left: 54px;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a{
background: var(--suyi-rightside-bg);
}
.card-archive-list-count-group{
margin-left: 58px;
}
/*自定义白天全局颜色*/
[data-theme="light"]{
--suyi-rightside-bg: #f2f6fc;

}

card_announcement添加自定义模块

获取apikey

进入腾讯位置服务应用管理界面,点击创建应用,应用名称和类型随便填。在新创建的应用中点击添加key,产品选择WebServiceAPI,域名白名单填自己的域名或不填。把得到的key记下。如果开启白名单记得把localhost也加上。

引入博客、编写定制化js

主题配置文件中加入代码块

inject:
head:
- <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script>

自定义js代码块

myself.js

API接入和距离计算(记得替换key的内容):

//get请求
$.ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/location/v1/ip',
data: {
key: '你获取的key',
output: 'jsonp',
},
dataType: 'jsonp',
success: function (res) {
ipLoacation = res;
showWelcome();
}
})

//根据经纬度计算两点距离(点1经度,点1纬度,点2经度,点2纬度)
function getDistance(e1, n1, e2, n2) {
const R = 6371
const { sin, cos, asin, PI, hypot } = Math

let getPoint = (e, n) => {
e *= PI / 180
n *= PI / 180
return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
}

let a = getPoint(e1, n1)
let b = getPoint(e2, n2)
let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
let r = asin(c / 2) * 2 * R
return Math.round(r);
}

定制化JS:

//根据自己的需求定制
function showWelcome() {
if (!document.getElementById("welcome-info")) return

let dist = getDistance(110.84721, 35.97053, ipLoacation.result.location.lng, ipLoacation.result.location.lat); //这里记录你自己的经纬度

let pos = ipLoacation.result.ad_info.nation;
let posdesc;
let ip;

//根据国家、省份、城市信息自定义欢迎语
//海外地区不支持省份及城市信息
switch (ipLoacation.result.ad_info.nation) {
case "日本":
posdesc = "よろしく,一起去看樱花吗?";
break;
case "美国":
posdesc = "Make America Great Again!";
break;
case "英国":
posdesc = "想同你一起夜乘伦敦眼!";
break;
case "俄罗斯":
posdesc = "干了这瓶伏特加!";
break;
case "法国":
posdesc = "C'est La Vie";
break;
case "德国":
posdesc = "Die Zeit verging im Fluge.";
break;
case "澳大利亚":
posdesc = "一起去大堡礁吧!";
break;
case "加拿大":
posdesc = "拾起一片枫叶赠予你";
break;
case "中国":
pos = ipLoacation.result.ad_info.province + " " + ipLoacation.result.ad_info.city;
ip = ipLoacation.result.ip;
switch (ipLoacation.result.ad_info.province) {
case "北京市":
pos = "北京市";
posdesc = "北——京——欢迎你~~~";
break;
case "天津市":
pos = "天津市";
posdesc = "讲段相声吧。";
break;
case "重庆市":
pos = "重庆市";
posdesc = "高德地图:已到达重庆,下面交给百度地图导航。"
break;
case "河北省":
posdesc = "山势巍巍成壁垒,天下雄关。铁马金戈由此向,无限江山。";
break;
case "山西省":
posdesc = "展开坐具长三尺,已占山河五百余。";
break;
case "内蒙古自治区":
posdesc = "天苍苍,野茫茫,风吹草低见牛羊。";
break;
case "辽宁省":
posdesc = "我想吃烤鸡架!";
break;
case "吉林省":
posdesc = "状元阁就是东北烧烤之王。";
break;
case "黑龙江省":
posdesc = "很喜欢哈尔滨大剧院。";
break;
case "上海市":
pos = "上海市";
posdesc = "众所周知,中国只有两个城市。";
break;
case "江苏省":
switch (ipLoacation.result.ad_info.city) {
case "南京市":
posdesc = "欢迎来自安徽省南京市的小伙伴。";
break;
case "苏州市":
posdesc = "上有天堂,下有苏杭。";
break;
case "泰州市":
posdesc = "这里也是我的故乡。";
break;
default:
posdesc = "散装是必须要散装的。";
break;
}
break;
case "浙江省":
posdesc = "东风渐绿西湖柳,雁已还人未南归。";
break;
case "安徽省":
posdesc = "蚌埠住了,芜湖起飞。";
break;
case "福建省":
posdesc = "井邑白云间,岩城远带山。";
break;
case "江西省":
posdesc = "落霞与孤鹜齐飞,秋水共长天一色。";
break;
case "山东省":
posdesc = "遥望齐州九点烟,一泓海水杯中泻。";
break;
case "湖北省":
posdesc = "来碗热干面!";
break;
case "湖南省":
posdesc = "74751,长沙斯塔克。";
break;
case "广东省":
posdesc = "老板来两斤福建人。";
break;
case "广西壮族自治区":
posdesc = "桂林山水甲天下。";
break;
case "海南省":
posdesc = "朝观日出逐白浪,夕看云起收霞光。";
break;
case "四川省":
posdesc = "康康川妹子。";
break;
case "贵州省":
posdesc = "茅台,学生,再塞200。";
break;
case "云南省":
posdesc = "玉龙飞舞云缠绕,万仞冰川直耸天。";
break;
case "西藏自治区":
posdesc = "躺在茫茫草原上,仰望蓝天。";
break;
case "陕西省":
posdesc = "来份臊子面加馍。";
break;
case "甘肃省":
posdesc = "羌笛何须怨杨柳,春风不度玉门关。";
break;
case "青海省":
posdesc = "牛肉干和老酸奶都好好吃。";
break;
case "宁夏回族自治区":
posdesc = "大漠孤烟直,长河落日圆。";
break;
case "新疆维吾尔自治区":
posdesc = "驼铃古道丝绸路,胡马犹闻唐汉风。";
break;
case "台湾省":
posdesc = "我在这头,大陆在那头。";
break;
case "香港特别行政区":
pos = "香港特别行政区";
posdesc = "永定贼有残留地鬼嚎,迎击光非岁玉。";
break;
case "澳门特别行政区":
pos = "澳门特别行政区";
posdesc = "性感荷官,在线发牌。";
break;
default:
posdesc = "社会主义大法好。";
break;
}
break;
default:
posdesc = "带我去你的国家逛逛吧。";
break;
}

//判断时间
let timeChange;
let date = new Date();
if (date.getHours()>= 5 && date.getHours() < 11) timeChange = "<span>上午好</span>,一日之计在于晨,早起的虫儿被鸟吃丫~";
else if (date.getHours()>= 1 && date.getHours() < 13) timeChange = "<span>中午好</span>,该摸鱼吃午饭了";
else if (date.getHours() >= 13 && date.getHours() < 15) timeChange = "<span>下午好</span>,懒懒地睡个午觉吧!";
else if (date.getHours() >= 15 && date.getHours() < 16) timeChange = "<span>三点几啦</span>,饮茶先啦!";
else if (date.getHours() >= 16 && date.getHours() < 19) timeChange = "<span>夕阳无限好!</span>";
else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>晚上好</span>,夜生活嗨起来!";
else timeChange = "夜深了,早点休息,少熬夜";

//自定义文本需要放的位置
document.getElementById("welcome-info").innerHTML = `欢迎来自<span>${pos}</span>的小伙伴,${timeChange}<br>你距离博主约有<span>${dist}</span>公里,${posdesc}<br>您IP地址为:<b><span>${ip}</span></b>`;

}
// 如果使用了pjax再加上下面这行代码
document.addEventListener('pjax:complete', showWelcome);


pug样式修改

/themes/anzhiyu/latout/includes/widget/card_announcement.pugcard_announcement.pug

if theme.aside.card_announcement.enable
.card-widget.card-announcement
.item-headline
- i.anzhiyufont.anzhiyu-icon-bullhorn.anzhiyu-shake
span= _p('aside.card_announcement')
.announcement_content!= theme.aside.card_announcement.content
+ #welcome-info

自定义css代码块

myself.css

/*公告栏定制*/
:root {
--ichika-color: #49A6E9;
}

/* 公告&欢迎页 */
.card-announcement {
line-height:30px;
font-size:16px;
}

.card-announcement .item-headline span{
margin-left: 9px;
}

.card-announcement span{
font-weight:bold;
font-size:20px!important;
color:var(--ichika-color);
}

‘关于’界面修改

主题配置文件:/layout/includes/page/about.pugabout.pug

about.yml

精简

代码存储

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
#about-page
.author-box
if avatarSkills
.author-tag-left
each item in avatarSkills.left
span.author-tag=item
.author-img
img.no-lightbox(src=url_for(avatarImg) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
if avatarSkills
.author-tag-right
each item in avatarSkills.right
span.author-tag=item
p.p.center.logo.large 关于我
p.p.center.small=subtitle
.author-content
.author-content-item.myInfoAndSayHello
.title1 你好,很高兴认识你👋
.title2
| 我叫
span.inline-word=aboutName
.title1=aboutDescription
.aboutsiteTips.author-content-item
- let { tips, title1, title2, word } = item.aboutsiteTips
.author-content-item-tips= tips
h2
= title1
br
= title2
.mask
each wordItem, index in word
if index < word.length - 2
span(class=(index === 0 ? 'first-tips' : ''))= wordItem
span(data-up)= word[word.length - 2]
|
span(data-show)= word[word.length - 1]

.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=helloAbout

.author-content
.author-content-item.skills
.card-content
.author-content-item-tips=skillsTips.tips
span.author-content-item-title=skillsTips.title
.skills-style-group
include ../anzhiyu/tags-group-all.pug
if site.data.creativity
.skills-list
each i in site.data.creativity
each item, index in i.creativity_list
.skill-info
.skill-icon(style=`background: ${item.color}`)
img.no-lightbox(title=item.name, src=item.icon, alt=item.name)
.skill-name
span=item.name
.etc ...
.author-content-item.careers
.card-content
.author-content-item-tips=careers.tips
span.author-content-item-title=careers.title
.careers-group
if crrList
each career in crrList
.career-item
.circle(style=`background:${career.color ? career.color : "#357ef5"}`)
.name=career.desc
else
.careers-none
if careers.img
img.author-content-img.no-lightbox(alt=careers.tips, src=url_for(careers.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)

.author-content
if theme.LA.enable
- let cover = item.statistic.cover
.about-statistic.author-content-item(style=`background: url(${cover}) top / cover no-repeat;`)
.card-content
.author-content-item-tips 数据
span.author-content-item-title 访问统计
#statistic
.post-tips
| 统计信息来自
a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计
.banner-button-group
- let link = item.statistic.link
- let text = item.statistic.text
a.banner-button(onclick=`pjax.loadUrl("${link}")`)
i.anzhiyufont.anzhiyu-icon-arrow-circle-right
|
span.banner-button-text=text
.author-content-item-group.column.mapAndInfo
- let mapBackground = item.map.background
- let mapBackgroundDark = item.map.backgroundDark
style.
.author-content-item.map {
background-image: url(#{mapBackground});
}
[data-theme='dark'] .author-content-item.map {
background-image: url(#{mapBackgroundDark});
}
.author-content-item.map.single
- let mapTitle = item.map.title
- let mapStrengthenTitle = item.map.StrengthenTitle
span.map-title=mapTitle
b=mapStrengthenTitle
.author-content-item.selfInfo.single
- let { selfInfoTips1, selfInfoContentYear, selfInfoTips2, selfInfoContent2, selfInfoTips3, selfInfoContent3 } = item.selfInfo
div
span.selfInfo-title=selfInfoTips1
|
span.selfInfo-content#selfInfo-content-year(style='color:#43a6c6')=selfInfoContentYear
div
span.selfInfo-title=selfInfoTips2
|
span.selfInfo-content(style='color:#c69043')=selfInfoContent2
div
span.selfInfo-title=selfInfoTips3
|
span.selfInfo-content(style='color:#b04fe6')=selfInfoContent3

.author-content
.author-content-item.personalities
- let {author_name, personality_type, photo_url, personality_img, name_url, personality_type_color} = item.personalities
.author-content-item-tips 性格
span.author-content-item-title= author_name
.title2(style=`color:${personality_type_color ? personality_type_color : "#ac899c"}`)= personality_type
.post-tips
| 在
a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16personalities
| 了解更多关于
a(target='_blank', rel='noopener external nofollow', href= name_url)= author_name
.image
img.no-lightbox(src=url_for(personality_img), alt='人格')
.author-content-item.myphoto
img.author-content-img.no-lightbox(alt='自拍', src=url_for(photo_url))

.author-content
.author-content-item.maxim
- let {maxim_tips, maxim_top, maxim_bottom} = item.maxim
.author-content-item-tips=maxim_tips
span.maxim-title
span(style='opacity:.6;margin-bottom:8px')=maxim_top
|
span=maxim_bottom
.author-content-item.buff
.card-content
- let {buff_tips, buff_top, buff_bottom} = item.buff
.author-content-item-tips=buff_tips
span.buff-title
span(style='opacity:.6;margin-bottom:8px')=buff_top
|
span=buff_bottom
.card-background-icon
i.anzhiyufont.anzhiyu-icon-dice-d20

.author-content
- let {game_tips, game_title, game_uid, game_bg} = item.game
.author-content-item.game-yuanshen(style=`background: url(${game_bg}) top / cover no-repeat;`)
.card-content
.author-content-item-tips=game_tips
span.author-content-item-title=game_title
.content-bottom
.icon-group
.loading-bar(role='presentation', aria-hidden='true' style=`${game_title != "原神" ? "display: none": ""}`)
.tips.game-yuanshen-uid=game_uid
.author-content-item.comic-content
.card-content
- let {comic_tips, comic_title, comic_list} = item.comic
.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
- let {music_tips, music_title, music_link, music_bg} = item.music
- let {like_tips, like_title, like_bottom, like_bg} = item.like
.author-content-item.like-technology(style=`background: url(${like_bg}) top / cover no-repeat;`)
.card-content
.author-content-item-tips=like_tips
span.author-content-item-title=like_title
.content-bottom
.tips=like_bottom
.author-content-item.like-music(style=`background: url(${music_bg}) top / cover no-repeat;`)
.card-content
.author-content-item-tips=music_tips
span.author-content-item-title=music_title
.content-bottom
.tips=`跟 ${aboutName} 一起欣赏更多音乐`
.banner-button-group
a.banner-button(onclick=`pjax.loadUrl("${music_link}")`)
i.anzhiyufont.anzhiyu-icon-arrow-circle-right
|
span.banner-button-text 更多推荐

if page.content
.author-content
.create-site-post.author-content-item.single
!= page.content

- let rawData = item.reward_list
if rawData
- let sortedByDate = rawData.slice().sort((a, b) => new Date(b.datatime) - new Date(a.datatime));
.author-content
.author-content-item.single.reward#about-reward
.author-content-item-tips 致谢
span.author-content-item-title 赞赏名单
.author-content-item-description 感谢因为有你们,让我更加有创作的动力。
.reward-list-all
- let reward_list_amount = item.reward_list.sort((a,b)=>b.amount - a.amount)
each item, index in reward_list_amount
.reward-list-item
.reward-list-item-name=item.name
.reward-list-bottom-group
if item.amount >= 50
.reward-list-item-money(style='background:var(--anzhiyu-yellow)')=`¥${item.amount}`
else
.reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
.datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
.reward-list-updateDate
| 最新更新时间:
time.datatime.reward-list-updateDate-time(datatime=sortedByDate[0].datatime)=new Date(sortedByDate[0].datatime).toISOString().slice(0, -14)
.about-reward
#con
#TA-con(onclick="anzhiyu.rewardShowConsole()")
#text-con
#linght
#TA 为TA充电
#tube-con
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
rect(y='186', width='236', height='24', fill='#e5e9ef')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
rect(y='186', width='236', height='24', fill='#f25d8e')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#orange-mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
rect(y='186', width='236', height='24', fill='#ffd52b')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
p#people
| 共
b=item.reward_list.length
| 人


script(src=url_for(theme.asset.countup_js))
- const ck = theme.LA.ck
script(defer).
function initAboutPage() {
fetch("https://v6-widget.51.la/v6/#{ck}/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) 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: "",
})
);
});
}

let statisticElement = document.querySelector(".about-statistic.author-content-item");
function statisticUP() {
if (!statisticElement) return;

const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
for (let i = 0; i < num.length; i++) {
if (i == 0) continue;
queueMicrotask(() => {
statistic[i - 1].start();
});
}
observer.disconnect(); // 停止观察元素,因为不再需要触发此回调
}
});
};

const options = {
root: null,
rootMargin: "0px",
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(statisticElement);
}

const selfInfoContentYear = new CountUp("selfInfo-content-year", 0, #{selfInfoContentYear}, 0, 2, {
useEasing: true,
useGrouping: false,
separator: ",",
decimal: ".",
prefix: "",
suffix: "",
});

let selfInfoContentYearElement = document.querySelector(".author-content-item.selfInfo.single");
function selfInfoContentYearUp() {
if (!selfInfoContentYearElement) return;

const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
selfInfoContentYear.start();
observer.disconnect(); // 停止观察元素,因为不再需要触发此回调
}
});
};

const options = {
root: null,
rootMargin: "0px",
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(selfInfoContentYearElement);
}

selfInfoContentYearUp();
statisticUP()
});

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 () {
pursuitInterval && 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,
});
});
}
if (typeof gsap === "object") {
initAboutPage()
} else {
getScript("!{url_for(theme.asset.gsap_js)}").then(initAboutPage);
}

添加自定义css

myself.css

/*’关于‘页面修改*/
/*第一栏左侧*/
#about-page .myInfoAndSayHello{
width: 674.4px;
}
/*第一栏右侧*/
.author-content-item.personalities{
width: 660.88px;
padding-left: 32px;
left: 0px;
}
/*第一栏右侧优化*/
.post-tips{
display: none;
}
.author-content-item.personalities .title2{
font-size: 15px;
line-height: 2.5;
}
/*.about-statistic.author-content-item*/
/*关注偏好-like*/
.author-content-item.like-technology{
width: 810px;
}

页脚修改

已经写完了哪本书?(未启用)

修改主题配置目录\layout\includes\footer.pug文件,在适合的位置插入如下代码:

  if theme.footer.runtime.enable
#workboard
img(src=`${work_img}`, alt=`${work_description}`, title=`${work_description}`, class="workSituationImg boardsign")
#runtimeTextTip
+ .wordcount(style="font-size: 15px;")
+ - let allword = totalcount(site)
+ span= '已经写了 ' + allword + ' 字了'
+ </br>
+ if isNaN(allword)
+ - allword= Number(allword.replace('k', ''))
+ if allword< 50
+ span= "还在努力更新中.. 加油!加油啦!"
+ else if allword< 70
+ span= "好像写完一本 埃克苏佩里 的 《小王子》 了丫!" 5.5
+ else if allword< 90
+ span= "好像写完一本 鲁迅 的 《呐喊》 了丫!" 7.9
+ else if allword< 100
+ span= "好像写完一本 林海音 的 《城南旧事》 了丫!" 10.5
+ else if allword< 110
+ span= "好像写完一本 马克·吐温 的 《王子与乞丐》了丫! " 11.1
+ else if allword< 120
+ span= "好像写完一本 鲁迅 的 《彷徨》 了丫!" 7.7
+ else if allword< 130
+ span= "好像写完一本 余华 的 《活着》 了丫!" 8.9
+ else if allword< 140
+ span= "好像写完一本 曹禺 的 《雷雨》 了丫!"
+ else if allword< 150
+ span= "好像写完一本 史铁生 的 《宿命的写作》 了丫!"
+ else if allword< 160
+ span= "好像写完一本 伯内特 的 《秘密花园》 了丫!"
+ else if allword< 170
+ span= "好像写完一本 曹禺 的 《日出》 了丫!"
+ else if allword< 180
+ span= "好像写完一本 马克·吐温 的 《汤姆·索亚历险记》 了丫!"
+ else if allword< 190
+ span= "好像写完一本 沈从文 的 《边城》 了丫!"
+ else if allword< 200
+ span= "好像写完一本 亚米契斯 的 《爱的教育》 了丫!"
+ else if allword< 210
+ span= "好像写完一本 巴金 的 《寒夜》 了丫!"
+ else if allword< 220
+ span= "好像写完一本 东野圭吾 的 《解忧杂货店》 了丫!"
+ else if allword< 230
+ span= "好像写完一本 莫泊桑 的 《一生》 了丫!"
+ else if allword< 250
+ span= "好像写完一本 简·奥斯汀 的 《傲慢与偏见》 了丫!"
+ else if allword< 280
+ span= "好像写完一本 钱钟书 的 《围城》 了丫!"
+ else if allword< 300
+ span= "好像写完一本 张炜 的 《古船》 了丫!"
+ else if allword< 310
+ span= "好像写完一本 茅盾 的 《子夜》 了丫!"
+ else if allword< 320
+ span= "好像写完一本 阿来 的 《尘埃落定》 了丫!"
+ else if allword< 340
+ span= "好像写完一本 艾米莉·勃朗特 的 《呼啸山庄》 了丫!"
+ else if allword< 350
+ span= "好像写完一本 雨果 的 《巴黎圣母院》 了丫!"
+ else if allword< 360
+ span= "好像写完一本 东野圭吾 的 《白夜行》 了丫!"
+ else
+ span= "好像写完一本我国著名的 四大名著 了!!!"
+ else
+ span= "还在努力更新中.. 加油!加油啦!"
if theme.footer.bdageitem
p#ghbdages
each item in theme.footer.bdageitem
a.github-badge(target='_blank' href=item.link style='margin-inline:5px' data-title=item.message title=item.message)
img(src=item.shields alt=item.message)
if theme.footer.custom_text
.footer_custom_text!=`${theme.footer.custom_text}`

友链相关

朋友圈无服务器配置

twikoo评论设置

修改qq接口

教程

新建文件:\themes\anzhiyu\source\js\twikoo.all.min.js

  • 先在评论处昵称栏输入正确的qq号

  • f12

  • 控制台寻找这个错误

  • 点击twikoo.all.min.js,如图,复制其中内容到你本地的js文件中

  • 本地js文件搜索getQQNick: function(e) {,如下面代码
getQQNick: function(e) {
var t = this
+ , n = "https://api.qjqq.cn/api/qqinfo?qq=".concat(e)
- , n = "https://tenapi.cn/qqname?qq=".concat(e)

, r = new XMLHttpRequest;
r.onreadystatechange = function() {
if (4 === r.readyState && 200 === r.status) {
var e = JSON.parse(r.responseText);
t.metaData.nick = e.name,
t.updateMeta()
}
}
,
r.open("GET", n),
r.send()
},
  • 主题配置文件_config.yml,引用js文件
option:
# main_css:
# main:
# utils:
# translate:
# local_search:
# algolia_js:
# algolia_search_v4:
# instantsearch_v4:
# pjax:
# blueimp_md5:
# valine:
twikoo: /js/twikoo.all.min.js #也可以放到云端去

杂七杂八

css

/*杂七杂八,阿巴阿巴*/
/*nav中的网站名字*/
#nav #site-name{
font-family: unset;

}
hr{
border: 2px dashed #09c7fb;
}
hr:before{
color: #09c7fb;
}
/*相册背景*/
.author-content.author-content-item{
height: 360px;
background-image: url(https://pic.imgdb.cn/item/649fef4d1ddac507ccc14c06.jpg);
background-size: 120%;
}
/*控制栏增添音乐开关*/
div#consoleMusic{
display: flex;
}

/*友链卡片flink_style === 'telescopic'样式丢失*/
#article-container .telescopic-site-card-group .site-card:hover .site-card-tag{
left: -200px;
}
#article-container .anzhiyu-flink-list .flink-list-item:hover .site-card-tag{
left: -200px;
}

.img-alt.is-center {
display: none;
}

/*首页技能卡片主题色*/
#random-hover:hover{
background-color: #09c7fb;
}

使用哔站做图床

主题配置文件

inject:
head:
#防盗链
- <meta name="referrer" content="no-referrer">
bottom:

图片上传到哔站的浏览器插件