選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

education.05.blog.md 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. Title: Education: 05. Blog
  2. Date: 2019-06-25 00:00
  3. Category: Page
  4. Slug: education.05.blog
  5. Lang: en
  6. | < Back | Index | Next > |
  7. |---|---|---|
  8. | [04. Language][prev] | [Education][index] | Not available |
  9. </div><div class="contents">
  10. In this document we create "dynamic" pages for a blog.
  11. Estimated completion time: 20 minutes.
  12. **Table of contents**
  13. * [01. Blog](#blog)
  14. * [02. Investigate `pskov.cfg` file](#cfg)
  15. * [03. Investigate item templates of the blog](#item)
  16. * [04. Investigate preview templates](#preview)
  17. * [05. Investigate templates of preview pages](#index)
  18. * [06. Investigate pagination templates](#pagination)
  19. * [07. Investigate Markdown files](#md)
  20. * [08. Launch LFSA](#lfsa)
  21. * [09. Generate the site](#gen)
  22. * [10. Observe the site](#observe)
  23. * [11. Summary](#summary)
  24. <a name="blog"/>
  25. ## 01. Blog
  26. 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.
  27. You set on to create the following [directory structure][03-files]:
  28. * `pskov.cfg`
  29. * `en/blog/`
  30. * `item.template`
  31. * `index.template`
  32. * `preview.template`
  33. * `pagination.template`
  34. * `pagination.prev.template`
  35. * `pagination.next.template`
  36. * `1885.md`
  37. * `1886.01.md`
  38. * `1886.02.md`
  39. * `1887.01.md`
  40. * `1887.02.md`
  41. * `1888.md`
  42. * `1896.md`
  43. * `1899.md`
  44. * `en/page/`
  45. * `item.template`
  46. * `about.md`
  47. * `cv.md`
  48. * `ru/blog/`
  49. * `item.template`
  50. * `index.template`
  51. * `preview.template`
  52. * `pagination.template`
  53. * `pagination.prev.template`
  54. * `pagination.next.template`
  55. * `1885.md`
  56. * `1886.01.md`
  57. * `1886.02.md`
  58. * `1887.01.md`
  59. * `1887.02.md`
  60. * `1888.md`
  61. * `1896.md`
  62. * `1899.md`
  63. * `ru/page/`
  64. * `item.template`
  65. * `about.md`
  66. * `cv.md`
  67. Let's look at the contents of these files closer.
  68. <a name="cfg"/>
  69. ## 02. Investigate `pskov.cfg` file
  70. `pskov.cfg` file has the following contents:
  71. ```
  72. input = en/page;ru/page;en/blog;ru/blog
  73. item = item.template
  74. preview = preview.template
  75. index = index.template
  76. paginationPrev = pagination.prev.template
  77. paginationNext = pagination.next.template
  78. paginationPrevNext = pagination.template
  79. previewSize = 200
  80. previewEnding = . . .
  81. previewsPerPage = 3
  82. previewPageBaseName = index
  83. ```
  84. You already met `input` and `item` keys. Let's see into new ones:
  85. | Key | Description |
  86. |---|---|
  87. | `preview` | Points to an HTML template that is used to generate HTML preview out of the first `previewSize` (approximately) characters for each Markdown file |
  88. | `index` | Points to an HTML template that is used to generate preview page to host previews |
  89. | `paginationPrev` | Points to an HTML template that is used to generate pagination section to navigate backwards |
  90. | `paginationNext` | Points to an HTML template that is used to generate pagination section to navigate forward |
  91. | `paginationPrevNext` | Points to an HTML template that is used to generate pagination section |
  92. | `previewSize` | How many characters (approximately) to take out of a Markdown file to generate a preview |
  93. | `previewEnding` | String to use at the end of each preview |
  94. | `previewsPerPage` | Maximum number of previews hosted by a preview page |
  95. | `previewsPageBaseName` | Base file name for preview pages |
  96. In our case:
  97. * we restrict previews to `200` characters in size (approximately)
  98. * we use `. . .` string at the end of each preview
  99. * preview pages host `3` previews maximum
  100. * preview pages are saved as `index.html`, `index2.html`, `index3.html`, etc.
  101. <a name="item"/>
  102. ## 03. Investigate item templates of the blog
  103. * `en/blog/item.template` contents:
  104. ```
  105. - - - - Collapsed for brevity - - - -
  106. <body>
  107. <div id="header">
  108. <strong>Serov</strong>
  109. <a href="../../en/blog/index.html">Blog</a>
  110. <a href="../../en/page/about.html">About me</a>
  111. <a href="../../en/page/cv.html">CV</a>
  112. <div id="lang">
  113. <a href="../../en/blog/PSKOV_ITEM_URL">EN</a>
  114. <a href="../../ru/blog/PSKOV_ITEM_URL">RU</a>
  115. </div>
  116. </div>
  117. <center>
  118. <h1>In the blog...</h1>
  119. <div class="contents">
  120. <h2 class="itemTitle">
  121. <a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
  122. </h2>
  123. <p class="itemDate">PSKOV_ITEM_DATE</p>
  124. PSKOV_ITEM_CONTENTS
  125. </div>
  126. <div id="footer">
  127. This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
  128. </div>
  129. </center>
  130. </body>
  131. - - - - Collapsed for brevity - - - -
  132. ```
  133. * `ru/blog/item.template` contents:
  134. ```
  135. - - - - Collapsed for brevity - - - -
  136. <body>
  137. <div id="header">
  138. <strong>Серов</strong>
  139. <a href="../../ru/blog/index.html">Блог</a>
  140. <a href="../../ru/page/about.html">Обо мне</a>
  141. <a href="../../ru/page/cv.html">Резюме</a>
  142. <div id="lang">
  143. <a href="../../en/blog/PSKOV_ITEM_URL">EN</a>
  144. <a href="../../ru/blog/PSKOV_ITEM_URL">RU</a>
  145. </div>
  146. </div>
  147. <center>
  148. <h1>В блоге...</h1>
  149. <div class="contents">
  150. <h2 class="itemTitle">
  151. <a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
  152. </h2>
  153. <p class="itemDate">PSKOV_ITEM_DATE</p>
  154. PSKOV_ITEM_CONTENTS
  155. </div>
  156. <div id="footer">
  157. Этот пример сайта сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a>.
  158. </div>
  159. </center>
  160. </body>
  161. - - - - Collapsed for brevity - - - -
  162. ```
  163. **Note**: beginning and ending were collapsed for brevity.
  164. As you can see, both files look similar to `item.template` files we saw [before][prev].
  165. The changes include:
  166. * new URLs to reference pages in `page` directory and the first preview page in `blog` directory
  167. * title is referenced inside `contents` section as a link pointing to a complete blog post
  168. * date is referenced to highlight relationship among different blog posts in time
  169. Date reference uses new `PSKOV_ITEM_DATE` constant:
  170. | PSKOV constant | Description |
  171. |---|---|
  172. | `PSKOV_ITEM_DATE` | Value of `Date` key of the page's Markdown file |
  173. <a name="preview"/>
  174. ## 04. Investigate preview templates
  175. * `en/blog/preview.template` contents:
  176. ```
  177. <div class="contents">
  178. <h2 class="itemTitle">
  179. <a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
  180. </h2>
  181. <p class="itemDate">PSKOV_ITEM_DATE</p>
  182. PSKOV_PREVIEW
  183. <div class="itemMore">
  184. <a href="PSKOV_ITEM_URL">Continue reading</a>
  185. </div>
  186. </div>
  187. ```
  188. * `ru/blog/preview.template` contents:
  189. ```
  190. <div class="contents">
  191. <h2 class="itemTitle">
  192. <a href="PSKOV_ITEM_URL">PSKOV_ITEM_TITLE</a>
  193. </h2>
  194. <p class="itemDate">PSKOV_ITEM_DATE</p>
  195. PSKOV_PREVIEW
  196. <div class="itemMore">
  197. <a href="PSKOV_ITEM_URL">Читать дальше</a>
  198. </div>
  199. </div>
  200. ```
  201. Previews have no `<head>`, `<body>`, and similar full page HTML tags. Previews represent sections inserted into preview pages.
  202. Preview itself is referenced by `PSKOV_PREVIEW` constant:
  203. | PSKOV constant | Description |
  204. |---|---|
  205. | `PSKOV_PREVIEW` | Provides contents of a Markdown file limited by `previewSize` characters (approximately) |
  206. <a name="index"/>
  207. ## 05. Investigate templates of preview pages
  208. * `en/blog/index.template` contents:
  209. ```
  210. - - - - Collapsed for brevity - - - -
  211. <body>
  212. <div id="header">
  213. <strong>Serov</strong>
  214. <a href="../../en/blog/index.html">Blog</a>
  215. <a href="../../en/page/about.html">About me</a>
  216. <a href="../../en/page/cv.html">CV</a>
  217. <div id="lang">
  218. <a href="../../en/blog/PSKOV_INDEX_URL">EN</a>
  219. <a href="../../ru/blog/PSKOV_INDEX_URL">RU</a>
  220. </div>
  221. </div>
  222. <center>
  223. <h1>Blog</h1>
  224. PSKOV_PREVIEWS
  225. PSKOV_PAGINATION
  226. <div id="footer">
  227. This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
  228. </div>
  229. </center>
  230. </body>
  231. - - - - Collapsed for brevity - - - -
  232. ```
  233. * `ru/blog/index.template` contents:
  234. ```
  235. - - - - Collapsed for brevity - - - -
  236. <body>
  237. <div id="header">
  238. <strong>Серов</strong>
  239. <a href="../../ru/blog/index.html">Блог</a>
  240. <a href="../../ru/page/about.html">Обо мне</a>
  241. <a href="../../ru/page/cv.html">Резюме</a>
  242. <div id="lang">
  243. <a href="../../en/blog/PSKOV_INDEX_URL">EN</a>
  244. <a href="../../ru/blog/PSKOV_INDEX_URL">RU</a>
  245. </div>
  246. </div>
  247. <center>
  248. <h1>Блог</h1>
  249. PSKOV_PREVIEWS
  250. PSKOV_PAGINATION
  251. <div id="footer">
  252. Этот пример сайта сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a>.
  253. </div>
  254. </center>
  255. </body>
  256. - - - - Collapsed for brevity - - - -
  257. ```
  258. **Notes**:
  259. * beginning and ending were collapsed for brevity
  260. * `PSKOV_INDEX_URL` constant is used to provide language selection
  261. Here are new **PSKOV** constants explained:
  262. | PSKOV constant | Description |
  263. |---|---|
  264. | `PSKOV_INDEX_URL` | Provides generated preview page file name: `<previewsPageBaseName><id>.html` |
  265. | `PSKOV_PREVIEWS` | Provides a set of previews |
  266. | `PSKOV_PAGINATION` | Provides pagination section to navigate preview pages |
  267. <a name="pagination"/>
  268. ## 06. Investigate pagination templates
  269. Pagination templates represent HTML sections to navigate preview pages.
  270. There are free pagination templates:
  271. | Pagination template | Description |
  272. |---|---|
  273. | Previous | A visitor can only go backwards |
  274. | Next | A visitor can only go forward |
  275. | Both | A visitor can either go backwards, or forward |
  276. Let's look at English pagination templates:
  277. * `en/blog/pagination.prev.template` contents:
  278. ```
  279. <p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
  280. <p>
  281. <a href="PSKOV_PREV_PAGE_URL">« Newer</a>
  282. </p>
  283. ```
  284. * `en/blog/pagination.next.template` contents:
  285. ```
  286. <p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
  287. <p>
  288. <a href="PSKOV_NEXT_PAGE_URL">Older »</a>
  289. </p>
  290. ```
  291. * `en/blog/pagination.template` contents:
  292. ```
  293. <p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p>
  294. <p>
  295. <a href="PSKOV_PREV_PAGE_URL">« Newer</a>
  296. <a href="PSKOV_NEXT_PAGE_URL">Older »</a>
  297. </p>
  298. ```
  299. Russian counterparts look similar. Here's `ru/blog/pagination.template` contents:
  300. ```
  301. <p>Страница PSKOV_PAGE_ID из PSKOV_PAGES_COUNT</p>
  302. <p>
  303. <a href="PSKOV_PREV_PAGE_URL">« Новее</a>
  304. <a href="PSKOV_NEXT_PAGE_URL">Старее »</a>
  305. </p>
  306. ```
  307. Here are new **PSKOV** constants we used:
  308. | PSKOV constant | Description |
  309. |---|---|
  310. | `PSKOV_PAGE_ID` | Provides preview page id starting from `1` |
  311. | `PSKOV_PAGES_COUNT` | Provides total number of generated preview pages |
  312. | `PSKOV_PREV_PAGE_URL` | Provides previous preview page file name |
  313. | `PSKOV_NEXT_PAGE_URL` | Provides next preview page file name |
  314. <a name="md"/>
  315. ## 07. Investigate Markdown files
  316. Markdown files represent blog posts and they look almost like Markdown files for pages. Here's `en/blog/1885.md` contents:
  317. ```
  318. Title: Bullocks
  319. Date: 1885
  320. Slug: 1885.01.bullocks
  321. ![Bullocks][bullocks]
  322. I've been painting "Bullocks" sketch while I was staying in Odessa at Kuznetsov's in 1885.
  323. [bullocks]: https://upload.wikimedia.org/wikipedia/commons/c/cb/Walentin_Aleksandrovich_Serov_Bullocks.jpg
  324. ```
  325. Date is used to sort blog posts by date in descending order:
  326. | Header key | Description |
  327. |---|---|
  328. | `Date` | Provides value for `PSKOV_ITEM_DATE` constant when generating HTML out of Markdown |
  329. <a name="lfsa"/>
  330. ## 08. Launch LFSA
  331. <video controls poster="../vid/education.05.blog.launch-lfsa.edgy.poster.png">
  332. <source src="../vid/education.05.blog.launch-lfsa.edgy.mp4" type ="video/mp4">
  333. <source src="../vid/education.05.blog.launch-lfsa.edgy.webm" type ="video/webm">
  334. ERROR Your browser does not support HTML5 video
  335. </video>
  336. Launch [LFSA][lfsa] so that it points to directory with the files we just observed:
  337. ```
  338. $ /path/to/lfsa_1.0.0.py /path/to/dir/03.Blog
  339. ```
  340. <a name="gen"/>
  341. ## 09. Generate the site
  342. <video controls poster="../vid/education.05.blog.gen.edgy.poster.png">
  343. <source src="../vid/education.05.blog.gen.edgy.mp4" type ="video/mp4">
  344. <source src="../vid/education.05.blog.gen.edgy.webm" type ="video/webm">
  345. ERROR Your browser does not support HTML5 video
  346. </video>
  347. Go to [Tool][tool] page and press `Generate` button to generate HTML files right where Markdown ones reside.
  348. <a name="observe"/>
  349. ## 10. Observe the site
  350. <video controls poster="../vid/education.05.blog.observe.edgy.poster.png">
  351. <source src="../vid/education.05.blog.observe.edgy.mp4" type ="video/mp4">
  352. <source src="../vid/education.05.blog.observe.edgy.webm" type ="video/webm">
  353. ERROR Your browser does not support HTML5 video
  354. </video>
  355. Observe generated web site locally by opening `en/blog/index.html` or `ru/blog/index.html` and navigating preview pages.
  356. <a name="summary"/>
  357. ## 11. Summary
  358. You have successfully generated a web site with "dynamic" blog posts. [Check out the result][03-sample].
  359. Introduced PSKOV constants include:
  360. | PSKOV constant | Description |
  361. |---|---|
  362. | `PSKOV_ITEM_DATE` | Value of `Date` key of the page's Markdown file |
  363. | `PSKOV_PREVIEW` | Provides contents of a Markdown file limited by `previewSize` characters (approximately) |
  364. | `PSKOV_INDEX_URL` | Provides generated preview page file name: `<previewsPageBaseName><id>.html` |
  365. | `PSKOV_PREVIEWS` | Provides a set of previews |
  366. | `PSKOV_PAGINATION` | Provides pagination section to navigate preview pages |
  367. | `PSKOV_PAGE_ID` | Provides preview page id starting from `1` |
  368. | `PSKOV_PAGES_COUNT` | Provides total number of generated preview pages |
  369. | `PSKOV_PREV_PAGE_URL` | Provides previous preview page file name |
  370. | `PSKOV_NEXT_PAGE_URL` | Provides next preview page file name |
  371. Introduced configuration keys include:
  372. | Key | Description |
  373. |---|---|
  374. | `preview` | Points to an HTML template that is used to generate HTML preview out of the first `previewSize` (approximately) characters for each Markdown file |
  375. | `index` | Points to an HTML template that is used to generate preview page to host previews |
  376. | `paginationPrev` | Points to an HTML template that is used to generate pagination section to navigate backwards |
  377. | `paginationNext` | Points to an HTML template that is used to generate pagination section to navigate forward |
  378. | `paginationPrevNext` | Points to an HTML template that is used to generate pagination section |
  379. | `previewSize` | How many characters (approximately) to take out of a Markdown file to generate a preview |
  380. | `previewEnding` | String to use at the end of each preview |
  381. | `previewsPerPage` | Maximum number of previews hosted by a preview page |
  382. | `previewsPageBaseName` | Base file name for preview pages |
  383. Introduced header keys include:
  384. | Header key | Description |
  385. |---|---|
  386. | `Date` | Provides value for `PSKOV_ITEM_DATE` constant when generating HTML out of Markdown |
  387. 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].
  388. Now use **PSKOV** to generate your very own web site!
  389. </div><div class="contents">
  390. | < Back | Index | Next > |
  391. |---|---|---|
  392. | [04. Language][prev] | [Education][index] | Not available |
  393. [index]: education.html
  394. [prev]: education.04.lang.html
  395. [03-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/03.Blog
  396. [03-sample]: http://opengamestudio.org/pskov/sample/03.Blog/en/blog/index.html
  397. [lfsa]: http://opengamestudio.org/lfsa
  398. [tool]: http://opengamestudio.org/pskov
  399. [vk]: https://vk.com/opengamestudo
  400. [tw]: https://twitter.com/OpenGameStudio
  401. [fb]: https://www.facebook.com/groups/162611230470183