# 从GITalk到Github Markdown
![gitalk_index](http://codemaker.oss-cn-shenzhen.aliyuncs.com/blog/images/051ee020aa48413f9cbbbfaefc6a2da2/gitalk_des.png align="left")
> [gitalk](https://github.com/gitalk/gitalk)是一款借助github issue构建的博客评论的插件。它合理的利用应该是：当你在github上开源了一套blog系统，你部署一套自用或者作为demo上线时，可以直接将附属的issue模块作为评论引入你的网站。
### 如何得到自己的gittalk
#### 申请自己的app
到[这个页面](https://github.com/settings/applications/new)去创建自己的app：
> [1.app](http://1.app) name就是仓库的名字，这是issue依附的目标，没有就新建一个。不能乱填否则评论模块调用的时候404。`
` 2.认证回调链接跟网站域名一致就好。
### 整合到目标页面
#### 在目标页面放一个div比如
```html
```
#### 引入样式和脚本
```html
```
#### 脚本配置参数进行渲染
```javascript
const gitalk = new Gitalk({
clientID: '申请的app得到id',
clientSecret: '申请app得到的secret',
repo: 'issue依附的仓库名称',
owner: '仓库所有者名称',
admin: ['与仓库所有者一致'],
id: "当前页面标识，通常为文章id",
distractionFreeMode: false
})
gitalk.render('gitalk-container');
```
*从此解决了我博客重构遗留的评论和留言块没做的问题。*
### 从gitalk到借用github markdown接口
gitalk是支持md语法的，现在到处都是md的身影，清新简洁，我原来用ueditor每次排版校对都花很多时间。那能不能顺手把md用上？
#### markdown编辑器的选择
md选编辑器主要两种，在线免费版和桌面IDE+插件版，可以看看这篇[markdown 编辑器调研](https://github.com/fex-team/dora/blob/master/doc/research.md)参考选择。 [在线版本我推荐Editor.md](http://在线版本我推荐Editor.md)。桌面客户端推荐vs code，都很好用。
#### markdown的解析
markdown要用在自己做的博客里最大的问题不是编辑，而是解析，不能render成html再好也干瞪眼。网友推荐的几个js解析器都不喜欢。 然后我就想到了gitalk支持的md解析和预览都跟官方page极为相似，怎么实现的呢？
network一看，发现了github官方的[markdown api](https://api.github.com/markdown)。用postman发过去，不需要认证直接给text就返回html了。
整合前先做个html模拟可行性：
```html
gitmd test
```
`效果非常nice，那么我只需要用vs code编辑文章，然后利用这个接口github就给我render回来了`。
注意：
> 1.这里我页面渲染这部分render好的html还是沿用了gitalk截取的样式，是与github官方高度相似但并非官方的。gitalk的作者好像说是[这个项目](https://sindresorhus.com/github-markdown-css/)。`
` 2.后面我找到了据说是[Jekyll博客在用](https://primer.style/css/getting-started)的高仿github pages样式的项目。`
` 3.如果是Hexo这种静态博客本身会借用github pages样式，会跟gitalk这小块样式冲突，要处理css优先级。
#### 其他问题
> 1.github的这个转换接口是不支持流程图和公式的，以github的体量，大家用起来也没有太大这方面需求，me too。`
` 2.不过公式的话可以用[这个网址](https://www.codecogs.com/latex/eqneditor.php)去生成转换,然后选svg，在底部框中得到链接原，svg本身就是代码。`
` 3.markdown语法对图片非常不友好，很多网友的用法中都夹杂了html标签，充满了妥协。`
` 4.跟原博客样式冲突的问题，我还的花点时间分隔优先级。`
`