education.03.site.md 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. Title: Обучение: 03. Сайт
  2. Date: 2019-06-25 00:00
  3. Category: Page
  4. Slug: education.03.site
  5. Lang: ru
  6. | < Назад | Начало | Далее > |
  7. |---|---|---|
  8. | [02. Зависимости][prev] | [Обучение][index] | [04. Язык][next] |
  9. </div><div class="contents">
  10. В этом документы мы создадим простой статический сайт с двумя страницами.
  11. Ожидаемое время завершения: 10 минут.
  12. **Содержание**
  13. * [01. Вдохновление](#inspiration)
  14. * [02. Изучите файл `pskov.cfg`](#cfg)
  15. * [03. Изучите файл `item.template`](#item)
  16. * [04. Изучите файлы `about.md` и `cv.md`](#md)
  17. * [05. Запустите ЛФСД](#lfsa)
  18. * [06. Сгенерируйте сайт](#gen)
  19. * [07. Проверьте сайт](#observe)
  20. * [08. Итог](#summary)
  21. <a name="inspiration"/>
  22. ## 01. Вдохновление
  23. Представьте, что вы являетесь выдающимся русским живописцем Валентином Серовым. Каждый раз, когда кто-либо хочет узнать о вас, он идёт на [Википедию][serov]. Сегодня утром вы просыпаетесь раньше обычного с отчётливым желанием создать свой собственный веб-сайт.
  24. Вы приступаете к созданию следующих страницы:
  25. * About me
  26. * Curriculum vitae (CV)
  27. Несколько позже в [директории вашего сайта][01-files] у вас оказываются следующие файлы:
  28. * pskov.cfg
  29. * item.template
  30. * about.md
  31. * cv.md
  32. Давайте взглянем на их содержимое.
  33. <a name="cfg"/>
  34. ## 02. Изучите файл `pskov.cfg`
  35. Файл `pskov.cfg` содержит следующее:
  36. ```
  37. input = .
  38. item = item.template
  39. ```
  40. `pskov.cfg` является [файлом настроек][ini-file] со следующими ключами:
  41. | Ключ | Описание |
  42. |---|---|
  43. | `input` | Указывает на директорию с файлом, на который ссылается ключ `item` |
  44. | `item` | Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown |
  45. В нашем случае файл `item.template` расположен рядом с `pskov.cfg`, поэтому мы используем `.` для обозначения текущей директории.
  46. <a name="item"/>
  47. ## 03. Изучите файл `item.template`
  48. Файл `item.template` содержит следующее:
  49. ```
  50. <!DOCTYPE html>
  51. <html>
  52. <meta charset="utf-8">
  53. <head>
  54. <style>
  55. - - - - Схлопнуто для краткости - - - -
  56. </style>
  57. <title>Serov</title>
  58. </head>
  59. <body>
  60. <div id="header">
  61. <strong>Serov</strong>
  62. <a href="about.html">About me</a>
  63. <a href="cv.html">CV</a>
  64. </div>
  65. <center>
  66. <h1>PSKOV_ITEM_TITLE</h1>
  67. <div class="contents">
  68. PSKOV_ITEM_CONTENTS
  69. </div>
  70. <div id="footer">
  71. This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
  72. </div>
  73. </center>
  74. </body>
  75. </html>
  76. ```
  77. **Внимание**: стиль схлопнут для краткости.
  78. Как видите, `item.template` представляет из себя обычный файл HTML с двумя константами **ПСКОВА**:
  79. | Константа ПСКОВА | Описание |
  80. |---|---|
  81. | `PSKOV_ITEM_TITLE` | Значение ключа `Title` из файла Markdown страницы |
  82. | `PSKOV_ITEM_CONTENTS` | Предоставляет содержимое HTML, сгенерированное из Markdown |
  83. **Замечания**:
  84. * другие константы **ПСКОВА** описаны позже
  85. * файл Markdown страницы описан ниже
  86. <a name="md"/>
  87. ## 04. Изучите файлы `about.md` и `cv.md`
  88. Файл `about.md` содержит следующее:
  89. ```
  90. Title: About me
  91. Slug: about
  92. Hi, my name is Valentin Serov. Here's my self-portrait:
  93. ![Valentin Serov self-portrait][serov-portrait]
  94. - - - - Схлопнуто для краткости - - - -
  95. Have a look at my [CV][cv] now.
  96. [serov]: https://en.wikipedia.org/wiki/Valentin_Serov
  97. [revolution]: https://en.wikipedia.org/wiki/Russian_Revolution
  98. [serov-portrait]: myself.jpg
  99. [serov-work]: mywork.jpg
  100. [girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches
  101. [pskov]: http://opengamestudio.org/pskov
  102. [cv]: cv.html
  103. ```
  104. `about.md` начинается с так называемого заголовка:
  105. | Ключ заголовка | Описание |
  106. |---|---|
  107. | `Title` | Предоставляет значение для константы `PSKOV_ITEM_TITLE` во время генерации HTML из Markdown |
  108. | `Slug` | Сообщает **ПСКОВУ** о том, что этот файл должен быть сохранён как `<slug>.html` |
  109. В остальном содержимое `about.md` ничем не отличается от любых других файлов Markdown.
  110. **Внимание**: ссылка на страницу `cv` указана как `cv.html`, не `cv.md`
  111. Файл `cv.md` содержит следующее:
  112. ```
  113. Title: Curriculum vitae
  114. Slug: cv
  115. Here's my CV in case my paintings still interest you. I took a bit of a modern IT approach to structure my CV as key-value pairs of a dictionary (map), enjoy!
  116. | Key | Value |
  117. |---|---|
  118. | Name | Valentin Serov |
  119. | Age | 46 |
  120. | Marital status | Married |
  121. | Country | Russian Empire |
  122. | Alma mater | Imperial Academy of Arts |
  123. | Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) |
  124. ```
  125. Как видите, в `cv.md` нет ничего нового за исключением таблицы Markdown.
  126. <a name="lfsa"/>
  127. ## 05. Запустите ЛФСД
  128. <video controls poster="../vid/education.03.site.launch-lfsa.w2k.poster.png">
  129. <source src="../vid/education.03.site.launch-lfsa.w2k.mp4" type ="video/mp4">
  130. <source src="../vid/education.03.site.launch-lfsa.w2k.webm" type ="video/webm">
  131. ОШИБКА Ваш браузер не поддерживает видео HTML5
  132. </video>
  133. Запустите [ЛФСД][lfsa] с указанием директории, содержащей только что рассмотренные файлы:
  134. ```
  135. $ /путь/до/lfsa_1.0.0.py /путь/до/директории/01.TwoPages
  136. ```
  137. Вы должны увидеть примерно такой вывод:
  138. ```
  139. DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages'
  140. PORT: '8000'
  141. ```
  142. <a name="gen"/>
  143. ## 06. Сгенерируйте сайт
  144. <video controls poster="../vid/education.03.site.gen.w2k.poster+ru.png">
  145. <source src="../vid/education.03.site.gen.w2k+ru.mp4" type ="video/mp4">
  146. <source src="../vid/education.03.site.gen.w2k+ru.webm" type ="video/webm">
  147. ОШИБКА Ваш браузер не поддерживает видео HTML5
  148. </video>
  149. Перейдите на страницу [Инструмент][tool] и нажмите кнопку `Генерировать` для генерации файлов HTML рядом с файлами Markdown.
  150. <a name="observe"/>
  151. ## 07. Проверьте сайт
  152. <video controls poster="../vid/education.03.site.observe.w2k.poster.png">
  153. <source src="../vid/education.03.site.observe.w2k.mp4" type ="video/mp4">
  154. <source src="../vid/education.03.site.observe.w2k.webm" type ="video/webm">
  155. ОШИБКА Ваш браузер не поддерживает видео HTML5
  156. </video>
  157. Проверьте сгенерированный веб-сайт локально: откройте файл `about.html` и совершите переход между страницами.
  158. <a name="summary"/>
  159. ## 08. Итог
  160. Вы успешно сгенерировали веб-сайт с двумя страницами. [Проверьте результат][01-sample].
  161. Представлены константы **ПСКОВА**:
  162. | Константа ПСКОВА | Описание |
  163. |---|---|
  164. | `PSKOV_ITEM_TITLE` | Значение ключа `Title` из файла Markdown страницы |
  165. | `PSKOV_ITEM_CONTENTS` | Предоставляет содержимое HTML, сгенерированное из Markdown |
  166. Представлены ключи настроек:
  167. | Ключ | Описание |
  168. |---|---|
  169. | `input` | Указывает на директорию с файлом, на который ссылается ключ `item` |
  170. | `item` | Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown |
  171. Представлены ключи заголовка:
  172. | Ключ заголовка | Описание |
  173. |---|---|
  174. | `Title` | Предоставляет значение для константы `PSKOV_ITEM_TITLE` во время генерации HTML из Markdown |
  175. | `Slug` | Сообщает **ПСКОВУ** о том, что этот файл должен быть сохранён как `<slug>.html` |
  176. </div><div class="contents">
  177. | < Назад | Начало | Далее > |
  178. |---|---|---|
  179. | [02. Зависимости][prev] | [Обучение][index] | [04. Язык][next] |
  180. [index]: education.html
  181. [prev]: education.02.deps.html
  182. [next]: education.04.lang.html
  183. [01-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages
  184. [01-sample]: http://opengamestudio.org/pskov/sample/01.TwoPages/about.html
  185. [ini-file]: https://ru.wikipedia.org/wiki/.ini
  186. [serov]: https://ru.wikipedia.org/wiki/%D0%A1%D0%B5%D1%80%D0%BE%D0%B2,_%D0%92%D0%B0%D0%BB%D0%B5%D0%BD%D1%82%D0%B8%D0%BD_%D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80%D0%BE%D0%B2%D0%B8%D1%87
  187. [lfsa]: http://opengamestudio.org/lfsa/ru
  188. [tool]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html