主题介绍
本博客使用的博客主题构成如下:
- 主体主题:Silence - 专注于阅读的博客园主题(简约 · 蓝)
- 粒子特效:Weather with you主题说明(节选)
主题部署
Silence
参照Silence部署文档操作即可。
使用样式
打开./dist/themes文件夹,选择一款自己心仪的主题风格代码文件。
default.min.css // 简约 · 蓝
dark.min.css // 暗黑 · 绿
goddess.min.css // 女神 · 粉
使用 Notepad++ 等文本编辑工具打开您选择的主题样式文件,全选所有代码,然后复制。
进入『设置』界面,将复制的代码粘贴到「页面定制CSS代码」文本域中。
点击「保存」按钮,保存上述操作。
上传脚本
打开./dist文件夹,获取主题的 JS 脚本文件silence.min.js。
进入『文件』界面,将该文件上传到自己的博客中。上传完成后,点击文件名便可在浏览器地址栏中获取上传文件的外链。
然后使用script标签将外链包裹,生成一个网页脚本引用。
进入『设置』界面,将上面生成的网页脚本引用复制到「博客侧边栏公告」文本域中。
使用脚本
进入『设置』界面,将如下脚本代码引用 追加 到「博客侧边栏公告」文本域中。
注意事项:
- 部署前开启博客园JS权限(直接在“设置”里面申请)
- 部署时使用博客园官方默认皮肤Custom
- 默认的加粗字体很不明显要手动调整CSS,如.post .postBody strong {font-weight: 600; // 调整加粗字体权重
- 参照部署文档“使用脚本”部分设置好目录,默认的设置不太符合大众习惯,我的设置如下(取消目录索引、从一级标题开始显示目录)
catalog: {
enable: true,
move: true,
index: false,
level1: 'h1',
level2: 'h2',
level3: 'h3',
},
粒子特效
节选了“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:添加百度网站统计代码,代码就不贴了。
主题效果
粒子特效动态效果截图无法展示,可参考本博客页面。