[Forward Content] Butterfly主题美化

Experiences and Insight 603 views · 12 replies ·

青稚

deepin

2024-09-17 18:38

Author

前言

此教程不仅仅适用于Butterfly,还适用于Anzhiyu,Solitude等类Butterfly主题，话不多说开始教程.

此教程转载:https://blog.linux-qitong.top/posts/305bae84/

FPS显示

在根目录source新建文件/custom/fps/fps.css

/* 帧率检测 */

#fps {

position: fixed;

/* 指定位置 */

right: 10px;

bottom: 10px;

z-index: 1919810

}

br

[data-theme=light] #fps {

background-color: rgba(255,255,255,.85);

backdrop-filter: blur(5px) saturate(150%);

padding: 0 6px;

border-radius: 20px

}

br

[data-theme=dark] #fps {

background-color: rgba(0,0,0,.72);

backdrop-filter: blur(5px) saturate(150%);

padding: 0 6px;

border-radius: 20px

}

注意：FPS外观可通过修改CSS定制

在根目录 source下新建文件/custom/fps/fps.js

document.addEventListener('pjax:complete', fps);

document.addEventListener('DOMContentLoaded', fps);

function fps(){

// if(window.localStorage.getItem("fpson")=="1"){

//如果要使博客设置上面的设置项能生效，就把上面一行取消注释

var rAF = function () {

return (

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

function (callback) {

window.setTimeout(callback, 1000 / 60);

}

);

}();

var frame = 0;

var allFrameCount = 0;

var lastTime = Date.now();

var lastFameTime = Date.now();

var loop = function () {

var now = Date.now();

var fs = (now - lastFameTime);

var fps = Math.round(1000 / fs);

lastFameTime = now;

// 不置 0，在动画的开头及结尾记录此值的差值算出 FPS

allFrameCount++;

frame++;

if (now > 1000 + lastTime) {

var fps = Math.round((frame * 1000) / (now - lastTime));

if(fps<=5){

var kd=卡成ppt🤢``

}

else if(fps<=15){

var kd=电竞级帧率😖``

}

else if(fps<=25){

var kd=有点难受😨``

}

else if(fps<35){

var kd=不太流畅🙄``

}

else if(fps<=45){

var kd=还不错哦😁``

}

else{

var kd=十分流畅🤣``

}

document.getElementById("fps").innerHTML=FPS:{fps} {kd};

frame = 0;

lastTime = now;

};

rAF(loop);

}

loop();

// }

// else{$("#fps").hide()}

//如果要使博客设置上面的设置项能生效，就把上面两行取消注释

}

在主题配置文件下inject配置项中head和bottom处进行引用

inject:

head:

# FPS显示

- # 帧率检测

-

bottom:

# FPS显示

- *src="/custom/fps/fps.js">

公祭日与节日弹框

新建文件根目录source新建文件/custom/dayalert/day.js

var d = new Date();

m = d.getMonth() + 1;

dd = d.getDate();

y = d.getFullYear();

br

// 公祭日

if (m == 9 && dd == 18) {

document.getElementsByTagName("html")[0].setAttribute("style", "filter: grayscale(60%);");

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("今天是九一八事变" + (y - 1931).toString() + "周年纪念日\n🪔勿忘国耻，振兴中华🪔");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 7 && dd == 7) {

document.getElementsByTagName("html")[0].setAttribute("style", "filter: grayscale(60%);");

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("今天是卢沟桥事变" + (y - 1937).toString() + "周年纪念日\n🪔勿忘国耻，振兴中华🪔");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 12 && dd == 13) {

document.getElementsByTagName("html")[0].setAttribute("style", "filter: grayscale(60%);");

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("今天是南京大屠杀" + (y - 1937).toString() + "周年纪念日\n🪔勿忘国耻，振兴中华🪔");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 8 && dd == 14) {

document.getElementsByTagName("html")[0].setAttribute("style", "filter: grayscale(60%);");

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("今天是世界慰安妇纪念日\n🪔勿忘国耻，振兴中华🪔");

sessionStorage.setItem("isPopupWindow", "1");

}

br

// 节假日

