Apostrophe CMS 上的预定义小部件

Question

我一直在使用 Apostrophe CMS，它很棒。我想要做的是在页面上预定义小部件，而无需用户添加这些小部件，并且这些小部件具有占位符数据。例如，我希望撇号图像已经出现在某个区域的页面上并具有占位符图像。然后，用户将更改内容以满足他们的需要。那可能吗？

Answer 1

实现这一点的一个有点脆弱的方法是连接到 apostrophe-pages beforeInsert 方法并检测您想要应用示例数据的某些条件，然后使用您的示例 JSON 填充适当的属性。

1. 在编辑器首次创建页面时填充您希望看到的页面。

2. 从数据库中的预填充属性中复制 JSON，因为 Apostrophe 会存储它（db.aposDocs.find({slug: '/sample'} 或其他）。

3. 在您看到从示例中复制的 _id 字段的任何地方，将其替换为 self.apos.utils.generateId()（不要替换您实际引用的内容的 id）

4. 在lib/modules/apostrophe-pages/index.js

module.exports = {
  types: [
    {
      name: 'default',
      label: 'Default'
    }
    // .. other page types
  ],
  construct: function(self, options) {
    self.beforeInsert = function(req, page, options, callback) {

      ////////////
      // Should i pre populate this new page with sample data?
      if (page.type === 'default') {
        page.body = {
          "type" : "area",
          "items" : [
            {
              "by" : "id",
              "_id" : self.apos.utils.generateId(),
              "pieceIds" : [
                "ck2z5b8y0002xs6q7jcthp2ds"
              ],
              "relationships" : {
                "ck2z5b8y0002xs6q7jcthp2ds" : {
                  "left" : null,
                  "top" : null,
                  "width" : null,
                  "height" : null,
                  "x" : null,
                  "y" : null
                }
              },
              "type" : "apostrophe-images"
            },
            {
              "_id" : self.apos.utils.generateId(),
              "type" : "apostrophe-rich-text",
              "content" : "<p><strong><em>Authors often misinterpret the mom as a surest quilt, when in actuality it feels more like a rimless jeep. Far from the truth, an iffy russia without porcupines is truly a sycamore of jessant farmers.</em></strong></p>\n\n<p> </p>\n"
            }
          ]
        }
      }
      return setImmediate(callback);
    };
  }
};

这将使用包含apostrophe-images 小部件和apostrophe-rich-text 小部件的区域预先填充页面的body 属性。

您可以通过在您感兴趣的页面类型上添加一个字段来进一步限制此行为，让编辑者选择退出此行为并检查您的 beforeInsert 条件。

再一次，这个例子有点死板，因为你将图像片段 id 硬编码到 beforeInsert 中。你可以通过运行带有特定标签（'sample'）的图像查询来进一步了解，生成 lorem ipsum在填充您的属性之前，带有外部模块等的文本。