首页 > 其他分享> 文章详细

3分钟教你实现Github风格的博客园博客

2019-08-31 16:57:10 阅读：410 来源： 互联网

标签：Github cnblogs true 博客园博客 https esofar com

废话不多说，这是官方部署文档，可以打开一起看

https://github.com/esofar/cnblogs-theme-silence/blob/master/docs/deploy.md

写在前面

操作之前请先确保您的博客园账号已正常登陆并且已经成功申请开通了 JS 权限。

下载解压

点击下载本主题最新版本源码包，下载完毕后，使用解压工具解压并进入解压后目录

然后打开博客园后台管理页面，进行后续操作。

使用样式

打开./dist/themes文件夹，选择一款自己心仪的主题风格代码文件。我这里选择的是默认的蓝色default.min.css。

使用 Notepad++ 等文本编辑工具打开您选择的主题样式文件，全选所有代码，然后复制。

进入『设置』界面，将复制的代码粘贴到「页面定制CSS代码」文本域中。

点击「保存」按钮，保存上述操作。

注意：

「页面定制CSS代码」上面的博客皮肤选择成Custom，其他排版会乱的。

上传脚本

打开./dist文件夹，获取主题的 JS 脚本文件silence.min.js。

进入『文件』界面，将该文件上传到自己的博客中。上传完成后，点击文件名便可在浏览器地址栏中获取上传文件的外链，类似如下所示：

https://blog-static.cnblogs.com/files/benjieqiang/silence.min.js

然后使用<script>标签将外链包裹，生成一个网页脚本引用，类似如下所示：

<script src="https://blog-static.cnblogs.com/files/benjieqiang/silence.min.js"></script>

进入『设置』界面，将上面生成的网页脚本引用复制到「博客侧边栏公告」文本域中。

使用脚本

为了提高园友的阅读体验，主题在博客园原有功能基础上追加了一些辅助阅读、以及人性化的功能模块。其中部分模块做了参数配置，用户可根据自己意愿选择是否启用。若启用，再根据自己的信息或写作习惯设置相关参数。

进入『设置』界面，将如下脚本代码引用追加到「博客侧边栏公告」文本域中，其中配置参数根据下表自行修改。

<script type="text/javascript">
    $.silence({
    base: {
            avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
            favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'http://blog.esofar.cn',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
            alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
        },
        github: {
            enable: true,
            link: 'https://github.com/esofar'
        }
    });
</script>

配置完成后，记得点击「保存」按钮，保存上述操作。

其他配置

进入『设置』界面，在「标题」文本框中设置博客标题，注意不支持显示「子标题」；把「禁用模板默认CSS」复选框取消勾选。最后，点击「保存」按钮保存上述 3 步操作。

进入『选项』界面，在「控件显示设置」中需要勾选的博客园官方功能模块如下几个：

必须要勾选：公告、我的标签、随笔分类、阅读排行榜、推荐排行榜
自定义勾选：博客园链接、首页链接、RSS订阅、联系

写在最后

如果你感觉左上角的github颜色不好看，F12打开自己调，进入『设置』界面，然后加到对应的css位置。

可以参考我的哦。

.github-corner svg {
    fill: #069;
}

标签：Github,cnblogs,true,博客园,博客,https,esofar,com
来源： https://www.cnblogs.com/benjieqiang/p/11439542.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9