を使用してジキルブログにコメントシステムを追加- 1/2

この記事はどのように迅速かつ自由に構築し、自分自身をホストする方法を示すシリーズの一部ですJekyll ブログを書くGitHub Pages . このシリーズはまた、直接私たちのコードを使用してコメントシステムを追加するようなより高度なトピックをカバーしますStaticman とプライバシーを使用してまだ無料の分析を使用してUmami .
チュートリアルをいくつかの部分に分けました.

Introduction

Setting Up

Create Content

Customize Display

コメントシステム-パート1

Commenting System - Part 2

Analytics

今私たちのブログを持っている、コメントシステムをいくつかの対話を追加する方法を参照してください.

静的なウェブサイトがダイナミックになることができる方法
ジキルのウェブサイトにコメントシステムを追加するのは、静的サイトジェネレータであり、バックエンドでデータベース内のコメントを保存し、それらを提供することはできません.
この問題を解決するための即時の解決策は、それ自身のデータベースで外部サービスを使用することです.人気のあるものの中でdisqus ジキルでよく使われる.それはあなたのページに読み込まスクリプトとして実装するのは簡単であるという利点がありますが、それはまた、プライバシーの問題を提示し、その無料版で広告を表示します.
githubウェブサイトにダイナミックな内容を加えるもう一つの可能な解決は、使用することですstaticman . 外部データベースを使用して前のソリューションの反対側では、staticmanはあなたのリポジトリ内のファイルを作成し、静的にあなたのウェブサイトを更新します.それは無料でオープンソースですが、disqusとして実装することは簡単ではありません.
良いことは、それがあなたのGITリポジトリ内のすべてのコメントを格納するので、それらを失うリスクはありません.
我々は勇気があるとして、これは我々のウェブサイトの実装を解決することです.

Herokuの上でstaticmanを配備すること
StaticManを使用するには、サーバーに配置する必要があります.このアプリは、私たちのコメントを受信し、リポジトリ内のファイルを作成するプロキシとして使用されます.
私たちはHeroku StaticManインスタンスを配置するには.あなたが1つを持っていない場合は、まずアカウントを作成する必要があります.
したがって、これは行われますstaticman GitHub repository そしてforkします.
あなたのHerokuダッシュボードでNew -> Create new app , あなたのアプリケーションの名前を入力し、ヒットCreate app .
にDeployment method のDeploy タブをクリックGitHub . 接続が完了したらstaticman リポジトリとヒットConnect .

これが完了したら、あなたはManual deploy セクションをクリックDeploy Branch .
これによりアプリケーションが配備されます https://<app-name>.herokuapp.com/ .
エラーが表示されます.私たちがまだそれを構成していないので、それは予想されます.今すぐ面倒を見ましょう.
アプリはあなたのGitHubリポジトリにアクセスできるようにする必要があります.これを行うには、Githubで新しいアプリケーションを作成しますSettings → Developer settings → GitHub Apps .
次の入力でアプリケーションを作成します

ホームページURL :https://staticman.net/

Webhook URL :https://<app-name>.herokuapp.com/v1/webhook

リポジトリのパーミッション/コンテンツ:Access: read and write

リポジトリのパーミッション/プル要求Access: read and write

イベントを購読するPull request

あなたのアプリケーションが作成されるとGeneral → Private keys ヒットGenerate a private key .
最後にInstall App ヒットInstall .
地獄に帰る.今では我々のアプリを設定する時間です.
インSettings -> Config Vars , 次の変数を作成します

GITHUB_APP_ID : GithubアプリのIDはGeneral セクション

GITHUB_PRIVATE_KEY : 我々が生成した秘密鍵

RSA_PRIVATE_KEY : コンテンツを暗号化するために使用する秘密鍵は、GITHUB_PRIVATE_KEY

展開タブに戻り、手動で配備を実行します.
配置が終了すると、今あなたのアプリケーションを訪問するときに歓迎のメッセージを参照してくださいする必要があります.

