search

CloudyCity / CloudyCity.github.io

0 stars 0 forks source link

hexo使用github issue存放文章与评论 #16

Open CloudyCity opened 5 years ago

CloudyCity commented 5 years ago

cover: https://i.imgur.com/P2E0Xkw.jpg

Hexo默认文章存放于source分支，没有评论系统，不过都可以通过插件进行扩展。本文介绍如何将hexo的文章与评论存放于Github Issue中（issue内容为博客内容，issue评论为博客评论）。

使用github issue存放文章

这种方案主要优点是可以直接使用GitHub的图床。 注意: 19年10月开始githubusercontent.com域名被墙，需要科学才能看到图片

安装插件

$ npm install hexo-migrator-github-issue --save

新建issue文章

qq 20190214112539

使用GitHub图床非常简单，把图片文件拖到编辑框就行了~

导入文章

$ hexo migrate github-issue 你的Github用户名/你存放hexo的仓库名

例如 qq 20190216110245 然后生成部署即可。

插件扩展

该插件会根据issue的label为文章生成标签，如果要想生成分类和置顶参数，需要做一些修改。

我提了一个PR还没通过，这里直接使用我fork的分支替换。

curl -fsSL https://raw.githubusercontent.com/CloudyCity/hexo-migrator-github-issue/master/index.js > node_modules/hexo-migrator-github-issue/index.js

Xnip2020-01-08_17-46-56

使用github issue存放评论

安装插件

Next主题自带gitment，主文件是/themes/next/source/js/src/gitment.browser.js。

如果是其他主题，需要安装gitment，主文件是/node_modules/gitment/dist/gitment.browser.js。

$ npm install gitment --save

创建授权应用

qq 20190214114441 点击这里创建，名称随意，两个url都填hexo博客的url，创建完成就得到应用ID和密钥。

创建新仓库

在GitHub中创建一个新仓库，其issue将用于存放评论。

配置

在Next主题的配置文件_config.yaml中更改以下配置

gitment:
    enable: true
    githubID: 你的github用户名
    repo: 博客所在仓库
    ClientID: 应用ID
    ClientSecret: 密钥
    lazy: false

修改CORS转发代理

