7C00.ME/houmu 2014-07-28

博客相关

看了下目前的文章里面太多和博客有关,现在合并一下。


博客更新计划

2014-07-13

这两天对博客进行了一部分更新,主要是以下两方面:

最新文章列表自动生成(latest14.md)。实现思路是通过JSONP访问Github API获得文章列表,并生成相应的html插入正文中。这个思路是从Hooloo获得的。

样式调整。使用Kube代替了Bootstrap,前者比后者更加轻量,后者的大部分代码对这个博客项目而言是用不上的。其他样式细节调整。

接下来,将对博客进行以下几方面的更新:


设置博客字体

2014-06-19

博客采用Bootstrap作为基本样式,省去了自己设计的功夫,但是Bootstrap的字体font-family或许没有考虑过中文字体(也可能没考虑其他非英文字体),默认字体的字体效果比较差(指的是Chrome下的,在IE11上表现尚可)。

查了些资料,增加了下面的样式:

body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 {
  font-family:  Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif
}

直接使用了一淘ux网页的部分代码。增加了h1到h6,原因见这里ref


博客更新计划

2014-05-28


博客更新

2014-05-25

今天对博客程序进行了更新。主要分为两部分工作。

首先是渲染逻辑部分的调整。原程序在这一部分的代码我感觉不clean。原程序要做的是对markdown经marked生成的html进行后处理,包括:去除p中多于的换行符,改写a的href(如markdown的about.md改写成对应的?about),改写src属性(同href类似)。原程序的做法是用jquery查找和处理,具体的处理代码我也没完全看明白,可能是某些问题我还没遇到过。这种做法有点hacking,却不clean。

在一些框架编程中常有钩子、注入、回调等机制来实现用户自定义处理。比如Python的SGMLParser通过end_a来对a标签进行特殊处理。查了下marked,支持对Renderer进行定制。很好!不过感觉用起来不太方便。比如rndr.link = funcRef,定制了link标签的处理函数,却也覆盖了原来的link函数。所以我在做的时候也采取了不clean的方式,也没有实现原代码全部的功能。不过却是向clean前进了一点点。代码见Github

第二是重写了程序的逻辑,应用的主要逻辑代码文件改为“deferred.js”,这个文件以后可能还会改名字。做这次重写的主要原由,是在添加多说评论框代码的时候想到了是否能通过类似Android中的onResume的机制来添加代码,从而提高代码可读性。和前面那个渲染逻辑调整有相同之处。原程序用了$.ajax和marked callback两层嵌套,代码看起来也不太美观。于是想到了Promise,然后查到了Deferred。通过Deferred,可以让异步代码写起来更美观一点。但是,如何实现两个有时序依赖的异步操作呢。比如在这个程序里面,第一个异步操作$.get,如果成功的话进行第二个异步操作marked。对此,我还没想到比较好的解决办法。现在的代码只能算是一个折中。对于Promise和Deferred我感觉自己并没有完全理解。现在程序整体逻辑和最初的版本没有本质变化,但是更符合我的习惯。

除此之外,使用localStorage增加了cache。对于页面路由机制也做了调整,使用#!/post/about形式代替了?about形式,参考的是hooloo的做法,这样或许对搜索引擎更友好。


这个博客

2014-05-24

这个博客是用silence搭建的。在博客园上的个人博客被自己荒废太久以后,我一直在考虑换一个博客。其中的原由和过去一段时间做的无用功以后整理一下。

今天下午想到了在Github上架博客。用Github搭建博客算不上是新鲜事,网上也有不少相关的开源程序。不过像silence这样的程序算是比较另类。其他程序一般是提前生成好全部文章的静态HTML文件。而silence类的程序则是一个SPA程序,实际的HTML文件只有一个,文章由javascript解析url后动态地加载(一般是通过ajax请求一个markdown文件)和渲染。

最早知道的这种类型的程序是hooloo。在某些方面,hooloo做得比silence好,比如通过jsonp调用Github API获得文章列表来渲染文章列表,是一个很巧妙的做法。相比之下,silence等程序还是需要手工编辑文章列表。hooloo的UI设计也非常漂亮。不过,在我看来silence的优势是代码可读性非常好,这也是我选择它而非hooloo的主要原因。当然,不可否认silence代码量少是另一个原因。不论是hooloo,还是silence,对我而言都不是完美的,需要以后进行修改,相比之下,silence改起来会轻松很多。

现在博客看起来还比较简陋,稍后会导入一批文章,增加评论框。如果有机会,考虑增加类似hooloo那样的文章列表自动渲染功能。