Как добавить значок сайта в статический сайт Next.js? - PullRequest
Новая
       51

Как добавить значок сайта в статический сайт Next.js?

0 голосов
/ 20 мая 2019

Я пытаюсь добавить значок к статическому сайту 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>
    );
  }
}

Добавляются ссылки на избранные, однако они не отображаются. Я ожидаю, что это будет работать, когда я импортирую файл, но он просто добавляет <link rel="shortcut icon" href="[object Object]"> ссылку.

Кто-нибудь еще делал это?

1 Ответ

1 голос
/ 23 мая 2019
  1. Создайте папку /static в корневом каталоге проекта.Это будет добавлено в папку статического экспорта.
  2. Добавить файл избранного в папку /static.
  3. Добавить _document.js в /pages/ папку в соответствии с документацией .
  4. Добавьте <link rel="shortcut icon" href="/static/favicon.ico" /> в заголовок.
  5. npm run build && npm run export

PS Благодаря предыдущему удаленному ответу (?).Это работает!

Редактировать: Другой способ сделать это - импортировать Head в ваш корневой макет и добавить туда ссылку.Все, что добавлено в Голова , вставляется в тег заголовка документа. 

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;
...