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

education.04.lang.md 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. Title: Education: 04. Language
  2. Date: 2019-06-25 00:00
  3. Category: Page
  4. Slug: education.04.lang
  5. Lang: en
  6. | < Back | Index | Next > |
  7. |---|---|---|
  8. | [03. Site][prev] | [Education][index] | [05. Blog][next] |
  9. </div><div class="contents">
  10. In this document we add language selection.
  11. Estimated completion time: 10 minutes.
  12. **Table of contents**
  13. * [01. Localization](#localization)
  14. * [02. Investigate `pskov.cfg` file](#cfg)
  15. * [03. Investigate template files](#item)
  16. * [04. Investigate Markdown files](#md)
  17. * [05. Launch LFSA](#lfsa)
  18. * [06. Generate the site](#gen)
  19. * [07. Observe the site](#observe)
  20. * [08. Summary](#summary)
  21. <a name="localization"/>
  22. ## 01. Localization
  23. Now that you have your web site in English you start to wonder why there's no Russian version, you're Russian after all!
  24. You set on to create the following [directory structure][02-files]:
  25. * `pskov.cfg`
  26. * `en/item.template`
  27. * `en/about.md`
  28. * `en/cv.md`
  29. * `ru/item.template`
  30. * `ru/about.md`
  31. * `ru/cv.md`
  32. Let's look at the contents of these files closer.
  33. <a name="cfg"/>
  34. ## 02. Investigate `pskov.cfg` file
  35. `pskov.cfg` file has the following contents:
  36. ```
  37. input = en;ru
  38. item = item.template
  39. ```
  40. As you see, `input` can accept multiple directories separated by `;` symbol: **PSKOV** will go over each directory specified and run as before.
  41. In this case, both `en/` and `ru/` directories have their own `item.template` file.
  42. <a name="item"/>
  43. ## 03. Investigate template files
  44. * `en/item.template` contents:
  45. ```
  46. - - - - Collapsed for brevity - - - -
  47. <title>Serov</title>
  48. </head>
  49. <body>
  50. <div id="header">
  51. <strong>Serov</strong>
  52. <a href="about.html">About me</a>
  53. <a href="cv.html">CV</a>
  54. <div id="lang">
  55. <a href="../en/PSKOV_ITEM_URL">EN</a>
  56. <a href="../ru/PSKOV_ITEM_URL">RU</a>
  57. </div>
  58. </div>
  59. <center>
  60. - - - - Collapsed for brevity - - - -
  61. ```
  62. * `ru/item.template` contents:
  63. ```
  64. - - - - Collapsed for brevity - - - -
  65. <title>Серов</title>
  66. </head>
  67. <body>
  68. <div id="header">
  69. <strong>Серов</strong>
  70. <a href="about.html">Обо мне</a>
  71. <a href="cv.html">Резюме</a>
  72. <div id="lang">
  73. <a href="../en/PSKOV_ITEM_URL">EN</a>
  74. <a href="../ru/PSKOV_ITEM_URL">RU</a>
  75. </div>
  76. </div>
  77. <center>
  78. - - - - Collapsed for brevity - - - -
  79. ```
  80. **Note**: beginning and ending were collapsed for brevity.
  81. As you can see, both `en/item.template` and `ru/item.template` look similar to `item.template` we saw [before][prev].
  82. The changes include:
  83. * use of `<div id="lang">...</div>` section to present language selection
  84. * localization of titles into English and Russian
  85. Language selection uses new **PSKOV** constant:
  86. | PSKOV constant | Description |
  87. |---|---|
  88. | `PSKOV_ITEM_URL` | Provides generated page's file name |
  89. As you see, `PSKOV_ITEM_URL` is all you need to have your page in as many languages as you please.
  90. <a name="md"/>
  91. ## 04. Investigate Markdown files
  92. `en/about.md` and `en/cv.md` files look almost exactly as [before][prev]. `ru/about.md` and `ru/cv.md` are simply Russian variants of corresponding pages.
  93. For example, `ru/cv.md` has the following contents:
  94. ```
  95. Title: Резюме
  96. Slug: cv
  97. Здесь вы можете увидеть моё резюме в том случае, если мои произведения всё ещё вас интересуют. Я использовал современный подход ИТ для структурирования своего резюме в виде пар ключ-значение словаря (карты). Наслаждайтесь!
  98. | Ключ | Значение |
  99. |---|---|
  100. | Имя | Валентин Серов |
  101. | Возраст | 46 |
  102. | Семейное положение | Женат |
  103. | Страна | Российская Империя |
  104. | Учёба | Императорская Академия художеств |
  105. | Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) |
  106. ```
  107. **Note**: Russian page has exactly the same `Slug` value as English one.
  108. <a name="lfsa"/>
  109. ## 05. Launch LFSA
  110. <video controls poster="../vid/education.04.lang.launch-lfsa.edgy.poster.png">
  111. <source src="../vid/education.04.lang.launch-lfsa.edgy.mp4" type ="video/mp4">
  112. <source src="../vid/education.04.lang.launch-lfsa.edgy.webm" type ="video/webm">
  113. ERROR Your browser does not support HTML5 video
  114. </video>
  115. Launch [LFSA][lfsa] so that it points to directory with the files we just observed:
  116. ```
  117. $ /path/to/lfsa_1.0.0.py /path/to/dir/02.Language
  118. ```
  119. <a name="gen"/>
  120. ## 06. Generate the site
  121. <video controls poster="../vid/education.04.lang.gen.edgy.poster.png">
  122. <source src="../vid/education.04.lang.gen.edgy.mp4" type ="video/mp4">
  123. <source src="../vid/education.04.lang.gen.edgy.webm" type ="video/webm">
  124. ERROR Your browser does not support HTML5 video
  125. </video>
  126. Go to [Tool][tool] page and press `Generate` button to generate HTML files right where Markdown ones reside.
  127. <a name="observe"/>
  128. ## 07. Observe the site
  129. <video controls poster="../vid/education.04.lang.observe.edgy.poster.png">
  130. <source src="../vid/education.04.lang.observe.edgy.mp4" type ="video/mp4">
  131. <source src="../vid/education.04.lang.observe.edgy.webm" type ="video/webm">
  132. ERROR Your browser does not support HTML5 video
  133. </video>
  134. Observe generated web site locally by opening `en/about.html` or `ru/about.html` and switching language.
  135. <a name="summary"/>
  136. ## 08. Summary
  137. You have successfully added language selection. [Check out the result][02-sample].
  138. Introduced PSKOV constants include:
  139. | PSKOV constant | Description |
  140. |---|---|
  141. | `PSKOV_ITEM_URL` | Provides generated page's file name |
  142. </div><div class="contents">
  143. | < Back | Index | Next > |
  144. |---|---|---|
  145. | [03. Site][prev] | [Education][index] | [05. Blog][next] |
  146. [index]: education.html
  147. [prev]: education.03.site.html
  148. [next]: education.05.blog.html
  149. [02-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/02.Language
  150. [02-sample]: http://opengamestudio.org/pskov/sample/02.Language/en/about.html
  151. [lfsa]: http://opengamestudio.org/lfsa
  152. [tool]: http://opengamestudio.org/pskov