CSS известен тем, что на его освоение требуется время, но существует множество различных библиотек, которые помогают писать CSS быстрее и с меньшим количеством ошибок.
Bulma - популярная библиотека CSS, которая поставляется с готовыми классами, которые мы можем использовать в наших HTML-элементах, чтобы они выглядели привлекательнее. Это также позволяет сократить объем CSS, который нам нужно написать.
Добавление Bulma
Открой baseof.html и внутри тега head над строкой с ссылкой на styles.css, добавь следующую строку: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">.
Это ссылка на сервер CDN, на котором размещены файлы CSS Bulma.
Некоторые базовые стили Bulma будут применены к нашему сайту, как только мы нажмем Сохранить.
Наш baseof.html должен выглядеть так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<link rel="stylesheet" href="/styles.css">
<title>{{ block "title" . }}
{{ .Site.Title }}
{{ end }}</title>
</head>
<body>
{{ partial "navbar.html" . }}
{{ block "main" . }}
<!-- Часть страницы, которая различается в разных шаблонах -->
{{ end }}
{{ partial "footer.html" . }}
</body>
</html>
Если мы сейчас зайдем на наш сайт в браузере, то увидим, что стили немного изменились, как будто был применен новый шрифт.
Не забудь удалить свойство
background: blue;из нашего файлаstyles.css, который мы создали ранее.
Стилизация нашего сайта
Теперь мы начнем применять имена классов Bulma к различным элементам на нашем сайте, например: class="здесь имена классов bulma".
Вместо того, чтобы писать классы и стили самостоятельно, мы используем готовые из Bulma, чтобы покрыть 90% всей стилизации. Позже, при желании, мы можем добавить наши собственные стили поверх Bulma.
Панель навигации
Открой файл navbar.htmlи замени содержимое приведенным ниже фрагментом:
<nav class="navbar is-dark">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
{{ $.Site.Title }}
</a>
</div>
<div class="navbar-start">
<a class="navbar-item" href="/">
Home
</a>
<a class="navbar-item" href="/posts">
Posts
</a>
</div>
</div>
</nav>
Элементы не изменились, но мы добавили несколько классов к каждому элементу, чтобы красиво их стилизовать. Сохрани изменения и посмотри на новую навигационную панель в браузере.
Нижний колонтитул
Давай откроем наш файл footer.html и добавим класс footer к нашему нижнему колонтитулу, так так: <footer class="footer has-text-centered">
Это добавит пространство вокруг текста и разместит его по центру страницы.
Домашняя страница
Теперь немного изменим стиль нашей домашней страницы. Открой страницу index.html и замени её следующим фрагментом:
{{ define "main" }}
<section class="section">
<main class="container">
{{ range first 5 .Site.RegularPages }}
{{ .Render "summary" }}
{{ end }}
</main>
</section>
{{ end }}
Это просто добавляет некоторый интервал вокруг основного контента. Для получения дополнительных сведений о том, что именно делает каждый класс Bulma, ознакомься с документацией Bulma.
Список публикаций
Мы сделаем то же самое с нашим шаблоном list.html, и мы также добавим заголовок к нему. Напомним, что он может быть любым и основан на имени папки в папке content.
Твой list.html теперь должен выглядеть так:
{{ define "main" }}
<section class="section">
<main class="container">
<h1 class="title">{{ .Title }}</h1>
<div>
{{ range .Pages }}
{{ .Render "summary" }}
{{ end }}
</div>
</main>
</section>
{{ end }}
Элемент в списке публикаций
Теперь мы отформатируем наш шаблон summary.html так, чтобы вместо синего текста отображалось красивое интерактивное поле.
Замени файл summary.html следующим:
<a class="box" href="{{ .Permalink }}">
<h4 class="title is-4">{{ .Title }}</h4>
<h6 class="subtitle has-text-grey is-6">{{ .Summary }}</h6>
<div>
<span class="tag is-link">{{ .ReadingTime }} Minutes</span>
<span class="tag is-dark">{{ .Date.Format "Jan 2, 2006" }}</span>
<span class="tag is-warning">{{ .WordCount }} Words</span>
</div>
</a>
Теперь наша домашняя страница и наши элементы в списке публикаций будут использовать этот красивый шаблон.
Одностраничный шаблон
Наконец, мы изменим стиль нашего шаблона single.html. Поскольку это блог, мы хотим, чтобы он был понятным и не громоздким, поэтому мы не будем добавлять ничего сверхъестественного.
Замени свой single.html следующим:
{{ define "main" }}
<section class="section">
<main class="container mb-6">
<h1 class="title">{{ .Title }}</h1>
<h3 class="subtitle">
<span class="tag is-link">{{ .ReadingTime }} Minutes</span>
<span class="tag is-dark">{{ .Date.Format "Jan 2, 2006" }}</span>
<span class="tag is-warning">{{ .WordCount }} Words</span>
</h3>
<article class="content">
{{ .Content }}
</article>
</main>
<div class="container content">
<ul>
{{ with .PrevInSection }}
<li>Previous Post: <a class="previous" href="{{ .Permalink }}">{{.Title}}</a></li>
{{ end }}
{{ with .NextInSection }}
<li>Next Post: <a class="next" href="{{ .Permalink }}">{{.Title}}</a></li>
{{ end }}
</ul>
</div>
</section>
{{ end }}
404
Наконец, мы стилизуем нашу страницу 404.
{{ define "main" }}
<section class="section">
<main class="container">
<h1 class="title">Page not found</h1>
<a href="/">Go Home</a>
</main>
</section>
{{ end }}
Теперь у нас есть красивый сайт, на который мы можем добавлять свои собственные стили. Не бойся изменять любые классы и стили элементов. Поэкспериментируй, чтобы получить то, что тебе нравится.