Loading...

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

本文于2020年09月18日重新编辑。

介绍

一款专注阅读的博客园主题,主要面向于经常混迹 博客园 的朋友。其追求大道至简的终极真理,界面追求简洁、运行追求高效、部署追求简单。

特性

  • 💙 简洁优雅、精致漂亮的 UI 设计。
  • 💜 提供多种主题色彩以便适应各类用户的偏好。
  • ❤️ 响应式设计,兼容手机端浏览器。
  • 💚 提供事无巨细的部署文档。
  • 💛 源码结构清晰并且注释完整,方便扩展。

开发

请先确保您正在使用的机器已经安装 Node.jsGit 客户端。

git clone https://github.com/esofar/cnblogs-theme-silence.git   # 克隆源码
cd cnblogs-theme-silence                                        # 进入项目
npm install                                                     # 安装依赖
npm run build                                                   # 重新构建

临时部署文档

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

主题下载

点击 下载 本主题最新版本源码包,下载完毕后,使用解压工具解压并进入解压后目录,其结构大致如下所示:

│  .babelrc                                                   
│  .gitignore                                                 
│  LICENSE                                                    
│  package-lock.json                                          
│  package.json                                               
│  README.md                                                  
│                                                             
├─dist                           // 编译发布目录                                      
│  │  silence.min.js       
│  │  silence.min.css                                   
│                                                                                    
└─src                            // 源码存放目录                              
    │  index.js                                             
    │  index.less                                                                              

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

使用样式

打开./dist/文件夹,选择CSS样式代码文件silence.min.css,使用 Notepad++ 等文本编辑工具打开您选择的主题样式文件,全选所有代码,然后复制。

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

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

上传脚本

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

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

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

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

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

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

说明:主题脚本文件silence.min.js非必须上传到博客园,也可上传到七牛云等对象存储空间,但必须开启 HTTPS 访问。

使用脚本

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

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

<script type="text/javascript">
    $.silence({
        avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
        favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
        customNavs: [
            {
                title: '标签',
                url: 'https://www.cnblogs.com/esofar/tag/'
            },
            {
                title: '归档',
                url: 'https://www.cnblogs.com/esofar/p/'
            },
            {
                title: '导航',
                chilren: [
                    {
                        title: '谷歌',
                        url: 'https://www.google.com/',
                    },
                    {
                        title: '百度',
                        url: 'https://www.baidu.com/',
                    },
                ]
            },
        ],
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            license: '署名-非商业性使用-相同方式共享 4.0 国际',
            link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
            remark: null
        },
        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',
	        target: '_blank'
        }
    });
</script>

配置参数说明表:

模块 属性 说明 类型 默认值
公共模块 avatar 博主头像 String null
favicon 网页标题图标 String null
customNavs 自定义导航 Array null
catalog(博文目录) enable 是否启用 Boolean false
move 是否允许拖拽 Boolean true
index 是否显示索引 Boolean true
level1 一级标题 String h2
level2 二级标题 String h3
level3 三级标题 String h4
signature(博文签名) enable 是否启用 Boolean true
auther 作者名字 String [Cnblogs Nickname]
license 共享许可协议名称 String 署名-非商业性使用-相同方式共享 4.0 国际
link 共享许可协议链接 String https://creativecommons.org/licenses/by-nc-sa/4.0/
remark 其他备注 String null
sponsor(博文赞赏) enable 是否启用 Boolean false
text 标题 String Sponsor
paypal PayPal 收款地址 String null
alipay 支付宝收款二维码 String null
wechat 微信收款二维码 String null
github(GitHub Corners) enable 是否启用 Boolean false
fill 背景填充色 String [Silence Theme Color]
color 章鱼猫颜色 String #fff
link Github 链接 String null
target Github 打开方式 String _self

然后在「页首 HTML 代码」处粘贴如下代码,设置页面加载效果:

    <div class="esa-loader">
        <div class="box">
            <div class="figure"></div>
            <p class="label">Loading...</p>
        </div>
    </div>

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

其他配置

进入『设置』界面,在「标题」文本框中设置博客标题,注意不支持显示「子标题」;在「博客皮肤」处选择博客园官方标准模板 Custom;把「禁用模板默认CSS」复选框需要勾选。最后,点击「保存」按钮保存上述 3 步操作。

进入『选项』界面,在「控件显示设置」中自定义勾选博客园官方控件,主题不支持「Google站内搜索」,其他控件均可按需启用。最后,点击「SAVE」按钮保存操作。

主题部署完成。

posted @ 2018-08-23 08:14  Esofar  阅读(17337)  评论(395编辑  收藏