草依山的Javascript世界

一个Javascript程序猿的学习纪录剩地,不仅仅是JS,还有Linux、Mac、nodeJs、吃、玩!

利用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 () {
    // 取到文章的路径,追加到请求地址上
    // 可以通过_posts/2013-10-06-利用github的api显示当前文章的历史记录.md来取到
    var articlePath = '_posts/2013-10-06-利用github的api显示当前文章的历史记录.md'
    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)
    })
  })
})

详细的文件可以查看这里

文章地址: 利用github的api显示当前文章的历史记录
欢迎关注我的微博与我交流:@草依山
Github上也有一些东西:[Github]
所有文章坚决抵制jb51.net的转载!
标签: github 3
2013-10-06

相关文章

2016-09-29 [翻译]bash的各种文件载入执行顺序
2016-05-31 phantomjs在linux下截图中文字体问题
2016-04-24 Promise的错误处理
2016-02-23 URL里的+
2016-02-11 N个数中第K大的数

文章修改纪录

加载中...
Copyright © 2013. Create By 草依山, Fork