博客园如何美化

博客园美化教程

1. 参考资料

教学视频
教学文档

2. 开通JS权限

请先确认你的博客园账号是否成功开通了 JS 权限，如未开通请邮件联系管理员申请。
JS权限开通后进入博客后台「设置」页中完成如下步骤配置。

3. 获取css文件和JS文件

点击下载

4. 配置CSS文件

将第3步中，下载解压的来的CSS文件使用文本编辑器或浏览器打开，然后将全部内容复制粘贴到[页面定制css代码]处。
注意勾选禁用模板默认CSS

5. 配置JS文件(页脚HTML)

将下列JS代码复制到页脚HTML，但是需要改其中的配置，例如：

• avatar
• favicon
• github
• catalog：若使用markdown进行标题标记，也可以进行更改。

<script>
  window.$silence = {
    avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
    favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
    github: 'https://github.com/esofar',
    defaultTheme: 'e',
    navbars: [{
      title: '标签',
      url: 'https://www.cnblogs.com/esofar/tag/'
    }, {
      title: '归档',
      url: 'https://www.cnblogs.com/esofar/p/'
    }, {
      title: '开源',
      chilren: [{
        title: 'Silence',
        target: '_blank',
        url: 'https://github.com/esofar/cnblogs-theme-silence/',
      }, {
        title: 'Dddify',
        target: '_blank',
        url: 'https://github.com/esofar/dddify/',
      }]
    }],
    catalog: {
      enable: true,
      index: true,
      active: false,
      levels: ['h2', 'h3', 'h4'],
    },
    signature: {
      enable: true,
      author: 'Esofar',
      license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
    },
    sponsor: {
      enable: true,
      wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
      alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
    }
  };
</script>
<script src="https://fastly.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-rc2/dist/silence.min.js"></script>

6. 配置页首HTML代码

将如下代码粘贴值页首HTML处

<div class="loading">
  <div class="box">
    <h2>Loading</h2>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

7. 其他配置

「基本设置」栏中，「博客标题」处设置博客名称，默认不支持显示「博客子标题」，「博客皮肤」处需要选择标准模板Custom。

「代码高亮」栏中，「渲染引擎」选择highlight.js，「显示行号」不要勾选，「主题样式」选择cnblogs。