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にアクセスし、すべてをオンサイトで編集する方法が追加されることを願っています。 🤞