本博客主题设置
主题介绍
本博客使用的博客主题构成如下:
- 主体主题:Silence - 专注于阅读的博客园主题(3.0版)
- 粒子特效:Weather with you主题说明(节选)
主题部署
Silence
参照Silence部署文档操作即可。
使用样式
在浏览器中打开https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta2/dist/silence.min.css,全选所有代码,然后复制。
进入『设置』界面,将复制的代码粘贴到「页面定制CSS代码」文本域中。
点击「保存」按钮,保存上述操作。
上传脚本
在浏览器中打开https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta2/dist/silence.min.js,全选所有代码,然后复制保存到文件。
进入『文件』界面,将该文件上传到自己的博客中。上传完成后,点击文件名便可在浏览器地址栏中获取上传文件的外链。
然后使用script标签将外链包裹,生成一个网页脚本引用。
进入『设置』界面,将上面生成的网页脚本引用复制到「博客侧边栏公告」文本域中。
使用脚本
进入『设置』界面,将如下脚本代码引用 追加 到「博客侧边栏公告」文本域中。
注意事项:
- 部署前开启博客园JS权限(直接在“设置”里面申请)
- 部署时使用博客园官方默认皮肤Custom
- 默认的加粗字体很不明显要手动调整CSS,如topics .postBody strong{margin:0 3px;font-weight:600} // 调整加粗字体权重
- 参照部署文档“使用脚本”部分设置好目录,默认的设置不太符合大众习惯,我的设置如下(取消目录索引、从一级标题开始显示目录)
- “禁用模板默认CSS”需要打对勾。
<script>
window.$silence = {
avatar: 'https://images.cnblogs.com/cnblogs_com/timefiles/1603758/o_191130094033o_avatar.jpg',
favicon: 'https://files-cdn.cnblogs.com/files/timefiles/o_favicon.ico',
github: 'https://github.com/timeflies-qyh',
defaultMode: 'dark',
defaultTheme: 'a',
navbars: [
{
title: '首页',
url: 'https://www.cnblogs.com/timefiles/'
},
{
title: '标签',
url: 'https://www.cnblogs.com/timefiles/tag/'
},
{
title: '归档',
url: 'https://www.cnblogs.com/timefiles/p/'
},
{
title: '导航',
chilren: [
{
title: '谷歌',
url: 'https://www.google.com/',
},
{
title: '百度',
url: 'https://www.baidu.com/',
},
{
title: '猿导航',
url: 'http://quyonghu.cn/',
},
]
},
],
showNavAdmin: true,
catalog: {
enable: true,
index: true,
active: false,
levels: ['h1', 'h2', 'h3']
},
signature: {
enable: true,
author: null,
license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
remark: '签名:曾梦想仗剑天涯,后来工作太忙没去...',
},
sponsor: {
enable: true,
text: '',
paypal: null,
wechat: 'https://images.cnblogs.com/cnblogs_com/timefiles/1603758/o_191130093552o_wechat.jpg',
alipay: 'https://images.cnblogs.com/cnblogs_com/timefiles/1603758/o_191130093536o_alipay.jpg'
}
};
</script>
<script src="https://blog-static.cnblogs.com/files/timefiles/silence.min.js"></script>
配置 Loading
在页首 HTML 代码中加入以下代码:
<!-- 配置 Loading-->
<div class="dark-loading">
<div class="box">
<h2>Loading</h2>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
粒子特效
节选了“Weather with you主题”的粒子特效部分,粒子特效代码如下:
<!-- 粒子特效 js.js文件我已经备份-->
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/timefiles/ParticleEffects.js" color="240,230,140" opacity="1" count="75" zindex="-2">
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {
}
</script>
将粒子特效代码复制到“设置”的“页首 HTML 代码”即可,部署可参考博客园添加粒子特效。
(我也不知道这个特效的作者是谁,只能把我知道的出来都列出来了。)
我把“js.js”文件备份到自己的“文件管理”下,改名为“ParticleEffects.js”,以防链接失效。
统计代码
2020-01-05:添加百度网站统计代码,代码就不贴了。
主题效果
粒子特效动态效果截图无法展示,可参考本博客页面。