506 lines
22 KiB
Markdown
506 lines
22 KiB
Markdown
Title: Обучение: 05. Блог
|
||
Date: 2019-06-25 00:00
|
||
Category: Page
|
||
Slug: education.05.blog
|
||
Lang: ru
|
||
|
||
| < Назад | Начало | Далее > |
|
||
|---|---|---|
|
||
| [04. Язык][prev] | [Обучение][index] | Отсутствует |
|
||
|
||
</div><div class="contents">
|
||
|
||
В этом документе мы создадим "динамические" страницы блога.
|
||
|
||
Ожидаемое время завершения: 20 минут.
|
||
|
||
**Содержание**
|
||
|
||
* [01. Блог](#blog)
|
||
* [02. Изучите файл `pskov.cfg`](#cfg)
|
||
* [03. Изучите шаблоны элементов](#item)
|
||
* [04. Изучите шаблоны предпросмотров](#preview)
|
||
* [05. Изучите шаблоны страниц с предпросмотрами](#index)
|
||
* [06. Изучите постраничные шаблоны](#pagination)
|
||
* [07. Изучите файлы Markdown](#md)
|
||
* [08. Запустите ЛФСД](#lfsa)
|
||
* [09. Сгенерируйте сайт](#gen)
|
||
* [10. Проверьте сайт](#observe)
|
||
* [11. Итог](#summary)
|
||
|
||
<a name="blog"/>
|
||
|
||
## 01. Блог
|
||
|
||
Итак, у вас есть веб-сайт на Английском и Русском языках. Вы начинаете ощущать желание регулярно делиться своими мыслями с миром в виде заметок блога.
|
||
|
||
Вы создаёте директорию со [следующей структурой файлов][03-files]:
|
||
|
||
* `pskov.cfg`
|
||
* `en/blog/`
|
||
* `item.template`
|
||
* `index.template`
|
||
* `preview.template`
|
||
* `pagination.template`
|
||
* `pagination.prev.template`
|
||
* `pagination.next.template`
|
||
* `1885.md`
|
||
* `1886.01.md`
|
||
* `1886.02.md`
|
||
* `1887.01.md`
|
||
* `1887.02.md`
|
||
* `1888.md`
|
||
* `1896.md`
|
||
* `1899.md`
|
||
* `en/page/`
|
||
* `item.template`
|
||
* `about.md`
|
||
* `cv.md`
|
||
* `ru/blog/`
|
||
* `item.template`
|
||
* `index.template`
|
||
* `preview.template`
|
||
* `pagination.template`
|
||
* `pagination.prev.template`
|
||
* `pagination.next.template`
|
||
* `1885.md`
|
||
* `1886.01.md`
|
||
* `1886.02.md`
|
||
* `1887.01.md`
|
||
* `1887.02.md`
|
||
* `1888.md`
|
||
* `1896.md`
|
||
* `1899.md`
|
||
* `ru/page/`
|
||
* `item.template`
|
||
* `about.md`
|
||
* `cv.md`
|
||
|
||
Давайте взглянем на содержимое этих файлов.
|
||
|
||
<a name="cfg"/>
|
||
|
||
## 02. Изучите файл `pskov.cfg`
|
||
|
||
Файл `pskov.cfg` содержит следующее:
|
||
|
||
```
|
||
input = en/page;ru/page;en/blog;ru/blog
|
||
item = item.template
|
||
preview = preview.template
|
||
index = index.template
|
||
paginationPrev = pagination.prev.template
|
||
paginationNext = pagination.next.template
|
||
paginationPrevNext = pagination.template
|
||
previewSize = 200
|
||
previewEnding = . . .
|
||
previewsPerPage = 3
|
||
previewPageBaseName = index
|
||
```
|
||
|
||
Вы уже встречались с ключами `input` и `item`. Рассмотрим остальные:
|
||
|
||
| Ключ | Описание |
|
||
|---|---|
|
||
| `preview` | Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых `previewSize` (приблизительно) символов для каждого файла Markdown |
|
||
| `index` | Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами |
|
||
| `paginationPrev` | Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу |
|
||
| `paginationNext` | Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу |
|
||
| `paginationPrevNext` | Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам |
|
||
| `previewSize` | Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра |
|
||
| `previewEnding` | Строка для добавления в конец каждого предпросмотра |
|
||
| `previewsPerPage` | Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами |
|
||
| `previewsPageBaseName` | Базовое имя файла для страниц с предпросмотрами |
|
||
|
||
В нашем случае:
|
||
|
||
* мы ограничиваем предпросмотр `200` символами (приблизительно)
|
||
* мы используем строку `. . .` в конце каждого предпросмотра
|
||
* страницы с предпросмотрами вмещают максимум `3` предпросмотра
|
||
* страницы с предпросмотрами будут сохранены как `index.html`, `index2.html`, `index3.html` и т.д.
|
||
|
||
<a name="item"/>
|
||
|
||
## 03. Изучите шаблоны элементов
|
||
|
||
* Содержимое `en/blog/item.template`:
|
||
|
||
```
|
||
- - - - Схлопнуто для краткости - - - -
|
||
<body>
|
||
<div id="header">
|
||
<strong>Serov</strong>
|
||
<a href="../../en/blog/index.html">Blog</a>
|
||
<a href="../../en/page/about.html">About me</a>
|
||
<a href="../../en/page/cv.html">CV</a>
|
||
<div id="lang">
|
||
<a href="../../en/blog/PSKOV_ITEM_URL">EN</a>
|
||
<a href="../../ru/blog/PSKOV_ITEM_URL">RU</a>
|
||
</div>
|
||
</div>
|
||
<center>
|
||
<h1>In the blog...</h1>
|
||
<div class="contents">
|
||
<h2 class="itemTitle">
|
||
<a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
|
||
</h2>
|
||
<p class="itemDate">PSKOV_ITEM_DATE</p>
|
||
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>
|
||
- - - - Схлопнуто для краткости - - - -
|
||
```
|
||
* Содержимое `ru/blog/item.template`:
|
||
|
||
```
|
||
- - - - Схлопнуто для краткости - - - -
|
||
<body>
|
||
<div id="header">
|
||
<strong>Серов</strong>
|
||
<a href="../../ru/blog/index.html">Блог</a>
|
||
<a href="../../ru/page/about.html">Обо мне</a>
|
||
<a href="../../ru/page/cv.html">Резюме</a>
|
||
<div id="lang">
|
||
<a href="../../en/blog/PSKOV_ITEM_URL">EN</a>
|
||
<a href="../../ru/blog/PSKOV_ITEM_URL">RU</a>
|
||
</div>
|
||
</div>
|
||
<center>
|
||
<h1>В блоге...</h1>
|
||
<div class="contents">
|
||
<h2 class="itemTitle">
|
||
<a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
|
||
</h2>
|
||
<p class="itemDate">PSKOV_ITEM_DATE</p>
|
||
PSKOV_ITEM_CONTENTS
|
||
</div>
|
||
<div id="footer">
|
||
Этот пример сайта сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a>.
|
||
</div>
|
||
</center>
|
||
</body>
|
||
- - - - Схлопнуто для краткости - - - -
|
||
```
|
||
|
||
**Внимание**: начало и конец схлопнуты для краткости.
|
||
|
||
Как видите, оба файла выглядят практически так же, как и файлы `item.template`, рассмотренные [ранее][prev].
|
||
|
||
Изменения следующие:
|
||
|
||
* новые URL страниц в директории `page` и первой страницы с предпросмотрами в директории `blog`
|
||
* заголовок используется внутри секции `contents` в качестве ссылки на полную заметку блога
|
||
* дата используется для подчёркивания временной зависимости между заметками блога
|
||
|
||
Дату мы получаем из константы `PSKOV_ITEM_DATE`:
|
||
|
||
| Константа ПСКОВА | Описание |
|
||
|---|---|
|
||
| `PSKOV_ITEM_DATE` | Значение ключа `Date` файла Markdown |
|
||
|
||
<a name="preview"/>
|
||
|
||
## 04. Изучите шаблоны предпросмотров
|
||
|
||
* Содержимое `en/blog/preview.template`:
|
||
|
||
```
|
||
<div class="contents">
|
||
<h2 class="itemTitle">
|
||
<a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
|
||
</h2>
|
||
<p class="itemDate">PSKOV_ITEM_DATE</p>
|
||
PSKOV_PREVIEW
|
||
<div class="itemMore">
|
||
<a href="PSKOV_ITEM_URL">Continue reading</a>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
* Содержимое `ru/blog/preview.template`:
|
||
|
||
```
|
||
<div class="contents">
|
||
<h2 class="itemTitle">
|
||
<a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
|
||
</h2>
|
||
<p class="itemDate">PSKOV_ITEM_DATE</p>
|
||
PSKOV_PREVIEW
|
||
<div class="itemMore">
|
||
<a href="PSKOV_ITEM_URL">Читать дальше</a>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
У предпросмотров нет `<head>`, `<body>` и прочих полностраничных тэгов HTML. Предпросмотры являются секциями, вставляемыми в страницы с предпросмотрами.
|
||
|
||
Сам предпросмотр мы получаем из константы `PSKOV_PREVIEW`:
|
||
|
||
| Константа ПСКОВА | Описание |
|
||
|---|---|
|
||
| `PSKOV_PREVIEW` | Предоставляет содержимое файла Markdown, ограниченное `previewSize` символами (приблизительно) |
|
||
|
||
<a name="index"/>
|
||
|
||
## 05. Изучите шаблоны страниц с предпросмотрами
|
||
|
||
* Содержимое `en/blog/index.template`:
|
||
|
||
```
|
||
- - - - Схлопнуто для краткости - - - -
|
||
<body>
|
||
<div id="header">
|
||
<strong>Serov</strong>
|
||
<a href="../../en/blog/index.html">Blog</a>
|
||
<a href="../../en/page/about.html">About me</a>
|
||
<a href="../../en/page/cv.html">CV</a>
|
||
<div id="lang">
|
||
<a href="../../en/blog/PSKOV_INDEX_URL">EN</a>
|
||
<a href="../../ru/blog/PSKOV_INDEX_URL">RU</a>
|
||
</div>
|
||
</div>
|
||
<center>
|
||
<h1>Blog</h1>
|
||
PSKOV_PREVIEWS
|
||
PSKOV_PAGINATION
|
||
<div id="footer">
|
||
This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
|
||
</div>
|
||
</center>
|
||
</body>
|
||
- - - - Схлопнуто для краткости - - - -
|
||
```
|
||
|
||
* Содержимое `ru/blog/index.template`:
|
||
|
||
```
|
||
- - - - Схлопнуто для краткости - - - -
|
||
<body>
|
||
<div id="header">
|
||
<strong>Серов</strong>
|
||
<a href="../../ru/blog/index.html">Блог</a>
|
||
<a href="../../ru/page/about.html">Обо мне</a>
|
||
<a href="../../ru/page/cv.html">Резюме</a>
|
||
<div id="lang">
|
||
<a href="../../en/blog/PSKOV_INDEX_URL">EN</a>
|
||
<a href="../../ru/blog/PSKOV_INDEX_URL">RU</a>
|
||
</div>
|
||
</div>
|
||
<center>
|
||
<h1>Блог</h1>
|
||
PSKOV_PREVIEWS
|
||
PSKOV_PAGINATION
|
||
<div id="footer">
|
||
Этот пример сайта сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a>.
|
||
</div>
|
||
</center>
|
||
</body>
|
||
- - - - Схлопнуто для краткости - - - -
|
||
```
|
||
|
||
**Замечания**:
|
||
|
||
* начало и конец схлопнуты для краткости
|
||
* константа `PSKOV_INDEX_URL` используется для выбора языка
|
||
|
||
Новые константы **ПСКОВА**:
|
||
|
||
| Константа ПСКОВА | Описание |
|
||
|---|---|
|
||
| `PSKOV_INDEX_URL` | Предоставляет генерируемое имя файла страницы с предпросмотрами: `<previewsPageBaseName><id>.html` |
|
||
| `PSKOV_PREVIEWS` | Предоставляет набор предпросмотров |
|
||
| `PSKOV_PAGINATION` | Предоставляет секцию для перехода между страницами с предпросмотрами |
|
||
|
||
<a name="pagination"/>
|
||
|
||
## 06. Изучите постраничные шаблоны
|
||
|
||
Постраничные шаблоны являются секциями HTML для перехода между страницами с предпросмотрами.
|
||
|
||
Существует три постраничных шаблона:
|
||
|
||
| Постраничный шаблон | Описание |
|
||
|---|---|
|
||
| Предыдущий | Посетитель может перейти лишь назад |
|
||
| Следующий | Посетитель может перейти лишь вперёд |
|
||
| Оба | Посетитель может перейти либо вперёд, либо назад |
|
||
|
||
Рассмотрим английские постраничные шаблоны:
|
||
|
||
* Содержимое `en/blog/pagination.prev.template`:
|
||
|
||
```
|
||
<p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
|
||
<p>
|
||
<a href="PSKOV_PREV_PAGE_URL">« Newer</a>
|
||
</p>
|
||
```
|
||
|
||
* Содержимое `en/blog/pagination.next.template`:
|
||
|
||
```
|
||
<p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
|
||
<p>
|
||
<a href="PSKOV_NEXT_PAGE_URL">Older »</a>
|
||
</p>
|
||
```
|
||
|
||
* Содержимое `en/blog/pagination.template`:
|
||
|
||
```
|
||
<p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
|
||
<p>
|
||
<a href="PSKOV_PREV_PAGE_URL">« Newer</a>
|
||
<a href="PSKOV_NEXT_PAGE_URL">Older »</a>
|
||
</p>
|
||
```
|
||
|
||
Русские версии выглядят схожим образом. Например, содержимое `ru/blog/pagination.template`:
|
||
|
||
```
|
||
<p>Страница PSKOV_PAGE_ID из PSKOV_PAGES_COUNT</p>
|
||
<p>
|
||
<a href="PSKOV_PREV_PAGE_URL">« Новее</a>
|
||
<a href="PSKOV_NEXT_PAGE_URL">Старее »</a>
|
||
</p>
|
||
```
|
||
|
||
Новые константы **ПСКОВА**:
|
||
|
||
| Константа ПСКОВА | Описание |
|
||
|---|---|
|
||
| `PSKOV_PAGE_ID` | Предоставляет порядковый номер страницы с предпросмотрами, начиная с `1` |
|
||
| `PSKOV_PAGES_COUNT` | Предоставляет количество сгенерированных страниц с предпросмотрами |
|
||
| `PSKOV_PREV_PAGE_URL` | Предоставляет имя файла предыдущей страницы с предпросмотрами |
|
||
| `PSKOV_NEXT_PAGE_URL` | Предоставляет имя файла следующей страницы с предпросмотрами |
|
||
|
||
<a name="md"/>
|
||
|
||
## 07. Изучите файлы Markdown
|
||
|
||
Файлы Markdown являются заметками блога, они похожи на файлы Markdown обычных страниц. Вот как выглядит содержимое `en/blog/1885.md`:
|
||
|
||
```
|
||
Title: Bullocks
|
||
Date: 1885
|
||
Slug: 1885.01.bullocks
|
||
|
||
![Bullocks][bullocks]
|
||
|
||
I've been painting "Bullocks" sketch while I was staying in Odessa at Kuznetsov's in 1885.
|
||
|
||
[bullocks]: https://upload.wikimedia.org/wikipedia/commons/c/cb/Walentin_Aleksandrovich_Serov_Bullocks.jpg
|
||
```
|
||
|
||
Заметки блога сортируются по дате: новые заметки размещаются перед старыми.
|
||
|
||
| Ключ заголовка | Описание |
|
||
|---|---|
|
||
| `Date` | Предоставляет значение для константы `PSKOV_ITEM_DATE` при генерации HTML из Markdown |
|
||
|
||
<a name="lfsa"/>
|
||
|
||
## 08. Запустите ЛФСД
|
||
|
||
<video controls poster="../vid/education.05.blog.launch-lfsa.edgy.poster.png">
|
||
<source src="../vid/education.05.blog.launch-lfsa.edgy.mp4" type ="video/mp4">
|
||
<source src="../vid/education.05.blog.launch-lfsa.edgy.webm" type ="video/webm">
|
||
ОШИБКА Ваш браузер не поддерживает видео HTML5
|
||
</video>
|
||
|
||
Запустите [ЛФСД][lfsa] с указанием директории, содержащей только что рассмотренные файлы:
|
||
|
||
```
|
||
$ /путь/до/lfsa_1.0.0.py /путь/до/директории/03.Blog
|
||
```
|
||
|
||
<a name="gen"/>
|
||
|
||
## 09. Сгенерируйте сайт
|
||
|
||
<video controls poster="../vid/education.05.blog.gen.edgy.poster+ru.png">
|
||
<source src="../vid/education.05.blog.gen.edgy+ru.mp4" type ="video/mp4">
|
||
<source src="../vid/education.05.blog.gen.edgy+ru.webm" type ="video/webm">
|
||
ОШИБКА Ваш браузер не поддерживает видео HTML5
|
||
</video>
|
||
|
||
Перейдите на страницу [Инструмент][tool] и нажмите кнопку `Генерировать` для генерации файлов HTML рядом с файлами Markdown.
|
||
|
||
<a name="observe"/>
|
||
|
||
## 10. Проверьте сайт
|
||
|
||
<video controls poster="../vid/education.05.blog.observe.edgy.poster+ru.png">
|
||
<source src="../vid/education.05.blog.observe.edgy.mp4" type ="video/mp4">
|
||
<source src="../vid/education.05.blog.observe.edgy.webm" type ="video/webm">
|
||
ОШИБКА Ваш браузер не поддерживает видео HTML5
|
||
</video>
|
||
|
||
Проверьте сгенерированный веб-сайт локально: откройте файл `ru/blog/index.html` или `en/blog/index.html` и осуществите переход между страницами предпросмотра.
|
||
|
||
<a name="summary"/>
|
||
|
||
## 11. Итог
|
||
|
||
Вы успешно сгенерировали веб-сайт с "динамическими" страницами блога. [Проверьте результат][03-sample].
|
||
|
||
Представлены константы **ПСКОВА**:
|
||
|
||
| Константа ПСКОВА | Описание |
|
||
|---|---|
|
||
| `PSKOV_ITEM_DATE` | Значение ключа `Date` файла Markdown |
|
||
| `PSKOV_PREVIEW` | Предоставляет содержимое файла Markdown, ограниченное `previewSize` символами (приблизительно) |
|
||
| `PSKOV_INDEX_URL` | Предоставляет генерируемое имя файла страницы с предпросмотрами: `<previewsPageBaseName><id>.html` |
|
||
| `PSKOV_PREVIEWS` | Предоставляет набор предпросмотров |
|
||
| `PSKOV_PAGINATION` | Предоставляет секцию для перехода между страницами с предпросмотрами |
|
||
| `PSKOV_PAGE_ID` | Предоставляет порядковый номер страницы с предпросмотрами, начиная с `1` |
|
||
| `PSKOV_PAGES_COUNT` | Предоставляет количество сгенерированных страниц с предпросмотрами |
|
||
| `PSKOV_PREV_PAGE_URL` | Предоставляет имя файла предыдущей страницы с предпросмотрами |
|
||
| `PSKOV_NEXT_PAGE_URL` | Предоставляет имя файла следующей страницы с предпросмотрами |
|
||
|
||
Представлены ключи настроек:
|
||
|
||
| Ключ | Описание |
|
||
|---|---|
|
||
| `preview` | Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых `previewSize` (приблизительно) символов для каждого файла Markdown |
|
||
| `index` | Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами |
|
||
| `paginationPrev` | Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу |
|
||
| `paginationNext` | Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу |
|
||
| `paginationPrevNext` | Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам |
|
||
| `previewSize` | Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра |
|
||
| `previewEnding` | Строка для добавления в конец каждого предпросмотра |
|
||
| `previewsPerPage` | Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами |
|
||
| `previewsPageBaseName` | Базовое имя файла для страниц с предпросмотрами |
|
||
|
||
Представлены ключи заголовка:
|
||
|
||
| Ключ заголовка | Описание |
|
||
|---|---|
|
||
| `Date` | Предоставляет значение для константы `PSKOV_ITEM_DATE` при генерации HTML из Markdown |
|
||
|
||
Это был последний документ, призванный научить вас уверенно владеть генератором статических сайтов **ПСКОВ**. Если вам нравится наш труд, присоединяйтесь к нам в [VK][vk], [Twitter][tw] или [Facebook][fb].
|
||
|
||
А теперь используйте **ПСКОВ** для генерация своего собственного веб-сайта!
|
||
|
||
</div><div class="contents">
|
||
|
||
| < Назад | Начало | Далее > |
|
||
|---|---|---|
|
||
| [04. Язык][prev] | [Обучение][index] | Отсутствует |
|
||
|
||
[index]: education.html
|
||
[prev]: education.04.lang.html
|
||
|
||
[03-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/03.Blog
|
||
[03-sample]: http://opengamestudio.org/pskov/sample/03.Blog/ru/blog/index.html
|
||
[lfsa]: http://opengamestudio.org/lfsa/ru
|
||
[tool]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html
|
||
|
||
[vk]: https://vk.com/opengamestudo
|
||
[tw]: https://twitter.com/OpenGameStudio
|
||
[fb]: https://www.facebook.com/groups/162611230470183
|