一个博客模版应该包括的内容

目录: 所思所悟 | 标签: Jekyll, 博客模版 | 发表时间: Apr 3, 2015

从去年11月底开始，我下定决心要把自己的Jekyll博客模版改成WordPress Twenty Eleven和Twenty Twelve类似的模式，做了个Freshman21（读作21st），并且在github上公布了出来（这句有点像废话，本博客就是放在github pages的）。并且在jekyllthemes.org做了宣传，三个月下来，有不少Jekyll博客的用户使用了我的模版，并且给我的模版纠正了很多错误的地方，非常感谢这些热心的用户。那么，接下来想总结一下“一个博客模版必备的元素”。

1.基本Html+CSS应该包括的内容

Table of Content
h1,h2,h3,h4,etc.
Blockquotes
Code formatting and highlight
Table
font style : cite and bold
Responsive web design
li style
Open Graph META Tags
Microdata (schema.org)

TOC我在刚做模版时给忘记了，kramdown语法支持TOC，所以这块CSS是后加上的，先前fork本模版的用户要苦逼了m(_ _)m。 Open graph meta tags 和Microdata的信息都是为了Facebook，Twitter，G+这些社交分享功能才加入的，我觉得写个模版，需要遵守的规定越来越多了。

2.基本的页面应该包括的内容(模块)

目录
标签
自我介绍
留言簿
版权声明
订阅RSS
近期文章
博客友链
博客归档

在上面的项目中，除了“博客归档”需要借助plugin其他都可以用html+css+liquid实现，“博客归档”如果不自己写程序，那么在liquid只能实现按年份的“伪归档”，我的博客模版里就是一个“伪归档”。

3.其他附加模块

Back to top滑动按钮
google analytics/百度统计
分享到按钮
站内搜索（推荐google search）
异步加载自动展开
ReadMore 折叠长文章模式

上面所述的模块，设计社交分享，搜索引擎，用户体验，信息统计四个部分。

对于社交分享和统计，如果你的博客是建立在github pages上，请尽量采用国外的社交分享链接和留言系统，我知道这样对于国内读者非常不友好，但是由于GFW温柔注视github的情况时有发生，所以用国内的产品很可能出现各种莫名其妙的问题。如果你的页面是建立在coding.net这样的国内网站上，并且网站面向国内用户，请禁止使用google系列的所有产品，所有google相关功能都有可替换的国内产品（写完这句，想到自己生活在一个大局域网内，还是挺悲伤的T_T）。

站内搜索有两种实现方式，一种是用Jekyll的plugin，在官网上就可以找到，但是这个插件有个弱点，貌似是说文章越多搜索时要缓存的内容越多，搜索速度会变慢。所以，我就采用google site搜索了，国内用户就当作没看见这段话。

用户体验主要想说的是“异步加载自动展开”和“折叠长文章”，前者需要写一些JaveScript，由于我的第一个模版想尽可能的是一个干净的html+css模版，所以我就没研究这个内容，不过文章多了，用这个应该用户体验会好些；后者就是在首页只显示博文的一部分内容，需要阅读全文需要点进页面，这个很好实现，用post.excerpt或者post.summary都可以，条条大路通罗马。我一开始觉得用post.summary自己写summary的方法比较方便，但是后来仔细研究了一下，在模版中采用的是post.excerpt方法（我自己博客中没有用，想看效果出门左转找Freshman21）。

4.还能做些什么

cv
参考文献的css修饰
各种链接的css修饰
在多人博客中区分不同作者
引用博客文章的权限提示，引用格式
数学文章的定理，命题，公里模块的css修饰，炫酷的Q.E.D.

这部分内容只是有想法，没有实现的动力，目前我是一个喜欢极简风格的人。

GFW大法好

目录: 网络观察 | 标签: GitHub, Great Firewall, Baidu, DDOS | 发表时间: Mar 27, 2015

