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

2023-11-01

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

主题介绍

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

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

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

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

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

img_ec40f931477e1f9513edb7e205601d28.png

img_2c6bdad42f5f21625742f19e89796975.png

功能简述

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

  • 侧边栏仅保留了博客公告、我的标签、随笔分类、阅读排行榜、推荐排行榜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>

配置项说明详见下表:
img_820e126aec4d754df4d97232ee427b69.png

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脚本文件,这里需要您掌握一点JavaScript的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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Silence - 专注于阅读的博客园主题 的相关文章

  • Git 分支之间未跟踪的文件

    我一直在这里寻找答案 看来我可能只是对 git 分支应该如何工作做出了错误的假设 我有我的master分支 我创建了一个名为的功能分支profiles我正在对个人资料进行一些特定的工作 在处理配置文件时 我更改了 5 或 6 个文件 并添加
  • jQuery数据表设置列设计和成功回调中的值

    我为我的数据表编写了以下代码 它用我的数据库中的内容填充表 如下所示 if datatable null datatable destroy datatable tableProducts DataTable pageLength 50 b
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • Javascript 制作音频 blob

    我正在测试 html 音频标签 我想制作音频 blob url 就像 youtube 或 vimeo 那样 并将其添加到 src 开始播放音频 我一直在测试new Blob and URL createObjectURL 但我不知道如何使用
  • 如何解决git中文件重命名文件夹冲突?

    我有以下问题 我有两个分支 Branch1 和 Branch2 的一些共同提交 A Branch1 是一个公共分支 位于服务器上 Branch2 是本地分支 在 Branch1 中我更改了文件 BAD folder somefile txt
  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se
  • 如何检查侧边栏视图是否已经在主干中渲染?

    通常 用户通过主页进入网站 然后我在那里渲染侧边栏视图 接下来 用户单击链接 路由器呈现另一个视图并替换原始内容视图 侧边栏视图不会重新渲染 当用户在子页面上单击刷新时 侧边栏不会呈现 如何检查视图是否存在并且已渲染 划分责任并坚持下去 不
  • Webpack - 资产大小限制中的警告:以下资产超出了建议的大小限制 (244 KiB)

    当我在生产模式下运行 webpack 时 有资产规模限制 超出 的警告 我怎样才能运行而不出现这个错误 在我的项目中 我包含 css 并且我看到 webpack 构建中包含一些 node module 目录 但是如果我排除 css 的 no
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • 如何处理 setTimeout() 的多个实例?

    阻止创建 setTimeout 函数的多个实例 在 JavaScript 中 的最推荐 最佳方法是什么 一个例子 伪代码 function mouseClick moveDiv div 0001 mouseX mouseY function
  • jQuery 模板插件:如何创建双向绑定?

    我开始使用 jQuery 模板插件 微软创建的 但现在我面临这个问题 模板用于绑定到对象数组的一堆表单 当我更改其中一个表单上的某些内容时 我希望更新绑定的对象 但我不知道如何自动执行该操作 这是一个简单的例子 现实生活中的模板和对象要复杂
  • 如何使用 Node.js 解析 JSON? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我应该如何使用 Node js 解析 JSON 是否有一些模块可以安全地验证和解析 JSON 你可以简单地使用JSON parse h
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • 禁用移动设备上的锚点菜单点击

    我使用嵌套列表作为带有子菜单项的菜单 我曾经这样做过 如果您将鼠标悬停在主菜单项上 子菜单项将通过将显示从无更改为块来出现 我决定让子菜单看起来就像是下拉的 并使用了 CSS 过渡 我遇到的问题是 在第一种方法中 如果您触摸 iPad 上的
  • javascript 闭包和对象引用

    我的情况有点晦涩难懂 主要是因为我认为我已经掌握了闭包 所以基本上我想要的是将集合重置为默认值 假设我有一个集合 它具有带有对象参数数组的构造函数 var c new collection x y z 然后集合定期更新 因为我没有保留数组的
  • 如何更改数据表中标题单元格的内容?

    我正在使用数据表 http datatables net plugin 在我的可排序列上 我想用按钮替换列文本 但是这样做 oSettings aoColumns i nTh text 我可以检索相应列的文本 但是 oSettings ao
  • “memset”没有 DLL 那么如何 ctype 它

    如何使用memset在 jsc 类型中 没有对应的 DLL 我搜索 搜索了 js ctype 代码 但找不到要破解的示例 如果你只是想memset一个数组为零字节 然后我有 好消息 大家 js ctypes 会将新数组初始化为零 否则 最简
  • Git-svn:批量删除孤立的远程分支

    我正在处理的 SVN 项目 通过 git svn 有经常创建的分支 然后与主干重新集成 然后删除 现在项目大约有10个分支没有被删除 但是在git中 gitbranch r显示大约有50个 我可以一次删除这些 检查它们是否仍然存在于 svn
  • 将代码从没有权限的存储库推送到私有存储库?

    我有一个来自外部存储库 我们称之为 ExRepo 的文件夹 我没有任何推送权限 我有一个名为 MyOwnRepo 的个人存储库 如何获取 ExRepo 并将其合并到 MyOwnRepo 中 我已经尝试过这个 C Users

