アットRenuo 私たちはしばしばRuby on Railsプロジェクトのヘッドレスムを必要としますDato CMS .
それで、我々は我々を解放することに決めましたDatoCMS client open source .
我々は抽出し、我々が最も有用と考えられている機能を分離し、このチュートリアルでは、ステップバイステップ、どのように使用を開始するかを説明します.

DataCMSセットアップ

このチュートリアルで使用できるデータバックエンド用のテンプレートを提供します.

上記のボタンを使用して、最初のDataCMSプロジェクトを設定し、-> APIトークンに進み、後で使用するReadOnly APIトークンを取得します.

プロジェクト設定

次のようにしてください.

レールアプリ😄

turbo

ViewComponents

Railsだけが実際の要件ですが、宝石によって提供される機能の100 %を使用するには、また、必要がありますview_components and turbo .
Rails > = 7を使用すると、これらのコマンドを実行できます

rails new dato-rails-demo --skip-active-record
cd dato-rails-demo

Gemfileに追加します

gem 'dotenv-rails', groups: [:development, :test]
gem 'view_component'
gem 'dato-rails', require: 'dato'

それからもう一度実行します.

bundle install
echo "DATO_API_TOKEN=<YOUR_DATO_API_TOKEN>" > .env

新しいライブラリをインストールし、APIトークンを設定します.
よくできた.あなたは、単に走ることができるはずですbin/rails s そして、あなたのアプリケーションにアクセスします.

最初のクエリ

提供されるプロジェクトにはホームページが含まれます.我々はそれをフェッチしようとします.DataCMSは、クエリを生成するのに非常に便利なGraphSQL APIエクスプローラを提供します.
簡単に起動します.

# app/services/dato/queries.rb

module Dato
  module Queries
    def homepage_query
      GQLi::DSL.query {
        homepage {
          id
        }
      }
    end
  end
end

ここで、ホームページIDを取得するクエリを定義します.
新しいサービスフォルダを追加したので、ここでサーバーを再起動する必要があります.
私たちは常に問い合わせをテストする必要があります.このようなテストは次のようになります.

# test/services/dato/queries_test.rb

require "test_helper"

class DatoQueriesTest < ActiveSupport::TestCase
  include Dato::Queries

  test 'homepage_query' do
    client = Dato::Client.new
    response = client.execute(homepage_query)
    assert_not_nil response.data.homepage.id
  end
end

あなたが緑のテストをするならば、それはあなたがすでにdatocmsからあなたのホームページをうまくやっていることを意味します.

フェッチデータをレンダリングする

我々は今、コントローラとコンポーネントを生成することができますし、我々だけでフェッチデータをレンダリングします.

rails g controller HomepageController
rails g component Homepage

コンポーネントは必須ではありません.また、標準のパーティションを使用することもできますが、その後のライブリロードのようなより高度な機能の恩恵を受ける必要があります.

# app/components/homepage_component.rb

class HomepageComponent < ViewComponent::Base
  def initialize(data)
    super
    @data = data
  end
end

# app/components/homepage_component.html.erb

<div>This is the homepage id: <%= @data.homepage.id %></div>

# app/controllers/homepage_controller.rb
class HomepageController < ApplicationController
  include Dato::Queries

  def show
    client = Dato::Client.new
    response = client.execute(homepage_query)
    render HomepageComponent.new(response.data)
  end
end

# config/routes.rb

Rails.application.routes.draw do
  root "homepage#show"
end

構造化テキスト

DataCMSで使用する最も重要な分野の一つはStructured Text .
簡単に取得し、それを使用してレンダリングすることができますdato-rails .
ホームページのクエリを更新します

def homepage_query
  GQLi::DSL.query {
    homepage {
      id
      content {
        value
        blocks {
          __typename
          id
          image {
            responsiveImage(imgixParams: {fm: __enum("png")}) {
              ___ Dato::Fragments::ResponsiveImage
            }
          }
        }
      }
    }
  }
end

