0

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

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

根据此处的链接，安装插件后，我必须在我的模式类型中使用以下代码。 在此处输入图像描述 我不知道在哪里插入代码。

请帮忙。

我的文件夹结构如下：

在此处输入图像描述

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,
  ]),
});
4

1 回答 1

0

如果您正确安装了插件，它现在可以作为一种模式类型用于您的任何其他模式。因此，要回答您的问题，您可以将该代码放在 Sanity Studio 中您想要代码块的任何位置。我强烈建议阅读内容建模文档

具体到您的问题，假设您使用该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") 的详细信息，请参阅块类型文档。如果您想退后一步，请参阅通用块内容文档。

希望这可以帮助

于 2021-04-02T11:30:12.793 回答