利用github的api显示当前文章的历史记录

利用github放blog也有一段时间了，一直想做一个小功能，就是展示某个文章的历史纪录，简单来说就是git log 某个文章

两种思路

  • 写一个jekyll的插件
  • js利用github的api

思路1

由于github上的jekyll生成网站时是不允许使用的自定义插件的，这个思路暂时忽略。事实上，可以在本地生成静态网站，然后上传到github上，直接使用gh-pages分支来展示，因为不太想重新建一个repo，这个思路暂时忽略吧。

思路2

利用github的commits api，比如一个文章的commits可以用下面的请求获取, 指定path参数就可以获取特定文件的提交纪录。

$.getJSON('https://api.github.com/repos/jserme/jserme.github.io/commits?path=_posts%2F2013-07-29-lion%E4%B8%8B%E7%9A%84safari6%E5%AF%B9%E7%BA%AF%E6%95%B0%E5%AD%97%E4%BD%BF%E7%94%A8toString%E6%8A%A5%E9%94%99.md',function(data){console.log(data)})

返回的数据格式是一个数组，在每个文章页面加上下面一个id为history的div，然后通过下面的js渲染出对应html，展示效果见每个文章的下方

// 获取脚本函数
function loadJs (src, callback) {
  var doc = document
  var head = doc.getElementsByTagName('head')[0]
  var script = doc.createElement('script')
  var re = /^(?:loaded|complete|undefined)$/

  script.onreadystatechange = script.onload = script.onerror = function () {
    if (re.test(script.readyState)) {
      callback()
      script.onload = script.onerror = script.onreadystatechange = null
      script = null
    }
  }

  script.src = src
  script.async = true

  head.insertBefore(script, head.firstChild)
}

loadJs('/js/jquery-1.7.2.min.js', function () {
  loadJs('/js/md5.min.js', function () {
    // 取到文章的路径，追加到请求地址上
    // 可以通过{{page.path}}来取到
    var articlePath = '{{page.path}}'
    var api = 'https://api.github.com/repos/jserme/jserme.github.io/commits?path='
    var tmpl = '<div class="article">\
                        <span class="datetime">{date}</span>\
                        <span>\
                            <image src="{src}" title="{author}">\
                            {message}\
                        </span>\
                    </div>'
    var gravstarurl = 'https://1.gravatar.com/avatar/{md5hash}?s=16'
    $.getJSON(api + articlePath, function (data) {
      if (data.length === 0) {
        $('#history').html('暂无历史纪录 :)')
        return false
      }

      var history = ''
      $.each(data, function (i, v) {
        var avatar = gravstarurl.replace('{md5hash}', md5(v.commit.author.email))
        history += tmpl.replace('{src}', avatar)
          .replace('{date}', v.commit.author.date.replace(/T.*Z/, ''))
          .replace('{message}', v.commit.message)
      })

      $('#history').html(history)
    })
  })
})

详细的文件可以查看这里

推荐文章