真是什么缺德的事情都能做的出来。今天发现git push + https完全不管用了，查了一下原因，估计是这个事情——百度统计js被劫持用来DDOS Github，V2EX讨论地址（需要翻墙）。2015.04.11更新，后续依旧精彩，中华大加农，国外人家没事写了篇论文出来。 2015.04.25更新，google也写了一篇博客来分析。

然后就立即换成git push+ssh进行操作，可以正常提交。

将https换成ssh的方法是把.git文件夹里的config文件中的url进行替换，具体config文件例子如下

[remote "origin"]
        url = git@github.com:yulijia/freshman21.git 
##之前是url = https://github.com/yulijia/freshman21.git

2015.03.29 update

由于DDOS攻击一直在持续，架设在github.io上的网站从中国境内访问有很多问题，另外这个网站之前用了Baidu 的CDN加速，刚才访问时发现，直接5xx报错，我已经将Baidu的加速撤销。

关掉百度云加速时，首先在系统界面关掉加速，然后再删除网站，切记！否则DNS地址还是百度的

下面这个命令可以在linux终端中用来查看DNS（ Domain Name System）设置情况:

### 关掉前
[@localhost ~]# dig yulijia.net +nostats +nocomments +nocmd

;; global options: +cmd
;yulijia.net.     IN  A
yulijia.net.    15  IN  SOA n3368.ns.yunjiasu.com. dns.yunjiasu.com. 2017926777 10000 2400 604800 3600


### 关掉后
[@localhost ~]# dig yulijia.net +nostats +nocomments +nocmd

;; global options: +cmd
;yulijia.net.     IN  A
yulijia.net.    190 IN  A 192.30.252.153

Jekyll 语法小节

目录: 软件世界 | 标签: Jekyll, 静态博客, YAML, Liquid | 发表时间: Mar 12, 2015

YAML Front Matter
site全局根结点
Data Files
常用语法
参考文章

最近尝试用Jekyll写个小展示网站，发现Jekyll的功能还是很强大的。之前很多不熟悉的语法，现在也都能摸索着用在模版里。本篇总结记录一下我常用的Jekyll基本语法（包括Liquid 语法）。

YAML Front Matter

每写一篇markdown格式的文章，需要在文章的最开始写入一些常规信息变量的取值，具体有:指定模板(layout)，标题(title)，描述(description)，分类(category/categories)， tags，是否发布(published)，以及自定义变量(超级好用)。

---
layout: post
title: title
category: blog
published: true # default true (可以不写这一行)
---

例如，我想在文章里加入天气情况:

---
layout: post
title: title
category: blog
published: true # default true (可以不写这一行)
weather: sunny # 天气
---

然后调用时用{ {post.weather} }即可。

site全局根结点

在全局根结点site中有 site.tags.TAG 和 site.categories.category.CATEGORY 变量，可以列出所有拥有TAG标签或者CATEGORY的文章的列表(这里的变量只能写英文)。另外site.[CONFIGURATION_DATA]使得所有在_config.yml中的数据都能够通过site变量调用。

Data Files

Jekyll 支持从 _data 目录中加载 YAML， JSON，和 CSV 格式的文件数据。

例如创建 _data/user.yml 文件。

- name: Yu Lijia  
  github: yulijia
  nick: Yu

在html里这样写：

<ul>
{% for member in site.data.members %}
  <li>
    <a href="https://github.com/{ { member.github } }">  <!--https://github.com/yulijia-->
    {% assign nick = member.nick %}
    {% assign name = member.name %}
      { { nick} } ( { {name} } )         <!--Yu(Yu Lijia)-->
    </a>
  </li>
{% endfor %}
</ul>

常用语法

字符转义

有时候想输出大括号了，使用 \ 转义即可。

