blog 给 github issues 的个人博客定制主题

这里有介绍如何使用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 参数作为依据判断。至于缓存这一块暂时没考虑做，毕竟博客文章不多。

Apr 25 '15 01:04 hanxi

按教程照做两遍，能正确获取 issues 标是，但点进去就是Github的404页面。

这个是博客地址：http://cyio.github.io/blog/ 仓库：https://github.com/cyio/blog

May 29 '15 09:05 cyio

@cyio 应该是你没有自己的域名的原因，你把CNAME文件删掉，然后拷贝404.html文件到你的这个项目下面 https://github.com/cyio/cyio.github.io 试试吧祝您成功。

May 30 '15 01:05 hanxi

我试着把所有文件放到 cyio.github.io 这个仓库下就成功了（用blog仓库不行）。谢谢。

May 30 '15 07:05 cyio

对，404.html依赖其他文件。搞定了就好。

May 30 '15 11:05 hanxi

已弃用404页面

Jul 30 '15 09:07 hanxi

不支持Edge浏览器，下面是控制台的截图

Jul 30 '15 15:07 cyio

建议在HTML中指定IE渲染模式（最高为ie=edge），否则在IE下会默认用IE7渲染（刚测试发现的）。

<meta http-equiv="x-ua-compatible" content="ie=edge">

Jul 30 '15 15:07 cyio

@cyio 谢谢。

Aug 10 '15 01:08 hanxi

菜鸟提问请问怎么在html使用这两个接口返回的数据呢

Mar 19 '21 03:03 huangyt7

菜鸟提问请问怎么在html使用这两个接口返回的数据呢

@huangyt7 是全局函数，直接引入 js 文件，然后写 js 就行。

<html>
    <head>
        <script src="ajax.js"></script>
    </head>

    <script type="text/javascript">
       getJSON(url)
    </script>
</html>

Mar 19 '21 03:03 hanxi

菜鸟提问请问怎么在html使用这两个接口返回的数据呢

@huangyt7 是全局函数，直接引入 js 文件，然后写 js 就行。
<html>
    <head>
        <script src="ajax.js"></script>
    </head>

    <script type="text/javascript">
       getJSON(url)
    </script>
</html>

