Score
0
Watch 2 Star 11 Fork 2

edata / SimpleCnblogThemeCSSMIT

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
简约博客园主题(Cnblog Theme) spread retract

Clone or download
Loading...
README.md

1. 一款专注于阅读的博客园主题

本主题基本于esofar/cnblogs-theme-silence的开源项目,做得非常不错,我这里我只是对它做了一些非常小的更改。效果预览:我的博客

  • 添加代码行号显示
  • 添加关注按钮
  • 细节上的修改

可以在我的博客查看效果,这里简单展示一下。

原始的风格如下:

简约 · 蓝

暗黑 · 绿

女神 · 粉

代码行号显示,并显示代码类型:

添加关注我的按钮:

2.使用本主题

这里仅简单介绍,详细参考这个文档,或者原部署文档.

2.1 添加样式文件

进入博客园设置页面,博客皮肤选择Custom,再将主题样式文件默认黑色粉色中的代码复制到页面定制CSS代码框中:

2.2 添加js文件

上面完成后,在侧边栏公告中添加如下js代码,请按需更改成你自己的

<script src="https://files.cnblogs.com/files/endlesscoding/silence.min.js"></script>
 
<script type="text/javascript">
    $.silence({
	base: {
            avatar: '//pic.cnblogs.com/avatar/1139651/20180330102648.png',
            favicon: 'https://files.cnblogs.com/files/endlesscoding/favicon.ico',
        },
        catalog: {
            enable: true,
            move: true,
            index: false,
            level1: 'h1',
            level2: 'h2',
            level3: 'h3',
        },
        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://files.cnblogs.com/files/endlesscoding/my_wepay.gif',
            alipay: 'https://files.cnblogs.com/files/endlesscoding/my_aipay.gif'
        },
        github: {
            enable: true,
            link: 'https://github.com/wj-data',
	        target: '_blank'
        }
    });
</script>

此外还需要在页脚html代码中添加如下代码,这个代码主要是用显示代行号。

<!-- 放置于页脚代码区 -->
<script src="https://files.cnblogs.com/files/endlesscoding/highlightjs-line-numbers.min.js"></script>
<script src="https://files.cnblogs.com/files/endlesscoding/jquery.cookie.min.js"></script>

<script>
    $(function() {
        /* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    });
</script>

3. 自定义功能介绍

  • 添加最近评论列表,这个对于你查看最近的评论和及时回复有点帮助。
  • 添加夜间模式日间模式按钮,可切换深色阅读和浅色阅读模式。

要实现这个功能,除了要添加上面的的silence.js文件外,还需要将dark.min.css文件添加到你博客的

主题切换按钮 主题文件上传

Comments ( 5 )

Sign in for post a comment

CSS
1
https://gitee.com/edata-code/SimpleCnblogTheme.git
git@gitee.com:edata-code/SimpleCnblogTheme.git
edata-code
SimpleCnblogTheme
SimpleCnblogTheme
master

Search