Создание стартового файла CSS Hugo + Tailwind

Проблема, которую необходимо решить в данной статье

Прочитав учебники по Hugo, я обнаружил, что инструменты SSG весьма полезны, а поскольку срок аренды моего недавнего хостинга истекал, я хотел сделать бесплатный сайт, перейдя с WordPress на Hugo и разместив сгенерированные статические файлы непосредственно на GitHub Pages.

Поскольку было два сайта, которые хотели переехать, я хотел сначала создать начальный файл CSS Hugo + Tailwind, чтобы два сайта могли клонировать начальный файл, а затем изменить стиль и перейти в онлайн.

Эта статья — сборник проблем, с которыми мы столкнулись при создании начального файла, и их решений, с которыми, как я полагаю, столкнутся новички во вселенной Hugo, как и Август.

Ссылка на проект GitHub для исходных файлов также включена в конце.

Начальные файлы: установка, разработка и создание статических файлов

Вот как использовать этот начальный файл.

Сначала перейдите на страницу проекта и загрузите весь проект: https://github.com/letswritetw/letswrite-hugo-tailwindcss-init.

Перед загрузкой, пожалуйста, нажмите на звездочку, чтобы подбодрить Let’s Write, так как на создание этого стартового файла ушло несколько дней.

Убедитесь, что на вашей машине установлен Node.js, а еще лучше сначала установите его, а затем продолжите работу с Yarn.

Откройте терминал в проекте и введите

$ npm install
或
$ yarn

После создания package.json выполнение вышеуказанной команды приведет к установке Tailwind CSS.

Если вы хотите разрабатывать и создавать статические файлы, вы также можете использовать Command для этих целей.

Разработка

$ npm run serve
或
$ yarn serve

Создайте статический файл

$ npm run build
或
$ yarn build

Для размещения на GitHub Pages сгенерированный статический файл будет находиться в папке «docs».

config

Конфигурационный файл — config.yml, потому что вы хотите привыкнуть к YAML.

Карта сайта

Файл: Шаблоны Sitemap

Файл конфигурации может быть настроен на вывод файла Sitemap, но на одном из предыдущих семинаров по SEO прозвучал аргумент, что если панель навигации достаточно надежна, то файл Sitemap не так важен. Однако, поскольку он может быть сгенерирован автоматически, лучше его создать.

sitemap:
  changefreq: weekly
  filename: sitemap.xml
  priority: 1.0

changefreq — это частота обновления страницы, можно записать следующие значения.

always, hourly, daily, weekly, monthly, yearly, never

Вот почему Sitemap становится все менее и менее важным, так же как и набивка мета-ключевых слов в прошлом.

Если вы хотите иметь отдельную страницу, которая отличается от других, просто напишите это в Front Matter файла страницы.

Google Analytics

В конфиг можно записать идентификатор отслеживания GA, а при использовании встроенного шаблона Hugo похоронит код отслеживания GA.

config

googleAnalytics: GA 追蹤碼 ID

Добавьте следующий HTML в то место, куда вы хотите вставить его, в данном случае в layouts/partials/head.html.

{{ template "_internal/google_analytics.html" . }}

Поскольку Google будет использовать GA4 только после июля 2023 года, это HTML для GA4.

Но что, если я хочу разместить более одного GA? Нет, это не прописано в документе.

Если вы хотите разместить более одного GA, мы предлагаем вам поместить код Google Tag Manager непосредственно в шапку, и использовать GTM для заполнения кода отслеживания GA вместо этого.

Пользовательские параметры

Исходный файл, созданный Let’s Write, имеет два пользовательских параметра, записанных в конфиге.

params:
  mainColor: '#42A6F7'
  favicon: 這邊填寫 favicon 的圖檔路徑

mainColor будет использоваться в мета-темах theme-color и msapplication-TileColor, один — это цвет функции браузера телефона, а другой — цвет, который будет доступен при сохранении в качестве приложения Windows. Второй — это путь к фавикону.

Второй — путь к фавикону.

головной файл

Файл layouts/partials/head.html является содержимым страницы

Содержание страницы. Ниже перечислены некоторые подводные камни, с которыми мы столкнулись.

Открытый график

Файл: Open Graph

Открытый график в основном

Хьюго может установить заголовок, описание, картинку, дату, видео и категорию в Front Matter.

Исходные файлы для программы Let’s Write следующие.

title: 標題
description: 描述
cover: 配圖
date: 日期
categories:
    - 分類
videos:
    - 影片網址

Категории влияют на страницу see also, которую можно перевести как «вам может быть интересно» или «люди, прочитавшие это, также прочитали это». В документе используется серия, но фактические категории здесь имеют тот же эффект.

После настройки Front Matter для каждой страницы шаблон Open Graph должен быть помещен в файл шаблона.

{{ template "_internal/opengraph.html" . }}

Ссылки на файлы CSS и JS

Файл: Hugo Pipes Введение, построение JavaScript

Основная причина заключается в том, что хотя локальный демо-сайт обновляется сразу после архивации файлов в Hugo, CSS и JS кэшируются, и даже если кэш не реорганизован, старые CSS и JS всегда будут видны.