随机推荐

  • springdata JPA@Query注解及@Modifying注解

    Query注解查询适用于所查询的数据无法通过关键字查询得到结果的查询 这种查询可以摆脱像关键字查询那样的约束 将查询直接在相应的接口方法中声明 结构更为清晰 这是Spring Data的特有实现 索引参数与命名参数 1 索引参数如下所示 索
  • c#操作符operate的用法

    operate operate 的用法 看代码 public struct CorePoint
  • 用户自定义类型(User-defined Type)参数的传递

    用户自定义类型 User defined Type 参数的传递 用户自定义类型在VB中是一种重要的数据类型 它为编程者提供了很大的灵活性 使开发人员可以根据需要构造自己的数据结构 它相当于C C 中的结构类型 structure 在VB中
  • 转【】浅谈sql中的in与not in,exists与not exists的区别_

    浅谈sql中的in与not in exists与not exists的区别 1 in和exists in是把外表和内表作hash连接 而exists是对外表作loop循环 每次loop循环再对内表进行查询 一直以来认为exists比in效率
  • 基于Cesium的实景三维模型动态更新-以3Dtiles为例(一)

    一 简介 Cesium众所周知 是一个前端的三维框架 本项目利用Cesium平台来实现实景三维模型的动态更新 不认识Cesium的同学戳这里 cesium中文网 学习cesiumjs 的好地方 伐罗密 实景三维模型 概括来讲就是倾斜摄影三维
  • CocosCreator-3D 3D物体触摸移动(跟随移动)

    版本 cocoscreator3 4 0 基本原理 通过触摸屏幕上的点生成一个射线 通过物理射线检测 获得是否点击到物体 通过射线的检测结果 raycastResults 获得碰撞点 hitPoint 设置物体的x z为碰撞点的x y即可
  • JSP分页处理

    作为代码萌新的我今天尝试做了一个JSP的分页处理 如果有什么不好的地方请在评论区留下建议 废话不多说 先看我做的效果图 我在查询数据的时候使用了异步AJAX 在数据绑定的时候使用的是vue 因为我感觉vue用来绑定数据更方便一点 分页插件使
  • java 实现SMS短信发送

    准备工作 注册账号 http sms webchinese cn reg shtml 查看短信密钥 代码实现 package com activiti test import org apache commons httpclient He
  • Eureka的黑白名单过滤机制(Eureka的注册黑白名单)

    参考链接 Eureka的注册黑白名单 不过这篇博文只提供了实现思路和大致 我这边帮忙把完整代码贴出来 通过springboot的autoconfigure实现 大致思路是用自己定义的Eureka注册包装类替换原来的Eureka注册类 当Eu
  • SpaceX预计到2022年Starlink用户将达到2000万,但最终达到了100万

    SpaceX的Starlink部门还没有接近实现客户和收入的预测 该公司在建立卫星网络之前与投资者分享了这一点华尔街日报报道今天出版 据报道 2015年的一份题为 SpaceX用来从投资者那里筹集资金 的报告预计 到2022年 Starli
  • C++ String去除头尾空格 实现trim()方法

    虽然C 11的标准库中并没有提供trim 方法 但我们可以使用string的find first not of 和find last not of方法实现trim include
  • centos linux介绍,关于CentOS使用的简介

    CentOS对大家来说已经很熟悉 什么是CentOS呢 CentOS Community ENTerprise Operating System 是Linux发行版之一 它是来自于Red Hat Enterprise Linux依照开放源代
  • BUUCTF WEB 强网杯 2019 随便注

    1 题目 2 解题 2 1 尝试点提交 url变为 http b61f33a4 644b 402a 9da5 4bdf8043f954 node4 buuoj cn inject 1 可知传入的参数名为 inject 参数为1 2 2 尝试
  • vector中reserve与resize区别

    vector中reserve与resize区别 一 基本概念 1 capacity 指容器在分配新的存储空间之前能存储的元素总数 2 size 指当前容器所存储的元素个数 二 reserve与resize 1 区别 1 reserve 只修
  • 如何计算当前进程的CPU占用率

    由于测试一个解码器的项目 很长时间都在反复进行domain knowledge的学习 再加上自己是一个测试新手 对于测试代码撰写啥的还很是生嫩 前一阵被要求在性能测试中 最好在测试时能够计算出解码进程的CPU占用率 做为我们参考的一种性能参
  • w10 没有internet信息服务器,win10找不到“internet信息服务(IIS)管理器”怎么办...

    用户在搭建开发环境的时候 找了很久没发现 internet信息服务 IIS 管理器 那么 internet信息服务 IIS 管理器 去哪里了 如果你在win10找不到 internet信息服务 IIS 管理器 不要着急 在这里跟大家分享下具
  • shell脚本基础知识-shell中的特殊符号

    1 代表零个或多个字符或数字 test后面可以没有任何字符 也可以有多个字符 总之有或没有都能匹配出来 2 只代表一个任意的字符 不管是数字还是字母 只要是一个都能匹配出来 3 这个符号在linux中表示注释说明的意思 即 后面的内容lin
  • pip安装更换镜像

    原文链接 使用pip来安装python包有时候安装起来会非常慢 因此需要换成国内的源来加速下载 1 使用命令 以Torch为例 pip install i https pypi tuna tsinghua edu cn simple tor
  • DNS 解析顺序是怎样的?

    1 DNS 解析过程 当客户端对域名发起访问时 会将解析请求发送给递归解析服务器 递归服务器会代替客户端进行全球递归查询 首先递归服务器会请求根域名服务器 根域名服务器根据域名后缀 告知对应的顶级域名服务器 递归服务器再向顶级服务器发起请求
  • Silence - 专注于阅读的博客园主题

    最近花了点心思整理了下我的博客园主题代码 今天正式和大家分享一下 感兴趣的园友可以了解一下 主题介绍 Silence 追求大道至简的终极真理 旨在打造一个干净 专注阅读的博客主题 没有二维空间元素 不存在花里胡哨 简单概括其几个主要特点 专