В этом документе мы создадим "динамические" страницы блога.
Ожидаемое время завершения: 20 минут.
Содержание
pskov.cfg
Итак, у вас есть веб-сайт на Английском и Русском языках. Вы начинаете ощущать желание регулярно делиться своими мыслями с миром в виде заметок блога.
Вы создаёте директорию со следующей структурой файлов:
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
Давайте взглянем на содержимое этих файлов.
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
и т.д.Содержимое 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
, рассмотренные ранее.
Изменения следующие:
page
и первой страницы с предпросмотрами в директории blog
contents
в качестве ссылки на полную заметку блогаДату мы получаем из константы PSKOV_ITEM_DATE
:
Константа ПСКОВА | Описание |
---|---|
PSKOV_ITEM_DATE |
Значение ключа Date файла Markdown |
Содержимое 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 символами (приблизительно) |
Содержимое 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 |
Предоставляет секцию для перехода между страницами с предпросмотрами |
Постраничные шаблоны являются секциями 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 |
Предоставляет имя файла следующей страницы с предпросмотрами |
Файлы 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 |
Запустите ЛФСД с указанием директории, содержащей только что рассмотренные файлы:
$ /путь/до/lfsa_1.0.0.py /путь/до/директории/03.Blog
Перейдите на страницу Инструмент и нажмите кнопку Генерировать
для генерации файлов HTML рядом с файлами Markdown.
Проверьте сгенерированный веб-сайт локально: откройте файл ru/blog/index.html
или en/blog/index.html
и осуществите переход между страницами предпросмотра.
Вы успешно сгенерировали веб-сайт с "динамическими" страницами блога. Проверьте результат.
Представлены константы ПСКОВА:
Константа ПСКОВА | Описание |
---|---|
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, Twitter или Facebook.
А теперь используйте ПСКОВ для генерация своего собственного веб-сайта!