根据网址更改网站图标

Question

我有一位客户希望我们的网络应用程序根据其网址进行品牌化。他们想将页面的图标更改为自有品牌的徽标并与标题相同，但我找不到任何代码或任何如何执行此操作的示例。以前有人成功做过吗？

我想象一个文件夹中有十几个图标，并且对要使用的 favicon.ico 文件的引用只是与 HTML 页面一起动态生成。想法？

PS：我们使用 React.js、TS 等运行我们的 Web 应用程序

我已经在我们的网络应用程序的index.html页面上尝试过，但这不适用于特定的网址

Answer 1

可以使用不同的方法。可以在需要其他图标的页面上使用 UseEffect，具体方法如下：

const somePage = (props) => {
 //now this useEffect does the job for you
  useEffect(() => {
    let link = document.querySelector("link[rel~='icon']");
    if (!link) {
      link = document.createElement('link');
      link.rel = 'icon';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
    link.href = 'https://stackoverflow.com/favicon.ico';
  }, []);

  return (
    <div>somePage</div>
  );
}

如果您还不太清楚，请检查这个

问题。 至于标题，你可以做同样的事情，或者你可以为它制作自定义挂钩：

export function usePageTitle(title: string) {
  const documentDefined = typeof document !== 'undefined';
  const originalTitle = useRef(documentDefined ? document.title : null);

 useEffect(() => {
    if (!documentDefined) return;

    if (document.title !== title) document.title = title;

    return () => {
      //@ts-ignore
      document.title = originalTitle.current;
    };
  }, []);
}

这并不难做到，而且对用户机器的负担也不重，因为它只是一个简单的 HTML DOM 文档对象操作。您可以为这两个东西制作钩子，或者您可以在每个需要它的组件中将其用作简单的 useEffect 作为 favicon ico 的第一个示例。