如何在 ApostropheCMS 中设置网站图标

Question

我曾尝试在我的 ApostropheCMS 站点中设置来自 apostrophe-assets 的网站图标图像，但我无法做到这一点。我找到了这个解决方案：

<link rel="shortcut icon" type="image/png" href="{{ apos.attachments.url(image, { size: 'one-sixth' }) }}"

但是，我不知道如何获取图像对象。预先感谢您的回答。

Answer 1

为了设置和访问您在上面的代码中引用的图像对象，您必须将网站图标图像添加到项目中某个对象的模式之一。如果您希望 favicon 在整个网站上都相同，则 Global 对象可能是保存它的好地方 - 在一个网站上只会创建一个全局对象，因此它应该可以很好地用于此目的。

为了将图像添加到全局架构中，您需要在 lib/modules/apostrophe-global/index.js 中创建一个文件（如果您还没有的话）。在该文件中，您需要添加以下代码：

module.exports = {
  addFields: [
    {
      type: 'attachment',
      name: 'favicon',
      label: 'Site Favicon'
    }
  ]
};

这将在名为 Site Favicon 的全局对象上添加一个新字段。您可以通过登录您的站点并单击撇号工具栏上的全局按钮，然后为站点 Favicon 属性选择一个文件来选择用作 favicon 的图像。为了获得正确的对象并将其添加到您在上面指定的 link 标记中，您可以使用：

<link rel="shortcut icon" type="image/png" href="{{ apos.attachments.url(data.global.favicon, { size: 'one-sixth' }) }}"

这将找到全局对象中指定的附件的 URL。为全局对象选择图像后，文件的 URL 应自动插入到 link 标签中。

这里有很多关于撇号全局对象以及如何从模板访问字段的信息 URL： https://apostrophecms.org/docs/tutorials/getting-started/settings.html

Answer 2

您还可以使用对编辑器友好的模块 apostrophe-favicons，该模块将从您那里提取部分工作，让编辑器通过撇号界面更新网站图标。

npm i apostrophe-favicons

How to set a favicon in ApostropheCMS