Netlify CMSの新しい見方(第2部)

Netlify CMS コンテンツ管理ツールJAMstack またはNetlify (ただし、サービスを使用する必要はありません).それはあなたが選択した静的サイトジェネレータで動作するように設計されています-かどうかは、ジキル、ヒューゴ、ヘキソ、または何です.
インpart one , 私はNetlify CMSを使用して新しいサイトを設定する方法を簡単に見た.このポストでは、私は既存のサイトにNetlify CMSを加えるのを見たいです.この場合、我々はそれに加えて探索するmy personal blog , これは、netlifyに既に配備されている、かなり標準的なJekyll実装を使用します.

管理者の追加

私がこの作業を私のブログで得るためにする最初のことは、管理ファイルを加えることです.あなたがこれのために使用する必要がある場所は、あなたが使用している静的サイトエンジンと、潜在的に、あなたのセッティングに依存します.The documentation あなたは多くの人気のエンジンの管理フォルダとファイルを配置する標準的な場所を一覧表示します.Jekyllを使用しているので、管理者フォルダーはプロジェクトルートに移動できます.
管理フォルダの中で2つのファイルを作成する必要がありました.config.yml and index.html そしてそこにいくつかの基本コードを置きます.完全にドキュメントを完全に繰り返しないように、これらのファイルに必要なベースラインコードを見つけることができますhere .

Note that you can install Netlify CMS via npm if you prefer. The instructions I follow here would differ, of course.

基本設定

NetLify CMSの標準的なインストールのために行うすべてのものは、設定を編集する際に扱われます.京大理追加のコードを必要とするエディタペインでカスタムウィジェットやプレビューを作成できる高度な機能があります.
では、基本的な設定を見てみましょうconfig.yml :

backend:
  name: git-gateway
  branch: master

ここでのバックエンドは、私のCMSがGITHUBリポジトリにコンテンツを公開できるようにするものです.私はNetlifyでこれをホストしているので、設定は簡単ですがother options and gateways これにより、githubとnetlifyに選択肢を使用することができます.ゲートウェイは、これらのユーザがリポジトリそのものへのアクセスを各ユーザに与えることなく実行することを可能にします.明らかに、ブランチはCMSで作られたどんな編集も委託されるブランチです.
私が基本的な構成で指定する必要がある次のものは、私がアップロードされるイメージと他のメディアを配置する場所です.私は、これらを置くために、私のルートイメージフォルダの中にサブフォルダを持っていますmedia_folder: "images/posts" (この行はインデントされないことに注意してください).

コンテンツコレクションの設定

次に、CMSを設定する必要があります.これはかなり標準的なジキルのブログですので、私の投稿はすべての_posts フォルダと私はかなり標準的なフロントの問題を使用します.ここでは、ポストの前の問題の例があります--これは、エディタを構成することに重要になります.

--------
layout: post
title: "Promoting Perceived Performance with Prefetching"
date: "2019-04-24"
categories:
    - web development
    - general
description: A look at two libraries designed to help improve the perceived performance of web apps
comments: true
--------

Jikyllを知っている人は、これがかなりデフォルトのフロント問題であることを認識しますので、コレクションの設定はdocumentation . つの重要な追加は、複数のカテゴリの使用です.これはlist widget このような複数の項目を扱うためのエディタで.ウィジェットの指定は、エディタでフィールドがどのように編集されるかを決定しますdefault widgets Netlify CMSに組み込まれます.
私の最後のポストの設定は次のようになります.

