安装代码输入插件后无法在 Sanity CMS 中添加代码块

Question

我正在学习使用 Sanity CMS 和 React 构建博客。我是 Sanity 的新手。

我应该能够在我的博文中插入代码片段。所以，我安装了 code-input 插件。

根据此处的 link，安装插件后，我必须在我的架构类型中使用以下代码。我不知道在哪里插入代码。

请帮忙。

我的文件夹结构如下：

sanityblog/blockContent.js

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */
export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [{ title: "Bullet", value: "bullet" }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: "image",
      options: { hotspot: true },
    },
  ],
};

sanityblog/schema.js

// First, we must import the schema creator
import createSchema from "part:@sanity/base/schema-creator";

// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:@sanity/base/schema-type";

// We import object and document schemas
import blockContent from "./blockContent";
import category from "./category";
import post from "./post";
import author from "./author";

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: "default",
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    // The following are document types which will appear
    // in the studio.
    post,
    author,
    category,
    // When added to this list, object types can be used as
    // { type: 'typename' } in other document schemas
    blockContent,
  ]),
});

Answer 1

如果您正确安装了该插件，它现在可以作为一种模式类型在您的任何其他模式中使用。因此，为了回答您的问题，您可以将该代码放在您的 Sanity 工作室中任何您想要代码块的地方。我强烈建议查看 content modelling 文档

具体针对您的问题，假设您使用 sanityBlog/blockContent.js 字段作为帖子的内容，您可以将其添加到那里。这是它的样子：

export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      // ...annotations, styles, lists and marks you already have
    },
    {
      type: "image",
      options: { hotspot: true },
    },
    // Add the code block here 
    // it'll show up as one of the blocks available in your
    // Portable Text Editor
    {
      type: "code",
      title: "Code block",
    }
  ],
};

有关可移植文本/丰富内容字段 (type: "block") 的详细信息，请参阅 block type documentation. If you want to take it one step back, refer to the general block content documentation。

希望对您有所帮助

安装代码输入插件后无法在 Sanity CMS 中添加代码块

Unable to add code blocks in Sanity CMS after I install the code-input plugin

content-management-system

reactjs

sanity

headless-cms