• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    SimpleCnblogTheme: 简约博客园主题(Cnblog Theme)

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    SimpleCnblogTheme

    开源软件地址:

    https://gitee.com/edata-code/SimpleCnblogTheme

    开源软件介绍:

    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文件添加到你博客的

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

    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap