Để làm cho blog của bạn trở nên đẹp hơn, bạn có thể chọn một chủ đề cá nhân và tùy chỉnh CSS bằng cách thêm đoạn mã sau vào phần CSS trong trang web:
#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}
Nếu bạn muốn sử dụng mẫu mặc định, hãy đảm bảo rằng nó được vô hiệu hóa.
Tiếp theo, thêm đoạn mã sau vào phần đầu HTML:
<div id="loading"><div class="loader-inner"></div></div>
Cuối cùng, thêm đoạn mã JavaScript sau vào phần cuối HTML:
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
theme: {
name: 'geek',
url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
log: true,
avatar: "https://images.cnblogs.com/cnblogs_com/blogs/840523/galleries/2447096/o_250328224322_%E5%A4%B4%E5%83%8F.jpg", //Thay thế bằng đường dẫn đến hình ảnh đại diện của bạn
headerBackground:
"https://images.cnblogs.com/cnblogs_com/blogs/840523/galleries/2447096/t_250328232835_%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-03-29%20072731.png", //Thay thế bằng đường dẫn đến hình ảnh nền trên đầu trang của bạn
},
highLight: {
enable: true,
},
lineNumbers: {
enable: true,
},
github: {
enable: false,
url: "https://github.com/xxxx",//Thay thế bằng địa chỉ GitHub của bạn nếu có, hoặc để enable: false nếu không
},
gitee: {
enable: false,
url: 'https://gitee.com/xxxxxx',//Thay thế bằng địa chỉ Gitee của bạn nếu có, hoặc để enable: false nếu không
},
click: {
enable: true,
},
emoji: {
enable: true,
},
darkMode: {
enable: true,
autoDark: true,
autoLight: false,
},
qrcode: {
enable: false,
img: 'https://weiyigeek.top/img/wechat-search.png',//Thay thế bằng đường dẫn đến hình ảnh QR Code của bạn nếu có, hoặc để enable: false nếu không
desc: 'WeiyiGeek 公众号',//Thay thế bằng tên của trang chủ Weibo của bạn
},
donation: {
enable: false,
qrcodes: ['https://cdn.jsdelivr.net/gh/weiyigeek/weiyigeek.github.io/img/reward-alipay.png'],
},//Thay thế bằng đường dẫn đến hình ảnh Alipay của bạn nếu có, hoặc để enable: false nếu không
signature: {
enable: true,
contents: [
"<b>💡 Có ước mơ, nhưng không đắm chìm, 💭 Có hy vọng, nhưng không mơ ước xa xôi, 🐬 Có sự nghiệp, nhưng không đắm mê.</b>",
],
},
postSignature: {
enable: true,
enableLicense: true,
content: ['Attribution-NonCommercial-ShareAlike 4.0 International', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
},
links: {
enable: true,
value: [
{
name: "🍞 OI Wiki",
link: "https://oi-wiki.org/",
},
{
name: "🎨 Trang chủ Blog",
link: "https://www.cnblogs.com/",
},
{
name: "🍻 Luogu",
link: "https://www.luogu.com.cn/user/1022974",
},
{
name: "🧀 Bilibili",
link: "https://space.bilibili.com/1531385378?spm_id_from=333.1007.0.0",
},
],
},
};
$.awesCnb(opts);
</script>
<script type="text/javascript">
window.onload = function () {
var minSize = 10;
var maxSize = 20;
var newOne = 500;
var flakColor = "#f5f5f5fa";
var flak = $("<div></div>").css({ position: "absolute", "top": "0px", "z-index": "9999" }).html("✽");
var dhight = $(window).height();
var dw = $(window).width() - 80;
setInterval(function () {
var sizeflak = minSize + Math.random() * maxSize;
var startLeft = Math.random() * dw;
var startOpacity = 0.7 + Math.random() * 0.3;
var endTop = dhight - 100;
var endLeft = Math.random() * dw;
var durationfull = 5000 + Math.random() * 3000;
flak.clone().appendTo($("body")).css({
"left": startLeft,
"opacity": startOpacity,
"font-size": sizeflak,
"color": flakColor
}).animate({
"top": endTop,
"left": endLeft,
"opacity": 0.1
}, durationfull, function () {
$(this).remove()
});
}, newOne);
}
</script>
Trong phần cuối mã JavaScript, bạn có thể điều chỉnh các giá trị như kích thước nhỏ nhất và lớn nhất của chữ, khoảng thời gian tạo ra mỗi hạt tuyết rơi, màu sắc của hạt tuyết rơi, v.v. Bạn cũng có thể thêm hoặc sửa đổi liên kết khác nhau ở phần cuối mã JavaScript.
Hãy chắc chắn rằng bạn đã cấp quyền JavaScript cho trang web của mình trước khi thực hiện các thay đổi này.