NextJs 13测试版：如何使用新的Metadata API添加多种大小的favicon？是否可以在这里添加站点清单？

bqujaahr 于 2023-03-29 发布在其他

关注(0)|答案(1)|浏览(182)

我希望添加多个浏览器特定的favicon，但我得到ts（1117）声明“一个对象文字不能有多个同名的属性。”
我理解这一点，但是类型接口也不允许我命名“icon”任何其他名称。例如，“apple-touch-icon：'或' icon 2 '不起作用。
另外，如果我直接在next/static/metadata文件夹中放置一个favicon，它在我的浏览器中测试时可以正常工作并显示，而不需要在代码中显式声明...
这是使用动态元数据的情况吗？我应该使用条件逻辑来根据所识别的设备进行渲染吗？我觉得这会使它过于复杂！很抱歉我对Web开发缺乏了解，因为我是新手。
另外，是否有任何方法可以使用这个新的元数据API添加清单？我没有看到除'title：'，'说明：'和'图标：'.
下面是我的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",
}
;

next.js

来源：https://stackoverflow.com/questions/75852678/nextjs-13-beta-how-to-add-multiple-sizes-of-favicons-using-new-metadata-api-is

1条答案

按热度按时间

06odsfpq1#

您可以在返回图标之前检查用户设备和浏览器。以下是一个示例：

const getFaviconUrl = () => {
  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);
  
  if (isIOS) {
    return "/path/to/apple-touch-icon.png";
  } else if (isAndroid && isChrome) {
    return "/path/to/android-chrome-192x192.png";
  } else {
    return "/path/to/favicon.ico";
  }
};

const Layout = ({ children }) => {
  const faviconUrl = getFaviconUrl();

  return (
    <div>
      <Head>
        <link rel="icon" href={faviconUrl} />
      </Head>
      {children}
    </div>
  );
};

赞(0）回复(0）举报 2023-03-29

我来回答

NextJs 13测试版：如何使用新的Metadata API添加多种大小的favicon？是否可以在这里添加站点清单？

1条答案

相关问题

热门标签

最新问答