ogs-site

22KB

Raw Blame History

Title: Обучение: 05. Блог Date: 2019-06-25 00:00 Category: Page Slug: education.05.blog Lang: ru

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

В этом документе мы создадим “динамические” страницы блога.

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

Содержание

01. Блог
02. Изучите файл pskov.cfg
03. Изучите шаблоны элементов
04. Изучите шаблоны предпросмотров
05. Изучите шаблоны страниц с предпросмотрами
06. Изучите постраничные шаблоны
07. Изучите файлы Markdown
08. Запустите ЛФСД
09. Сгенерируйте сайт
10. Проверьте сайт
11. Итог

01. Блог

Итак, у вас есть веб-сайт на Английском и Русском языках. Вы начинаете ощущать желание регулярно делиться своими мыслями с миром в виде заметок блога.

Вы создаёте директорию со следующей структурой файлов:

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

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

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 и т.д.

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

This sample web site has been generated by PSKOV.

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

Содержимое 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

Этот пример сайта сгенерирован ПСКОВОМ.

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

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

Как видите, оба файла выглядят практически так же, как и файлы item.template, рассмотренные ранее.

Изменения следующие:

новые URL страниц в директории page и первой страницы с предпросмотрами в директории blog
заголовок используется внутри секции contents в качестве ссылки на полную заметку блога
дата используется для подчёркивания временной зависимости между заметками блога

Дату мы получаем из константы PSKOV_ITEM_DATE:

Константа ПСКОВА	Описание
`PSKOV_ITEM_DATE`	Значение ключа `Date` файла Markdown

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` символами (приблизительно)

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`	Предоставляет секцию для перехода между страницами с предпросмотрами

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`	Предоставляет имя файла следующей страницы с предпросмотрами

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

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

ОШИБКА Ваш браузер не поддерживает видео HTML5

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

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

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

ОШИБКА Ваш браузер не поддерживает видео HTML5

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

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

ОШИБКА Ваш браузер не поддерживает видео HTML5

Проверьте сгенерированный веб-сайт локально: откройте файл ru/blog/index.html или en/blog/index.html и осуществите переход между страницами предпросмотра.

11. Итог

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

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

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

А теперь используйте ПСКОВ для генерация своего собственного веб-сайта!

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

22KB Raw Blame History

01. Блог

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

03. Изучите шаблоны элементов

04. Изучите шаблоны предпросмотров

05. Изучите шаблоны страниц с предпросмотрами

06. Изучите постраничные шаблоны

07. Изучите файлы Markdown

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

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

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

11. Итог

22KB

Raw Blame History

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