最近、私はAをセットアップしていましたlanding page プロジェクトについてBridgetown (大丈夫です!その後、私はブログのセクションを追加を開始し、私は自分自身をより多くのコンテンツを作成することを想定以来、軽量CMSの代替としてNetLifCMSで遊んだ.
私は続けた
優れたチュートリアル

BridgetownとNetlify CMSによるブログの作成

アンドリュー・メイソン・ Jul 11・ 7分読む

#tutorial #beginners #bridgetown #cms

このポストの残りの部分は彼のグラウンドワークを構築します.

メタデータのカスタマイズ

すべてのブログは、その投稿のためのメタデータの独自のセットを持っていますが、最も頻繁には

タイトル

説明

カテゴリー

タグ

呼び物イメージ

投稿者

公表日

クイックレビューNetlifyCMS docs と呼ばれるYAMLキーで管理されますfields それはcollection 定義.
少なくとも所有しなければならないあらゆる分野

エーlabel ( NetLifCMSがどのようにフィールドにラベルを付けるのかを示します).

エーname (それはあなたのメタデータがどのようにフロントエンドに終わるかです)

エーwidget (データ型に大まかに変換され、netlifycmsによってフィールドがどのように表示されるかを決定します)

そして、選択されたwidget , 他のサブキーの集合NetlifyCMS docs より正確な説明は

それで、それがあなたのnetlifycmsを見るかもしれない方法がここにありますconfig.yml ファイル

# ...

collections:
  - name: blog
    # ...
    fields:
      - { label: Layout, name: layout, widget: hidden, default: post }
      - { label: Title, name: title, widget: string }
      - { label: Description, name: description, widget: text }
      - { label: Featured Image, name: image, widget: image }
      - { label: Categories, name: categories, widget: list }
      - label: Author
        name: author
        widget: object
        fields:
          - {label: Name, name: name, widget: string}
          - {label: Email, name: email, widget: string}
      - { label: Publish Date, name: date, widget: datetime }
      - { label: Body, name: body, widget: markdown }

観察するauthor フィールドはタイプのウィジェットを使うobject , を定義する必要があるfields そのオブジェクト(このフィールドを構成するYAMLキー/値組)は含みます.これらの設定の変更をコミットした後、ポストエディタは次のようになります.

著者の参照

私たちは、手動で著者の名前とメールを毎回追加するよりも良いことができます.あなたのブログが2ダースの著者を持っていると想像してください、あなたはすぐにミスタイプ何かに行って、著者にどんなバックリンクも妨害します.幸運にも、NetLifCMSは、Aを知っていますrelation ウィジェットは、別のコレクションを参照することができます.
では、設定しましょうauthors コレクション.Bridgetownで、あなたがする必要があるすべてはadd it to your config :

collections:
  - authors

あなたが望むならば、あなたはそれさえ持つことができますoutput author pages automatically . さて、このコレクションをNetLifCMSで参照する必要がありますconfig.yml , も

collections:
  - name: authors
    label: Authors
    folder: src/_authors/
    extension: .md
    format: frontmatter
    create: true
    fields:
      - {label: Name, name: name, widget: string}
      - {label: Email, name: email, widget: string}

  # ...

  - name: blog
    # ...
    fields:
      # ...
      - label: Author
        name: author
        widget: relation
        collection: authors
        valueField: email
        displayFields: ["name"]
        searchFields: ["name", "email"]

アラートリーダーは、我々のコレクションの定義が正確に我々のobject 上記からの定義.我々の中でblog コレクション(以下に示す)私たちは現在、著者として参照relation これにはいくつかのキーが必要です.

the collection

エーvalueField (フロントエンドの値として格納されます).

エーdisplayFields array ( UIウィジェットに表示されるフィールド)

エーsearchFields 著者の対話的な検索を可能にする配列.

さあ、始めに著者を加えましょうsrc/_authors/julian-rubisch.md :

---
name: Julian Rubisch
email: ...
---

リフレッシュ後、ウィジェットは以下のようになります.

あなたがNetLifCMSでこのポストを保存するならば、あなたはあなたのフロントエンドが快適にあなたのためにいっぱいになるのを発見します:

title: ...
description: ...
image: /images/uploads/....jpeg
categories:
  - Blog
author: .....
date: 2020-08-30T08:08:46.681Z

ブリッジタウンで描く

唯一の残りのタスクは、これらのメタデータを実際にあなたの液体タグにレンダリングすることですauthors コレクションは、少し微調整が必要です.あなたのコレクションの対応する事後の著者オブジェクトを見つけるために、あなたは何かをする必要があります

{% assign author = site.authors | where: "email", post.author | first %}
...
{{ author.name }} {{ author.email }}

あなたのポストレイアウトで.

ボーナス：カスタム液体フィルタ

私の目には、この独自の液体フィルタを正当化するのに十分な不明瞭に読み取ります.称賛ルビーの神々、Bridgetownはこれを達成するために便利なDSLが付属しています.インplugins/builders/filter.rb , 次のキー

class Filters < SiteBuilder
  def build
    liquid_filter "find_author_by_email", :find_author_by_email
  end

  def find_author_by_email(email)
    site.collections["authors"]
      .select { |author| author.email == email }
      .first
  end
end

これにより、液体は沸騰します.

{% assign author = post.author | find_author_by_email %}
...
{{ author.name }} {{ author.email }}

Notabene : Bridgetownの今後の機能は、これをより簡単にします.

を見つける簡単に代替としてのタグを見つける 唐差101

jaredcwhite
掲示されるJul 13, 2020
WIP (テストを追加する必要)
九十九を閉じる
View on GitHub