Jekyll / подсказка к 3 задачке

Попробуем теперь добавить новую страничку.

Для этого создадим файлик назовем его about.html

и загоним в него следующее содержимое:

---
layout: default
---

<h1>About</h1>

по сути это обычный html только мы в начале указываем что этот файл будет использовать шаблон default

Теперь мы можем открыть этот файлик по следующему адресу http://127.0.0.1:4000/about.html

если глянуть в папке _site теперь появился новый скомпилированный html

попробуем теперь сделать ссылку на этот файл с главной страницы.

Кстати так как нам не интересно работать с markdown по крайне мере пока, то переименуем файл index.md в index.html

если открыть теперь главную страницу http://127.0.0.1:4000 то получим такое

то есть ## You're ready to go! стал просто текстом, но, в принципе, он нам не очень то и нужен. Оставим в index.html только

---
layout: default
---

и попробуем просто добавить ссылку

---
layout: default
---

<a href="/about.html">About</a>

проверяем

добавим еще одну страничку glossary.html например

проверим что работает http://127.0.0.1:4000/glossary

добавим ссылку и на нее в index.html:

---
layout: default
---

<a href="/about.html">About</a>
<a href="/glossary.html">Глоссарий</a>

тестируем

Делаем менюшку

Теперь подумаем, как это можно улучшить, ведь сейчас не удобно: чтобы попасть на другую страничку надо сначала вернуться на главную и оттуда уже нажать на ссылку.

Есть ли возможность сделать так чтобы меню было доступно на всех страницах.

Можно конечно его копипастить просто на каждую страничку. Но тогда зачем наv jekyll?

Поэтому мы воспользуемся тем фактом что наш _layouts/default.html – это базовый шаблон всех наших страничек, и поэтому мы можем вставить меню прям туда.

Открываем _layouts/default.html - там у нас

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    
    {{content}}

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

добавим прям перед {{content}} наши ссылки

<!DOCTYPE html>
<html lang="en">
<head>
     <!-- ... -->
</head>
<body>
    
    <a href="/about.html">About</a>
    <a href="/glossary.html">Глоссарий</a>

    {{content}}

    <!-- ... -->
</body>
</html>

проверяем главную страницу:

ой, удвоились, уберем ссылки из index.html и идентифицируем ее как-нибудь

---
layout: default
---

<h1>Я главная страница</h1>

а теперь попробуем как это работает:

вообще прикольно, только надо еще ссылку на главную страницу добавить, правим default.html

<!DOCTYPE html>
<html lang="en">
<head>
     <!-- ... -->
</head>
<body>
    
    <a href="/">На главную</a>    
    <a href="/about.html">About</a>
    <a href="/glossary.html">Глоссарий</a>

    {{content}}

    <!-- ... -->
</body>
</html>

проверка:

ура теперь все работает! =)

Делаем нормальный шаблон на бутстрапе

Правим default.html, первое что делаем, это пихаем все в .container

    <div class="container">
        <a href="/">На главную</a>
        <a href="/about.html">About</a>
        <a href="/glossary.html">Глоссарий</a>

        {{content}}
    </div>

теперь делаем навигацию. Никаких разумных, способов запомнить как ее сделать не существует, поэтому просто идем сюда https://getbootstrap.com/docs/4.6/components/navbar/#nav и копипастим вот это:

получиться как-то так:

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="/">На главную</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/glossary.html">Глоссарий</a>
                </li>
            </ul>
        </div>
    </nav>

    {{content}}
</div>

уже выглядит поприличнее:

вообще отдельный пункт под главную страницу делать нет смысла, так что уберем его и подправим navbar

у меня так получилось

чтобы иконка заработала, не забудь подключить fontawesome

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/glossary.html">Глоссарий</a>
                </li>
            </ul>
        </div>
    </nav>

    {{content}}
</div>

а теперь попробуем добавить немного динамики, jekyll повзоляет в шаблонах изменять верстку элементов в зависимости от различных условий. Например, мы можем проверять текущий адрес страницы и, если мы вдруг на странице about, то добавлять звездочку справа от пункта меню, и аналогично для глоссария:

вот так

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/about.html">About {% if page.url == "/about.html" %} * {% endif %}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/glossary.html">Глоссарий {% if page.url == "/glossary.html" %} * {% endif %}</a>
                </li>
            </ul>
        </div>
    </nav>

    {{content}}
</div>

вообще мы можем даже класс добавлять:

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/"><i class="fas fa-gamepad"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item {% if page.url == '/about.html' %}active{% endif %}">
                    <a class="nav-link" href="/about.html">About {% if page.url == "/about.html" %} * {% endif %}</a>
                </li>
                <li class="nav-item {% if page.url == '/glossary.html' %}active{% endif %}">
                    <a class="nav-link" href="/glossary.html">Глоссарий {% if page.url == "/glossary.html" %} * {% endif %}</a>
                </li>
            </ul>
        </div>
    </nav>

    {{content}}
</div>

правда это уже очень громоздко получается. Так как бутстрап поддерживает класс active для пунктов меню, то если присмотреться, то видно, что текст чуть жирнее, во

ну все, гоу задание пилить

3

Взять свой сайт и создать страницы под все основные пункты меню и добавить их в навигацию.

То есть под Глоссарий, Количество игроков, Стилистика, Платформа, Об авторе.

В принципе Жанры тоже можно добавить.

Можно даже скопировать текстовый контент в странички