プロジェクトにstaticmanを追加
我々は今、我々のプロジェクトにstaticmanを追加する必要があります.
まず、私たちはstaticman.yml 次のように設定を定義するファイルです.

# staticman.yml
comments:
  # (*) REQUIRED
  #
  # Names of the fields the form is allowed to submit. If a field that is
  # not here is part of the request, an error will be thrown.
  allowedFields: ["name", "message"]

  # (*) REQUIRED
  #
  # Name of the branch being used. Must match the one sent in the URL of the
  # request.
  branch: "main"

  # Text to use as the commit message or pull request title. Accepts placeholders.
  commitMessage: "Comment from {fields.name} on {options.slug}"

  # (*) REQUIRED
  #
  # Destination path (filename) for the data files. Accepts placeholders.
  filename: "entry{@timestamp}"

  # The format of the generated data files. Accepted values are "json", "yaml"
  # or "frontmatter"
  format: "yaml"

  # List of fields to be populated automatically by Staticman and included in
  # the data file. Keys are the name of the field. The value can be an object
  # with a `type` property, which configures the generated field, or any value
  # to be used directly (e.g. a string, number or array)
  generatedFields:
    date:
      type: date
      options:
        format: "timestamp-seconds"

  # Whether entries need to be approved before they are published to the main
  # branch. If set to `true`, a pull request will be created for your approval.
  # Otherwise, entries will be published to the main branch automatically.
  moderation: false

  # When allowedOrigins is defined, only requests sent from one of the listed domains will be accepted.
  allowedOrigins: ["localhost", "simondosda.github.io"]

  # (*) REQUIRED
  #
  # Destination path (directory) for the data files. Accepts placeholders.
  path: "_data/comments/{options.slug}"

  # Names of required fields. If any of these isn't in the request or is empty,
  # an error will be thrown.
  requiredFields: ["name", "message"]

あなたの名前を変更する必要がありますbranch あなたが展開しているからallowedOrigins ドメイン名を指定したり、セキュリティを必要としない場合は削除してください.
このポストは、どんなユーザーでも入ることができる単純なコメントシステムを構築することに集中しますname とmessage マークダウンで.他のメッセージにも対応できます.
Staticmanは、自動的にスパムをチェックして、電子メール通知を送って、Recaptchaを実装することができます、しかし、我々はここでこれをカバーしません.
に_config ファイルを追加しますapp name , ギタブusername , repo and branch .

# _config.yml
staticman_url: https://<app-name>/v3/entry/github/<username>/<repo>/<branch>/comments

入力フォームの作成
我々は現在、我々の読者が彼らの名前とコメントを書くことができるフォームを構築します.
に_includes フォルダを追加comment-form.html ファイル.

<!-- _includes/comment-form.html -->
<form method="POST" action="{{ site.staticman_url }}" class="comment-form">
  <input
    name="options[redirect]"
    type="hidden"
    value="{{ page.url | absolute_url }}"
  />
  <input name="options[slug]" type="hidden" value="{{ page.slug }}" />

  <textarea
    class="comment-message"
    name="fields[message]"
    placeholder="Comment (markdown accepted)"
    required
  ></textarea>
  <div class="comment-bottom">
    <input
      class="comment-name"
      name="fields[name]"
      type="text"
      placeholder="Name"
      required
    />
    <button class="comment-submit" type="submit">SEND</button>
  </div>
</form>

我々がちょうどしたことは、我々がデータを送るフォームをセットしたことですstaticman_url .
我々の定義でstaticman.yml 設定ファイルは2つのフィールドに基づいています:

name : 送信者の名前.<input name="fields[name]" required>

message : コメントの内容.<textarea name="fields[message]" required></textarea>

また、隠された入力によって定義されたフォームを検証するときに、2つのオプションを提供します.

