ogs-site

9.4KB

Raw Blame History

Title: Обучение: 03. Сайт Date: 2019-06-18 00:00 Category: Page Slug: education.03.site Lang: ru

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

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

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

Содержание

01. Вдохновление
02. Изучите файл pskov.cfg
03. Изучите файл item.template
04. Изучите файлы about.md и cv.md
05. Запустите ЛФСД
06. Сгенерируйте сайт
07. Итог

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

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

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

About me
Curriculum vitae (CV)

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

pskov.cfg
item.template
about.md
cv.md

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

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. Сгенерируйте сайт

Настало время сгенерировать свой собственный веб-сайт:

Перейдите на страницу Инструмент
Убедитесь в том, что:
- Путь указывает на нужную директорию
- Входящая директория и Шаблон элемента содержат значения из pskov.cfg
Нажмите кнопку Генерировать для генерации файлов HTML рядом с файлами Markdown
Откройте сгенерированный файл about.html из директории сайта
Перед вами ваш собственный веб-сайт, запущенный локально

07. Итог

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

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

Константа ПСКОВА	Описание
`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. Язык

9.4KB Raw Blame History