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

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

  • Commenting System Part 1
  • あなたがここにいる
  • Analytics
    • 最後に、機能的なコメントシステムを追加しました.
    しかし、まだコメントに対応できるようにすることから始めることができる多くの機能があります.

    返信機能追加
    メッセージへの返信を有効にするには、コメントが別のものへの返信であることを知る必要があります.
    そうするために、我々はparent_id 我々のメッセージのフィールド.
    許可するには、allowedFields プロパティstaticman.yml ファイル.
    # staticman.yml
comments:
  allowedFields: ["name", "message", "parent_id"]
  ...
    我々はそれを追加しないrequiredFields 唯一の応答は、親メッセージがあります.
    それから、我々は我々のフィールドにこの分野を加える必要がありますcomment-form.html ファイル.
    <!-- _includes/comment-form.html -->
<form method="POST" action="{{ site.staticman_url }}" class="comment-form">
  <!-- options inputs -->
  ...

  <input
    name="fields[parent_id]"
    type="hidden"
    value="{{ include.parent_id }}"
  />

  <!-- user fields inputs -->
  ...
</form>
    私たちはparent_id フィールドに隠された入力フィールドのフィールドinclude 変数は、インクルードの入力を保持します.
    このコメントを、対応する親IDでコメントを追加します.
    それぞれのコメントについては、その回答も表示されます.これを行うには、再帰的に含めるcomment-list.html とparent_id 入力として.
    <!-- _includes/comment-list.html -->
{% assign parent_id = include.parent_id | default: '' %} 
{% assign comments = site.data.comments[page.slug] | where_exp: "item", "item.parent_id == parent_id" %} 
{% 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 class="comment-reply">
    <p>Reply to {{ comment.name }}:</p>
    {% include comment-form.html parent_id=comment._id %} 
    {% include comment-list.html parent_id=comment._id %}
  </div>
</div>
{% endfor %}
    我々は今、各メッセージを返信する能力を持っており、その下にその回答を表示します.
    これがその結果です.追加しました.comment-reply { padding: 15px; } イン_sass/comments.scss 単純な入れ子効果を作成するには

    それはスタートです、しかし、我々は間違いなくこれらのすべての応答ボックスを表示したくありません.返信ボタンを押すだけで表示されます.
    HTMLとCSSのみを使用してこの機能を実装します.
    まず、コメントの返信ボックスを更新しましょう.
    <!-- _includes/comment-list.html -->
...
<div class="comment-reply">
  <input id="reply-{{ comment._id}}" type="checkbox" class="checkbox" />
  <label class="open" for="reply-{{ comment._id }}">
    Reply to {{ comment.name }}
  </label>
  <label class="close" for="reply-{{ comment._id }}">X</label>
  {% include comment-form.html parent_id=comment._id %} 
  {% include comment-list.html parent_id=comment._id %}
</div>
...
    応答ボックスの表示はチェックボックスによって保持されます.これは表示されませんが、代わりに2つのラベルをターゲットにします.reply to ... 返信ボックスを開くにはX 閉じる.
    各ラベルが表示されますchecked チェックボックスのプロパティ.
    ここでは、それを動作させるためのCSSコードです.
    // _sass/comments.scss
...

.comment-reply {
  padding: 15px;
  padding-top: 5px;
  display: flex;
  flex-direction: column;

  .open {
    font-style: italic;
  }

  .close {
    display: none;
    align-self: flex-end;
    padding: 5px 10px;
    border: 1px solid #ddd;
  }

  .open:hover,
  .close:hover {
    cursor: pointer;
  }

  .comment-form {
    display: none;
  }

  .checkbox {
    display: none;
    &:checked ~ .open {
      display: none;
    }
    &:checked ~ .close {
      display: block;
    }
    &:checked ~ .comment-form {
      display: flex;
    }
  }
}
    我々は今、よりクリーンな返信機能を持っている!


    メッセージのMarkdownエディタを使用する
    まだ我々の新しい機能にすることができますいくつかの改善があります.
    最初のは、簡単にMarkdownのコメントを編集して読者を許可するために、Markdownエディタを使用することです
    そのためには、JavaScriptのマークダウンエディタを使用しますSimpleMDE . これは私たちのtextareaを対象として、それらを取り替えるでしょう、このライブラリが非常にエレガントな解決策である、そして、それは我々のユーザーのうちの1つがJavaScriptをブラウザの上で無効にしたならば、我々の解決がまだ働くということです.
    まず、ライブラリとそのCSSへのリンクをhead ファイル.
    <!-- _includes/head.html -->
<head>
  ...

  <!-- Simple Markdown Editor -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"
  />
  <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
</head>
    次に、コメントフォームHTMLを編集してSimpleMDE インスタンスtextarea .
    <!-- _includes/comment-form.html -->
<form method="POST" action="{{ site.staticman_url }}" class="comment-form">
  ...
  <textarea
    id="message-{{ include.parent_id }}"
    class="comment-message"
    name="fields[message]"
    placeholder="Comment (markdown accepted)"
    required
  ></textarea>
  ...
</form>

<script>
  var simplemde = new SimpleMDE({
    element: document.getElementById("message-{{ include.parent_id }}"),
    forceSync: true,
    spellChecker: false,
    status: false,
    placeholder: "Comment (markdown supported)",
  });
</script>
    また、私は親IDに基づいて、textareaにユニークなIDを加えました.
    私もエディタのスタイルにいくつかの変更を追加しました.
    // _sass/comments.scss
...

.CodeMirror,
.editor-toolbar {
  border-radius: 0;
}
.CodeMirror,
.CodeMirror-scroll {
  min-height: 150px;
}
    そしてここにいる!

    リダイレクトのより良い管理
    現在、私たちがコメントを送るとき、私たちは記事ページにリダイレクトされます.この動作はかなり混乱することがあります.通常、我々は我々のコメントが送られた通知を得ると思っています.さらに、我々のウェブサイトが我々が送ったコメントを表示するために再建される必要があるので、すべては何も起こらないように見えます!
    この部分を改善しよう.
    経験を改善するために、我々はすぐに読めるようになるコメントを表示する感謝のページに読者をリダイレクトします.
    新しいページを作りましょう.comment-success.markdown 我々のルートディレクトリでは、それはほとんど同じですindex.markdown .
    <!-- comment-success.markdown -->
---
layout: home
list_title: "Read Our Latest Posts"
title: ''
---

## Thank you!

Your comment was successfully sent!

It will appear on our website soon.
    では、_includes/comment-form.html .
    <!-- _includes/comment-form.html -->
<input 
    name="options[redirect]" 
    type="hidden" 
    value="{{ 'comment-success' | absolute_url }}"
>
    そして、それ!
    もちろん、私たちのコメントシステムを改善するためにまだ行うことができる多くがあります.しかし、それはすでに良いスタートです、そして、我々は完全にそれを我々自身で造ります!
    この部分のコードを見つけることができますhere .
    それは私たちのブログを設定開始以来、かなりの旅です!
    最後の章では、どのように実装するかを見るfree privacy-friendly analytics .
    [オブジェクト向けプログラミングとswift]構造とクラス
    Android StudioパッケージV 1 V 2署名