if (m == 10 && dd <= 3) {//国庆节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("祝祖国" + (y - 1949).toString() + "岁生日快乐！");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 8 && dd == 15) {//搞来玩的，小日子投降

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("小日子已经投降" + (y - 1945).toString() + "年了😃");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 1 && dd == 1) {//元旦节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire(y.toString() + "年元旦快乐！🎉");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 3 && dd == 8) {//妇女节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("各位女神们，妇女节快乐！👩");

sessionStorage.setItem("isPopupWindow", "1");

}

l = ["非常抱歉，因为不可控原因，博客将于明天停止运营！", "好消息，日本没了！", "美国垮了，原因竟然是川普！", "微软垮了！", "你的电脑已经过载，建议立即关机！", "你知道吗？站长很喜欢你哦！", "一分钟有61秒哦", "你喜欢的人跟别人跑了！"]

if (m == 4 && dd == 1) {//愚人节，随机谎话

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire(l[Math.floor(Math.random() * l.length)]);

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 5 && dd == 1) {//劳动节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("劳动节快乐\n为各行各业辛勤工作的人们致敬！");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 5 && dd == 4) {//青年节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("青年节快乐\n青春不是回忆逝去,而是把握现在！");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 5 && dd == 20) {//520

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("今年是520情人节\n快和你喜欢的人一起过吧！💑");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 7 && dd == 1) {//建党节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("祝中国共产党" + (y - 1921).toString() + "岁生日快乐！");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 9 && dd == 10) {//教师节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("各位老师们,教师节快乐！👩‍🏫");

sessionStorage.setItem("isPopupWindow", "1");

}

if (m == 12 && dd == 25) {//圣诞节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("圣诞节快乐！🎄");

sessionStorage.setItem("isPopupWindow", "1");

}

br

//传统节日部分

br

if ((y == 2023 && m == 4 && dd == 5) || (y == 2024 && m == 4 && dd == 4) || (y == 2025 && m == 4 && dd == 4)) {//清明节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("清明时节雨纷纷,一束鲜花祭故人💐");

sessionStorage.setItem("isPopupWindow", "1");

}

if ((y == 2023 && m == 12 && dd == 22) || (y == 2024 && m == 12 && dd == 21) || (y == 2025 && m == 12 && dd == 21)) {//冬至

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("冬至快乐\n快吃上一碗热热的汤圆和饺子吧🧆");

sessionStorage.setItem("isPopupWindow", "1");

}

br

var lunar = calendarFormatter.solar2lunar();

br

//农历采用汉字计算，防止出现闰月导致问题

br

if ((lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "初六") || (lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "初五") || (lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "初四") || (lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "初三") || (lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "初二") || (lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "初一") || (lunar["IMonthCn"] == "腊月" && lunar["IDayCn"] == "三十") || (lunar["IMonthCn"] == "腊月" && lunar["IDayCn"] == "廿九")) {

//春节，本来只有大年三十到初六，但是有时候除夕是大年二十九，所以也加上了

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire(y.toString() + "年新年快乐\n🎊祝你心想事成，诸事顺利🎊");

sessionStorage.setItem("isPopupWindow", "1");

}

if ((lunar["IMonthCn"] == "正月" && lunar["IDayCn"] == "十五")) {

//元宵节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("元宵节快乐\n送你一个大大的灯笼🧅");

sessionStorage.setItem("isPopupWindow", "1");

}

if ((lunar["IMonthCn"] == "五月" && lunar["IDayCn"] == "初五")) {

//端午节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("端午节快乐\n请你吃一条粽子🍙");

sessionStorage.setItem("isPopupWindow", "1");

}

if ((lunar["IMonthCn"] == "七月" && lunar["IDayCn"] == "初七")) {

//七夕节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("七夕节快乐\n黄昏后,柳梢头,牛郎织女来碰头");

sessionStorage.setItem("isPopupWindow", "1");

}

if ((lunar["IMonthCn"] == "八月" && lunar["IDayCn"] == "十五")) {

//中秋节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("中秋节快乐\n请你吃一块月饼🍪");

sessionStorage.setItem("isPopupWindow", "1");

}

