如何创建&美化博客
本文为搬运梳理后产物，代码非原创。
本文特点：步骤简单，代码量小，效果比较美观。
一览表
1.创建博客
1.1注册
首先要注册一个博客园的账号：博客园首页；
在主页的右上角，点击注册，按照步骤填写即可。
1.2申请博客
有了账号之后，将鼠标悬停在右上角的头像上，点击我的博客，会有申请开通博客的页面，申请需要管理员审核，至于申请理由，我已经为大家准备好了：
尊敬的管理员，您好，我想拥有一个属于自己的博客，用来写文章，供其他用户学习和参考，希望您能批准，谢谢。
大约一两个小时，就可以通过了；这时候，再填写各种信息，你就有了一个新的博客。
1.3编写博文
当你用 Markdown 或 LaTeX 写了一篇博文时，保存之后，回到前台，就会发现，它并没有识别，这是因为没有启用数学公式的支持，所以要在后台的选项中，启用数学公式支持。
在选择编辑器的时候，推荐大家选择 Editor.md，它可以实时预览 markdown，非常方便，和在洛谷里的一样。
因为这个博客比较简陋，如果你想让自己的博客变得更美观，那就继续看接下来的操作。
2.美化博客
2.1：博客皮肤：
将鼠标悬停在右上角的头像上，点击我的园子，在右边一栏中，点击写博，就到了博客的后台；
在一横排的栏目中，点击设置，在下面找到博客皮肤，这里有多种皮肤供大家选择，可以使博客变得美观一些。
如果你想挑选皮肤，可以看一下这篇文章：博客皮肤列表。
但是它还是不够美观，要想更美观，就继续看以下操作。
2.2申请JS权限
想要更美观，就需要代码了，但在这之前，要申请JS权限（在博客皮肤的下方）。
图中是已经申请好了的。
JS权限同样需要审核，可以参考下面的理由：
尊敬的管理员，您好，我想使我的博客更加美观，需要申请JS权限，希望您能批准，谢谢。
也用不了多长时间，就通过了。
2.3填写代码
这里介绍多种代码，可以根据个人的审美选择。
2.3.1第一种代码
下面将介绍第一种代码。
页面定制CSS代码
将模板代码粘贴到页面定制CSS代码，千万不要忘了钩上禁用模板默认CSS。
下面是一个个人信息的模板，直接按照以下格式填写并复制到博客侧边栏公告即可。
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions : 'v1.3.2', // 版本
blogUser : "用户名",
blogAvatar : "用户头像",
blogStartDate : "注册博客园的时间",
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.2/src/script/simpleMemory.min.js"></script>
还可以改变鼠标图案；如果你想拥有，就在页面定制CSS代码中，插入以下代码即可。
a:hover {
cursor:url(https://files.cnblogs.com/files/laoguantongxiegogo/click_24px_1231393_easyicon.net.ico),auto;
}
body {
cursor:url(https://files.cnblogs.com/files/laoguantongxiegogo/pointer_24px_1231389_easyicon.net.ico),auto;
}
博客侧边栏公告
下面是一个通用模板，可以将以下代码直接粘贴到博客侧边栏公告；
<script type="text/javascript">
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>
效果：
页首HTML代码
如果你想拥有鼠标吸引线条特效，那就将以下代码粘贴到“页首HTML代码”处，在 color="0,200,255" 处，可以更改你喜欢颜色的色号。
<!--鼠标吸引线条特效-->
<script id="canvas_nest" defer="defer" color="0,200,255" opacity="0.7" zIndex="-1" count="150" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script>
<script>POWERMODE.colorful = true;POWERMODE.shake = true;POWERMODE.mobile = false;document.body.addEventListener('input', POWERMODE);</script>
效果：
如果你想拥有很多 money，可以添加打赏功能；
首先，你要有微信和支付宝的收款码各一个，将两张图片的后缀改为 .bmp，如图：
然后，进入博客后台，点击文件，点击选择文件，之后选择你的微信和支付宝收款码，千万注意，选择完之后别忘了点下面的上传，这样才真正上传完。
之后在下面文件管理处，有你刚刚上传的文件，点击它，就会看到你的收款码的图片，然后复制它的网址。
复制完之后，填写以下代码到页首HTML代码，就可以了。
<script>
window.tctipConfig = {
imagePrefix: "http://files.cnblogs.com/files/kdy11/",
cssPrefix: "http://files.cnblogs.com/files/kdy11",
buttonImageId: 90,
buttonTip: "dashang",
list:{
alipay: {qrimg:"/*支付宝收款码网址*/"},
weixin:{qrimg: "/*微信收款码网址*/"},
}
};
</script>
<script src="http://files.cnblogs.com/files/kdy11/tctip.min.js"></script>
博客皮肤
最后，再返回到原来的地方，在博客皮肤里选择 SimpleMemory。
点击保存，就完成了，是不是很酷？
细节展示
点击有爱心图标
黑白双色
评论
侧边栏
当你从另一个页面切回来时，会显示“欢迎回来”。
2.3.2第二种代码
下面将介绍第二种代码。
页面定制CSS代码
首先，将以下模板代码粘贴在页面定制CSS代码中。
#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;}}
页首HTML代码
将以下模板代码粘贴在页首HTML代码中。
<div id="loading"><div class="loader-inner"></div></div>
页脚 HTML 代码
下面是一个框架，需要在注释处填写代码。
可是，应该怎么填写呢？下面将介绍几种常用的代码及作用。
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
const config = {
//需要填写代码的地方
}
$.awesCnb(config)
</script>
下面是个人信息的模板，按照注释填写即可。
theme: {
name: 'reacg',//皮肤名称
avatar: '',//这里填写你的头像网址
headerBackground: ''//这里填写你的背景网址
},
下面是对代码和页面的优化，会使代码和页面更加美观，直接复制及即可。
highLight: {// 代码高亮
enable: true,
},
lineNumbers: {// 代码行号
enable: true,
},
imagebox: {// 图片灯箱
enable: true,
},
catalog: {// 文章目录
enable: true,
},
效果：
下面是对其它网站的 link，可以在注释处按实际情况填写填写。
github: {
enable: true,
url: '',//网址
},
gitee: {
enable: true,
url: '',//网址
},
效果：
这是一个 Live2D 模型代码，注释处是这个模型的名称，可以更改名称，会有不同的效果。
live2d: {
enable: true,
model: '',//模型名称
},
这是鼠标点击后会出现气泡效果的代码，可以直接复制。
click: {
enable: true,
},
效果：
这个代码可以调成暗黑模式，可以直接复制。
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
效果：
原始模式
暗黑模式
这是一个音乐播放器的代码，按照注释填写即可。
musicPlayer: {
enable: true,
page: 'all',
agent: 'pc',
autoplay: true, //自动播放
volume: 0.4,
lrc: {
enable: true, // 启用歌词
type: 1, // 1 -> 字符串歌词 3 -> url 歌词
color: '', // 颜色
},
audio: [
{
name: '',//歌名
artist: '',//歌手
url: '',//音乐链接
cover: '',//图片网址
lrc: ``,//歌词
},
],
},
可是我们怎么找到这些东西呢？
可以从音乐直链搜索中，找到你的音乐，并复制它的资料完善代码即可。
如果你想添加多首歌曲，直接复制以下部分即可：
{
name: '',//歌名
artist: '',//歌手
url: '',//音乐链接
cover: '',//图片网址
lrc: ``,//歌词
},
效果：
注意，如果你是从QQ音乐里搜索的，过段时间音乐就不会播放，出现 An audio error has occurred，player will skip forward in 2 seconds，但是再复制一次音乐链接和歌词就会变正常，这种情况通常是由错误或空的音乐链接定义引起的，在 url 处网址的最后添加 .mp3 可能会解决问题。
如果以上方法还是不行，可以从其他音乐软件上搜索；如果不嫌麻烦，可以每天复制一次音乐链接和歌词，这样可以解决。（如有更好的方法，我会立即更新并告诉大家，谢谢理解）
这是自定义链接，只要合法，可以随便填写链接。
links: [
{
name: '',//网站名
link: '',//网址
},
],
效果：
如果你想添加多个 link，直接复制以下代码即可：
{
name: '',//网站名
link: '',//网址
},
下面是锁屏代码，按照注释正确填写后复制即可：
lock: {
enable: true,
background: '',//锁屏背景
strings: [
'',//签名
],
},
效果：
如果你要退出锁屏模式，直接点击右上角的钥匙图标即可：
如果你想添加多个签名，直接复制注释为签名的部分在其下面即可。
这样，差不多就完成了。
值得注意的一点是，每块代码中，几乎都有 true 或 false，它们在这里分别表示启用和停用，也就是说，当你把这部分代码设置为 true，它就会启用，也就是显示某种效果，设置为 false，它就会停用，也就是不显示某种效果。
细节展示
评论
侧边栏
每个标题后都有目录
右下角的各种功能
2.3.3其它代码
接下来的几种美化代码，就不一一展示效果了，代码框架如下：
theme: {
name: '',//皮肤名称
},
更改注释部分的名称即可，有这样几个皮肤供大家选择：
geek
bilibili
view
simple
csdn
element
bilibiliv1
silence
acg
注意：这个代码框架直接加在刚才在：页脚HTML代码并更改名称即可。
还有一点值得注意，每个皮肤的配置支持情况是不同的，也就是说有的代码对于某些皮肤是不支持的，所以就要停用这个代码，具体的皮肤的配置支持情况，可以参考这篇文章：配置选项。
2.3.4备注
另外，你还可以更改侧边栏控件，让自己的博客更加完善。
3.参考资料
4.成功案例
5.反馈
songjiahao_：为什么我用你的那个博客设置的方法提示基础设置错误啊?
Ggsddu_zzy：博客皮肤要选成
SimpleMemory。
ztrztr：无法显示，改了后是一片空白
Ggsddu_zzy：可能是代码太长的原因，云剪贴板里面的代码不全，已经改过了：改过的代码
lzber：您新弄的云剪贴板还是显示不全，最后一行到
backgroun就没了
Ggsddu_zzy：改过的代码
如果您在某个步骤遇到了麻烦，可以在下方留言。
6.备注
如果你有更好的博客美化方法，可以加入这个小组，一起讨论！
浙公网安备 33010602011771号