上のコードもcontent 我々がホームページで使用するフィールドと私たちは、例に記入した.
構造化テキストフィールドをどのようにレンダリングするかを示します.

<div>This is the homepage id: <%=@data.homepage.id %></div>
<%= render Dato::StructuredText.new(@data.homepage.content)  %>

ライブラリは、すでにすべてをレンダリングするために使用できるコンポーネントを提供します.次のようになります.

カスタムブロック

上の例では、例のブロックライブラリにブロックが定義されていることを確認します.そのようなブロックはあなたによって作成されるので、ライブラリはそれらをレンダリングするためのコンポーネントを提供することはできませんが、情報を使用して、自分自身を作成する必要があります.コンポーネントの定義方法については、ページの出力を参照してください.
では、

# app/components/dato/image_block_record.html.erb

<%= render Dato::ResponsiveImage.new(@node.image.responsiveImage)  %>

# app/components/dato/image_block_record.rb

module Dato
  class ImageBlockRecord < Dato::Node
  end
end

これで、単にページを再読み込みすることができますし、ブロックを正しくレンダリングされますresponsive image .

カスタマイズ

簡単に付け加えましょう.我々のCSSapplication.html.erb よりよく見えます.

<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

構造化テキストノードをどのようにレンダリングするかをオーバーライドしたい場合は、次の2つの方法があります.
CSSのみ
ノードは、CSSだけで動作することによって、各ノードのルックアンドフィールをカスタマイズするために使用できるHTMLクラスを含んでいます.

.dato-cms-paragraph {
  margin-top: 30px;
}

すべての段落ノードに30 pxマージントップを追加します.
コンポーネントのオーバーライド
残念ながらオーバーライドできないonly the template 現時点で.したがって、ノードをさらにカスタマイズしたい場合は、次の手順を実行する必要があります.

新しいコンポーネントを定義します.Citeブロックの新しいコンポーネントを定義しましょう

# app/components/dato/fancy_cite.rb
class Dato::FancyCite < Dato::DastNode
  def initialize(node, root)
    super(node, "blockquote", root)
  end
end

# app/components/dato/fancy_cite.html.erb
<blockquote>
  <% @node.children&.each do |node| %>
    <%= render_node(node) %>
  <% end %>
  <p>
    <cite>– <%= @node.attribution %></cite>
  </p>
</blockquote>

# config/initializers/dato.rb
Dato::Config.overrides = {
  blockquote: 'Dato::FancyCite'
}.with_indifferent_access

初期化子を追加したので、サーバーを再起動します.
これは完全にノードを上書きする方法です.

プレビューモード

使用する場合draft/published feature of Dato CMS , クライアントを使用する場合は、モデルのドラフトバージョンを取得できます.次のようにコントローラを変更します.

client = Dato::Client.new(preview: params[:preview].present?)

私たちのホームページモデルのドラフト/プレビューを有効にします.
プロジェクトの設定に進み、モデルを選択し、ホームページモデルを選択し、「モデルを編集」をクリックします.

今、あなたはどのようにページがpreview URLのパラメータと、ホームページの変更を実行します.ヘッドトゥhttp://localhost:3000?preview=true .

リアルタイムモード

あなたのホームページを編集して、前後にあなたのウェブサイトに行って、「リフレッシュ」を打つたびにdatocmsに取り組むことは、退屈で時間がかかるかもしれません.リアルタイムモードでは、データの最も興味深い機能の1つであり、また、それを使用するときにレールを使用する恩恵を受けることができます.
あなたがする必要がある唯一のことは、あなたのコンポーネントをDato::Live コンポーネントとルートをマウントします.
コントローラの動作を次のように変更します.

def show
  render Dato::Live.new(HomepageComponent, 
                        homepage_query, 
                        preview: params[:preview].present?,
                        live: params[:live].present?)
end

エンジンのルートをマウントします.

# config/routes.rb

Rails.application.routes.draw do
  root "homepage#show"

  mount Dato::Engine => '/dato'
end

ページに追加し、パラメータを追加する?live=true&preview=true URLにライブリロードをお楽しみください.