本博客主题设置

主题介绍#

本博客使用的博客主题构成如下：

• 主体主题：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：添加百度网站统计代码，代码就不贴了。

主题效果#

粒子特效动态效果截图无法展示，可参考本博客页面。

附件：获取主题#

• github下载（推荐）
• cnblogs-theme-silence-master 百度网盘（提取码：ycs6）
• cnblogs-theme-silence-master-V2.03 百度网盘（提取码：r3b0）
• cnblogs-theme-silence-master-V3.0.0 百度网盘（提取码：dfdn）