NextJs 13 Beta：如何使用新的元数据 api 添加多种尺寸的图标？也可以在这里添加站点清单吗？

Question

我正在寻找添加多个浏览器特定的图标，但我得到 ts(1117) 声明“一个对象文字不能具有多个同名的属性。”

我明白这一点，但类型界面也不会让我命名“图标”。例如，“apple-touch-icon:”或“icon2”不起作用。

此外，如果我将一个图标直接放在 next/static/metadata 文件夹中，它在我的浏览器中测试时可以正常工作并正确显示，而无需在代码中明确声明...

这是使用动态元数据的情况吗？我应该根据识别的设备使用条件逻辑来呈现吗？我觉得那样会使它过于复杂！抱歉，我是网络开发的新手，所以我缺乏理解。

还有，有没有办法使用这个新的元数据 API 添加清单？除了“标题：”、“描述：”和“图标：”之外，我什么都看不到。

这是我的 layout.tsx 文件顶部的内容：

export const metadata = {
  title: 'Welcome',
  icons: {
    // icon: "/_next/static/media/metadata/apple-touch-icon.png",
    icon: "/_next/static/media/metadata/favicon-32x32.png",
    // icon: "/_next/static/media/metadata/favicon-16x16.png",
  },
// manifest: "/site.webmanifest",
}
;

Answer 1

您可以在客户端代码中手动定义图标大小，然后在使用元数据 API 创建自定义对象记录时使用相同的大小。

const getFaviconUrls = async () => {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  const isAndroid = /Android/.test(navigator.userAgent) && !window.MSStream;
  const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

  const pixelRatio = window.devicePixelRatio || 1;

  let iconSizes = [];

  if (isIOS) {
    iconSizes = [
      57,
      60,
      72,
      76,
      114,
      120,
      180
    ];
  } else if (isAndroid && isChrome) {
    iconSizes = [
      36,
      48,
      72,
      96,
      144,
      192,
      512
    ];
  } else {
    iconSizes = [32];
  }

  // Retrieve the CustomObject records from Salesforce
  const iconRecords = await conn.metadata.read('CustomObject', iconSizes.map(size => `Icon_${size}`));

  // Map the icon records to their filenames
  const iconFilenames = iconRecords.records.map(record => `/path/to/${record.Filename__c}`);

  return iconFilenames;
};

将“Icon_${size}”重命名为您的图标名称。 “apple-touch-icon-${size}”或“android-chrome-${size}”。