|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480 |
- Title: Education: 05. Blog
- Date: 2019-05-22 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 and generate the site](#gen)
- * [09. 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="gen"/>
-
- ## 08. Launch LFSA and generate the site
-
- 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
- ```
-
- Generate the site:
-
- * Go to [Tool][tool] page
- * Press `Generate` button
- * Open generated `en/blog/index.html` or `ru/blog/index.html` from the site's directory locally
- * Navigate preview pages to make sure everything works fine
-
- <a name="summary"/>
-
- ## 09. 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
|