gatsby_用Gatsby探索TinaCMS

gatsby

As much as we can all agree about how awesome markdown is, it will always be significantly more satisfying to see your edits and style changes on your pages in real time. 🦙 TinaCMS, when coupled with Gatsby, gives us to ability to manipulate our markdown files directly on our pages, visually. TinaCMS also works with Next.js, but here we’ll explore this powerful new tool with a Gatsby site.

尽管大家都同意减价的惊人程度，但实时查看页面上的编辑和样式更改总是会更加令人满意。 ina TinaCMS与Gatsby结合使用时，使我们能够直接在页面上直观地操作我们的markdown文件。 TinaCMS也可以与Next.js一起使用，但是在这里我们将通过Gatsby网站探索这个功能强大的新工具。

安装 (Installation)

We’ll get started with the gatsby-starter-blog starter, since that already has everything we need for markdown posts.

我们将开始使用gatsby-starter-blog入门程序，因为它已经包含了降价所需的一切。

There are only four main things we need, TinaCMS itself, styled-components (which TinaCMS is dependent on), Tina’s remark plugin for handling our markdown, and Tina’s git plugin to give it the ability to directly alter files in our filesystem and make commits to your Github account when you save a post.

我们只需要四个主要的东西，TinaCMS本身， 样式组件 (TinaCMS依赖于它)，Tina的用于处理markdown的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

建立 (Setup)

The initial setup couldn’t be easier: we’ll add gatsby-plugin-tinacms to gatsby-config.js with the remark and git plugins. I personally prefer to set the position to fixed, since by default the sidebar will push our site to the side.

初始设置再简单不过了：我们将使用remark和git插件将gatsby-plugin-tinacms添加到gatsby-config.js 。 我个人更喜欢将position设置为fixed ，因为默认情况下，侧边栏会将我们的网站推向侧面。

gatsby-config.js

gatsby-config.js

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

With just that, your page should have a little blue tab on the bottom to open a new sidebar.

这样，您的页面底部应该会有一个蓝色的小标签以打开一个新的侧边栏。

侧边栏 (Sidebar)

Now, in our post template we’ll need to get some extra things from our query; fileRelativePath, rawFrontmatter, rawMarkdownBody. These will be used by the remarkForm higher-order component that TinaCMS gives us, all we have to do is wrap our exported component with it and you should be good to go.

现在，在我们的帖子模板中，我们需要从查询中获得一些额外的东西； fileRelativePath ， rawFrontmatter ， rawMarkdownBody 。 这些将由TinaCMS提供给我们的remarkForm 高阶组件使用 ，我们要做的就是用它包装导出的组件，您应该一切顺利。

blog-post.js

blog-post.js

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
    }
  }
`;

Now Tina has access to all your markdown posts and will update and quickly reload the page to show any new changes. Plus whenever you hit the save button there will be a small commit made to your Github repo, so any hosting platform connected to it will be updated automatically.

现在，蒂娜(Tina)可以访问您所有的降价信息，并将更新并快速重新加载页面以显示任何新更改。 另外，每当您点击保存按钮时，都会对您的Github存储库进行少量提交，因此连接到它的所有托管平台都将自动更新。

内联编辑 (Inline Editing)

Having to work with long content entirely in the sidebar would be a pain, and instead we can setup our outputted content as the editor so we can directly interact with our content on the page and keep the sidebar just for metadata, theming, adding/deleting, etc.

必须完全在侧边栏中处理较长的内容会很麻烦，相反，我们可以将输出的内容设置为编辑器，以便我们可以直接与页面上的内容进行交互，并仅将侧边栏保留用于元数据，主题，添加/删除等

Not much even needs to be changed, instead of remarkForm we’ll wrap the page template in a liveRemarkForm and wrap any part we want to be editable with a TinaField. TinaField just needs to be named rawMarkdownBody and passed the Wysiwyg library as a prop. Wysiwyg is short for what you see is what you get, which is what will give us most of the real-time editing capabilities.

甚至不需要更改很多，我们将页面模板包装在remarkForm ，而不是liveRemarkForm并包装我们希望使用TinaField可编辑的任何部分。 TinaField仅需要命名为rawMarkdownBody并通过Wysiwyg库作为道具。 Wysiwyg是短期的，你看到的就是你得到的 ，这是什么会的实时编辑功能最给我们。

We’ll activate the editing mode whenever you click on the article itself, with the handy setIsEditing method.

只要您单击文章本身， setIsEditing使用方便的setIsEditing方法激活编辑模式。

layout.js

layout.js

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>
  )
};

The first prop in the setIsEditing method is the current editing state, so if instead you want to use a toggle button you can do something like props.setIsEditing(editing => !editing).

setIsEditing方法中的第一个道具是当前的编辑状态，因此，如果您想使用切换按钮，则可以执行诸如props.setIsEditing(editing => !editing) 。

删除帖子 (Deleting Posts)

Removing files is ridiculously simple, just import the handy DeleteAction method, throw into a an object with a label, and give it to liveRemarkForm.

删除文件非常简单，只需导入方便的DeleteAction方法，放入带有标签的对象中，然后将其提供给liveRemarkForm 。

blog-post.js

blog-post.js

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

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

export default liveRemarkForm(BlogPostTemplate, deleteButton);

Now next to the save button is a little menu with a Delete option.

现在，“保存”按钮旁边是一个带有“ Delete选项的小菜单。

添加帖子 (Adding Posts)

The ability to add posts is where things get a little heavy on the boilerplate.

添加帖子的功能使样板变得有些沉重。

We’ll use the createRemarkButton function to add a new option to our sidebar. Whatever we return to filename will be added to our filesystem, and we can use the slugify library to format the name for our file.

我们将使用createRemarkButton函数向侧边栏添加一个新选项。 无论我们返回什么filename都将添加到我们的文件系统中，并且我们可以使用slugify库来格式化文件名。

frontmatter will handle the metadata for our post from our form. fields will establish the form itself. Finally, we’ll use the withPlugin HOC to add our new button to our layout.

frontmatter将从frontmatter处理帖子的元数据。 fields将建立表格本身。 最后，我们将使用withPlugin HOC将新按钮添加到布局中。

layout.js

layout.js

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);

结论 (Conclusion)

There is still so much to explore with TinaCMS like creating/deleting pages with JSON and creating custom fields, blocks, and plugins.

使用TinaCMS仍需探索的内容还很多，例如使用JSON创建/删除页面以及创建自定义字段，块和插件。

Since TinaCMS a still fairly new tech, there’s still many ways it could be improved. They’re currently working on adding team support for different roles and editing permissions. Hopefully in the future they’ll add a way for a non-tech client to access Tina and edit everything on-site. 🤞

由于TinaCMS仍然是一种相当新的技术，因此仍有很多可以改进的方法。 他们目前正在为不同的角色和编辑权限添加团队支持。 希望他们将来会为非技术客户添加一种访问Tina并在现场进行所有编辑的方式。 🤞

翻译自: https://www.digitalocean.com/community/tutorials/gatsbyjs-exploring-tina-cms

gatsby