使用github issues搭建博客+评论系统 时遇到的一些问题

前言

之前想用github创建个人博客，于是就网上搜索了一下教程，然后找到使用github pages + issues + api建立个人博客这篇教程，感觉比较详细，于是就照着弄了。不过那篇教程的项目是用Angula搭建的，而我对Angular不太熟悉，于是就用vue搭建项目了，这篇文章用来记录我在搭建过程中遇到的一些问题和采取的一些解决方案。
个人博客：https://pma934.github.io
项目源码：https://github.com/pma934/vue-blog

一、路由找不到页面

vue项目的路由模式不要设置mode:'history'，在开发环境(npm run serve)中，不论是否设置了mode:'history'，都能正确的导航的相应页面，只是导航的url一个带#一个不带#。
未设置 mode:'history'

设置 mode:'history'

但是，在打包后(npm run build)，如果你设置了 mode:'history'会导致路由找不到资源(404)。因为mode:'history'需要配合后台设置，不然访问的就是具体的某个html页面，而vue打包出来的项目只有一个index页面，访问其他页面自然是404咯。
实际上vue默认是通过hash 来模拟一个完整的 URL，就像上面的http://localhost:8080/#/blog，其中#/blog实际上的是window.location.hash的值

二、获取博客列表和博客内容

因为是使用issues作为博客的后台数据库，所以获取博客数据时需要使用github issues api，获取博客列表可以使用api.github.com/repos/:user/:repo/issues并携带state，labels等参数进行过滤。
比如我获取博客列表的api link就是这样https://api.github.com/repos/pma934/pma934.github.io/issues?labels=blog&state=open&per_page=5&page=1
在获取到博客列表的同时，你还可以通过其中body键值获取到博客的内容

三、渲染markdown

获取到的博客内容是纯string类型的markdown文档，需要使用工具将其渲染为html DOM。
方案一 可以使用github自带的markdown api，即将内容通过post方法发送到https://api.github.com/markdown。需要注意的是记得设置mode:gfm不然<p></p>标签里不会产生<br>标签，文章换行不能正常显示。

方案二 也可以通过marked插件实现。
需要先通过 npm install marked --save 安装依赖
然后在vue组件中引入import marked from 'marked'
并对其进行配置，配置选项可参考marked选项，也可以就像我这样配置。

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: true,
  });

最后通过marked()函数即可将markdown内容渲染为DOM。

渲染后的DOM内容可以通过v-html绑定来显示到页面。

<div class="markdown-body task-list-item" v-html="blogContent"></div>

markdown css在这。

四、评论系统

https://api.github.com/repos/:owner/:repo/issues/:number/comments这个api可以实现创建一条评论,但是需要access_token值。
因此要实现评论系统，可以参考github Authorizing OAuth Apps

你首先需要创建一个New OAuth App

Homepage URL填写你index页面的url，Authorization callback URL则填你登录后想跳转到的url，我这里都填的我的个人主页https://pma934.github.io

创建之后就会获得Client ID和Client Secret。

然后你可以在你的个人主页，通过重定向到https://github.com/login/oauth/authorize?client_id=ca59308e4fb0e9315900&scope=public_repo,user页面来实现授权登录

确认授权后会重定向到你在Authorization callback URL中设置的url，并且携带一个code值，类似https://pma934.github.io/?code=01d3513c33339ff3f041。其中的01d3513c33339ff3f041就是下面这个api要发送的code值。Client ID和Client Secret在前面也有了。这样就可以通过post https://github.com/login/oauth/access_token来获得access_token了

不过这里有个问题，直接post https://github.com/login/oauth/access_token 会出现跨域问题，因此可以使用cors-anywhere这个项目进行代理。
即直接gethttps://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token?client_id=xxx&client_secret=xxx&code=xxx

获取到access_token后就可以通过posthttps://api.github.com/repos/:owner/:repo/issues/:number/comments来评论了。