感谢大神回复，我想使用URL里的数据显示出来，可以直接这样封装吗? getJSON = function(post,url, callback) { var xhr = new window.XMLHttpRequest(); var method = "post"; if (post == null) { method = "get"; } xhr.open(method, "http://shipcloud.gstar-info.com:8000/data/", 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(JSON.stringify(post)); }

Mar 19 '21 03:03 huangyt7

菜鸟提问请问怎么在html使用这两个接口返回的数据呢

@huangyt7 是全局函数，直接引入 js 文件，然后写 js 就行。
<html>
    <head>
        <script src="ajax.js"></script>
    </head>

    <script type="text/javascript">
       getJSON(url)
    </script>
</html>
感谢大神回复，我想使用URL里的数据显示出来，可以直接这样封装吗? getJSON = function(post,url, callback) { var xhr = new window.XMLHttpRequest(); var method = "post"; if (post == null) { method = "get"; } xhr.open(method, "http://shipcloud.gstar-info.com:8000/data/", 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(JSON.stringify(post)); }

在html中这样用可以吗，提示getJSON()不存在

Mar 19 '21 03:03 huangyt7

@cyio <script src="ajax.js"></script> 这行代码不能少，且 ajax.js 文件必须和 html 文件同一个目录。

getJSON("http://shipcloud.gstar-info.com:8000/data/", function (ret) {
console.log(ret)
})

Mar 19 '21 04:03 hanxi

@cyio <script src="ajax.js"></script> 这行代码不能少，且 ajax.js 文件必须和 html 文件同一个目录。
getJSON("http://shipcloud.gstar-info.com:8000/data/", function (ret) {
console.log(ret)
})

超级无敌感谢大神指导麻烦大神再帮我看看代码 js文件： getJSON = function(callback) { var xhr = new window.XMLHttpRequest(); xhr.open("get", "http://shipcloud.gstar-info.com:8000/data/api.Data/getshiplist", 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(); }

html文件

没有标题

<script src="test.js" type="text/javascript">
</script>

Mar 19 '21 04:03 huangyt7

@cyio 你是要把json显示到html？

<title>没有标题</title>
<script src="test.js" type="text/javascript">
</script>
<script type="text/javascript"> 
getJSON(function (ret) { 
    console.log(ret);
     
    var para = document.createElement("P");               // Create a <p> element
    para.innerText = JSON.stringify(ret);               // Insert text
    document.body.appendChild(para);                      // Append <p> to <body>
    }) 
</script>

Mar 19 '21 07:03 hanxi

@cyio 你是要把json显示到html？

<title>没有标题</title>
<script src="test.js" type="text/javascript">
</script>
<script type="text/javascript"> 
getJSON(function (ret) { 
    console.log(ret);
     
    var para = document.createElement("P");               // Create a <p> element
    para.innerText = JSON.stringify(ret);               // Insert text
    document.body.appendChild(para);                      // Append <p> to <body>
    }) 
</script>

是的大神你这样可以显示，我这样为什么提示callback 不是一个函数呢

没有标题

Mar 19 '21 08:03 huangyt7

@cyio 因为 getJSON 的返回值是通过回调函数传递的，不是直接返回给 = 的，你要注意看 getJSON 没有 return 返回值。

<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
getJSON(function (str) {
var ret =JSON.stringify(str); document.write(ret)
}); 
 </script>

或者这样写，你能理解点。

<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
 <script type="text/javascript"> 
function callback(str) {
var ret =JSON.stringify(str); document.write(ret)
}
getJSON(callback); 
 </script>

Mar 19 '21 08:03 hanxi

@cyio 因为 getJSON 的返回值是通过回调函数传递的，不是直接返回给 = 的，你要注意看 getJSON 没有 return 返回值。

<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
getJSON(function (str) {
var ret =JSON.stringify(str); document.write(ret)
}); 
 </script>

或者这样写，你能理解点。

<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
 <script type="text/javascript"> 
function callback(str) {
var ret =JSON.stringify(str); document.write(ret)
}
getJSON(callback); 
 </script>

超级感谢大神，我大概理解了，请问大神我想做一个像你这样的异步获取数据的封装脚本但有返回值，然后在html可以直接像我那样使用返回值应该怎么改呢

Mar 19 '21 09:03 huangyt7

@cyio 因为 getJSON 的返回值是通过回调函数传递的，不是直接返回给 = 的，你要注意看 getJSON 没有 return 返回值。
<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
getJSON(function (str) {
var ret =JSON.stringify(str); document.write(ret)
}); 
 </script>
或者这样写，你能理解点。
<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
 <script type="text/javascript"> 
function callback(str) {
var ret =JSON.stringify(str); document.write(ret)
}
getJSON(callback); 
 </script>
超级感谢大神，我大概理解了，请问大神我想做一个像你这样的异步获取数据的封装脚本但有返回值，然后在html可以直接像我那样使用返回值应该怎么改呢

@huangyt7 这个还真不知道怎么改。不好意思 @cyio 错人了。

Mar 19 '21 09:03 hanxi

@cyio 因为 getJSON 的返回值是通过回调函数传递的，不是直接返回给 = 的，你要注意看 getJSON 没有 return 返回值。
<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
getJSON(function (str) {
var ret =JSON.stringify(str); document.write(ret)
}); 
 </script>
或者这样写，你能理解点。
<title>没有标题</title> <script src="test.js" type="text/javascript"> </script>
 <script type="text/javascript"> 
 <script type="text/javascript"> 
function callback(str) {
var ret =JSON.stringify(str); document.write(ret)
}
getJSON(callback); 
 </script>
超级感谢大神，我大概理解了，请问大神我想做一个像你这样的异步获取数据的封装脚本但有返回值，然后在html可以直接像我那样使用返回值应该怎么改呢
@huangyt7 这个还真不知道怎么改。不好意思 @cyio 错人了。

好滴还是非常感谢大神！！！劳烦您费时间了！

Mar 21 '21 08:03 huangyt7

blog blog copied to clipboard

给 github issues 的个人博客定制主题

添加主页

使用 404.html 页面做路由

关于主题

关于 ajax

如何使用？

已弃用404页面

blog
blog copied to clipboard