Обучение: 03. Сайт

< Назад Начало Далее >
02. Зависимости Обучение 04. Язык

В этом документы мы создадим простой статический сайт с двумя страницами.

Ожидаемое время завершения: 10 минут.

Содержание

01. Вдохновление

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

Вы приступаете к созданию следующих страницы:

Несколько позже в директории вашего сайта у вас оказываются следующие файлы:

Давайте взглянем на их содержимое.

02. Изучите файл pskov.cfg

Файл pskov.cfg содержит следующее:

input = .
item = item.template

pskov.cfg является файлом настроек со следующими ключами:

Ключ Описание
input Указывает на директорию с файлом, на который ссылается ключ item
item Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown

В нашем случае файл item.template расположен рядом с pskov.cfg, поэтому мы используем . для обозначения текущей директории.

03. Изучите файл item.template

Файл item.template содержит следующее:

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            - - - - Схлопнуто для краткости - - - -
        </style>
        <title>Serov</title>
    </head>
    <body>
        <div id="header">
            <strong>Serov</strong>
            <a href="about.html">About me</a>
            <a href="cv.html">CV</a>
        </div>
        <center>
            <h1>PSKOV_ITEM_TITLE</h1>
            <div class="contents">
PSKOV_ITEM_CONTENTS
            </div>
            <div id="footer">
                This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
            </div>
        </center>
    </body>
</html>

Внимание: стиль схлопнут для краткости.

Как видите, item.template представляет из себя обычный файл HTML с двумя константами ПСКОВА:

Константа ПСКОВА Описание
PSKOV_ITEM_TITLE Значение ключа Title из файла Markdown страницы
PSKOV_ITEM_CONTENTS Предоставляет содержимое HTML, сгенерированное из Markdown

Замечания:

  • другие константы ПСКОВА описаны позже
  • файл Markdown страницы описан ниже

04. Изучите файлы about.md и cv.md

Файл about.md содержит следующее:

 Title: About me
 Slug: about

 Hi, my name is Valentin Serov. Here's my self-portrait:

 ![Valentin Serov self-portrait][serov-portrait]

 - - - - Схлопнуто для краткости - - - -

 Have a look at my [CV][cv] now.

 [serov]: https://en.wikipedia.org/wiki/Valentin_Serov
 [revolution]: https://en.wikipedia.org/wiki/Russian_Revolution
 [serov-portrait]: myself.jpg
 [serov-work]: mywork.jpg
 [girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches
 [pskov]: http://opengamestudio.org/pskov
 [cv]: cv.html

about.md начинается с так называемого заголовка:

Ключ заголовка Описание
Title Предоставляет значение для константы PSKOV_ITEM_TITLE во время генерации HTML из Markdown
Slug Сообщает ПСКОВУ о том, что этот файл должен быть сохранён как <slug>.html

В остальном содержимое about.md ничем не отличается от любых других файлов Markdown.

Внимание: ссылка на страницу cv указана как cv.html, не cv.md

Файл cv.md содержит следующее:

 Title: Curriculum vitae
 Slug: cv

 Here's my CV in case my paintings still interest you. I took a bit of a modern IT approach to structure my CV as key-value pairs of a dictionary (map), enjoy!

 | Key | Value |
 |---|---|
 | Name | Valentin Serov |
 | Age | 46 |
 | Marital status | Married |
 | Country | Russian Empire |
 | Alma mater | Imperial Academy of Arts |
 | Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) |

Как видите, в cv.md нет ничего нового за исключением таблицы Markdown.

05. Запустите ЛФСД

Запустите ЛФСД с указанием директории, содержащей только что рассмотренные файлы:

$ /путь/до/lfsa_1.0.0.py /путь/до/директории/01.TwoPages

Вы должны увидеть примерно такой вывод:

DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages'
PORT: '8000'

06. Сгенерируйте сайт

Перейдите на страницу Инструмент и нажмите кнопку Генерировать для генерации файлов HTML рядом с файлами Markdown.

07. Проверьте сайт

Проверьте сгенерированный веб-сайт локально: откройте файл about.html и совершите переход между страницами.

08. Итог

Вы успешно сгенерировали веб-сайт с двумя страницами. Проверьте результат.

Представлены константы ПСКОВА:

Константа ПСКОВА Описание
PSKOV_ITEM_TITLE Значение ключа Title из файла Markdown страницы
PSKOV_ITEM_CONTENTS Предоставляет содержимое HTML, сгенерированное из Markdown

Представлены ключи настроек:

Ключ Описание
input Указывает на директорию с файлом, на который ссылается ключ item
item Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown

Представлены ключи заголовка:

Ключ заголовка Описание
Title Предоставляет значение для константы PSKOV_ITEM_TITLE во время генерации HTML из Markdown
Slug Сообщает ПСКОВУ о том, что этот файл должен быть сохранён как <slug>.html

< Назад Начало Далее >
02. Зависимости Обучение 04. Язык