Silence - 专注于阅读的博客园主题

最近花了点心思整理了下我的博客园主题代码,今天正式和大家分享一下,感兴趣的园友可以了解一下。

主题介绍

Silence 追求大道至简的终极真理,旨在打造一个干净、专注阅读的博客主题,没有二维空间元素、不存在花里胡哨。

简单概括其几个主要特点:

  • 专注阅读、精致漂亮的 UI;
  • 事无巨细的部署文档;
  • 兼容移动端浏览器;
  • 源码结构清晰、易扩展。

预览地址:https://www.cnblogs.com/esofar

开源地址:https://github.com/esofar/cnblogs-theme-silence

功能简述

该主题除了增加页面渲染效果以外,还对博客园原有一些功能模块做了修改,主要体现在以下几个方面:

  • 侧边栏仅保留了博客公告、我的标签、随笔分类、阅读排行榜、推荐排行榜5个主要模块,其他全部隐藏。
  • 进入文章详情页面会自动隐藏侧边栏,进入阅读模式,让您专注阅读当前文章,没有杂心翻看其他东西。
  • 文章详情页面新增了博客目录模块,支持三级标题,提供参数配置,以便迎合不同园友的标题使用习惯。
  • 文章详情页面新增了博客签名模块,自动生成文章链接,提供参数配置作者名称等。
  • 文章详情页面新增了支持赞赏模块,同样提供参数配置,支付宝或者微信二维码请至少配置一个。

至于其他细节请感兴趣的园友自行体验吧。

安装说明

开始之前请确保你有一个正常的博客园账号并已经成功申请开通JS权限。

Step1:主题下载

通过下面git命令克隆到本地,或者直接下载zip到本地并解压。

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

进入dist目录,获取发布文件silence.min.csssilence.min.js

Step2:上传博客园

进入博客园『管理』-『文件』,将silence.min.js文件上传到自己的博客。获取上传后的URL地址,然后使用<script>标签生成一个脚本引用。参考示例:

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

进入『博客园』-『管理』-『设置』,将上面生成的引用复制到「博客侧边栏公告」文本域中。

最后处理样式文件,使用记事本工具打开silence.min.css文件,复制其所有代码到「页面定制CSS代码」文本域中即可。

Step3:开始使用

进入『博客园』-『管理』-『设置』,将下面代码复制并追加到「博客侧边栏公告」文本域中。

<script type="text/javascript">
    $.silence();
</script>

该主题新增了三个自动化模块:博客目录、博客签名、支持赞赏,并且支持参数配置,由于可能会稍微影响页面加载速度,默认不启用。如需开启请修改上述代码。参考示例:

<script type="text/javascript">
    $.silence({
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            author: 'Esofar',
            home: 'https://esofar.cn',
            license: '署名 4.0 国际',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        reward: {
            enable: true,
            title: '感谢您的支持,我会继续努力',
            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>

配置项说明详见下表:

Step4:其他配置

要使主题正常使用,还需要在修改博客园的一些其他配置项。

  • 进入『博客园』-『管理』-『设置』,在「标题」文本域中设置博客标题,不支持子标题。
  • 进入『博客园』-『管理』-『设置』,在「博客皮肤」处选择博客园官方标准模板Custom,并且把「禁用模板默认CSS」复选框取消勾选。
  • 进入『博客园』-『管理』-『选项』,在「控件显示设置」需要勾选的模块有:随笔分类、公告、博客园链接、阅读排行榜、我的标签、首页链接、RSS订阅、推荐排行榜、联系,其他模块取消勾选(可选)。

至此,Silence 主题就已经安装完成,赶快打开博客看看效果吧!

源码扩展

Silence 主题源码结构清晰、易扩展,稍微有一点前端开发经验的园友都能修改。如果您对页面效果不满意或者希望添加其他功能模块,可以直接修改源码,重新编译、压缩一下即可。简单介绍下源码修改过程:

Tip:下面的一些操作需要依赖Node.js环境和Git客户端,如果您的电脑还没有,请先安装,再继续操作。

克隆源码,进入项目目录,安装依赖:

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

根据自己的需求修改src目录下的silence.less样式文件和silence.js脚本文件,这里需要您掌握一点JavaScrip的ES6语法,以及CSS预处理语言Less的语法。

Less文件修改完成后,需要通过如下命令将文件转义为普通CSS文件并压缩,输出至dist/silence.min.css

lessc src/silence.less dist/silence.min.css -clean-css

通过如下两个命令将脚本文件转义为ES5语法,并压缩混淆,输出至dist/silence.min.js

babel src/silence.js -o src/silence.es5.js
uglifyjs src/silence.es5.js -o dist/silence.min.js -c -m

最后,再按照「安装说明」一节中的步骤重新安装即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏yang0range

React Native在Android当中实践(五)——常见问题

这个问题是由于ReactNative兼容64位Android手机导致的。 解决办法: 1.在项目的根目录的 gradle.properties 里面添加一行...

1272
来自专栏jeremy的技术点滴

微信小程序上手

6906
来自专栏IT技术精选文摘

有货移动Web端性能优化探索实践

在移动互联网的时代里,对于一个web站点来说,移动端的用户体验尤为重要。现代web站点的设计和开发都是以移动优先作为第一原则,我们也专门为了移动端的web站点做...

38010
来自专栏知晓程序

开发 | 无需后端编码,手把手教你把 WordPress 做成小程序

知晓程序(微信号 zxcx0101)今天分享的这篇文章,将一步步讲解,如何将一个 WordPress 网站借助 REST API 开发微信小程序版。

2193
来自专栏IT大咖说

大漠穷秋:全面解读Angular 4.0核心特性

摘要 基于最新的Angular4.0版本,超级大咖大漠穷秋为我们讲解强大的集成开发平台Angular/cli,以及Angular最核心的3大概念:组件、模块、路...

3905
来自专栏知晓程序

开发 | 简单易上手,资讯类小程序开发实战指南

今天,知晓程序(微信号 zxcx0101)将通过一个简单的电影资讯小程序,来看看在知晓云内容库功能的帮助下,如何将内容资讯类小程序的开发效率提高 60%。

1541
来自专栏happyJared

Fiddler实现微信授权开发调试

案发现场: 某天,一名正儿八经的开发"猿",在疯狂一顿Coding之后,他完成了微信授权登录功能的编码。下来他想先在本地调试一下,然后再部署到线上环境。于是在...

5882
来自专栏DeveWork

WordPress 添加个性化的博客宠物(汉纸篇)

之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

2425
来自专栏coding

sublime text结合markdown viewer实现完美的写作体验

4893
来自专栏QQ空间开发团队的专栏

iOS 高性能图片架构与设计

一个优秀的图片组件应该具有这些特性:集并发控制,请求合并,下载,缓存,缓存自动淘汰,图片处理,动画的从数据源到图片显示的一站式解决方案。做到图片加载展示如丝般顺...

2.6K0

扫码关注云+社区

领取腾讯云代金券