_utils.http.post('https://gh-oauth.imsun.net', {

原作者提供的转发服务目前正常，无需更换

插件修改

此插件原本是使用另一个仓库存放评论，现在的需求是用博客所在仓库的对应文章issue中存放评论，需要修改loadMeta()，让插件使用id获取issue。

这里使用hexo-migrator-github-issue作者Yikunfork的分支，用webpack打包，覆盖gitment主文件。

Next主题可参考本博客的gitment.browser.js

非Next主题可参考我写的替换脚本gitment.sh

主题修改

这里使用的是Next主题，需要修改三个模板文件，将hexo-migrator-github-issue插件获取到的issue-number作为id，供gitment插件中的loadMeta()使用。

  1. \themes\next\layout\_partials\comments\gitment.swig
  2. \themes\next\layout\_script\comments\gitment.swig
  3. \themes\next\layout\_third-party\comments\gitment.swig
{% if theme.gitment.enable %}
     {% set id = page.number %}
     {% set owner = theme.gitment.githubID %}

可以将主题加入版本控制，更换机器后就不需要再操作一遍，不过也会导致gitment的密钥泄漏:(

最后

最终效果参照本文章对应issue

如果大家觉得上面两个插件好用的话可以去给插件的项目点个星支持开发者哦~ hexo-migrator-github-issue gitment

CloudyCity commented 5 years ago

安排上了！

Yikun commented 5 years ago

Cool, 欢迎使用github issue migrator。

之前，我也曾经想gitment提过一个issue [1]，想办法把两者结合起来（在同一个issue下面，内容就是博客内容，评论就是博客评论），但是原作者没有回复。所以，我只是自己维护了一个私有分支。你可以参考下。

[1] https://github.com/imsun/gitment/issues/33 [2] https://github.com/Yikun/gitment/tree/gh-pages

CloudyCity commented 5 years ago

@Yikun 我也看到你之前在gitment提的issue了，感谢你的分享！

CloudyCity commented 5 years ago

@Yikun Hi, 我clone了你的分支，然后用webpack打包，将dist目录覆盖到node_modules/gitment/中，但评论的时候还是另外新建了一个Issue，请问是哪个步骤不对吗？对NodeJs不太熟悉

Yikun commented 5 years ago

@CloudyCity 我看[1]，你的博客页面上，还是引的gitment旧链接，这个也需要fix。可以参考下[2]的修改。

[1] https://github.com/CloudyCity/CloudyCity.github.io/blob/master/index.html#L943 [2] https://github.com/Yikun/gitment/commit/bb24c87a46fcfe46c79ffcba14fcce1f8ad070df

CloudyCity commented 5 years ago

@Yikun 谢谢回复，现在已经修复了引用，还想请问如何在主题模板的gitment.swig中获取文章Front-matter中的issue-number？

{% if theme.gitment.enable %}
     {% set id = '' %}
     {% set owner = theme.gitment.githubID %}
     {% set repo = theme.gitment.repo %}
     {% set cid = theme.gitment.ClientID %}
     {% set cs = theme.gitment.ClientSecret %}
     <link rel="stylesheet" href="https://www.wenjunjiang.win/css/gitment.css">
     <script type="text/javascript" src="{{ url_for(theme.js) }}/src/gitment.js"></script>
     {% if not theme.gitment.lazy %}
         <script type="text/javascript">
             var gitment = new Gitment({
                 id: '{{id}}', 
                 owner: '{{owner}}',
                 repo: '{{repo}}',
                 oauth: {
                     client_id: '{{cid}}',
                     client_secret: '{{cs}}'
                 }});
             gitment.render('gitment-container');
         </script>
     {% else %}
         <script type="text/javascript">
             function ShowGitment(){
                 document.getElementById("gitment-display-button").style.display = "none";
                 document.getElementById("gitment-container").style.display = "block";
                 var gitment = new Gitment({
                     id: '{{id}}', 
                     owner: '{{owner}}',
                     repo: '{{repo}}',
                     oauth: {
                         client_id: '{{cid}}',
                         client_secret: '{{cs}}',
                     }});
                 gitment.render('gitment-container');
             }
         </script>
     {% endif %}
 {% endif %}
Yikun commented 5 years ago

任何一篇通过hexo-github-issue-migrator导出的文章都会在生成的过程[0]中，加上number的标签，比如[1]的number为3。

然后，通过post.number引就行了，就像使用post.title[3]一样。我的那个代码貌似没上传，还是搞不定的话，有空我update下吧。

[0] https://github.com/Yikun/hexo-migrator-github-issue/blob/master/index.js#L44 [1] https://raw.githubusercontent.com/Yikun/yikun.github.com/hexo/source/_posts/%E6%90%AD%E5%BB%BAGit%E6%9C%8D%E5%8A%A1%E5%99%A8.md [3] https://github.com/Yikun/hexo-theme-yilia/blob/master/layout/_partial/article.ejs#L77

CloudyCity commented 5 years ago

@Yikun 我用的是Next主题，但在模板[0][1][2]中使用post.number没获取成功，见[3]。请问是不是需要include某些文件才能使用post对象？ qq 20190220141350

[0] https://github.com/CloudyCity/CloudyCity.github.io/blob/source/themes/next/layout/_partials/comments/gitment.swig#L2

[1] https://github.com/CloudyCity/CloudyCity.github.io/blob/source/themes/next/layout/_scripts/comments/gitment.swig#L2

[2] https://github.com/CloudyCity/CloudyCity.github.io/blob/source/themes/next/layout/_third-party/comments/gitment.swig#L2

[3] https://github.com/CloudyCity/CloudyCity.github.io/blob/master/p/9414.html#L517

Yikun commented 5 years ago

post改成page试下？

CloudyCity commented 5 years ago

@Yikun 改成page.number可以了！谢谢~

Yikun commented 5 years ago

Great, enjoy it.