配置GitHub风格的博客园

目录

• 前言
• 博客园-管理-设置
  • 页面定制 CSS 代码 配置
  • 博客侧边栏公告 配置
  • 页首 HTML 代码配置如下
• 博客园-管理-选项
• 最后

前言

一直想把自己平时总结发博客，只是搭建博客需要进行seo优化，之前发了些在csdn，广告太多，用着不舒服，最近看到博客园有个大佬博客页面非常棒，就按照他的风格也装饰下，以后就写在博客园，这位博主地址https://www.cnblogs.com/esofar/p/cnblogs-theme-silence.html，同时也是cnblogs-theme-silence作者。

安装步骤

从https://github.com/esofar/cnblogs-theme-silence地址下载源码

git clone https://github.com/esofar/cnblogs-theme-silence.git

我切换到了目前最新版v3.0.0-beta4版本，具体是参考的cnblogs-theme-silence\docs目录下的guide和options

博客园-管理-设置

页面定制 CSS 代码 配置

把cnblogs-theme-silence\dist\silence.min.css文件内容copy到博客园\设置\页面定制 CSS 代码，如下图：

博客侧边栏公告 配置

在博客侧边栏公告贴入下面代码（要提前申请开通JS权限），注意#后面是我加的注释，为了方便理解（不需要花费多精力去了解），要删除的，只需要把xxx给替换为自己的博客名即可，如果想具体深入参考cnblogs-theme-silence\docs目录下的guide和options

<script>
  window.$silence = {
  avatar: 'https://images.cnblogs.com/likecs_com/esofar/972540/o_avatar.jpg', #logo，可以改为自己喜欢的
  favicon: 'https://blog-static.cnblogs.com/files/esofar/favicon.ico', #浏览器图标，可以改为自己喜欢的
  github: 'null', #这个填写自己github地址，没有填写null
  defaultMode: 'light',
  defaultTheme: 'a',
   showNavAdmin: true,
   hljsln: true,
  navbars: [{
        title: '首页',
        url: 'https://www.cnblogs.com/xxx/' #xxx是博客地址名，改为自己的
    }, {
        title: '随笔',
        url: 'https://www.cnblogs.com/xxx/p/' #xxx是博客地址名，改为自己的
    }, 
    {
        title: '标签',
        url: 'https://www.cnblogs.com/xxx/tag/' #xxx是博客地址名，改为自己的
    }, 
    {
        title: '合作',
        chilren: [{
            title: '谷歌',
            target: '_blank',
            url: 'https://www.google.com',
        }, {
            title: '百度',
            target: '_blank',
            url: 'https://www.baidu.com',
        }]
    }],
    catalog: {
        enable: true,
        index: true,
        active: false,
        levels: ['h2', 'h3', 'h4']
    },
    signature: {
        enable: true,
        author: null,
        license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
        remark: 'xxxxxxxxxxxx',  #这里自定义填写内容
    },
    sponsor: {
        enable: false,
        text: '打赏',
        paypal: 'null',
        wechat: 'null',
        alipay: 'null'
    }
};
</script>
<script src="https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/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>

最后保存即可。

博客园-管理-选项

为了和silence作者的风格完全相同，我的选项配置如图，想省心的就这样配置吧。

至此完成。

最后

后面博客都发表这个上面，顺便把csdn上文章也迁移过来，csdn https://blog.csdn.net/yulewo123。