collections:
  - name: "blog"
    label: "Blog"
    folder: "_posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Categories", name: "categories", widget: "list"}
      - {label: "Description", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Comments", name: "comments", widget: "hidden", default: "true"}

認証の有効化

設定をテストする前に認証を有効にする必要があります.私はNetLifyを使用して私のサイトをホストしているので、私はNetlify Identity すでにNetlify CMSでサポートされている機能(再度、NetLifyを使用する必要はありませんが、他の認証方法もサポートされています).
最初のステップは管理者のアイデンティティを可能にすることです.

次に、設定の下でのみIDを招待する必要があります.NetLify無料アカウントを5まで招待することができます(明らかに、場合は、それらを追加することができますし、彼らは使用に基づいて課金される必要がある場合).

必要に応じてサードパーティ認証(例:Google認証)を許可することができますが、これは私のブログだけであるので、私は基本的なNetlify認証で立ち往生.
私はまた、設定で以前に述べたGitゲートウェイを有効にする必要があります.

次に、IDスクリプトを追加する必要がありますindex.html 管理者と私の主なホームページに

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

が追加スクリプトですdocumentation それも、サイトのものに加えられなければなりませんindex.html ページ.
一旦私が現在ローカルテストで管理者を再ロードするならば、私はサイトのURLをセットするためにこのスクリーンを得ます.

しかし、一旦それがされるならば、私は私が実はCMSで管理者であるために私自身を招待しなかったので、まだログインできません.私はnetlfiy admin - doで(私が走った1つの非常に小さな問題は、リンクがライブURLに行ったとき、私はAdmin Liveを押すか、確認メールでリンクされたURLをコピー/変更することなく招待を受け入れることができなかったということです).また、ローカルテストでもGithubとPost Content Liveに変更をプッシュしますので、注意してくださいeditorial workflow ページが自動的に有効になるのを防ぐ場合.
私自身を招待するために、私はNetlify管理者と「招待ユーザー」でアイデンティティに行きます

プロセスを完了するには、招待を使用して登録します.

一度これらの変更のすべてがライブプッシュされると、私はすでに追加し、記事を編集することができます!

ページとデータの編集

ちょうどブログ記事を越えて、私も、CMSを通して私の「私について」ページを編集したかったです.これは私のサイト上のコンテンツを持つ唯一の実際のスタンドアロンページですので、私はそれを使用して追加file collections configuration . これとの違いfolder collections それぞれのファイルを個別に指定しなければなりません.このようなワンオフページには最適ですが、フロントページの設定が異なります.
以下に使用する設定を示しますcollections マイアバウトページの編集を可能にする私の設定では、この場合、上記のフォルダ設定とは異なりません.

- name: "pages"
    label: "Pages"
    files:
      - name: "about"
        label: "About Page"
        file: "_pages/about.md"
        fields:
          - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Permalink", name: "permalink", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}

最後に、出版とプレゼンテーションの私のリストはJekyll data files YAMLデータから成る.この種の編集は、ファイル構成を使用して設定することができます.
例えば、私のセッション録音に関するデータはかなり単純なYAMLでした.

videos:
  -   name: "March 2016"
      title: "Static Sites for JavaScript Developers"
      URL: "https://www.youtube.com/watch?v=TJ3lj-xasdw"
  -   name: "July 2015"
      title: "Not Your Grandad's Static Sites"
      URL: "https://www.youtube.com/watch?v=TJ3lj-xasdw"
 ...

そして、これを編集するには、上記のフィールドを持つリストウィジェットとして設定します.

- name: "data"
  label: "Data"
  files:
    - name: "videoslist"
      label: "Videos"
      file: "_data/videos.yaml"
      fields:
        - name: "videos"
          label: "Videos"
          widget: list
          fields:
            - {label: "Name", name: "name", widget: "string"}
            - {label: "Title", name: "title", widget: "string"}
            - {label: "URL", name: "URL", widget: "string"}

個々のフィールドが展開されたら、エディタは以下のようになります.

ここのプレビューペインは大きく見えません、しかし、それは私自身の目的のためにOKです.あなたがクライアントのためにこれを構築しているならば、しかし、これはあなたが作成に頼る場所であるかもしれませんcustom preview widgets .
リスト内のリストがあるので、私の出版物やプレゼンテーションのデータリストは少し複雑です.

publications:
  - name: "O'Reilly Media"
    articles:
      - title: "Static Site Generators - Modern Tools for Static Website Development"
        URL: "http://www.oreilly.com/web-platform/free/static-site-generators.csp"
      - title: "Working with Static Sites (co-author with Raymond Camden)"
        URL: "http://shop.oreilly.com/product/0636920051879.do"
  - name: "CSS Tricks"
    articles:
      - title: "What Really Makes a Static Site Generator?"
        URL: "https://css-tricks.com/really-makes-static-site-generator/"
...

幸いにもリストウィジェット内のリストウィジェットをネストできます.

- name: "pubslist"
  label: "Publications"
  file: "_data/publications.yaml"
  fields:
    - name: "publications"
      label: "Publications"
      widget: list
      fields:
        - {label: "Name", name: "name", widget: "string"}
        - name: "articles"
          label: "articles"
          widget: list
          fields:
            - {label: "Title", name: "title", widget: "string"}
            - {label: "URL", name: "URL", widget: "string"}

エディタは明白な理由で少し複雑です.

It's worth noting here that during development I often wouldn't see changes like the additional collections listed here in the local admin right away for some reason, even when I'd pushed the changes live as well. This may have just been some sort of caching, but I mention it in case you run into it.

仕上げ

私は、私がNetlify CMSのすべての構成オプションと特徴の近くでどこにもカバーしなかったと強調しなければなりません.これはすべて本当に本当に基礎だった.しかし、すべてのすべてで、私は私がこのシリーズの最初の部分で表現した感情を繰り返します.多くのサイトでは、それが提供する編集機能が十分であり、開発者として、それは非常に簡単に取得し、実行していた-両方の新しいインストールと既存のサイトに追加するように.
重要なことに、Netlifyはオープンソースプロジェクトとしてこれを維持していますcontribute or fork it ( MITライセンスの下です).これは既にCMS機能を利用する新しいツールを奨励しています.このシリーズのフォローアップポストでは、リリースされたばかりの人を見てみましょう.