if ((lunar["IMonthCn"] == "九月" && lunar["IDayCn"] == "初九")) {

//重阳节

if (sessionStorage.getItem("isPopupWindow") != "1") {

Swal.fire("重阳节快乐\n独在异乡为异客，每逢佳节倍思亲");

sessionStorage.setItem("isPopupWindow", "1");

}

br

// 切换主题提醒

// if (y == 2022 && m == 12 && (dd >= 18 && dd <= 20)) {

// if (sessionStorage.getItem("isPopupWindow") != "1") {

// Swal.fire("网站换成冬日限定主题啦⛄");

// sessionStorage.setItem("isPopupWindow", "1");

// }

根目录 source下新建文件/custom/dayalert/day.js

https://github.com/sweetalert2/sweetalert2/releases

下载sweetalert2.all.js放到/custom/dayalert/

在主题配置文件下inject配置项中bottom处进行引用

inject:

bottom:

# 公祭日和节日弹框

- *defer type="tex*" src="/custom/dayalert/sweetalert2.all.js"> # 节日弹窗依赖

- *defer src="/custom/dayalert/lunar.js"> # 农历计算

- *defer src="/custom/dayalert/day.js"> # 节日弹窗

Twikoo添加输入提示

根目录 source下新建文件/custom/twikoo/twikoo.css

/* 设置文字内容 :nth-child(1)的作用是选择第几个 */

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {

content: '输入QQ号会自动获取昵称和头像🐧';

}

br

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {

content: '收到回复将会发送到您的邮箱📧';

}

br

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {

content: '可以通过昵称访问您的网站🔗';

}

br

/* 当用户点击输入框时显示 */

.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,

.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {

display: block;

}

br

/* 主内容区 */

.el-input.el-input--small.el-input-group.el-input-group--prepend::before {

/* 先隐藏起来 */

display: none;

/* 绝对定位 */

position: absolute;

/* 向上移动60像素 */

top: -60px;

/* 文字强制不换行，防止left:50%导致的文字换行 */

white-space: nowrap;

/* 圆角 */

border-radius: 10px;

/* 距离左边50% */

left: 50%;

/* 然后再向左边挪动自身的一半，即可实现居中 */

transform: translate(-50%);

/* 填充 */

padding: 14px 18px;

background: #444;

color: #fff;

}

br

/* 小角标 */

.el-input.el-input--small.el-input-group.el-input-group--prepend::after {

display: none;

content: '';

position: absolute;

/* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。

我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */

border: 12px solid transparent;

border-top-color: #444;

left: 50%;

transform: translate(-50%, -48px);

}

在主题配置文件下inject配置项中head处进行引用

inject:

head:

# Twikoo输入提示

-

Reply Like 2 Favorite View the author

All Replies

青稚

deepin

2024-09-17 18:38

推荐去我的博客观看教程

https://blog.linux-qitong.top/

Reply Like 0 View the author

青稚

deepin

2024-09-17 19:08

中秋佳节，月光皎洁，思念绵长。愿这轮明月带去我的祝福，祝你和家人节日快乐，身体健康，万事顺意！

Reply Like 0 View the author

柠萌~

deepin

2024-09-17 19:58

完了我看不懂😭

Reply Like 0 View the author

柠萌~

deepin

2024-09-17 19:58

博客在哪儿指条明路吧宝

Reply Like 0 View the author

柠萌~

deepin

2024-09-17 19:58

我一定认真观看反复观摩

Reply Like 0 View the author

燕子大王来也！

deepin

2024-09-17 20:51

Reply Like 0 View the author

燕子大王来也！

deepin

2024-09-17 20:52

楼主用心啦

Reply Like 0 View the author

新手来啦~

deepin

2024-09-17 21:44

Reply Like 0 View the author

乾豫恒益

deepin

2024-09-18 08:44

Reply Like 0 View the author

先秦淑女步

deepin

2024-09-18 23:23

#10

Reply Like 0 View the author

青稚

deepin

2024-09-19 15:25

#11

柠萌~：

博客在哪儿指条明路吧宝

https://blog.linux-qitong.top/posts/305bae84/

Reply Like 0 View the author

青稚

deepin

2024-09-19 15:27

#12

青稚：

https://blog.linux-qitong.top/posts/305bae84/

转载自己的文章嘛

Reply Like 0 View the author

New Thread

Popular Ranking

Change

Popular Events