\{ => {

输出变量直接使用两个大括号括起来即可。

注意，本文中所有双大括号之前都加上的了空格，这是为了避免在code中被识别为程序，在正确语法中{ {，} }，{ ％以及％ }之间没有空格。

{ { page.title } }

循环

和平常的解释性语言很像

{ % for post in site.posts % }
    <a href="{ { post.url } }">{ { post.title } }</a>
{ % endfor % }

if判断

注意逻辑“与或”分别是and,or

{ % if user % }
  Hello 
{ % endif % }

# Same as above
{ % if user != null % }
  Hello 
{ % endif % }

{ % if user.name == 'tobi' % }
  Hello tobi
{ % elsif user.name == 'bob' % }
  Hello bob
{ % endif % }

{ % if user.name == 'tobi' or user.name == 'bob' % }
  Hello tobi or bob
{ % endif % }

{ % if user.name == 'bob' and user.age > 45 % }
  Hello old bob
{ % endif % }

{ % if user.name != 'tobi' % }
  Hello non-tobi
{ % endif % }

# Same as above
{ % unless user.name == 'tobi' % }
  Hello non-tobi
{ % endunless % }
# Check for the size of an array
{ % if user.payments == empty % }
   you never paid !
{ % endif % }

{ % if user.payments.size > 0  % }
   you paid !
{ % endif % }

{ % if user.age > 18 % }
   Login here
{ % else % }
   Sorry, you are too young
{ % endif % }

# array = 1,2,3
{ % if array contains 2 % }
   array includes 2
{ % endif % }

# string = 'hello world'
{ % if string contains 'hello' % }
   string includes 'hello'
{ % endif % }

自动生成摘要

  { % for post in site.posts % }
     { { post.url } } { { post.title } }
      { { post.excerpt | remove: 'test' } }
  { % endfor % }

删除指定文本

remove 可以删除变量中的指定内容

{ { post.url | remove: 'http' } }

删除 html 标签

{ { post.excerpt | strip_html } }

代码高亮并且显示行数

{ % highlight ruby linenos % }
\# some ruby code
{ % endhighlight % }

获得数组的大小

{ { array | size } }

赋值

{ % assign index = 1 % }

搜索指定key

# Select all the objects in an array where the key has the given value.
{ { site.members | where:"graduation_year"，"2014" } } 

排序

{ { site.pages | sort: 'title'， 'last' } }

转换成JSON

{ { site.data.projects | jsonify } }

把一个对象变成一个字符串

{ { page.tags | array_to_sentence_string } }

单词的个数

{ { page.content | number_of_words } }

得到数组指定范围的结果集

{ % for post in site.posts limit:20 % }

参考文章

后Google reader时代

目录: 网络观察 | 标签: feedspot, Google Reader, Inoreader | 发表时间: Mar 7, 2015

2013年7月1日 Google公司关闭了Google阅读器（Google Reader）服务，在那之后，我一直徘徊在各种替代品阅读器之间，用过feedly, feedspot, inoreader, Digg Reader, The Old Reader。一开始，觉得哪家都不好，毕竟没法同Google阅读器的舒适的功能相比（包括快捷键），各家的排版布局也乱七八糟，有的简洁没功能，有的繁杂界面点击起来又麻烦。

刚开始觉得feedspot的界面模仿的比较像，功能也相似，所以就留在了这个阅读器里。feedspot基本上每月都给我发邮件，提醒我可以花钱升级到黄金版本，但是将近两年来，我根本那就没用过几次这个阅读器。今日登录想更新新的订阅地址时，发现feedspot的阅读器订阅功能有问题，有些别的阅读器可以订阅的博客链接地址竟然在feedspot上无法订阅。另外feedspot在建立之初就被人说过域名只注册了一年（估计是自动续费型），这也让很多人不敢相信该阅读器可以运营很长时间。所以不愿意花钱购买该产品的高级服务。

基于上面广告问题，以及功能的问题，让我再次陷入了寻找阅读器的持续作战中，每每搜索Google Reader的替代品，知乎和v2ex都会有人评论说用了inoreader的体验最好。我果断又找到了之前的帐号，登录后，感觉界面比我最早用它时变得清爽，功能比较丰富，导入在feedspot无法订阅的订阅源也非常顺利，索性就又搬运了一次所有订阅源，使用inoreader继续阅读网上的好内容。用了几天，根据使用体验，我认为，后Google Reader时代，Inoreader能被称为优秀替代品。

当然这篇文章如果仅仅只是一个浏览器使用评价，就真的没必要写了。我关心的问题是，后Google Reader时代，究竟还有多少人更新自己博客？

我曾经在Google Reader有173个RSS订阅，其中有paper相关的38个永久源，搬家到Inoreader后剔除错误链接，还剩下139个，将近五分之一都完全失效了，一点后续内容都在网上搜索不到。在139个中有一些已经是年鉴级别的博客了，每年总结一篇（包括我自己的博客，也是每年写的少之又少）。由于样本只有我订阅的博客，可能是因为技术类偏多，所以博客迁移比较频繁。相比于传统的WordPress typecho 博客，更多的人选择用Jekyll或者Hexo，另外轻博客的比例也增加了（特指李老师的博客xiaolai.li，我找了半天才发现他跑到tumblr上耍了'_>`）。个人博客如果只是记录自己技术摘抄，很有可能会更新不下去，长期更新的博客基本上都有自己运营的内容。

另外现在大家用移动设备（平板、手机）比较多，对于一些曾经用博客交流的内容，交流方式有了很大变化：博客->微博or轻博客->聊天工具(wechat, etc.)。如果没有很好的阅读器app，谁也不会去读博客这种长篇文章了。

推荐一个可以检测feed完整性的网站feedvalidator。很多订阅源的放到这个上面检测都有小问题。

由于使用的是在线输入法，我的中文水平也不高，文章中会有很多拼音错别字，如果真有人看我写的内容，发现错别字，走过路过请吼一声提醒我一下，谢谢。

采用百度云加速免费来加速站点

目录: 网络观察 | 标签: Baidu, CDN | 发表时间: Dec 28, 2014

No Zuo, No Die

2015.03.29更新

想必github 遭受DDOS攻击，是这个周末（2015.03.27-2015.03.29）码农圈子里的一个热门话题。由于这次攻击采用了Baidu的一段统计js代码，并且我的网站之前就用了Baidu的加速，在此次攻击中CDN缓存都访问不了网站，我撤销了相关加速服务。并且决定不会在github pages上采用任何国内的加速服务。

百度的这个加速服务适合于自己在国外服务器架设网站的用户。

此次百度云加速服务仅仅使用了3个月就宣告终结，不得不承认是大环境的影响，政府对某些方面的限制越来越多了。

博客一直放在github.io上，访问的时候不管使用github.io的链接，还是自己的域名，速度都很慢，没法办谁叫咱生活在一个大局域网里呢。

然后今天的访问速度实在是慢得不可忍了，所以搜索了CDN加速服务，貌似大家现在使用最多的是七牛云加速，但是这个很麻烦，对体验用户（非实名）限制也多。通过搜索，我找到了百度云加速。

特大好消息

之前百度的云加速只允许有备案信息的站点申请使用，也就是网址为yunjiasu.baidu.com的这个，据说是同知道创宇联营，实际从用户角度基本看不到百度的身影，另一个是最近推出的 next.su.baidu.com 不需要备案。

然后现在yunjiasu.baidu.com 也指向 next.su.baidu.com，这个加速服务不需要备案，并且现在是免费试用期。

只要有百度的帐号（应该都有吧，之前的大容量云盘战争还历历在目'_>`），就可以立即使用。

操作也非常的简单，一共三步：

填写需要加速的网站域名，例如：yulijia.net
设置需要加速服务的子域名，由于我只需要网站加速，所以这一步不用配置，直接next
修改NS，百度给出了教程，直接照着修改即可

然后，效果还不错，我激动的半夜发这个日志。

2015.03.08 update

使用了一段时间，速度基本保持稳定，但是有JS解析问题，MathJax的JS有时会出错，公式会变成红色的[Math Processing Error]。免费产品，凑和用了，没准最近直接访问的速度更快。-_-'

On Your Mark

Never give up, Dream big