GatsbyでTinaCMSを探索する

マークダウンの素晴らしさについて私たち全員が同意できる限り、ページの編集やスタイルの変更をリアルタイムで確認することは、常に非常に満足のいくものです。 🦙TinaCMSをGatsbyと組み合わせると、ページ上のマークダウンファイルを視覚的に直接操作できるようになります。 TinaCMSはNext.jsでも動作しますが、ここでは、Gatsbyサイトを使用してこの強力な新しいツールについて説明します。

インストール

gatsby-starter-blog スターターから始めましょう。これには、マークダウン投稿に必要なものがすべて揃っているからです。

必要なのは、TinaCMS自体、 styled-components （TinaCMSが依存している）、Tinaの4つだけです。 remark マークダウンを処理するためのプラグイン、およびTinaの git プラグインを使用すると、ファイルシステム内のファイルを直接変更し、投稿を保存するときにGithubアカウントにコミットすることができます。

$ gatsby new tina-example https://github.com/gatsbyjs/gatsby-starter-blog
$ yarn add gatsby-plugin-tinacms styled-components gatsby-tinacms-remark gatsby-tinacms-git

設定

初期設定はこれ以上ないほど簡単です。追加します gatsby-plugin-tinacms に gatsby-config.js とともに remark と git プラグイン。 私は個人的に設定することを好みます position に fixed、デフォルトではサイドバーがサイトを横に押してくれるので。

{
  resolve: 'gatsby-plugin-tinacms',
  options: {
    plugins: [
      "gatsby-tinacms-git",
      "gatsby-tinacms-remark",
    ],
    position: 'fixed'
  }
}

それだけで、新しいサイドバーを開くために、ページの下部に小さな青いタブが表示されます。

サイドバー

ここで、投稿テンプレートで、クエリからいくつかの追加情報を取得する必要があります。 fileRelativePath, rawFrontmatter, rawMarkdownBody. これらはによって使用されます remarkForm TinaCMSが提供する高次コンポーネント。エクスポートされたコンポーネントをラップするだけで、準備は完了です。

import { remarkForm } from "gatsby-tinacms-remark";

class BlogPostTemplate extends React.Component { 
    // ...
};

export default remarkForm(BlogPostTemplate);

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    # ...
    markdownRemark(fields: { slug: { eq: $slug } }) {
      # ...
      fileRelativePath
      rawFrontmatter
      rawMarkdownBody
    }
  }
`;

これで、Tinaはすべてのマークダウン投稿にアクセスできるようになり、ページを更新してすばやくリロードし、新しい変更を表示します。 さらに、保存ボタンを押すたびに、Githubリポジトリに対して小さなコミットが行われるため、それに接続されているホスティングプラットフォームはすべて自動的に更新されます。

インライン編集

長いコンテンツを完全にサイドバーで処理する必要があるのは面倒です。代わりに、出力されたコンテンツをエディターとして設定して、ページ上のコンテンツを直接操作し、メタデータ、テーマ設定、追加/削除のためだけにサイドバーを保持できるようにします。 、など。

代わりに、あまり変更する必要はありません remarkForm ページテンプレートを liveRemarkForm 編集可能にしたい部分をラップします TinaField. TinaField 名前を付ける必要があります rawMarkdownBody 合格しました Wysiwyg 小道具としての図書館。 Wysiwyg の略で、表示されるものは取得するものであり、これにより、ほとんどのリアルタイム編集機能が提供されます。

記事自体をクリックするたびに、便利な編集モードがアクティブになります setIsEditing 方法。

import { liveRemarkForm } from 'gatsby-tinacms-remark';
import { Wysiwyg } from '@tinacms/fields';
import { TinaField } from '@tinacms/form-builder';

const BlogPostTemplate = props => {
  const { previous, next } = props.pageContext;

  return (
    <Layout>
        {*/ ... */}
      <TinaField name="rawMarkdownBody" Component={Wysiwyg}>
        <article onClick={() => props.setIsEditing(true)}>
            {*/ ... */}
        </article>
      </TinaField>
    </Layout>
  )
};

の最初の小道具 setIsEditing メソッドは現在の編集状態であるため、代わりにトグルボタンを使用する場合は、次のような操作を行うことができます。 props.setIsEditing(editing => !editing).

投稿の削除

ファイルの削除は途方もなく簡単です。便利なものをインポートするだけです。 DeleteAction メソッド、ラベル付きのオブジェクトにスローし、それをに与える liveRemarkForm.

import { liveRemarkForm, DeleteAction } from 'gatsby-tinacms-remark';

const deleteButton = {
  label: 'Delete',
  actions: [DeleteAction]
};

export default liveRemarkForm(BlogPostTemplate, deleteButton);

保存ボタンの横には、 Delete オプション。

投稿の追加

投稿を追加する機能は、ボイラープレートで物事が少し重くなるところです。

を使用します createRemarkButton サイドバーに新しいオプションを追加する関数。 私たちが戻るものは何でも filename ファイルシステムに追加され、slugifyライブラリを使用してファイルの名前をフォーマットできます。

frontmatter フォームから投稿のメタデータを処理します。 fields フォーム自体を確立します。 最後に、 withPlugin 新しいボタンをレイアウトに追加するHOC。

import { withPlugin } from 'tinacms';
import { createRemarkButton } from 'gatsby-tinacms-remark';
import slugify from 'react-slugify';

const CreatePostButton = createRemarkButton({
  label: "New Post",
  filename(form) {
    let slug = slugify(form.title.toLowerCase())
    return `content/blog/${slug}/${slug}.md`
  },
  frontmatter(form) {
    let slug = slugify(form.title.toLowerCase())
    return new Promise(resolve => {
      resolve({
        title: form.title,
        description: form.description,
        data: new Date(),
        path: `content/blog/${slug}/${slug}`,
      })
    })
  },
  fields: [
    { name: "title", label: "Title", component: "text", required: true },
    { name: "description", label: "Description", component: "text", required: true },
  ],
});

export default withPlugin(Layout, CreatePostButton);

結論

JSONを使用してページを作成/削除したり、カスタムフィールド、ブロック、プラグインを作成したりするなど、TinaCMSで探索することはまだたくさんあります。

TinaCMSはまだかなり新しい技術であるため、改善できる方法はまだたくさんあります。 彼らは現在、さまざまな役割と編集権限のチームサポートの追加に取り組んでいます。 将来的には、技術者以外のクライアントがTinaにアクセスし、すべてをオンサイトで編集する方法が追加されることを願っています。 🤞