Education: 05. Blog

< Back Index Next >
04. Language Education Not available

In this document we create "dynamic" pages for a blog.

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 regularly share your thoughts with the world as blog posts.

You set on to create the following directory structure:

Let's look at the contents of these files closer.

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.

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:

Date reference uses new PSKOV_ITEM_DATE constant:

PSKOV constant Description
PSKOV_ITEM_DATE Value of Date key of the page's Markdown file

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)

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

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

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

08. Launch LFSA

Launch 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

09. Generate the site

Go to Tool page and press Generate button to generate HTML files right where Markdown ones reside.

10. Observe the site

Observe generated web site locally by opening en/blog/index.html or ru/blog/index.html and navigating preview pages.

11. Summary

You have successfully generated a web site with "dynamic" blog posts. Check out the result.

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, Twitter, or Facebook.

Now use PSKOV to generate your very own web site!

< Back Index Next >
04. Language Education Not available