撇号 cms - 自定义页面设置

Question

我想在页面设置对话框中添加元键和元描述字段，然后将它们呈现到页面中。我发现可以在页面模板 (html) 文件中执行类似的操作：

{% extends data.outerLayout %}
{% block extraHead %}
    <meta name="description" content="this is the page description" />
{% endblock %}

但是我如何允许最终用户插入这些值？

Answer 1

好的，在查看 apostrophe-sandbox 演示站点后，我找到了答案。我在项目的 lib/modules 文件夹下添加了一个名为 apostrophe-custom-pages 的新文件夹，并在其中添加了一个 index.js 文件，如下所示：

module.exports = {
  beforeConstruct: function(self, options) {
    options.addFields = [
      {
        name: 'metaDescription',
        label: 'Meta Description',
        type: 'string'
      },
      {
        name: 'metaTags',
        label: 'Meta Tags',
        type: 'string'
      }
    ]
  }
};

然后，在我的页面 html 模板中，我添加了：

{% block extraHead %}
  <meta name="description" content="{{ data.page.metaDescription}}" />
  <meta name="tags" content="{{ data.page.metaTags}}" />
{% endblock %}

就是这样。有用。现在我可以提供 SEO 支持。欢呼！ :)

Answer 2

这里有一个改进的方法：

{% block extraHead %}
 <meta name="description" content="{{ data.page.metaDescription | truncate(146, true, "..") | safe }}" />
{% endblock %}

我们在这里做了什么：

我们将元描述截断为特定长度（在本例中为 146 个字符，但您可以更改）；
我们在谷歌搜索时习惯的末尾添加一个漂亮的 ..；
我们将所有内容输出为 "safe" - 这负责将某些符号或字符显示为 unicode / html 字符串。虽然理论上可以被滥用。

最后一点请看截图：

撇号 cms - 自定义页面设置

apostrophe cms - customize page settings

javascript

apostrophe-cms

我们在这里做了什么：