博客的样式已经近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.pug. 下面一边流水一边介绍几个关键词.

index.pug开头就**extend了base.pug. 到base.pug里看, 内容是最基础的html结构, doctype, html, body, script等这些. 另外一个关键词block**. base.pug中的block部分由index.pug中的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上, 于是现在可以成功集成发布啦.