博客的样式已经近2年没有动过了, 最近老看到用这个主题的, 还是决定改一下博客的样式, 就邀请了设计师朋友帮忙进行了新一波博客改版.

补坑

看了2年前的文章, 其实中间博客有许多改动的并没有记下来, 也许是懒也许是忙. 为了让博客装饰这个标签完整, 补一下我还记得的对博客的修改.

博客目录

上篇博客只写了用jquery获取h标签的内容来产生博客标题, 然后产生目录并append到侧边栏上. 很明显现在的目录已经不是这样了.

这里是代码链接, 现在的思路是:

  1. 在滚动目录滚动的时候增加一个操作: 根据上次滚动来判断当前滚动是向上还是向下, 向下滚展现目录, 向上滚并且离顶端较近的时候隐藏目录(因为离顶端较远的地方是空白, 离顶端近的地方有一些widget).
  2. 在目录过长的时候对目录进行缩放(缩).
  3. 使用throttle来节流事件.

https

博客是托管在github page上的, github page本身做好了https, 但是要自己的域名就不支持啦, 所以选择了cloudflare来弄https. 方法也是非常简单, 把域名的dns改到cloudflare上, 把各个配置填到cloudflare上, 他就帮你把事情都做了. (这个做法使人感到很强的不安全感, 好不好暂不讨论). 并且防止了国家管制. (因为没交保护费, 博客备案已被注销, 有点点生气).

评论

博客的评论由多说改成了畅言, 原因是多说倒闭了. (倒闭的原因同dota). 当时觉得畅言的卖点是敲图章, 现在出现一个巨大的问题: 不登陆不给评论, 而且用户体验极极差, 输入好评论再提示, 并且没有保存未发出的评论, 辣鸡, 有空把畅言换了.

另外, 最近评论也换成畅言, 并修改了一些样式, 并且鼠标悬浮头像会转动.

本次博客改动总览

先来列举一下本次博客改动的内容, 再来做细节的总结.

  • 整体布局改动: 把头部抽离container, 侧边栏与正文左右交换.
  • 所有ui细节重写. 包含小屏页面ui.
  • 去除widget: 搜索, 分类, 最近文章.
  • 把分类作为tab添加在右边区域.
  • 优化文章目录的手感.
  • 调整博客持续集成, 使用token来替代ssh key.

那么下面来写一些在实现过程中学到的粗浅的技术和感悟.

Jade模板

jade的新名字是pug, 是一个node的html模板. 好像是因为jade这个名字早就被注册掉了. 一开始不太习惯, 其实用了还好. 简而言之, jade用缩进来表现html结构, 去除了尖括号, 并提供了一些遍历和继承的语法. 可能ejs更让人舒服, 总的来说他们一类东西, 只是jade上手难一些(其实根本不难, 只是看起来不习惯).

这里是代码链接, 下面说一下jade相关的功能实现.

应用结构

在主题的layout目录下都是模板文件. 首页对应的就是index.jade. 下面一边流水一边介绍几个关键词.

index.jade开头就extendbase.jade. 到base.jade里看, 内容是最基础的html结构, doctype, html, body, script等这些. 另外一个关键词block. base.jade中的block部分由index.jade中的block部分替换.

另外一个语法include, 引入一些widget和partial, 效果就是引入的文件替代当前的include语句.

业务逻辑语法

说两个语法和对应的场景:

循环: 斜杠加for

1
2
3
- for (var i in theme.cats)
.pure-u-1-4.pure-u-md-1-4.nav-wrap
// ...

这样可以遍历一个数组, 产生对应的元素, 不要忘记缩进, 失去缩进就会把内容写到循环外面.

判断: if, 不需要括号

1
2
3
4
if is_category()
.post
else
.archive

如果满足条件就显示下面的, if-else 同样要注意缩进.

hexo环境变量

接上, 循环也好, 判断也好, 循环什么, 判断什么. hexo把文章的内容, 当前的页面, 当前的页数等好多好多变量都作为了页面的环境变量, 可以在编译模板的时候被jade取到.

这里有页面信息, is_home()判断是否在主页, is_archive()判断是否在归档页面等.

这里是环境变量, 文章的内容, 分类标签, 分页. 变量分作用域. 在不同地方可以取到的变量不同. (细想这是当然, 文章内容, 分页信息等都是对象相关的). 这些变量在jade变量里直接用就行了. (就类似在js代码里直接使用挂载在window下的变量).

响应式布局

本博客的响应式布局只是简单的对768屏幕做了media query. 头部在手机端做了较大的变化, 身体部分在手机端把侧边栏直接去除了.

没什么特别的, 这有一些些css哲学. 好的布局在css加载失败的时候也很好看, 好的css能突出重点渲染ui.

做媒体查询麻烦的地方是约等于设计/实现双倍的页面.(如果设计差别大的话).

目录手感修改

之前博客的目录一直有一个时有时无的问题, 页面滑到顶端的时候有时候目录不会消失, 这次改版仔细分析了原理, 原来是我的throttle简单实现有问题.

先来简述一下debounce和throttle. 这两个都是节流的方法, 他们都有一个timeout属性.

我第一次接触到debounce是输入框提示, 在输入框中输入了一些字母会进行网络请求来获得可能结果并展示, 所以在输入过程中不断查询是错的, 要等用户输入停止一段时间再进行动作.

思路是每次触发动作就设置一个定时, 定时到了就执行, 如果在执行前再次触发, 就重新定时.

throttle的场景是页面滚动, 会非常频繁触发滚动时间, 所以做法是: 执行一次以后进行定时, 在定时内再次触发就阻止执行.

于是我找到了我的问题, throttle只做了阻止触发, 没有在定时后把本改执行的动作继续执行.

想到spy可能做了这些工作, 所以暂时把throttle去除了, 也没有出现卡顿, 那么暂时解决了问题.

持续集成

之前用了ssh key来为ci提供身份验证, 但是好像会在会话关闭时过时, 于是去github上拿了一个api的token, 放到了travis ci上, 于是现在可以成功集成发布啦.