Значок сайта Hugo отображается локально, но не может быть найден в развертывании

#favicon #hugo

Вопрос:

Это мой первый раз, когда я использую Хьюго. Я использую тему Bento для своего сайта Hugo, которая не поставляется с поддержкой favicon из коробки (я просмотрел всю базу кода, и ее нигде не найти). Следовательно, я добавил необходимые HTML-теги к частичным > head.html. Когда я запускаю локально с hugo server -D или npm run dev , значок отображается нормально.

Я думаю, что есть проблема с тем, как написана моя относительная ссылка, однако всякий раз, когда я ее изменяю, она нарушает ее локально. Я использую AWS Amplify для развертывания с автоматическим аннулированием cloudfront, так что проблема не в этом.

Когда я просматриваю источник страницы развернутого сайта, я получаю это для избранных:

 <link rel="apple-touch-icon" sizes="180x180" href="favicon not found%!(EXTRA string=apple-touch-icon.png)">
 

Вы можете увидеть проблему в href= поле

Вот как мои фавиконы реализованы в partial/head.html:

 <link rel="icon" type="image/png" sizes="32x32" href="{{ "/img/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/img/favicon-16x16.png" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/img/apple-touch-icon.png" | relURL }}">
 

Я также попытался реализовать это , добавив ссылки в config.toml и используя Site.Params , но и с этим тоже не повезло.

Ответ №1:

Ниже показано, как бы вы это сделали:

 <link ... href="/img/favicon-32x32.png">
<link ... href="/img/favicon-16x16.png">
<link ... href="/img/apple-touch-icon.png">
 

Поэтому вам не нужно использовать тег hugo/Go {{}} (это будет для переменной сайта, такой как {{.раздел }} — вы можете просто ввести относительный URL-адрес, который будет просто «/img/favicon-32×32…и т. Д.», Просто убедитесь, что ваше изображение находится в соответствующей папке.

Я протестировал свою установку hugo, и пока ваш фавикон находится в нужном месте — это решает вашу проблему.

  • Также обратите внимание: Если вы хотите использовать переменную сайта {{ $.Site.Парам и т. Д…}} например, href=»{{ #.Сайт.Парам и т. Д…}} вы бы добавили имя и значение переменной в свой конфигурационный файл. См. Ниже ссылку на это из hugodocs: Переменные сайта

Комментарии:

1. Это сработало! Спасибо вам за ваше решение. Я все еще очень новичок в Хьюго, но мне действительно нравится структура.

2. Это здорово. Не беспокойтесь. Помните, документы Хьюго ( gohugo.io ) на самом деле довольно хороши, и видео на YouTube, представленные в документах, довольно хорошо знакомят вас с основами (я полагаю, академия жирафа). Я также обнаружил, что Pakstech был еще одним хорошим ресурсом, когда я учился. Желаю удачи!