Loading

本博客主题设置

主题介绍

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

主题部署

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:添加百度网站统计代码,代码就不贴了。

主题效果

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

附件:获取主题

posted @ 2019-12-14 16:35  二次元攻城狮  阅读(308)  评论(0编辑  收藏  举报