Skip to content

Latest commit

 

History

History
156 lines (78 loc) · 6.21 KB

silence主题笔记.md

File metadata and controls

156 lines (78 loc) · 6.21 KB

前言

silence版本 v2.0.2

布署日期:2020-5-6

操作系统:windows 10 x64 专业版 1909

依赖库:nodejs x64 v12.16.3

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

文档地址:由于官方repo中的文档是基于官方的最新版本,我使用的是特定版本,我博客使用版本的文档见当前repo目录: cnblogs\cnblogs-theme-silence\docs

我的修改

silence.less中搜索esofar,可以把github,微信,支付宝等logo建议替换成自己blog中的url,当然短期内也可以不替换。

silence.js中 无需替换

建议先备份目前自己博客中的脚本和样式,然后对照进行修改

到目前(2020-10-13)为止,还没有对主题进行修改,不建议直接修改源代码,建议通过扩展的方式进行修改。

自定义导航条

修改silence-navbar.js,然后在博客园后台 - 设置 - 侧边栏公告

后续维护和布署

需要安装nodejs的环境

第一次需要执行:npm install

修改src目录下脚本和样式,不要改dist目录下的,它是通过工具生成的

npm run build

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

上传silence.min.js到博客园的后台管理中,当然也可以上传到七牛云等地方

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

在「控件显示设置」中需要勾选的博客园官方功能模块如下几个:

  • 必须要勾选:公告、我的标签、随笔分类、阅读排行榜、推荐排行榜
  • 自定义勾选:博客园链接、首页链接、RSS订阅、联系

注意事项和设置项

不建议在原主题的基础上直接修改代码,建议新建一个自己的主题样式文件扩充。

博客名字不支持很长字符,所以对``博客名字做了修改: qingqing.zhao’blog ——> Qing's Blog

不支持子标题

在管理 - 选项 设置 首页与RSS的列表数 数量为10,如果数量太多则出现首页很长

在管理 - 选项 勾选 首页仅列出标题与摘要

default.min.csss 不支持放在 页首HTML代码 处,需要粘贴到 页面定制CSS代码

在后台设置中勾选了日历,统计信息,积分和排名,并未显示出来

博客园后台管理的选项注解

解释每个控件(选项)的作用

打开博客园后台管理 - 选项 中每个复选框的作用解释如下:

新随笔:在导航栏增加一个链接,点击就打开创建新随笔界面

首页联系RSS订阅:同上

分类中的列表数:就是首页中的分类数量,假如你有20个分类,但这边数量设置是10,则首页只看到10个分类

我的标签列表数:会显示在首页的标签,数量越大在首页显示越多

自定义功能

如果您想要自定义某些元素的样式或者是新增交互功能模块需要添加新的样式,那么您应该修改项目./src/themes/*.less样式文件,*.less取决于您选择应用的主题风格,您需要在该文件中编写自定义的样式。在修改之前,建议您先了解 Less 的基础用法。

若您想要将自定义的样式应用到所有主题风格,建议您直接修改项目./src/silence.less公共样式文件,不过在编写样式代码的时候需要考虑各个主题风格的兼容性。

完成您想做的一切后,在终端中执行npm run build命令重新构建项目,该命令会编译、压缩所有风格的样式文件./src/themes/*.less和脚本文件./src/silence.js,并将结果输出至项目./dist发布目录。

最后,参考「部署文档」重新安装主题即可。

主题思路

极简:不包含任何多余的元素,比如github有同学pull其它样式或特技,开发者是拒绝合并的

也正是因为极简,所以此主题所用到的image也是非常少的,而且image是通过二进制,无需上传

github角标是用canvas渲染的

注意一个细节点,某个标签的数量是隐藏状态,作者特意设计的

主题疑问点

默认大小为1024x768吗或者说是为小屏设计的? 当在高清大屏上阅读博客主页的内容大小是一样的

TODO 要修改内容

已处理部分

Q:我的标签-显示更多标签

A:在管理 - 选项 - 我的标签列表数 设置

左侧

    图标更换

    原主题的h1~h4标题的颜色功能添加过来,改成当前主题色

    上滑和下滑功能迁移 scroll top scroll bottom

    未处理部分

    文章评论中对方头像未显示

    在移动端去掉 最右侧的阅读目录 图标(备注:安卓手机上不会显示,Chrome开发者模拟工具中还会显示)

    [优化] 移动端导航栏显示样式改成竖排

    [优化] 移动端正文目录的toc生成

    [新功能]添加回访问统计功能

    [新功能]左侧github图标添加吊坠功能,把知乎,微博,公众号像飘带一样连接

    [新功能]参考 返回主页 码农阿宇 添加博客公告

    Roadmap

    JavaScript 实现类似微博秀的 Github 挂件

    JS网站侧边栏点击伸缩的菜单效果

    版本更新

    日期 版本号 功能说明 备注
    2020-5-6 2.0.2 我使用的初始版本
    2020-10-13 3.0.0 beta2 增加了定制颜色主题,增加日历,搜索框从顶部移到左侧 移动端未适配,我近期三个月不升级