Теперь, когда у нас настроен наш сайт, мы можем добавить изображения к нашим сообщениям или макетам.
Самый простой способ сделать это - использовать папку static.
Static
Папка static в нашем проекте - еще одна особенная функция Hugo. Hugo позволяет легко получить доступ ко всему в папке static внутри постов разметки или в макетах, просто используя вот такую косую черту/.
Например: помести изображение в папку static. Затем перейди к Markdown сообщению в блоге и используй синтаксис image для ссылки на новое изображение.
Если я сохраняю изображение утки по имени duck.png внутри моей папки static, тогда в моём посте мне необходимо написать , чтобы отобразить его.
Это просто! НО об изображениях и Интернете нужно знать одну важную вещь - большие изображения загружаются дольше.
Каждый раз, когда пользователь посещает наш сайт, он должен загрузить все файлы HTML, файлы CSS и изображения, которые необходимы браузеру для правильного отображения страницы, поэтому чем больше файлы, тем больше времени требуется для загрузки страницы - а медленное время загрузки = плохое время.
Чтобы легко решить эту проблему, мы можем использовать assets.
Assets
Assets - еще одна особенность Hugo, потому что они предоставляют нам некоторые функции в наших шаблонах для сжатия изображений, чтобы их окончательный размер был меньше и загружался быстрее.
Имей в виду, что при сжатии изображений качество может ухудшаться, но в большинстве случаев это незаметно.
Чтобы проверить сжатие, создай папку с именем assets в корне твоего проекта, затем перемести изображение из папки static в эту новую папку.
Затем, чтобы сжать изображение, перейди к HTML-файлу твоего шаблона и напиши следующее:
{{ $asset := resources.Get "/duck.png" }}
{{ $img := $asset.Fit "600x400" }}
<figure class="image is-3by2">
<img alt="Yellow Duck" src="{{ $img.RelPermalink }}" />
</figure>
Сначала мы получаем изображение по имени и сохраняем его в переменной $asset. Затем мы изменяем размер изображения до 600 на 400 пикселей и сохраняем его в переменной $img. Затем мы используем $img.RelPermalink внутри тега HTML <img>для отображения нашего нового сжатого изображения! Мы также используем классы CSS от Bulma, чтобы изображение хорошо масштабировалось на больших и маленьких экранах.
Shortcodes
Тебе может быть интересно, почему для Markdown мы использовали изображения в папке static, а для HTML-шаблонов изображения в папке assets, и это потому, что у нас есть доступ к функциям сжатия только внутри шаблонов, а не внутри Markdown.
Но есть способ предоставить авторам контента доступ для сжатия изображений внутри Markdown с помощью пользовательских шорткодов, которые являются функцией Hugo. Она позволяет нам создавать собственный синтаксис и логику для использования внутри Markdown.
Пользовательские шорткоды выходят за рамки этого мини-курса, но если вы хотите узнать больше о вариантах их использования, ознакомьтесь с документацией Hugo о них.