Geekly Articles each Day

DisqusからGithubのコメントへの移行

しばらくの間、ブログからコメントを削除したかった。 主にコメントがほとんどないため、余分なDisqusの 「ブレーキ」をいじりたいとは思わないからです。 Disqusの起動時間を見て、サイトのユーザーが自分のせいで我慢しなければならないことにショックを受けました（ Privacy BadgerやuBlock Originなどのブロッカーを使用している人を除きます）。

この記事はHugo向けに書かれていますが、コードはどのサイトにも簡単に適応できます。

Disqusの何が問題になっていますか？


Disqusが有効な場合の典型的なクエリログは次のとおりです。


しかし、Disqusを無効にした後のログ。


何！？

ここで重要な点は次のとおりです。


ネットワーク要求の中には、次のものがあります。

これらのサイトの多くはuBlock Originでブロックされているためアクセスできません。そのため、Googleの検索結果とサードパーティのサイトから情報を収集する必要がありました。 言うまでもなく、無料の製品があなたを製品に変える方法を見るのはむしろうんざりします。 目的と目的、あなたの行動を監視する理由を隠そうとするサービスは、さらに多くの恐怖を引き起こします。

いずれにしても、削除してください。 これらのネットワークでサイトを汚染してしまったことを皆に謝ります。 最高のものに移りましょう。

コメントにGithubを使用する


Disqusの削除について議論し、 @ HarryDenholmは、友人がプルリクエストを使用して静的なGithubブログにコメントを実装できたと述べました。 それは素晴らしいアイデアだと思い、外部サイトでHugoにこのようなことができるかどうかを調べることにしました。

答えはGithub Issue APIに含まれています 。 プロセスは非常に簡単で、 このブログ投稿で既に機能しています：

  1. 公開された各投稿について、GithubのリポジトリでIssueを開きます。 たとえば、この投稿については、 こちらで公開されています 。
  2. すべてのコメントはGithubに直接投稿されます。
  3. この課題のコメントのJSON記述を読み取り、それらを表示するJavascriptコードをサイトに追加します。

このアプローチの利点はすぐに得られます。


Github JSONデータを読み取るためにAPIキーは必要ありません。 それらは完全にアクセス可能です。 この投稿に対するコメントは、 ここで JSONとして読むことができます 。 最初のコメントは次のようになります。

{ "url": "https://api.github.com/repos/dwilliamson/donw.io/issues/comments/295004846", "html_url": "https://github.com/dwilliamson/donw.io/issues/1#issuecomment-295004846", "issue_url": "https://api.github.com/repos/dwilliamson/donw.io/issues/1", "id": 295004846, "user": { "login": "dwilliamson", "id": 1532903, "avatar_url": "https://avatars3.githubusercontent.com/u/1532903?v=3", "gravatar_id": "", "url": "https://api.github.com/users/dwilliamson", "html_url": "https://github.com/dwilliamson", "followers_url": "https://api.github.com/users/dwilliamson/followers", "following_url": "https://api.github.com/users/dwilliamson/following{/other_user}", "gists_url": "https://api.github.com/users/dwilliamson/gists{/gist_id}", "starred_url": "https://api.github.com/users/dwilliamson/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/dwilliamson/subscriptions", "organizations_url": "https://api.github.com/users/dwilliamson/orgs", "repos_url": "https://api.github.com/users/dwilliamson/repos", "events_url": "https://api.github.com/users/dwilliamson/events{/privacy}", "received_events_url": "https://api.github.com/users/dwilliamson/received_events", "type": "User", "site_admin": false }, "created_at": "2017-04-18T22:39:16Z", "updated_at": "2017-04-18T22:39:16Z", "body": "This is a comment" },

最初のステップは、テンプレートの一部を使用してディレクトリに新しいテンプレートを追加することです。 Github comments.html （ comments.html ）を読み取って表示します。 私が使用したコードは次のとおりです。

 var url = "https://github.com/dwilliamson/donw.io/issues/" + {{ $.Params.ghcommentid }} var api_url = "https://api.github.com/repos/dwilliamson/donw.io/issues/" + {{ $.Params.ghcommentid }} + "/comments" $(document).ready(function () { $.ajax(api_url, { headers: {Accept: "application/vnd.github.v3.html+json"}, dataType: "json", success: function(comments) { $("#gh-comments-list").append("Visit the <b><a href='" + url + "'>Github Issue</a></b> to comment on this post"); $.each(comments, function(i, comment) { var date = new Date(comment.created_at); var t = "<div id='gh-comment'>"; t += "<img src='" + comment.user.avatar_url + "' width='24px'>"; t += "<b><a href='" + comment.user.html_url + "'>" + comment.user.login + "</a></b>"; t += " posted at "; t += "<em>" + date.toUTCString() + "</em>"; t += "<div id='gh-comment-hr'></div>"; t += comment.body_html; t += "</div>"; $("#gh-comments-list").append(t); }); }, error: function() { $("#gh-comments-list").append("Comments are not open for this post yet."); } }); });

投稿ページから呼び出すことができます：

 {{ partial "comments.html" . }}

テンプレートによって参照される変数は、htmlページのヘッダーに追加する必要があります。 この場合、これは唯一のghcommentid変数であり、コメントに使用されるIssue番号を設定します。

まとめ


これ以上追加するものはありません。 技術的には、通常、投稿をGithubの問題として投稿し、ブログエンジンを忘れることができます。 しかし、これはシステムの誤用のようです。

このWebサイトは、Githubでdwilliamson / donw.ioとして運営されています。 Githubをコメントエンジンとして使用するための完全なコードがあります。

Source: https://habr.com/ru/post/J327424/

More articles:


All Articles