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

html шаблоны в golang

Премиум 👑 канал по Golang

Рекомендуем вам супер TELEGRAM канал по Golang где собраны все материалы для качественного изучения языка. Удивите всех своими знаниями на собеседовании! 😎

Подписаться на канал

Уроки, статьи и Видео

Мы публикуем в паблике ВК и Telegram качественные обучающие материалы для быстрого изучения Go. Подпишитесь на нас в ВК и в Telegram. Поддержите сообщество Go программистов.

Go в ВК ЧАТ в Telegram

Для этого создадим файл шаблона в папку ui/html

Добавим в него следующую HTML разметку для домашней страницы:

На заметку: В следующих уроках для файлов шаблонов мы будет использовать именовании следующего формата <название>.<роль>.tmpl, где <роль> будет одно из трех page, partial или layout. Возможность определить роль шаблона из самого названия файла поможет нам, когда придет время создания кеша шаблонов.

Итак, теперь, когда мы создали файл шаблона с HTML разметкой для домашней страницы, возникает вопрос: как заставить обработчик главной странице home()  показать его?

Для этого потребуется импортировать пакет Go html/template, который предоставляет множество функций для безопасного чтения и рендеринга HTML шаблонов. Можно использовать функции из данного пакета для парсинга файла шаблона, а затем выполнить сам шаблон.

Продемонстрируем это в деле. Откройте файл cmd/web/handlers.go и добавьте следующий код:

Важно отметить, что путь к файлу, который вы передаете функции template.ParseFiles(), должен быть либо относительно вашей текущей рабочей папки, либо абсолютным путем. В приведенном выше коде мы указали путь относительно корня папки проекта.

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

Откройте страницу http://127.0.0.1:4000 в браузере. Вы заметите, что домашняя страница начала приобретать новый вид:

HTML шаблон для сайта на Golang

Основы использования шаблонизатора в Go

При добавлении дополнительных страниц в веб-приложение будет использоваться некоторая общая стандартная HTML разметка, некий «каркас«. Данный каркас будет использован на каждой странице, в него будет входить например, заголовок, меню навигации и метаданные внутри HTML элемента <head>. По сути, у нас на таких страницах как «Контакты» и «О проекте» будет одна и та же HTML разметка кроме тех данных, что будут находится в теге <body>.

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

Создайте новый файл ui/html/base.layout.tmpl

Добавим следующую основную HTML разметку (которую мы хотим отображать на каждой странице):

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

Здесь мы используем выражение {{define "base"}}...{{end}} для определения отдельного именованного шаблона под названием base, который содержит основной HTML каркас для отображения на каждой странице.

Внутри мы используем выражение {{template "title" .}} и {{template "main" .}}, чтобы обозначить, что мы хотим вызывать другие именованные шаблоны (под названием title и main) в определенной точке нашего HTML шаблона.

На заметку: Если вам интересно, точка в конце выражения   {{template "title" .}} означает любые динамические данные, которые требуется передать для вызываемого шаблона. В будущих уроках мы поговорим об этом подробнее.

Теперь вернемся к файлу ui/html/home.page.tmpl и обновим этот файл для определения именованных блоков с контентом title и main, содержащих определенный контент для домашней страницы:

В верхней правой части этого файла находится, пожалуй, самый важный элемент — выражение {{template "base" .}}. Оно сообщает Go шаблонизатору, что при выполнении файла home.page.tmpl требуется вызвать указанный базовый-шаблон base который содержит основную HTML разметку.

Шаблон base содержит инструкции по вызову именованных блоков с контентом title и main. Поначалу это может показаться замкнутым кругом, но не волнуйтесь — на практике этот шаблон работает очень хорошо.

Когда все будет закончено, следующим шагом будет обновление кода в обработчике home(), чтобы тот загружал оба файла шаблонов:

Теперь, вместо того, чтобы шаблон home.page.tmpl содержал всю HTML разметку, ему достаточно указать несколько именованных блоков с контентом (base, title и main) и указать в начале на основной файл шаблона, в данном случае это base.

Не бойтесь перезапустить веб-сервер и попробовать код в работе. Вы увидите, что он отображает тот же результат, что и раньше.

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

Разбиваем шаблон на части

Для некоторых приложений может потребоваться разбить определенные фрагменты HTML на части, которые можно повторно использовать на разных страницах или макетах. Для примера давайте создадим файл partial, содержащий HTML разметку подвала для веб-приложения.

Создайте новый файл ui/html/footer.partial.tmpl и добавьте именованный блок с контентом под названием footer следующим образом:

Затем обновите файл шаблона base, чтобы он вызывал шаблон подвала, используя выражение {{template "footer" .}}.

Под конец нам нужно обновить обработчик главной странице home(), чтобы он включал новый файл ui/html/footer.partial.tmpl при загрузки файлов шаблона:

После перезапуска веб-сервера, шаблон base должен вызвать шаблон footer и вставить его содержимое в себя вместо выражения {{template "footer" .}}. Домашняя страница должна выглядеть следующим образом:

Шаблонизатор в Golang

В коде выше мы использовали выражение {{template}} для вызова определенного шаблона из другого шаблона. Шаблонизатор в Go, также предоставляет выражение {{block}} ... {{end}}, которое можно использовать вместо {{template}}.

Оно работает как {{template}}, за исключением того, что позволяет указать некоторое содержимое по умолчанию, если вызываемого шаблона нет в текущем наборе шаблонов.

Говоря о веб-приложении, это полезно, когда требуется предоставить некоторый контент по умолчанию например, боковое меню сайта (sidebar), которую отдельные страницы могут переписать по разному в зависимости от обстоятельств.

Синтаксически {{block}} выглядит следующим образом:

Но, если хотите, вы можете не включать какой-либо контент по умолчанию между выражениями {{block}} и {{end}}. В этом случае вызванный шаблон действует как «необязательный». Если рассматриваемый шаблон есть в наборе шаблонов, в данном случае это sidebar, он будет отображен. Но если его нет, то ничего не будет отображаться.

Скачать исходный код веб-приложения

В конце каждой статьи мы готовим для вас все файлы которые были использованы в этой статье. У вас всегда будет актуальная версия веб-приложения после прочтения статьи.

Скачать: snippetbox-7.zip