如何向Next.js静态站点添加偏好图标？
如何向Next.js静态站点添加偏好图标？
提问于 2019-05-20 00:15:10
我试图添加一个偏袒图标到一个Next.js静态网站，没有多少运气。
我尝试用'next/document' https://nextjs.org/docs/#custom-document的组件自定义文档
指向favicon.ico文件的直接链接不起作用，因为该文件没有包含在构建中，并且href没有更新到/_next/static/...
导入图像并添加到链接的href也不起作用(请参阅注释行)。
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
// import favicon from '../data/imageExports';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
{/* <link rel="shortcut icon" href={favicon} /> */}
<link rel="shortcut icon" href="../images/icons/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}有人这样做了吗？
回答 11
Stack Overflow用户
回答已采纳
发布于 2019-05-23 03:47:03
- 在项目根目录中创建
/static文件夹。这将被添加到静态导出文件夹中。 - 在
/static文件夹中添加偏袒文件。 - 根据
_document.js或文档(github.com)将文档(nextjs.org)添加到/pages/文件夹中。 - 将
<link rel="shortcut icon" href="/static/favicon.ico" />添加到头。 npm run build && npm run export
感谢被删除的先前的回答。它起作用了!
编辑:另一种方法是将Head导入根布局并在其中添加链接。添加到Head的任何内容都会插入到document标记中。
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
// Other layout/components
</div>
);
export default Page;更新:
静态目录已被弃用，以支持公共目录。文档
所以，代码现在看起来就像
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);Stack Overflow用户
发布于 2020-04-26 08:42:23
只需将您的favicon.ico添加到公用文件夹中，下一个js将自动接受所有页面的偏爱图标。
不需要添加任何偏袒链接到任何网页，或在标签中，不需要添加链接的偏袒图标。
https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md
Stack Overflow用户
发布于 2019-12-08 01:48:47
接受的答案很好，但是值得指出的是，您不必修改_document.js来添加一个图标(也不需要为head添加任何标记)。
我自己发现，在_app.js中放置偏袒更有意义。该文件很可能已经存在，用于设置页面的布局或类似的内容。您可以在任何地方添加Head标记(参见医生们)。
所以我和_app.js在一起
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<Layout>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</Layout>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56213019
复制相关文章
相似问题
腾讯云开发者
