涵曦 ~ 博客

这里有介绍如何使用github issues作为个人博客。

这次是给我的个人博客加件外衣（定制博客的主题），让博客界面更简洁更像一个真正的博客。

最初使用这个 github issues 写一个主页和404页面跳转的时候就用到了使用 ajax 调用 github api。那时候就有想法要实现博客的外衣，只是一只没有空搞。昨天花了一天搞定了。

添加主页

调用接口 GET /repos/:owner/:repo/issues 获取所有的 issues
api 参考 https://developer.github.com/v3/issues/#list-issues-for-a-repository
将结果中的每篇文章的 title 提取出来，显示在 html 中即可

使用 404.html 页面做路由

这个方法是在 Github 的 404 页面是个好路由学到的。
从 url 中取出文章的 id

var id = parseInt(location.pathname.substring(1));

调用接口 GET /repos/:owner/:repo/issues/:number
api 参考 https://developer.github.com/v3/issues/#get-a-single-issue
然后把 title 和 body 显示在页面上
转换 markdown 最初是找的 markdown-it 。但是解析和 github 的 gfm 显示效果不一样
然后找到了 github 的 markdown 转换 api POST /markdown
api 参考 https://developer.github.com/v3/markdown/

关于主题

看到@tankywoo开发的simiki来所用的主题挺简洁的，所以就用上了。

关于 ajax

jQuery 封装了 ajax 和好用的 getJSON，但是感觉这个小东西使用 jQuery 有点杀鸡用牛刀的感觉。
然后自己封装了这两个接口

getJSON = function(url, callback)
{
    var xhr = new window.XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4 && xhr.status==200)
        {
            callback(JSON.parse(xhr.responseText));
        }
    }
    xhr.send();
}

ajax = function(post, url, callback) {
    var xhr = new window.XMLHttpRequest();
    var method = "post";
    if (post == null) {
        method = "get";
    }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4 && xhr.status==200)
        {
            callback(xhr.responseText);
        }
    }
    xhr.send(JSON.stringify(post));
}

如何使用？

https://github.com/hanxi/issues-blog/blob/master/README.md

已弃用404页面

看到这个github-issues-blog
单页面的 issues 博客，我就打算改我这个实现了，一直不想动手是因为我这个还能用。就在昨天，
使用公司的 Wi-Fi 浏览的时候，404 页面竟然跳转到了 hao123 。对于这种情况我不能容忍，于是
今天动手改了，放弃使用 404 页面。全部实现放到 index.html 。使用 url 参数作为依据判断。
至于缓存这一块暂时没考虑做，毕竟博客文章不多。