使用Slience美化自己的博客园主页
推荐一个大佬的开源主题
http://esofar.gitee.io/cnblogs-theme-silence/#/
简单介绍下使用步骤
1.配置css
浏览器打开题主分享的CDN链接，获取css脚本，复制粘贴到[页面定制CSS代码]窗口
https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.css
2.配置博客侧边栏公告
这里的配置可大佬分享的部署文档，可*配置一些选项
<script>
window.$silence = {
avatar: 'https://xinguan-parent-zyf.oss-cn-guangzhou.aliyuncs.com/cdrPRe.jpg',
defaultMode: 'auto',
defaultTheme: 'h',
navbars: [{
title: '标签',
url: 'https://www.cnblogs.com/esofar/tag/'
}, {
title: '朋友',
chilren: [{
title: '百度',
target: '_blank',
url: 'https://www.baidu.com',
}, {
title: '谷歌',
target: '_blank',
url: 'https://www.google.com',
}]
}],
showNavAdmin: false,
hljsln: true,
catalog: {
enable: true,
index: true,
active: false,
levels: ['h2', 'h3', 'h4']
},
signature: {
enable: true,
author: null,
license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
remark: '你可以在这里自定义其他内容',
},
sponsor: {
enable: true,
text: '',
paypal: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
}
};
</script>
<script src="https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.js"></script>
3.配置页首HTML代码
<div class="light-loading">
<div class="box">
<h2>Loading</h2>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
4.配置页尾HTML代码
<div class="light-loading">
<div class="box">
<h2>Loading</h2>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>