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

Question

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

我应该能够在我的博客文章中插入代码 sn-ps。所以，我已经安装了code-input 插件。

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

请帮忙。

我的文件夹结构如下：

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。如果您想退后一步，请参考general block content documentation。

希望这会有所帮助?