添加小部件而不显示在 Netlify CMS 预览中答案

【问题标题】：Add widget without it showing up in Netlify CMS preview添加小部件而不显示在 Netlify CMS 预览中
【发布时间】：2017-12-13 18:19:50
【问题描述】：

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

我有这个开箱即用示例中的配置：

- 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"}

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

【问题讨论】：

标签： netlify netlify-cms

【解决方案1】：

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

Click here for Custom Preview Template docs

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

<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 脚本链接之后包含上面的脚本

【讨论】：