netlify - 添加小部件而不显示在 Netlify CMS 预览中

Question

是否有允许用户在编辑器中输入文本值但不显示在右侧预览中的后端小部件类型？

我从开箱即用的示例中获得了以下配置：

- label: "Blog"
  name: "blog"
  folder: "_posts/blog"
  create: true
  fields:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Publish Date", name: "date", widget: "datetime"}
    - {label: "Featured Image", name: "thumbnail", widget: "image"}
    - {label: "Body", name: "body", widget: "markdown"}

我不希望发布日期显示在预览中。

Answer 1

Netlify CMS 允许自定义预览，并在预览中包含或排除您想要的任何内容。模仿您的页面布局并使用您构建的样式表来提供所见即所得的布局。

单击此处获取自定义预览模板文档

您index.html的 CMS 文件夹中可能有以下内容

<script>
var PostPreview = createClass({
  render: function() {
    var entry = this.props.entry;
    var image = entry.getIn(['data', 'thumbnail']);
    var imageContainer = (image) ? h('section', {className: "mdc-card__media", style: {backgroundImage: `url(${image})`, height: '20rem'}},) : h('div');
    return h('div', {},
      h('div', { className: "blog-post" },
        imageContainer,
        h('div', { },
          h('h1', { }, 
            h('span', { }, entry.getIn(['data', 'title']))
          ),
        ),
        h('div', {className: "post-body"},
          h('div', { }, this.props.widgetFor('body'))
        )
      )
    )
    }
});

CMS.registerPreviewTemplate("blog", PostPreview);
</script>

确保在cms.js脚本链接之后包含上面的脚本