雁起平沙的网络日志

数量金融与R

用jekyll生成json

| Comments

本文主要讨论如何用jekyll模板生成json,并以此整合在github上托管的不同网站的数据。

从去年年底接触github和jekyll到现在已经折腾五个月了,从最初用github托管纯静态网站,到现在依照别人的网站构架修改成自己喜欢的样子,这个过程也是个不断学习的过程。

我在github上有三个网站,一个是主页,一个技术博客,最后一个是文艺博客。现在有个问题是,这三个网站对应的是github上三个不同的代码库,如果我要在主页上列出另两个网站的文章列表,不能用jekyll提供的函数来做到,jekyll只能操作一个代码库的文本,不能跨代码库。我之前用的一个方法是用feedsky提供的发布脚本,效果请看http://inwake.com/ypchen/json-demo。这样的缺点是很显然的,一是加载速度慢,二是我们没办法控制列表的格式和样式。有没有更直接的解决方法呢?

我看到在很多jekyll的博客里,都能自动生成rss.xml和atom.xml,其实说白了,只要是本文文件,jekyll都能用模板操作。后来我听说了json,听说可以用jquery调用json,既然jekyll可以操作本文,那么可不可以用jekyll来生成我们规定格式的json文件呢?例如在技术博客文艺博客各生成一个包含文章信息的json文件,再用jquery或ajax来调用。这里面涉及到一个是否跨域的问题,一开始我只能确定主页技术博客是同域的,可我忘了文艺博客的真正地址是http://yanping.github.com/art,或者说是http://chen.yanping.me/arthttp://art.yanping.me/只不过是我后来给它绑定的域名,还特定用了javascript来限定了只能用这个域名访问,因为用前两个地址访问都显示不正常(关于这点,请看这里)。所以说,只要是在同一个github账户下建立的网站,它们就是同域的。

生成json

例如我在网站代码库里建立这样的json文件模板:

recent.json (recent.json) download
1
2
3
4
5
6
7
8
9
10
11
12
---
layout: nil
---

[{% for post in site.posts limit:5 %}
    {
        "title":"{{post.title}}",
        "url":"{{site.url}}{{post.url}}",
        "date":"{{post.date|date_to_string}}"
    }{% if forloop.last == false %},{% endif %}
{% endfor %}
]

在使用原生的jekyll时没有问题,但是在使用octopress时就出现了问题:octopress自动把英文的双引号"变成了“”,经过浏览器的解释对应的是“和”。有人提出在双引号前加\,在网页里的确是显示的原来的引号,但是一看代码,还是字符引用。

昨晚想了很久,网上找资料也没找到,没办法,只好去看octopress里的代码。我可是ruby小白啊,一点都不懂,连猜带蒙终于搞定了。其实最简单粗暴的办法就是把octopress目录下/plugins/octopress_filters.rb里的第19行行首加#注释掉:

1
#		RubyPants.new(input).to_html

RubyPants这个插件就是替换引号的元凶,你可以打开它卡看看里面的注释。

经过上面的处理后,octopress也可以正常输出json文件了,请看

recent.json (recent.json) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
[
    {
        "title":"关于Github Pages 视频教程",
        "url":"http://yanping.me/cn/blog/2013/08/12/about-github-pages-step-by-step-video/",
        "date":"12 Aug 2013"
    },

    {
        "title":"Github Pages 视频教程(1)",
        "url":"http://yanping.me/cn/blog/2013/08/11/github-pages-step-by-step-video/",
        "date":"11 Aug 2013"
    },

    {
        "title":"【广告】上海北京两地的R语言培训",
        "url":"http://yanping.me/cn/blog/2013/06/30/xccds-r-training/",
        "date":"30 Jun 2013"
    },

    {
        "title":"【译文】软件工程师如何修炼数据科学",
        "url":"http://yanping.me/cn/blog/2013/05/25/software-engineers-guide-to-getting/",
        "date":"25 May 2013"
    },

    {
        "title":"《R语言编程艺术》即将上市",
        "url":"http://yanping.me/cn/blog/2013/05/15/the-art-of-r-programming-published/",
        "date":"15 May 2013"
    }

]

调用json

可以用ajax或jquery来调用json文件,后者更容易一些,这里给出一个例子,效果见我的主页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="section" id="blog1-posts-list">
  <h1 id="id165">博客</h1>
  <p>
    我现在主要更新的是托管在github上的
    <a href="http://chen.yanping.me/cn" target="_blank">Octopress博客</a>
    ,主要记录自己在学习过程中的心得体会。近期内容:
  </p>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $.getJSON("/cn/recent.json",
    function(data) {
      var content = "<ul class=\"compact recent\">";
      $.each(data,
      function(i, item) {

        content += "<li><span class=\"date\">" + item.date + "</span><a href=\"" + item.url + "\">" + item.title + "</a></li>";

      });

      content += "</ul>";
      $("#blog1-posts-list").append(content);
    });
  });
</script>

别忘了加载jquery脚本,在我主页里是这句:

1
<script src="/files/js/jquery-1.7.1.min.js" type="text/javascript"></script>

Comments