최근에 저는 landing page의 프로젝트에 대해 Bridgetown을 설정하고 있었습니다(적극 권장!). 나중에 블로그 섹션을 추가하기 시작했고 더 많은 콘텐츠를 만드는 것을 상상했기 때문에 가벼운 CMS 대안으로 NetlifyCMS를 사용했습니다.

나는 팔로우했다
훌륭한 튜토리얼:

Bridgetown과 Netlify CMS로 블로그 만들기

Andrew Mason ・ 7월 11일 ・ 7분 읽기

#tutorial #beginners #bridgetown #cms

이 게시물의 나머지 부분은 그의 기초 작업을 기반으로 작성되었으므로 아직 읽지 않았다면 먼저 읽어보세요!

Frontmatter 메타데이터 사용자 정의

모든 블로그에는 게시물에 대한 자체 메타데이터 세트가 있지만 대부분의 경우

제목

설명

카테고리

태그

추천 이미지

게시물 작성자

발행일

NetlifyCMS docs을 빠르게 검토한 결과 fields 정의의 일부인 collection라는 YAML 키로 관리되는 것으로 나타났습니다.

최소한 모든 분야는 소유해야 합니다.

a label (NetlifyCMS가 필드에 레이블을 지정하는 방법)

a name (메타데이터가 전문에서 끝나는 방식) 및

a widget(대략 데이터 유형으로 변환되며 NetlifyCMS에서 필드를 표시하는 방식을 결정함)

및 선택한 widget에 따라 다른 하위 키 세트(보다 정확한 지침은 NetlifyCMS docs 참조)

NetlifyCMSconfig.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 유형의 위젯을 사용하므로 해당 객체(이 필드를 구성하는 YAML 키/값 쌍)가 포함하는 fields 항목을 정의해야 합니다. 이러한 구성 변경을 커밋한 후 게시물 편집기는 다음과 같이 표시될 수 있습니다.

저자 참조

하지만 매번 작성자의 이름과 이메일을 수동으로 추가하는 것보다 더 잘할 수 있습니다. 귀하의 블로그에 수십 명의 작성자가 있다고 상상해보십시오. 빠르게 무언가를 잘못 입력하고 작성자에 대한 모든 백링크를 방해할 것입니다. 다행스럽게도 NetlifyCMS는 relation 위젯을 알고 있어 다른 컬렉션을 참조할 수 있습니다.

이제 authors 컬렉션을 설정해 보겠습니다. Bridgetown에서 해야 할 일은 add it to your config입니다.

collections:
  - authors

원한다면 가질 수도 있다output author pages automatically . 이제 NetlifyCMSconfig.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 위젯으로 참조하며 여기에는 몇 가지 키가 더 필요합니다.

collection

a valueField (전면 값으로 저장됨)

a displayFields 배열(UI 위젯에 표시되는 필드) 및

작성자의 대화식 조회를 허용하는 searchFields 배열입니다.

이제 우선 src/_authors/julian-rubisch.md에 작성자를 추가해 보겠습니다.

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

새로 고침 후 위젯은 이제 다음과 같이 보입니다.



이 게시물을 NetlifyCMS에 저장하면 편안하게 작성된 서문을 찾을 수 있습니다.

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

Bridgetown에서 렌더링

남은 유일한 작업은 액체 태그에서 이러한 메타데이터를 실제로 렌더링하는 것이며, 새authors 컬렉션의 경우 약간의 조정이 필요합니다. 컬렉션에서 해당 게시물 작성자 개체를 찾으려면 다음과 같이 해야 합니다.

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

게시물 레이아웃에서.

보너스: 맞춤형 액체 필터

내 눈에 이것은 자체 Liquid 필터를 보증하기에 충분히 투박하게 읽습니다. Ruby 신을 찬양합니다. 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의 향후 기능으로 이를 더욱 쉽게 만들 수 있습니다.

where_exp보다 쉬운 대안으로 Liquid 찾기 태그 제공 #101

jaredcwhite
Jul 13, 2020에 게시됨



WIP(테스트 추가 필요)
#90 마감


View on GitHub