Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

education.05.blog.md 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. Title: Обучение: 05. Блог
  2. Date: 2019-06-25 00:00
  3. Category: Page
  4. Slug: education.05.blog
  5. Lang: ru
  6. | < Назад | Начало | Далее > |
  7. |---|---|---|
  8. | [04. Язык][prev] | [Обучение][index] | Отсутствует |
  9. </div><div class="contents">
  10. В этом документе мы создадим "динамические" страницы блога.
  11. Ожидаемое время завершения: 20 минут.
  12. **Содержание**
  13. * [01. Блог](#blog)
  14. * [02. Изучите файл `pskov.cfg`](#cfg)
  15. * [03. Изучите шаблоны элементов](#item)
  16. * [04. Изучите шаблоны предпросмотров](#preview)
  17. * [05. Изучите шаблоны страниц с предпросмотрами](#index)
  18. * [06. Изучите постраничные шаблоны](#pagination)
  19. * [07. Изучите файлы Markdown](#md)
  20. * [08. Запустите ЛФСД](#lfsa)
  21. * [09. Сгенерируйте сайт](#gen)
  22. * [10. Проверьте сайт](#observe)
  23. * [11. Итог](#summary)
  24. <a name="blog"/>
  25. ## 01. Блог
  26. Итак, у вас есть веб-сайт на Английском и Русском языках. Вы начинаете ощущать желание регулярно делиться своими мыслями с миром в виде заметок блога.
  27. Вы создаёте директорию со [следующей структурой файлов][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. Давайте взглянем на содержимое этих файлов.
  68. <a name="cfg"/>
  69. ## 02. Изучите файл `pskov.cfg`
  70. Файл `pskov.cfg` содержит следующее:
  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. Вы уже встречались с ключами `input` и `item`. Рассмотрим остальные:
  85. | Ключ | Описание |
  86. |---|---|
  87. | `preview` | Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых `previewSize` (приблизительно) символов для каждого файла Markdown |
  88. | `index` | Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами |
  89. | `paginationPrev` | Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу |
  90. | `paginationNext` | Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу |
  91. | `paginationPrevNext` | Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам |
  92. | `previewSize` | Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра |
  93. | `previewEnding` | Строка для добавления в конец каждого предпросмотра |
  94. | `previewsPerPage` | Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами |
  95. | `previewsPageBaseName` | Базовое имя файла для страниц с предпросмотрами |
  96. В нашем случае:
  97. * мы ограничиваем предпросмотр `200` символами (приблизительно)
  98. * мы используем строку `. . .` в конце каждого предпросмотра
  99. * страницы с предпросмотрами вмещают максимум `3` предпросмотра
  100. * страницы с предпросмотрами будут сохранены как `index.html`, `index2.html`, `index3.html` и т.д.
  101. <a name="item"/>
  102. ## 03. Изучите шаблоны элементов
  103. * Содержимое `en/blog/item.template`:
  104. ```
  105. - - - - Схлопнуто для краткости - - - -
  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. - - - - Схлопнуто для краткости - - - -
  132. ```
  133. * Содержимое `ru/blog/item.template`:
  134. ```
  135. - - - - Схлопнуто для краткости - - - -
  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. - - - - Схлопнуто для краткости - - - -
  162. ```
  163. **Внимание**: начало и конец схлопнуты для краткости.
  164. Как видите, оба файла выглядят практически так же, как и файлы `item.template`, рассмотренные [ранее][prev].
  165. Изменения следующие:
  166. * новые URL страниц в директории `page` и первой страницы с предпросмотрами в директории `blog`
  167. * заголовок используется внутри секции `contents` в качестве ссылки на полную заметку блога
  168. * дата используется для подчёркивания временной зависимости между заметками блога
  169. Дату мы получаем из константы `PSKOV_ITEM_DATE`:
  170. | Константа ПСКОВА | Описание |
  171. |---|---|
  172. | `PSKOV_ITEM_DATE` | Значение ключа `Date` файла Markdown |
  173. <a name="preview"/>
  174. ## 04. Изучите шаблоны предпросмотров
  175. * Содержимое `en/blog/preview.template`:
  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`:
  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. У предпросмотров нет `<head>`, `<body>` и прочих полностраничных тэгов HTML. Предпросмотры являются секциями, вставляемыми в страницы с предпросмотрами.
  202. Сам предпросмотр мы получаем из константы `PSKOV_PREVIEW`:
  203. | Константа ПСКОВА | Описание |
  204. |---|---|
  205. | `PSKOV_PREVIEW` | Предоставляет содержимое файла Markdown, ограниченное `previewSize` символами (приблизительно) |
  206. <a name="index"/>
  207. ## 05. Изучите шаблоны страниц с предпросмотрами
  208. * Содержимое `en/blog/index.template`:
  209. ```
  210. - - - - Схлопнуто для краткости - - - -
  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. - - - - Схлопнуто для краткости - - - -
  232. ```
  233. * Содержимое `ru/blog/index.template`:
  234. ```
  235. - - - - Схлопнуто для краткости - - - -
  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. - - - - Схлопнуто для краткости - - - -
  257. ```
  258. **Замечания**:
  259. * начало и конец схлопнуты для краткости
  260. * константа `PSKOV_INDEX_URL` используется для выбора языка
  261. Новые константы **ПСКОВА**:
  262. | Константа ПСКОВА | Описание |
  263. |---|---|
  264. | `PSKOV_INDEX_URL` | Предоставляет генерируемое имя файла страницы с предпросмотрами: `<previewsPageBaseName><id>.html` |
  265. | `PSKOV_PREVIEWS` | Предоставляет набор предпросмотров |
  266. | `PSKOV_PAGINATION` | Предоставляет секцию для перехода между страницами с предпросмотрами |
  267. <a name="pagination"/>
  268. ## 06. Изучите постраничные шаблоны
  269. Постраничные шаблоны являются секциями HTML для перехода между страницами с предпросмотрами.
  270. Существует три постраничных шаблона:
  271. | Постраничный шаблон | Описание |
  272. |---|---|
  273. | Предыдущий | Посетитель может перейти лишь назад |
  274. | Следующий | Посетитель может перейти лишь вперёд |
  275. | Оба | Посетитель может перейти либо вперёд, либо назад |
  276. Рассмотрим английские постраничные шаблоны:
  277. * Содержимое `en/blog/pagination.prev.template`:
  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`:
  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`:
  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. Русские версии выглядят схожим образом. Например, содержимое `ru/blog/pagination.template`:
  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. Новые константы **ПСКОВА**:
  308. | Константа ПСКОВА | Описание |
  309. |---|---|
  310. | `PSKOV_PAGE_ID` | Предоставляет порядковый номер страницы с предпросмотрами, начиная с `1` |
  311. | `PSKOV_PAGES_COUNT` | Предоставляет количество сгенерированных страниц с предпросмотрами |
  312. | `PSKOV_PREV_PAGE_URL` | Предоставляет имя файла предыдущей страницы с предпросмотрами |
  313. | `PSKOV_NEXT_PAGE_URL` | Предоставляет имя файла следующей страницы с предпросмотрами |
  314. <a name="md"/>
  315. ## 07. Изучите файлы Markdown
  316. Файлы Markdown являются заметками блога, они похожи на файлы Markdown обычных страниц. Вот как выглядит содержимое `en/blog/1885.md`:
  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. Заметки блога сортируются по дате: новые заметки размещаются перед старыми.
  326. | Ключ заголовка | Описание |
  327. |---|---|
  328. | `Date` | Предоставляет значение для константы `PSKOV_ITEM_DATE` при генерации HTML из Markdown |
  329. <a name="lfsa"/>
  330. ## 08. Запустите ЛФСД
  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. ОШИБКА Ваш браузер не поддерживает видео HTML5
  335. </video>
  336. Запустите [ЛФСД][lfsa] с указанием директории, содержащей только что рассмотренные файлы:
  337. ```
  338. $ /путь/до/lfsa_1.0.0.py /путь/до/директории/03.Blog
  339. ```
  340. <a name="gen"/>
  341. ## 09. Сгенерируйте сайт
  342. <video controls poster="../vid/education.05.blog.gen.edgy.poster+ru.png">
  343. <source src="../vid/education.05.blog.gen.edgy+ru.mp4" type ="video/mp4">
  344. <source src="../vid/education.05.blog.gen.edgy+ru.webm" type ="video/webm">
  345. ОШИБКА Ваш браузер не поддерживает видео HTML5
  346. </video>
  347. Перейдите на страницу [Инструмент][tool] и нажмите кнопку `Генерировать` для генерации файлов HTML рядом с файлами Markdown.
  348. <a name="observe"/>
  349. ## 10. Проверьте сайт
  350. <video controls poster="../vid/education.05.blog.observe.edgy.poster+ru.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. ОШИБКА Ваш браузер не поддерживает видео HTML5
  354. </video>
  355. Проверьте сгенерированный веб-сайт локально: откройте файл `ru/blog/index.html` или `en/blog/index.html` и осуществите переход между страницами предпросмотра.
  356. <a name="summary"/>
  357. ## 11. Итог
  358. Вы успешно сгенерировали веб-сайт с "динамическими" страницами блога. [Проверьте результат][03-sample].
  359. Представлены константы **ПСКОВА**:
  360. | Константа ПСКОВА | Описание |
  361. |---|---|
  362. | `PSKOV_ITEM_DATE` | Значение ключа `Date` файла Markdown |
  363. | `PSKOV_PREVIEW` | Предоставляет содержимое файла Markdown, ограниченное `previewSize` символами (приблизительно) |
  364. | `PSKOV_INDEX_URL` | Предоставляет генерируемое имя файла страницы с предпросмотрами: `<previewsPageBaseName><id>.html` |
  365. | `PSKOV_PREVIEWS` | Предоставляет набор предпросмотров |
  366. | `PSKOV_PAGINATION` | Предоставляет секцию для перехода между страницами с предпросмотрами |
  367. | `PSKOV_PAGE_ID` | Предоставляет порядковый номер страницы с предпросмотрами, начиная с `1` |
  368. | `PSKOV_PAGES_COUNT` | Предоставляет количество сгенерированных страниц с предпросмотрами |
  369. | `PSKOV_PREV_PAGE_URL` | Предоставляет имя файла предыдущей страницы с предпросмотрами |
  370. | `PSKOV_NEXT_PAGE_URL` | Предоставляет имя файла следующей страницы с предпросмотрами |
  371. Представлены ключи настроек:
  372. | Ключ | Описание |
  373. |---|---|
  374. | `preview` | Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых `previewSize` (приблизительно) символов для каждого файла Markdown |
  375. | `index` | Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами |
  376. | `paginationPrev` | Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу |
  377. | `paginationNext` | Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу |
  378. | `paginationPrevNext` | Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам |
  379. | `previewSize` | Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра |
  380. | `previewEnding` | Строка для добавления в конец каждого предпросмотра |
  381. | `previewsPerPage` | Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами |
  382. | `previewsPageBaseName` | Базовое имя файла для страниц с предпросмотрами |
  383. Представлены ключи заголовка:
  384. | Ключ заголовка | Описание |
  385. |---|---|
  386. | `Date` | Предоставляет значение для константы `PSKOV_ITEM_DATE` при генерации HTML из Markdown |
  387. Это был последний документ, призванный научить вас уверенно владеть генератором статических сайтов **ПСКОВ**. Если вам нравится наш труд, присоединяйтесь к нам в [VK][vk], [Twitter][tw] или [Facebook][fb].
  388. А теперь используйте **ПСКОВ** для генерация своего собственного веб-сайта!
  389. </div><div class="contents">
  390. | < Назад | Начало | Далее > |
  391. |---|---|---|
  392. | [04. Язык][prev] | [Обучение][index] | Отсутствует |
  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/ru/blog/index.html
  397. [lfsa]: http://opengamestudio.org/lfsa/ru
  398. [tool]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html
  399. [vk]: https://vk.com/opengamestudo
  400. [tw]: https://twitter.com/OpenGameStudio
  401. [fb]: https://www.facebook.com/groups/162611230470183