cnblog界面定制

原创

胜东 2021-06-04 19:25:51 ©著作权

文章标签 运维 文章分类 运维

©著作权归作者所有：来自51CTO博客作者胜东的原创作品，请联系作者获取转载授权，否则将追究法律责任

缘起

看到一个界面特别好的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>