Прочитав документацию, я понял, что Хьюго настроил функцию отпечатков пальцев, которая позволяет именам файлов, на которые ссылаются CSS и JS, каждый раз быть разными.

Поместите файлы CSS в папку assets/css/, а файлы JS — в папку assets/js/. Главное — поместить файлы в папку assets, чтобы их можно было захватить ресурсным способом.

<!-- 引用 CSS -->
{{ $tailwind := resources.Get "css/tailwind.min.css" | fingerprint }}
<link rel="stylesheet" href="{{ $tailwind.Permalink }}">

<!-- 引用 JS -->
{{ $main := resources.Get "js/main.js" | js.Build "main.js" | minify | fingerprint }}
<script src="{{ $main.Permalink }}"></script>

Для CSS Hugo может скомпилировать SASS/SCSS напрямую, но поскольку этот начальный файл использует Tailwind CSS, просто добавьте fingerprint, чтобы имя файла заполнили случайные числа.

Что касается JS, Hugo может компилировать ES6+ ура~ и может сжимать файлы, так что эта сторона заключается в компиляции + сжатии + добавлении случайных чисел.

Схема структурированных данных

Это нужно для SEO, полную документацию смотрите в Google: Понимание работы структурированных данных.

layouts/partials/schema.html содержит основной «логотип».

<script type="application/ld+json">
  {
    "@context": "https://www.schema.org",
    "@type": "Organization",
    "name": "{{ .Site.Title }}",
    "url": "{{ .Site.BaseURL }}",
    "logo": "{{ .Site.Params.favicon }}"
  }
</script>

А затем в файле baseof.html с частичной ссылкой

{{ partial "schema.html" . }}

Это можно сделать, обратившись к этой статье: Добавление структурированных данных на ваш сайт Hugo

Как ни странно, в документации Hugo встроенные шаблоны уже имеют схему Schema

{{ template "_internal/schema.html" . }}

Просто в документации не указано, как его использовать или какие параметры к нему добавлять, а August не выдает никакого кода при прямом обращении к нему, поэтому вместо него используется частичный подход.

Если вы знаете встроенный шаблон для Schema, пожалуйста, оставьте комментарий.

структура файла содержимого

Файл содержимого содержит страницы каждой статьи, а структура файла выглядит следующим образом

content
├── post
│   ├── demo1
│   │   ├── cover.png
│   │   └── index.md
│   ├── demo2
│   │   ├── cover.png
│   │   └── index.md
│   └── index.md（posts 的列表首頁）
└── index.md（網站首頁）

Как и в demo1, каждая статья помещается в папку с файлом index.md в качестве текста и файлом изображения в качестве вспомогательного изображения.

Все они помещены в одну папку, а способ захвата изображения следующий

{{ $image := .Resources.GetMatch "xxx.jpg" }}

В качестве альтернативы все изображения можно поместить в одну папку, которая должна находиться в assets, например assets/images/. Чтобы запечатлеть изображение, вы можете сделать это следующим образом

{{ $image := resources.Get "images/xxx.jpg" }}

Однако, как бы ни старался August, ему не удается захватить ширину изображения, поэтому этот исходный файл является первым способом захвата изображения и статьи в одной папке.

Файл изображения также может быть внешней библиотекой, а способ захвата изображения следующий

{{ $image := resources.GetRemote "https://xxx.xxx/xxx.png" }}

После захвата изображения вы можете захватить путь, ширину и высоту файла изображения, например

{{ $image := .Resources.GetMatch "xxx.jpg" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

Захват изображений ссылки на статьи, обрезка

layouts/partials/cover.html Этот файл используется для цитирования и обрезки файлов изображений, в основном для работы с изображениями, соответствующими статье.

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

Код примера выше использует {{ .RelPermalink }} для захвата пути к изображению, но, к сожалению, переменная RelPermalink также используется для ссылки на статью, поэтому решение состоит в том, чтобы сначала сохранить ссылку на статью как переменную. в качестве переменной.

Чтобы интегрировать захват ссылки на статью и обрезку изображения, код примера можно изменить на следующий.

{{ $Uri := .RelPermalink }}
{{ $Image := .Resources.GetMatch (print .Params.cover) }}
{{ $ImageResize := $Image.Resize "768x" }}
{{ with $Image }}
  <div>
    <a href="{{ $Uri }}">
      <img
        src="{{ $ImageResize.RelPermalink }}" alt="{{ .Title }}"
        width="{{ $ImageResize.Width }}" height="{{ $ImageResize.Height }}">
        </a>
  </div>
{{ end }}

Полное объяснение см. в документе: Обработка изображений

Продолжение следует

Август завершил первоначальный файл, но он еще не использовался, поэтому мы начнем использовать его для фактического перемещения имеющегося у нас сайта, и если в процессе возникнут проблемы с текущей структурой или дизайном, мы внесем изменения и в него.

Ссылка на начальный проект GitHub находится здесь, пожалуйста, нажмите на звездочку, прежде чем использовать его, или поделитесь этой статьей, ваш маленький жест будет большим подспорьем для этого сайта:

https://github.com/letswritetw/letswrite-hugo-tailwindcss-init