508 lines
16 KiB
Markdown
508 lines
16 KiB
Markdown
Title: Education: 05. Blog
|
||
Date: 2019-06-25 00:00
|
||
Category: Page
|
||
Slug: education.05.blog
|
||
Lang: en
|
||
|
||
| < Back | Index | Next > |
|
||
|---|---|---|
|
||
| [04. Language][prev] | [Education][index] | Not available |
|
||
|
||
</div><div class="contents">
|
||
|
||
In this document we create "dynamic" pages for a blog.
|
||
|
||
Estimated completion time: 20 minutes.
|
||
|
||
**Table of contents**
|
||
|
||
* [01. Blog](#blog)
|
||
* [02. Investigate `pskov.cfg` file](#cfg)
|
||
* [03. Investigate item templates of the blog](#item)
|
||
* [04. Investigate preview templates](#preview)
|
||
* [05. Investigate templates of preview pages](#index)
|
||
* [06. Investigate pagination templates](#pagination)
|
||
* [07. Investigate Markdown files](#md)
|
||
* [08. Launch LFSA](#lfsa)
|
||
* [09. Generate the site](#gen)
|
||
* [10. Observe the site](#observe)
|
||
* [11. Summary](#summary)
|
||
|
||
|
||
|
||
<a name="blog"/>
|
||
|
||
## 01. Blog
|
||
|
||
So, you have your web site in both English and Russian. You start to feel the need to regularly share your thoughts with the world as blog posts.
|
||
|
||
You set on to create the following [directory structure][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`
|
||
|
||
Let's look at the contents of these files closer.
|
||
|
||
<a name="cfg"/>
|
||
|
||
## 02. Investigate `pskov.cfg` file
|
||
|
||
`pskov.cfg` file has the following contents:
|
||
|
||
```
|
||
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
|
||
```
|
||
|
||
You already met `input` and `item` keys. Let's see into new ones:
|
||
|
||
| Key | Description |
|
||
|---|---|
|
||
| `preview` | Points to an HTML template that is used to generate HTML preview out of the first `previewSize` (approximately) characters for each Markdown file |
|
||
| `index` | Points to an HTML template that is used to generate preview page to host previews |
|
||
| `paginationPrev` | Points to an HTML template that is used to generate pagination section to navigate backwards |
|
||
| `paginationNext` | Points to an HTML template that is used to generate pagination section to navigate forward |
|
||
| `paginationPrevNext` | Points to an HTML template that is used to generate pagination section |
|
||
| `previewSize` | How many characters (approximately) to take out of a Markdown file to generate a preview |
|
||
| `previewEnding` | String to use at the end of each preview |
|
||
| `previewsPerPage` | Maximum number of previews hosted by a preview page |
|
||
| `previewsPageBaseName` | Base file name for preview pages |
|
||
|
||
In our case:
|
||
|
||
* we restrict previews to `200` characters in size (approximately)
|
||
* we use `. . .` string at the end of each preview
|
||
* preview pages host `3` previews maximum
|
||
* preview pages are saved as `index.html`, `index2.html`, `index3.html`, etc.
|
||
|
||
<a name="item"/>
|
||
|
||
## 03. Investigate item templates of the blog
|
||
|
||
* `en/blog/item.template` contents:
|
||
|
||
```
|
||
- - - - Collapsed for brevity - - - -
|
||
<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>
|
||
- - - - Collapsed for brevity - - - -
|
||
```
|
||
* `ru/blog/item.template` contents:
|
||
|
||
```
|
||
- - - - Collapsed for brevity - - - -
|
||
<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>
|
||
- - - - Collapsed for brevity - - - -
|
||
```
|
||
|
||
**Note**: beginning and ending were collapsed for brevity.
|
||
|
||
As you can see, both files look similar to `item.template` files we saw [before][prev].
|
||
|
||
The changes include:
|
||
|
||
* new URLs to reference pages in `page` directory and the first preview page in `blog` directory
|
||
* title is referenced inside `contents` section as a link pointing to a complete blog post
|
||
* date is referenced to highlight relationship among different blog posts in time
|
||
|
||
Date reference uses new `PSKOV_ITEM_DATE` constant:
|
||
|
||
| PSKOV constant | Description |
|
||
|---|---|
|
||
| `PSKOV_ITEM_DATE` | Value of `Date` key of the page's Markdown file |
|
||
|
||
<a name="preview"/>
|
||
|
||
## 04. Investigate preview templates
|
||
|
||
* `en/blog/preview.template` contents:
|
||
|
||
```
|
||
<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` contents:
|
||
|
||
```
|
||
<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>
|
||
```
|
||
|
||
Previews have no `<head>`, `<body>`, and similar full page HTML tags. Previews represent sections inserted into preview pages.
|
||
|
||
Preview itself is referenced by `PSKOV_PREVIEW` constant:
|
||
|
||
| PSKOV constant | Description |
|
||
|---|---|
|
||
| `PSKOV_PREVIEW` | Provides contents of a Markdown file limited by `previewSize` characters (approximately) |
|
||
|
||
<a name="index"/>
|
||
|
||
## 05. Investigate templates of preview pages
|
||
|
||
* `en/blog/index.template` contents:
|
||
|
||
```
|
||
- - - - Collapsed for brevity - - - -
|
||
<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>
|
||
- - - - Collapsed for brevity - - - -
|
||
```
|
||
|
||
* `ru/blog/index.template` contents:
|
||
|
||
```
|
||
- - - - Collapsed for brevity - - - -
|
||
<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>
|
||
- - - - Collapsed for brevity - - - -
|
||
```
|
||
|
||
**Notes**:
|
||
|
||
* beginning and ending were collapsed for brevity
|
||
* `PSKOV_INDEX_URL` constant is used to provide language selection
|
||
|
||
Here are new **PSKOV** constants explained:
|
||
|
||
| PSKOV constant | Description |
|
||
|---|---|
|
||
| `PSKOV_INDEX_URL` | Provides generated preview page file name: `<previewsPageBaseName><id>.html` |
|
||
| `PSKOV_PREVIEWS` | Provides a set of previews |
|
||
| `PSKOV_PAGINATION` | Provides pagination section to navigate preview pages |
|
||
|
||
<a name="pagination"/>
|
||
|
||
## 06. Investigate pagination templates
|
||
|
||
Pagination templates represent HTML sections to navigate preview pages.
|
||
|
||
There are free pagination templates:
|
||
|
||
| Pagination template | Description |
|
||
|---|---|
|
||
| Previous | A visitor can only go backwards |
|
||
| Next | A visitor can only go forward |
|
||
| Both | A visitor can either go backwards, or forward |
|
||
|
||
Let's look at English pagination templates:
|
||
|
||
* `en/blog/pagination.prev.template` contents:
|
||
|
||
```
|
||
<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` contents:
|
||
|
||
```
|
||
<p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
|
||
<p>
|
||
<a href="PSKOV_NEXT_PAGE_URL">Older »</a>
|
||
</p>
|
||
```
|
||
|
||
* `en/blog/pagination.template` contents:
|
||
|
||
```
|
||
<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>
|
||
```
|
||
|
||
Russian counterparts look similar. Here's `ru/blog/pagination.template` contents:
|
||
|
||
```
|
||
<p>Страница PSKOV_PAGE_ID из PSKOV_PAGES_COUNT</p>
|
||
<p>
|
||
<a href="PSKOV_PREV_PAGE_URL">« Новее</a>
|
||
<a href="PSKOV_NEXT_PAGE_URL">Старее »</a>
|
||
</p>
|
||
```
|
||
|
||
Here are new **PSKOV** constants we used:
|
||
|
||
| PSKOV constant | Description |
|
||
|---|---|
|
||
| `PSKOV_PAGE_ID` | Provides preview page id starting from `1` |
|
||
| `PSKOV_PAGES_COUNT` | Provides total number of generated preview pages |
|
||
| `PSKOV_PREV_PAGE_URL` | Provides previous preview page file name |
|
||
| `PSKOV_NEXT_PAGE_URL` | Provides next preview page file name |
|
||
|
||
<a name="md"/>
|
||
|
||
## 07. Investigate Markdown files
|
||
|
||
Markdown files represent blog posts and they look almost like Markdown files for pages. Here's `en/blog/1885.md` contents:
|
||
|
||
```
|
||
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 is used to sort blog posts by date in descending order:
|
||
|
||
| Header key | Description |
|
||
|---|---|
|
||
| `Date` | Provides value for `PSKOV_ITEM_DATE` constant when generating HTML out of Markdown |
|
||
|
||
<a name="lfsa"/>
|
||
|
||
## 08. Launch LFSA
|
||
|
||
<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">
|
||
ERROR Your browser does not support HTML5 video
|
||
</video>
|
||
|
||
Launch [LFSA][lfsa] so that it points to directory with the files we just observed:
|
||
|
||
```
|
||
$ /path/to/lfsa_1.0.0.py /path/to/dir/03.Blog
|
||
```
|
||
|
||
<a name="gen"/>
|
||
|
||
## 09. Generate the site
|
||
|
||
<video controls poster="../vid/education.05.blog.gen.edgy.poster.png">
|
||
<source src="../vid/education.05.blog.gen.edgy.mp4" type ="video/mp4">
|
||
<source src="../vid/education.05.blog.gen.edgy.webm" type ="video/webm">
|
||
ERROR Your browser does not support HTML5 video
|
||
</video>
|
||
|
||
Go to [Tool][tool] page and press `Generate` button to generate HTML files right where Markdown ones reside.
|
||
|
||
<a name="observe"/>
|
||
|
||
## 10. Observe the site
|
||
|
||
<video controls poster="../vid/education.05.blog.observe.edgy.poster.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">
|
||
ERROR Your browser does not support HTML5 video
|
||
</video>
|
||
|
||
Observe generated web site locally by opening `en/blog/index.html` or `ru/blog/index.html` and navigating preview pages.
|
||
|
||
<a name="summary"/>
|
||
|
||
## 11. Summary
|
||
|
||
You have successfully generated a web site with "dynamic" blog posts. [Check out the result][03-sample].
|
||
|
||
Introduced PSKOV constants include:
|
||
|
||
| PSKOV constant | Description |
|
||
|---|---|
|
||
| `PSKOV_ITEM_DATE` | Value of `Date` key of the page's Markdown file |
|
||
| `PSKOV_PREVIEW` | Provides contents of a Markdown file limited by `previewSize` characters (approximately) |
|
||
| `PSKOV_INDEX_URL` | Provides generated preview page file name: `<previewsPageBaseName><id>.html` |
|
||
| `PSKOV_PREVIEWS` | Provides a set of previews |
|
||
| `PSKOV_PAGINATION` | Provides pagination section to navigate preview pages |
|
||
| `PSKOV_PAGE_ID` | Provides preview page id starting from `1` |
|
||
| `PSKOV_PAGES_COUNT` | Provides total number of generated preview pages |
|
||
| `PSKOV_PREV_PAGE_URL` | Provides previous preview page file name |
|
||
| `PSKOV_NEXT_PAGE_URL` | Provides next preview page file name |
|
||
|
||
Introduced configuration keys include:
|
||
|
||
| Key | Description |
|
||
|---|---|
|
||
| `preview` | Points to an HTML template that is used to generate HTML preview out of the first `previewSize` (approximately) characters for each Markdown file |
|
||
| `index` | Points to an HTML template that is used to generate preview page to host previews |
|
||
| `paginationPrev` | Points to an HTML template that is used to generate pagination section to navigate backwards |
|
||
| `paginationNext` | Points to an HTML template that is used to generate pagination section to navigate forward |
|
||
| `paginationPrevNext` | Points to an HTML template that is used to generate pagination section |
|
||
| `previewSize` | How many characters (approximately) to take out of a Markdown file to generate a preview |
|
||
| `previewEnding` | String to use at the end of each preview |
|
||
| `previewsPerPage` | Maximum number of previews hosted by a preview page |
|
||
| `previewsPageBaseName` | Base file name for preview pages |
|
||
|
||
Introduced header keys include:
|
||
|
||
| Header key | Description |
|
||
|---|---|
|
||
| `Date` | Provides value for `PSKOV_ITEM_DATE` constant when generating HTML out of Markdown |
|
||
|
||
This was the final document to make you proficient in generating static sites with **PSKOV**. If you like what we do, join us at [VK][vk], [Twitter][tw], or [Facebook][fb].
|
||
|
||
Now use **PSKOV** to generate your very own web site!
|
||
|
||
</div><div class="contents">
|
||
|
||
| < Back | Index | Next > |
|
||
|---|---|---|
|
||
| [04. Language][prev] | [Education][index] | Not available |
|
||
|
||
[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/en/blog/index.html
|
||
[lfsa]: http://opengamestudio.org/lfsa
|
||
[tool]: http://opengamestudio.org/pskov
|
||
|
||
[vk]: https://vk.com/opengamestudo
|
||
[tw]: https://twitter.com/OpenGameStudio
|
||
[fb]: https://www.facebook.com/groups/162611230470183
|