Khám phá TinaCMS với Gatsby
Tất cả ta đều có thể đồng ý về mức độ tuyệt vời của đánh dấu, sẽ luôn hài lòng hơn đáng kể khi thấy các chỉnh sửa và thay đổi kiểu trên các trang web trong thời gian thực. 🦙 TinaCMS , khi kết hợp với Gatsby, cho ta khả năng thao tác trực tiếp các file đánh dấu trên các trang của ta . TinaCMS cũng hoạt động với Next.js, nhưng ở đây ta sẽ khám phá công cụ mới mạnh mẽ này với trang Gatsby.
Cài đặt
Ta sẽ bắt đầu với người bắt đầu gatsby-starter-blog , vì nó đã có mọi thứ ta cần cho các bài đăng đánh dấu.
Chỉ có bốn thứ chính ta cần, bản thân TinaCMS, các thành phần được tạo kiểu (mà TinaCMS phụ thuộc vào), plugin remark của Tina để xử lý đánh dấu của ta và plugin git của Tina để cung cấp cho nó khả năng trực tiếp thay đổi các file trong hệ thống file của ta và thực hiện commit vào account Github của bạn khi bạn lưu một bài đăng.
$ gatsby new tina-example https://github.com/gatsbyjs/gatsby-starter-blog $ yarn add gatsby-plugin-tinacms styled-components gatsby-tinacms-remark gatsby-tinacms-git Cài đặt
Cài đặt ban đầu không thể dễ dàng hơn: ta sẽ thêm gatsby-plugin-tinacms vào gatsby-config.js với các plugin remark và git . Cá nhân tôi thích đặt position thành fixed , vì theo mặc định, thanh bên sẽ đẩy trang web của ta sang một bên.
{ resolve: 'gatsby-plugin-tinacms', options: { plugins: [ "gatsby-tinacms-git", "gatsby-tinacms-remark", ], position: 'fixed' } } Chỉ với điều đó, trang web sẽ có một tab nhỏ màu xanh lam ở dưới cùng để mở một thanh bên mới.
Thanh bên
Bây giờ, trong mẫu bài đăng của ta , ta cần có thêm một số thứ từ truy vấn của bạn ; fileRelativePath , rawFrontmatter , rawMarkdownBody . Các thành phần này sẽ được sử dụng bởi thành phần bậc cao hơn remarkForm mà TinaCMS cung cấp cho ta , tất cả những gì ta phải làm là bọc thành phần đã xuất của ta với nó và bạn nên thực hiện.
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 } } `; Bây giờ Tina có quyền truy cập vào tất cả các bài đăng đánh dấu của bạn và sẽ cập nhật và nhanh chóng reload trang để hiển thị bất kỳ thay đổi mới nào. Thêm vào đó, khi nào bạn nhấn nút lưu, sẽ có một commit nhỏ được thực hiện cho repo Github của bạn, vì vậy mọi nền tảng lưu trữ được kết nối với nó sẽ được cập nhật tự động.
Chỉnh sửa nội tuyến
Việc phải làm việc với nội dung dài hoàn toàn trong thanh bên sẽ là một điều khó khăn và thay vào đó, ta có thể cài đặt nội dung kết quả của bạn dưới dạng editor để ta có thể tương tác trực tiếp với nội dung của bạn trên trang và giữ thanh bên chỉ dành cho metadata , chủ đề, thêm / xóa , Vân vân.
Thậm chí không cần phải thay đổi nhiều, thay vì remarkForm ta sẽ bọc mẫu trang trong liveRemarkForm và bọc bất kỳ phần nào ta muốn có thể chỉnh sửa bằng TinaField . TinaField chỉ cần được đặt tên là rawMarkdownBody và thông qua thư viện Wysiwyg làm chỗ dựa. Wysiwyg là viết tắt của những gì bạn thấy là những gì bạn nhận được , là thứ sẽ cung cấp cho ta hầu hết các khả năng chỉnh sửa trong thời gian thực.
Ta sẽ kích hoạt chế độ chỉnh sửa khi nào bạn nhấp vào chính bài viết, với phương pháp setIsEditing tiện dụng.
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> ) }; Điều đầu tiên trong phương thức setIsEditing Chỉnh sửa là trạng thái chỉnh sửa hiện tại, vì vậy nếu thay vào đó bạn muốn sử dụng nút bật tắt, bạn có thể thực hiện một số thao tác như props.setIsEditing(editing => !editing)
Xóa bài đăng
Xóa file rất đơn giản, chỉ cần nhập phương thức DeleteAction tiện dụng, ném vào một đối tượng có nhãn và đưa nó vào liveRemarkForm .
import { liveRemarkForm, DeleteAction } from 'gatsby-tinacms-remark'; const deleteButton = { label: 'Delete', actions: [DeleteAction] }; export default liveRemarkForm(BlogPostTemplate, deleteButton); Bây giờ bên cạnh nút lưu là một menu nhỏ với tùy chọn Delete .
Thêm bài đăng
Khả năng thêm bài đăng là nơi mọi thứ trở nên nặng nề hơn một chút trên bảng định vị.
Ta sẽ sử dụng hàm createRemarkButton để thêm một tùy chọn mới vào thanh bên của ta . Bất cứ thứ gì ta trả về filename sẽ được thêm vào hệ thống file của ta và ta có thể sử dụng thư viện slugify để định dạng tên cho file của bạn .
frontmatter sẽ xử lý metadata cho bài đăng của ta từ biểu mẫu của ta . fields sẽ tự cài đặt biểu mẫu. Cuối cùng, ta sẽ sử dụng withPlugin HOC để thêm nút mới vào bố cục của ta .
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); 
Kết luận
Vẫn còn rất nhiều điều để khám phá với TinaCMS như tạo / xóa trang bằng JSON và tạo các trường, khối và plugin tùy chỉnh.
Vì TinaCMS là một công nghệ vẫn còn khá mới nên vẫn có nhiều cách để cải thiện nó. Họ hiện đang làm việc để thêm hỗ trợ group cho các role và quyền chỉnh sửa khác nhau. Hy vọng rằng trong tương lai, họ sẽ thêm một cách để khách hàng không am hiểu về công nghệ có thể truy cập vào Tina và chỉnh sửa mọi thứ trên trang web. 🤞
Các tin liên quan
