+
In this document we create "dynamic" pages like blog posts.
+
Estimated completion time: 20 minutes.
+
Table of contents
+
+
+
01. Blog
+
So, you have your web site in both English and Russian. You start to feel the need to constantly share your thoughts with the world as blog posts.
+
You set on to create the following directory structure:
+
+cfgen/blog/
+item.templateindex.templatepreview.templatepagination.templatepagination.prev.templatepagination.next.template1885.md1886.01.md1886.02.md1887.01.md1887.02.md1888.md1896.md1899.md
en/page/
+item.templateabout.mdcv.md
ru/blog/
+item.templateindex.templatepreview.templatepagination.templatepagination.prev.templatepagination.next.template1885.md1886.01.md1886.02.md1887.01.md1887.02.md1888.md1896.md1899.md
ru/page/
+item.templateabout.mdcv.md
+
Let's look at the contents of these files closer.
+
+
02. Investigate cfg file
+
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
+
+
Apart from already used input and item keys, we have quite a lot of new ones. Let's break them down:
+
+
+
+| Key |
+Description |
+
+
+
+
+preview |
+Points to an HTML template file that is used to generate HTML previews out of the first previewSize (approximately) characters of Markdown files |
+
+
+index |
+Points to an HTML template file that is used to generate HTML index (summary) files to host previews |
+
+
+paginationPrev |
+Points to an HTML template file that is used to generate pagination section used by the last index (summary) file |
+
+
+paginationNext |
+Points to an HTML template file that is used to generate pagination section used by the first index (summary) file |
+
+
+paginationPrevNext |
+Points to an HTML template file that is used to generate pagination section used by index (summary) files except the ones at the beginning and at the end |
+
+
+previewSize |
+How many characters (approximately) to take out of a Markdown file to generate an HTML preview |
+
+
+previewEnding |
+String to use at the end of HTML previews |
+
+
+previewsPerPage |
+Number of HTML previews hosted by single index (summary) file |
+
+
+previewsPageBaseName |
+Index (summary) file base name |
+
+
+
+
In our case:
+
+- we restrict previews to
200 characters in size (approximately)
+- we use
. . . string at the end of each preview
+- index (summary) files host
3 previews maximum
+- index (summary) files are saved as
index.html, index2.html, index3.html, etc.
+
+
+
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.
+
The changes include:
+
+- new URLs to reference pages in
page directory and first index (summary) file in blog directory
+- title is now referenced inside
contents section as a link to complete page
+- 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 |
+Provides date from Date: part of page's header section |
+
+
+
+
+
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 index (summary) files.
+
Preview itself is referenced by PSKOV_PREVIEW constant:
+
+
+
+| PSKOV constant |
+Description |
+
+
+
+
+PSKOV_PREVIEW |
+Provides contents from a Markdown file limited by previewSize characters (approximately) |
+
+
+
+
+
05. Investigate index (summary) templates
+
+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
+
Index (summary) files are used to host previews.
+
Here are new PSKOV constants explained:
+
+
+
+| PSKOV constant |
+Description |
+
+
+
+
+PSKOV_INDEX_URL |
+Provides generated page's file name: <previewsPageBaseName><id>.html |
+
+
+PSKOV_PREVIEWS |
+Provides a combination of PSKOV_PREVIEW sections |
+
+
+PSKOV_PAGINATION |
+Provides pagination section to navigate index (summary) pages |
+
+
+
+
+
+
Pagination templates represent sections used to navigate index (summary) pages.
+
There are free pagination templates:
+
+
+
+| Pagination template |
+Description |
+
+
+
+
+| prev |
+Is used for the last index (summary) page because we can only go backwards |
+
+
+| next |
+Is used for the first index (summary) page because we can only go forward |
+
+
+| both |
+Is used for intermediate index (summary) pages because we 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 index (summary) page id starting from 1 |
+
+
+PSKOV_PAGES_COUNT |
+Provides total number of index (summary) pages generated |
+
+
+PSKOV_PREV_PAGE_URL |
+Provides previous index (summary) page file name |
+
+
+PSKOV_NEXT_PAGE_URL |
+Provides next index (summary) page file name |
+
+
+
+
+
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 ascending order:
+
+
+
+| Header constant |
+Description |
+
+
+
+
+Date: |
+Provides value for PSKOV_ITEM_DATE constant when generating HTML out of Markdown |
+
+
+
+
+
08. Launch LFSA and generate the site
+
Launch LFSA so that it points to directory with the files we just observed:
+
$ /path/to/lfsa-201905.py /path/to/dir/03.Blog
+
+
Generate the site:
+
+- Go to Tool page
+- Press
Generate button
+- Open generated
en/blog/index.html or ru/blog/index.html from the site's directory locally
+- Navigate index (summary) pages to make sure everything works fine
+
+
+
09. Summary
+
You have successfully generated a web site with "constant" and "dynamic" pages. Check out the result.
+
Introduced PSKOV constants include:
+
+
+
+| PSKOV constant |
+Description |
+
+
+
+
+PSKOV_ITEM_DATE |
+Provides date from Date: part of page's header section |
+
+
+PSKOV_PREVIEW |
+Provides contents from a Markdown file limited by previewSize characters (approximately) |
+
+
+PSKOV_INDEX_URL |
+Provides generated page's file name: <previewsPageBaseName><id>.html |
+
+
+PSKOV_PREVIEWS |
+Provides a combination of PSKOV_PREVIEW sections |
+
+
+PSKOV_PAGINATION |
+Provides pagination section to navigate index (summary) pages |
+
+
+PSKOV_PAGE_ID |
+Provides index (summary) page id starting from 1 |
+
+
+PSKOV_PAGES_COUNT |
+Provides total number of index (summary) pages generated |
+
+
+PSKOV_PREV_PAGE_URL |
+Provides previous index (summary) page file name |
+
+
+PSKOV_NEXT_PAGE_URL |
+Provides next index (summary) page file name |
+
+
+
+
Introduced configuration keys include:
+
+
+
+| Key |
+Description |
+
+
+
+
+preview |
+Points to an HTML template file that is used to generate HTML previews out of the first previewSize (approximately) characters of Markdown files |
+
+
+index |
+Points to an HTML template file that is used to generate HTML index (summary) files to host previews |
+
+
+paginationPrev |
+Points to an HTML template file that is used to generate pagination section used by the last index (summary) file |
+
+
+paginationNext |
+Points to an HTML template file that is used to generate pagination section used by the first index (summary) file |
+
+
+paginationPrevNext |
+Points to an HTML template file that is used to generate pagination section used by index (summary) files except the ones at the beginning and at the end |
+
+
+previewSize |
+How many characters (approximately) to take out of a Markdown file to generate an HTML preview |
+
+
+previewEnding |
+String to use at the end of HTML previews |
+
+
+previewsPerPage |
+Number of HTML previews hosted by single index (summary) file |
+
+
+previewsPageBaseName |
+Index (summary) file base name |
+
+
+
+
Introduced header constants include:
+
+
+
+| Header constant |
+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, support us by joining our group at Twitter, Facebook, or VK.
+
Now use PSKOV to generate your very own web site!
+
