cnblog界面定制

缘起

看到一个界面特别好的cnblog，想改成那个样子；

学习了两个页面，最后找的git hub源地址

https://www.cnblogs.com/yaoyaoliu/p/10229447.html

https://www.cnblogs.com/guixiaoming/

https://github.com/esofar/cnblogs-theme-silence/tree/v3.0.0-beta2 

操作

按照https://esofar.github.io/cnblogs-theme-silence/#/guide的介绍进行布置；

作者的blog：https://www.cnblogs.com/esofar/ 

第一步 模板皮肤选择

模板>设置>博客皮肤，选择Custom

第二步 输入页面定制CSS代码

填充之后，cnblogs会形成一个css定制文件，我的可以在如下链接下载：

https://www.cnblogs.com/stono/custom.css?v=BBjide8SF+BIUyfS5zPozi0rhWI=

第三步 申请js权限、上传js文件、收款码图片

申请js权限在 模板>设置>博客侧边栏公共 旁边有申请链接；

上传定制js文件，上传到cnblogs可以保证文件可靠存在，我的可以在如下链接下载：

https://files.cnblogs.com/files/stono/silence.min.js

收款码图片是PayPal收款码、微信收款码、支付宝收款码，会放到随笔的下面，

You know，Buy me a cup of coffee. 

第四部 填充博客侧边栏公告

填写的script内容会在博客的页面加载，具体每一项的含义请查看github上面的说明；我的script如下：

<script>
    window.$silence= {
        avatar: 'https://images.cnblogs.com/cnblogs_com/stono/1864619/o_201016084444pic1.jpg',
        favicon: '',
        github:'https://github.com/stono888',
        defaultMode: 'light',
        defaultTheme: 'a',
        navbars: [
            {
                title: '博客园',
                url: 'https://www.cnblogs.com/'
            },
            {
                title: '首页',
                url: 'https://www.cnblogs.com/stono/'
            },
            {
                title: '归档',
                url: 'https://www.cnblogs.com/stono/p'
            },
            {
                title: '新随笔',
                url: 'https://i.cnblogs.com/EditPosts.aspx?opt=1'
            }
        ],
        catalog: {
            enable: true,
            index: true,
            active: true,
            levels: ['h2', 'h3', 'h4']
        },
        signature: {
            enable: true,
            author: 'stono',
            license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
            remark: '',
        },
        sponsor: {
            enable: true,
            paypal: '',
            wechat: 'https://images.cnblogs.com/cnblogs_com/stono/1864619/o_201016073233wx2.png',
            alipay: 'https://images.cnblogs.com/cnblogs_com/stono/1864619/o_201016073240zfb2.png'
        }
    };
</script>
<script src="https://files.cnblogs.com/files/stono/silence.min.js"></script>

第五步 页首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>

第六步 进行CSS样式微调

如果按照原作者的方式进行设置，博客的展示界面编辑按钮会隐藏，而在实际博客编写过程中，

经常会进行博客内容的修改，为了方便起见，我对原CSS文件进行了微调，大家也可以根据自己

的需求进行相应样式的调整；调整后的CSS文件见上文链接，修改的代码很简单，如下：

#topics .postDesc {display: '';}

20201207更新

发现首页增加了一个头导航栏，于是隐藏之

#top_nav {display:none}