redirect : 送信先のコールが完了するまでリダイレクトされるURL.ここで我々のページに戻る

slug : 私たちが定義したように、コメントフォルダを作成するのに使用されるページのスラグpath AS"_data/comments/{options.slug}" にstaticman.yml 設定ファイル

コメントの一覧を表示する
我々の倉庫に送られるコメントは、保存されます_data/comments/<slug> ディレクトリ.
ジキルでアクセスする方法は変数site.data.comments[page.slug] .
を作成しましょうcomment-list.html ファイルを_includes フォルダを表示します.

<!-- _includes/comment-list.html -->
{% assign comments = site.data.comments[page.slug] | where_exp: "item", "true" %} 
{% assign sorted_comments = comments | sort: 'date' %} 
{% for comment in sorted_comments %}
<div class="comment">
  <h3>{{comment.name}}</h3>
  <time
    class="post-meta dt-published"
    datetime="{{ page.date | date_to_xmlschema }}"
    itemprop="datePublished"
  >
    {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
    {{ comment.date | date:"%H:%M - %b %-d, %Y, %Y" }}
  </time>
  <p>{{comment.message | strip_html | markdownify }}</p>
</div>
{% endfor %}

我々がここですることは、日付によって分類されるページコメントの上にループすることです.との最初の行where_expression フィルタはコメント値を得るために必要です.
それぞれのコメントについてはname , date and message とstrip_html メッセージを安全にするフィルタmarkdownify マークダウンをレンダリングするフィルタ.

コメントブロックの追加
我々は今、我々は簡単なコメント機能のために必要なすべてを持っている.
別のファイルを追加しましょう_include フォルダ名comments.html それは我々の2つのコメント断片をまとめます:新しいコメントを掲示して、受け取ったコメントを表示してください.

<!-- _includes/comments.html -->
<section class="comments">
  {% if site.data.comments[page.slug] %}
  <div>
    <h2>Comments</h2>
    {% include comment-list.html %}
  </div>
  {% endif %}

  <div>
    <h2>Leave a Comment</h2>
    {% include comment-form.html %}
  </div>
</section>

今我々は更新することができます_layout/post.html 代わりにこれらのコメントを表示するファイルdisqus コメント.

<!-- _layout/post.html -->
...
<div class="post-content e-content" itemprop="articleBody">{{ content }}</div>

{% include comments.html %}

<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
...

スタイルのコメント
我々の真新しい特徴を押す前に、我々のコメントに若干のスタイルを加えましょう.
別の機能として、最良のオプションは、おそらく独自のCSSファイルを作成することです.新しいものを作ろうcomments.scss sassファイルでインポートラインを追加する@import "comments"; インassets/main.scss .

// _sass/comments.scss
.comment {
  padding-top: 10px;
  h3 {
    display: inline;
    color: royalblue;
  }
  p {
    margin: 0;
  }
}

.comment-new {
  margin-top: 25px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  margin-top: 25px;

  .comment-message,
  .comment-name {
    font-size: 16px;
    padding: 15px;
    border: 1px solid #ddd;
    margin: 0;
  }

  .comment-message {
    min-height: 150px;
    resize: none;
  }

  .comment-bottom {
    display: flex;
  }

  .comment-name {
    flex: 1;
  }

  .comment-submit {
    width: 200px;
    border: 1px solid #ddd;
    color: royalblue;
    font-weight: bold;

    &:hover {
      cursor: pointer;
    }
  }
}

我々はすぐに先に行くことができると我々のコメントシステムを展開します.
あなたがコメントを送るとき、あなたがセットするならば、それは自動的に有効にされるマージ要求を開けなければなりませんmoderation: false staticman設定ファイルで.

我々のコメントシステムは、現在機能している!
この部分のコードを見つけることができますhere .
このコメントシステムはまだ非常に基本的な、我々の次のステップになりますadd some features like allowing to reply to a comment or adding a markdown editor .