1 引言
之前我也因为百度全是csdn，选择在csdn写博客。写博客的原因就是为了学习，输出倒逼输入。
最近正好学习了django，自己从头到尾写了一个django-blog网站，感觉很爽。
然后开始想着建站，想有一个好看的博客。一直觉得csdn不好看，没有逼格，没有足够的定制化，而且csdn感觉很乱，很多文章乱七八糟的。
最后在各种平台挑选了半天，选择了cnblog 。主要是免费。
全文为我的经验分享。
2 定制博客
2.1 创建博客
主要步骤为，申请博客 - 申请js - 寻找博客园主题美化。
以下是我的博客定制化主要参考的文章。
https://www.cnblogs.com/leebri/p/my-blog-config.html
https://www.cnblogs.com/woju/p/16996438.html
2.2 博客园配置
2.2.1 选项
2.2.2 设置
文中很多文件被我换成了我自己的文件。你也可以修改。
上传到博客的“文件”，然后选择分享替换URL。
2.2.2.1 博客侧边栏公告
微信公众号图片，记得修改src。
或者删除，不使用，不影响美化。
<hr><img src="https://files.cnblogs.com/files/blogs/796253/wxgzh.bmp" width="250px" height="250px"><hr>
2.2.2.2 网页定制CSS代码
禁用模板默认CSS
@keyframes spin3D{from{transform:rotate3d(0.5,0.5,0.5,360deg)}to{transform:rotate3d(0deg)}}#loading{height:100%;background-color:#1d2630;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;overflow:hidden;z-index:99999999}.spinner-box{width:300px;height:300px;display:flex;justify-content:center;align-items:center;background-color:transparent}.leo{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.blue-orbit{width:165px;height:165px;border:1px solid #91daffa5;animation:spin3D 3s linear .2s infinite}.green-orbit{width:120px;height:120px;border:1px solid #91ffbfa5;animation:spin3D 2s linear 0s infinite}.red-orbit{width:90px;height:90px;border:1px solid #ffca91a5;animation:spin3D 1s linear 0s infinite}.white-orbit{width:60px;height:60px;border:2px solid #fff;animation:spin3D 10s linear 0s infinite}.w1{transform:rotate3D(1,1,1,90deg)}.w2{transform:rotate3D(1,2,0.5,90deg)}.w3{transform:rotate3D(0.5,1,2,90deg)}
2.2.2.3 页首HTML代码
打赏功能。记得修改收款码图片，图片格式为bmp。只要修改list的图片。
<div id="loading">
<div class="spinner-box">
<div class="blue-orbit leo"></div>
<div class="green-orbit leo"></div>
<div class="red-orbit leo"></div>
<div class="white-orbit w1 leo"></div>
<div class="white-orbit w2 leo"></div>
<div class="white-orbit w3 leo"></div>
</div>
</div>
<script>
window.tctipConfig = {
//此处imagePrefix是打赏图片地址的前缀，你可以自己找一张图片上传到你的博客文件夹，记得将图片名修改为 tab_4.bmp，然后将前缀替换为你自己的博客路径
imagePrefix: "https://files.cnblogs.com/files/blogs/796253/",
//此处是该功能css文件所在位置前缀，你可以进入该链接将其下载下来上传到你自己的博客园文件夹，然后将其修改为你自己的，https://files-cdn.cnblogs.com/files/woju/myRewards.css。
cssPrefix: "https://files.cnblogs.com/files/blogs/796253/",
buttonImageId: 4, //这个是按钮图片切换，上方你可以上传多个图片命名为 tab_1.bmp、tab_2.bmp、tab_3.bmp......然后修改数字就可以切换图片
buttonTip: "dashang",
list:{
alipay: {qrimg: "https://files.cnblogs.com/files/blogs/796253/alpay.bmp"},
weixin:{qrimg: "https://files.cnblogs.com/files/blogs/796253/wxpay.bmp"},
}
};
</script>
<script src="https://blog-static.cnblogs.com/files/blogs/796253/tctip.min.js"></script> //打赏的js文件
2.2.2.4 页脚HTML代码
主要代码。没研究过，基础薄弱。稍微修改了一些。
<script src="https://blog-static.cnblogs.com/files/blogs/796253/index.js"></script>
<script>
const config = {
// 默认启用皮肤 'reacg'
// 在这里添加自定义配置
// 当前为全部使用默认配置
theme: {
name: 'reacg',
color: '#29898d',
title: 'zlzgzlz’s Blog！',
favicon: 'https://s1.328888.xyz/2022/08/01/FqqGP.png',
//刺客五六七头像
avatar: '/i/l/?n=23&i=blog/2323498/202308/2323498-20230824110718118-57952129.png',
// 不知道干啥的，建议删除 headerBackground: '/i/l/?n=23&i=blog/2323498/202308/2323498-20230824112156562-651551682.jpg',
},
emoji: {
enable: true,
buttonIcon: "
标签：enable,com,博客园,value,label,CSDN,https,true,美化
From： https://www.cnblogs.com/shiyisec/p/17656741.html