@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/education.01.why.html">EN</a> | |||||
<a href="../ru/education.01.why.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
Education: 01. Why | Education: 01. Why | ||||
@@ -105,7 +117,7 @@ Education: 01. Why | |||||
</ul> | </ul> | ||||
<p><a name="why"/></p> | <p><a name="why"/></p> | ||||
<h2 id="01why">01. Why</h2> | <h2 id="01why">01. Why</h2> | ||||
<p>You might know there already exist quite a lot of <a href="https://medium.com/codingthesmartway-com-blog/top-static-site-generators-for-2019-26a4c8afcc05">static site generators</a>, why create another one? Because <strong>they are not good enough</strong> for <a href="http://opengamestudio.org">Opensource Game Studio</a> needs.</p> | |||||
<p>You might know there already exist quite a lot of <a href="https://medium.com/codingthesmartway-com-blog/top-static-site-generators-for-2019-26a4c8afcc05">static site generators</a>, why create another one? Because <strong>they were not good enough</strong> for <a href="http://opengamestudio.org">Open Game Studio</a> needs.</p> | |||||
<p>Here's a list of <strong>features we don't need</strong>:</p> | <p>Here's a list of <strong>features we don't need</strong>:</p> | ||||
<table> | <table> | ||||
<thead> | <thead> | ||||
@@ -119,7 +131,7 @@ Education: 01. Why | |||||
<tr> | <tr> | ||||
<td>1</td> | <td>1</td> | ||||
<td>Learning anything beyond HTML, CSS, JavaScript, and Markdown</td> | <td>Learning anything beyond HTML, CSS, JavaScript, and Markdown</td> | ||||
<td>These technologies are enough to deliver information to users</td> | |||||
<td>These technologies are enough to have a clean web site</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>2</td> | <td>2</td> | ||||
@@ -129,12 +141,12 @@ Education: 01. Why | |||||
<tr> | <tr> | ||||
<td>3</td> | <td>3</td> | ||||
<td>Installation</td> | <td>Installation</td> | ||||
<td>We had enough updates that were never requested</td> | |||||
<td>No more forced updates that were never requested</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>4</td> | <td>4</td> | ||||
<td>Comprehensible source code</td> | <td>Comprehensible source code</td> | ||||
<td>Single file with just enough number of lines</td> | |||||
<td>No more millions of source code files</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -152,8 +164,8 @@ Education: 01. Why | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td>1</td> | <td>1</td> | ||||
<td>Bare HTML, CSS, JavaScript, and Markdown</td> | |||||
<td>No need for template language, web framework or anything else</td> | |||||
<td>HTML, CSS, JavaScript, and Markdown</td> | |||||
<td>Just what you already know</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>2</td> | <td>2</td> | ||||
@@ -162,17 +174,27 @@ Education: 01. Why | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>3</td> | <td>3</td> | ||||
<td>Optional installation</td> | |||||
<td><strong>PSKOV</strong> is available at <a href="http://opengamestudio.org/pskov">http://opengamestudio.org/pskov</a>. However, if you want to keep <strong>PSKOV</strong> locally, you can get <strong>PSKOV</strong> single HTML file <a href="http://opengamestudio.org/pskov-201905.html">here</a> and open it locally</td> | |||||
<td>Available on-line</td> | |||||
<td><a href="http://opengamestudio.org/pskov">http://opengamestudio.org/pskov</a></td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>4</td> | <td>4</td> | ||||
<td>Comprehensible source code</td> | |||||
<td><strong>PSKOV</strong> is a <a href="http://opengamestudio.org/pskov-201905.html">single HTML file</a> with less than 10000 lines of code</td> | |||||
<td>Available off-line</td> | |||||
<td>Just save the <a href="http://opengamestudio.org/pskov">Tool</a> page and then open it locally</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>5</td> | <td>5</td> | ||||
<td>Decades long support (DLS)</td> | |||||
<td>Comprehensible source code</td> | |||||
<td><strong>PSKOV</strong> is a single HTML file</td> | |||||
</tr> | |||||
<tr> | |||||
<td>6</td> | |||||
<td>Belongs to everyone</td> | |||||
<td><strong>PSKOV</strong> is released under <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a> license (public domain)</td> | |||||
</tr> | |||||
<tr> | |||||
<td>7</td> | |||||
<td>Runs for decades</td> | |||||
<td>You can use <strong>PSKOV</strong> on both Windows 2000 and Windows 2030*</td> | <td>You can use <strong>PSKOV</strong> on both Windows 2000 and Windows 2030*</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
@@ -196,6 +218,11 @@ Education: 01. Why | |||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -1,5 +1,5 @@ | |||||
Title: Education: 01. Why | Title: Education: 01. Why | ||||
Date: 2019-05-14 00:00 | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | Category: Page | ||||
Slug: education.01.why | Slug: education.01.why | ||||
Lang: en | Lang: en | ||||
@@ -23,16 +23,16 @@ Estimated completion time: 5 minutes. | |||||
## 01. Why | ## 01. Why | ||||
You might know there already exist quite a lot of [static site generators][other-generators], why create another one? Because **they are not good enough** for [Opensource Game Studio][ogs] needs. | |||||
You might know there already exist quite a lot of [static site generators][other-generators], why create another one? Because **they were not good enough** for [Open Game Studio][ogs] needs. | |||||
Here's a list of **features we don't need**: | Here's a list of **features we don't need**: | ||||
| № | Unwelcome feature | Note | | | № | Unwelcome feature | Note | | ||||
|---|---|---| | |---|---|---| | ||||
| 1 | Learning anything beyond HTML, CSS, JavaScript, and Markdown | These technologies are enough to deliver information to users | | |||||
| 1 | Learning anything beyond HTML, CSS, JavaScript, and Markdown | These technologies are enough to have a clean web site | | |||||
| 2 | Server side | Nobody should be able to pull the plug on you except yourself | | | 2 | Server side | Nobody should be able to pull the plug on you except yourself | | ||||
| 3 | Installation | We had enough updates that were never requested | | |||||
| 4 | Comprehensible source code | Single file with just enough number of lines | | |||||
| 3 | Installation | No more forced updates that were never requested | | |||||
| 4 | Comprehensible source code | No more millions of source code files | | |||||
<a name="features"/> | <a name="features"/> | ||||
@@ -42,11 +42,13 @@ Consequently, here is a list of **PSKOV features**: | |||||
| № | PSKOV feature | Note | | | № | PSKOV feature | Note | | ||||
|---|---|---| | |---|---|---| | ||||
| 1 | Bare HTML, CSS, JavaScript, and Markdown | No need for template language, web framework or anything else | | |||||
| 1 | HTML, CSS, JavaScript, and Markdown | Just what you already know | | |||||
| 2 | Client side | **PSKOV** is a client side JavaScript application, it runs solely on your device | | | 2 | Client side | **PSKOV** is a client side JavaScript application, it runs solely on your device | | ||||
| 3 | Optional installation | **PSKOV** is available at [http://opengamestudio.org/pskov][pskov]. However, if you want to keep **PSKOV** locally, you can get **PSKOV** single HTML file [here][pskov-src] and open it locally | | |||||
| 4 | Comprehensible source code | **PSKOV** is a [single HTML file][pskov-src] with less than 10000 lines of code | | |||||
| 5 | Decades long support (DLS) | You can use **PSKOV** on both Windows 2000 and Windows 2030\* | | |||||
| 3 | Available on-line | [http://opengamestudio.org/pskov][pskov] | | |||||
| 4 | Available off-line | Just save the [Tool][pskov] page and then open it locally | | |||||
| 5 | Comprehensible source code | **PSKOV** is a single HTML file | | |||||
| 6 | Belongs to everyone | **PSKOV** is released under [CC0][cc0] license (public domain)| | |||||
| 7 | Runs for decades | You can use **PSKOV** on both Windows 2000 and Windows 2030\* | | |||||
\* Windows 2030 does not (yet) exist, we simply refer to the fact that **PSKOV** is designed to work for operating systems released in the range of years 2000-2030 | \* Windows 2030 does not (yet) exist, we simply refer to the fact that **PSKOV** is designed to work for operating systems released in the range of years 2000-2030 | ||||
@@ -62,4 +64,4 @@ Consequently, here is a list of **PSKOV features**: | |||||
[other-generators]: https://medium.com/codingthesmartway-com-blog/top-static-site-generators-for-2019-26a4c8afcc05 | [other-generators]: https://medium.com/codingthesmartway-com-blog/top-static-site-generators-for-2019-26a4c8afcc05 | ||||
[ogs]: http://opengamestudio.org | [ogs]: http://opengamestudio.org | ||||
[pskov]: http://opengamestudio.org/pskov | [pskov]: http://opengamestudio.org/pskov | ||||
[pskov-src]: http://opengamestudio.org/pskov-201905.html | |||||
[cc0]: https://creativecommons.org/share-your-work/public-domain/cc0/ |
@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/education.02.deps.html">EN</a> | |||||
<a href="../ru/education.02.deps.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
Education: 02. Dependencies | Education: 02. Dependencies | ||||
@@ -141,7 +153,7 @@ Education: 02. Dependencies | |||||
<ul> | <ul> | ||||
<li>is a tiny Python server to provide read/write access to local file system</li> | <li>is a tiny Python server to provide read/write access to local file system</li> | ||||
<li>runs at 8000 port</li> | <li>runs at 8000 port</li> | ||||
<li>is under 200 lines of code, feel free to <a href="https://bitbucket.org/ogstudio/lfsa/src/default/lfsa-201905.py">inspect it</a></li> | |||||
<li>is under 200 lines of code, feel free to <a href="https://bitbucket.org/ogstudio/lfsa/src/default/lfsa_1.0.0.py">inspect it</a></li> | |||||
</ul> | </ul> | ||||
<p></div><div class="contents"></p> | <p></div><div class="contents"></p> | ||||
<table> | <table> | ||||
@@ -161,6 +173,11 @@ Education: 02. Dependencies | |||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -1,5 +1,5 @@ | |||||
Title: Education: 02. Dependencies | Title: Education: 02. Dependencies | ||||
Date: 2019-05-14 00:00 | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | Category: Page | ||||
Slug: education.02.deps | Slug: education.02.deps | ||||
Lang: en | Lang: en | ||||
@@ -60,5 +60,5 @@ We designed **PSKOV** to run inside web browsers. Here is what you need to run * | |||||
[next]: education.03.site.html | [next]: education.03.site.html | ||||
[lfsa]: http://opengamestudio.org/lfsa | [lfsa]: http://opengamestudio.org/lfsa | ||||
[lfsa-src]: https://bitbucket.org/ogstudio/lfsa/src/default/lfsa-201905.py | |||||
[lfsa-src]: https://bitbucket.org/ogstudio/lfsa/src/default/lfsa_1.0.0.py | |||||
[showdown]: https://github.com/showdownjs/showdown | [showdown]: https://github.com/showdownjs/showdown |
@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/education.03.site.html">EN</a> | |||||
<a href="../ru/education.03.site.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
Education: 03. Site | Education: 03. Site | ||||
@@ -101,7 +113,7 @@ Education: 03. Site | |||||
<p><strong>Table of contents</strong></p> | <p><strong>Table of contents</strong></p> | ||||
<ul> | <ul> | ||||
<li><a href="#inspiration">01. Inspiration</a></li> | <li><a href="#inspiration">01. Inspiration</a></li> | ||||
<li><a href="#cfg">02. Investigate <code>cfg</code> file</a></li> | |||||
<li><a href="#cfg">02. Investigate <code>pskov.cfg</code> file</a></li> | |||||
<li><a href="#item">03. Investigate <code>item.template</code> file</a></li> | <li><a href="#item">03. Investigate <code>item.template</code> file</a></li> | ||||
<li><a href="#md">04. Investigate <code>about.md</code> and <code>cv.md</code> files</a></li> | <li><a href="#md">04. Investigate <code>about.md</code> and <code>cv.md</code> files</a></li> | ||||
<li><a href="#lfsa">05. Launch LFSA</a></li> | <li><a href="#lfsa">05. Launch LFSA</a></li> | ||||
@@ -118,19 +130,19 @@ Education: 03. Site | |||||
</ul> | </ul> | ||||
<p>Some time later you have the following files in your <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages">site directory</a>:</p> | <p>Some time later you have the following files in your <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages">site directory</a>:</p> | ||||
<ul> | <ul> | ||||
<li>cfg</li> | |||||
<li>pskov.cfg</li> | |||||
<li>item.template</li> | <li>item.template</li> | ||||
<li>about.md</li> | <li>about.md</li> | ||||
<li>cv.md</li> | <li>cv.md</li> | ||||
</ul> | </ul> | ||||
<p>Let's look at their contents closer.</p> | <p>Let's look at their contents closer.</p> | ||||
<p><a name="cfg"/></p> | <p><a name="cfg"/></p> | ||||
<h2 id="02investigatecfgfile">02. Investigate <code>cfg</code> file</h2> | |||||
<p><code>cfg</code> file has the following contents:</p> | |||||
<h2 id="02investigatepskovcfgfile">02. Investigate <code>pskov.cfg</code> file</h2> | |||||
<p><code>pskov.cfg</code> file has the following contents:</p> | |||||
<pre><code>input = . | <pre><code>input = . | ||||
item = item.template | item = item.template | ||||
</code></pre> | </code></pre> | ||||
<p><code>cfg</code> is an <a href="https://en.wikipedia.org/wiki/INI_file">INI file</a> with the following keys specified:</p> | |||||
<p><code>pskov.cfg</code> is an <a href="https://en.wikipedia.org/wiki/INI_file">INI file</a> with the following keys specified:</p> | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
@@ -149,7 +161,7 @@ item = item.template | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p>In our case, <code>item.template</code> file is located alongside <code>cfg</code>, so we use <code>.</code> to denote current directory.</p> | |||||
<p>In our case, <code>item.template</code> file is located alongside <code>pskov.cfg</code>, so we use <code>.</code> to denote current directory.</p> | |||||
<p><a name="item"/></p> | <p><a name="item"/></p> | ||||
<h2 id="03investigateitemtemplatefile">03. Investigate <code>item.template</code> file</h2> | <h2 id="03investigateitemtemplatefile">03. Investigate <code>item.template</code> file</h2> | ||||
<p><code>item.template</code> file has the following contents:</p> | <p><code>item.template</code> file has the following contents:</p> | ||||
@@ -192,7 +204,7 @@ PSKOV_ITEM_CONTENTS | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_TITLE</code></td> | <td><code>PSKOV_ITEM_TITLE</code></td> | ||||
<td>Provides title from <code>Title:</code> part of page's header section</td> | |||||
<td>Value of <code>Title</code> key of the page's Markdown file</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_CONTENTS</code></td> | <td><code>PSKOV_ITEM_CONTENTS</code></td> | ||||
@@ -203,7 +215,7 @@ PSKOV_ITEM_CONTENTS | |||||
<p><strong>Notes</strong>:</p> | <p><strong>Notes</strong>:</p> | ||||
<ul> | <ul> | ||||
<li>other <strong>PSKOV</strong> constants are described later</li> | <li>other <strong>PSKOV</strong> constants are described later</li> | ||||
<li>page's header section is described below</li> | |||||
<li>page's Markdown file is described below</li> | |||||
</ul> | </ul> | ||||
<p><a name="md"/></p> | <p><a name="md"/></p> | ||||
<h2 id="04investigateaboutmdandcvmdfiles">04. Investigate <code>about.md</code> and <code>cv.md</code> files</h2> | <h2 id="04investigateaboutmdandcvmdfiles">04. Investigate <code>about.md</code> and <code>cv.md</code> files</h2> | ||||
@@ -231,17 +243,17 @@ PSKOV_ITEM_CONTENTS | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Header constant</th> | |||||
<th>Header key</th> | |||||
<th>Description</th> | <th>Description</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>Title:</code></td> | |||||
<td><code>Title</code></td> | |||||
<td>Provides value for <code>PSKOV_ITEM_TITLE</code> constant when generating HTML out of Markdown</td> | <td>Provides value for <code>PSKOV_ITEM_TITLE</code> constant when generating HTML out of Markdown</td> | ||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>Slug:</code></td> | |||||
<td><code>Slug</code></td> | |||||
<td>Tells <strong>PSKOV</strong> that particular Markdown file should be saved under <code><slug>.html</code> filename</td> | <td>Tells <strong>PSKOV</strong> that particular Markdown file should be saved under <code><slug>.html</code> filename</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
@@ -267,7 +279,7 @@ PSKOV_ITEM_CONTENTS | |||||
<p><a name="lfsa"/></p> | <p><a name="lfsa"/></p> | ||||
<h2 id="05launchlfsa">05. Launch LFSA</h2> | <h2 id="05launchlfsa">05. Launch LFSA</h2> | ||||
<p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p> | <p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p> | ||||
<pre><code>$ /path/to/lfsa-201905.py /path/to/dir/01.TwoPages | |||||
<pre><code>$ /path/to/lfsa_1.0.0.py /path/to/dir/01.TwoPages | |||||
</code></pre> | </code></pre> | ||||
<p>You should see output similar to this:</p> | <p>You should see output similar to this:</p> | ||||
<pre><code>DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages' | <pre><code>DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages' | ||||
@@ -279,8 +291,8 @@ PORT: '8000' | |||||
<ul> | <ul> | ||||
<li>Go to <a href="http://opengamestudio.org/pskov">Tool</a> page</li> | <li>Go to <a href="http://opengamestudio.org/pskov">Tool</a> page</li> | ||||
<li>Make sure<ul> | <li>Make sure<ul> | ||||
<li><code>Path:</code> points to the same directory you specified before</li> | |||||
<li><code>Input directory:</code> and <code>Item template:</code> have values from <code>cfg</code></li></ul></li> | |||||
<li><code>Path</code> points to the same directory you specified before</li> | |||||
<li><code>Input directory</code> and <code>Item template</code> have values from <code>pskov.cfg</code></li></ul></li> | |||||
<li>Press <code>Generate</code> button to generate HTML files right where Markdown ones reside</li> | <li>Press <code>Generate</code> button to generate HTML files right where Markdown ones reside</li> | ||||
<li>Open generated <code>about.html</code> from the site's directory</li> | <li>Open generated <code>about.html</code> from the site's directory</li> | ||||
<li>You should see your web site running locally</li> | <li>You should see your web site running locally</li> | ||||
@@ -288,7 +300,7 @@ PORT: '8000' | |||||
<p><a name="summary"/></p> | <p><a name="summary"/></p> | ||||
<h2 id="07summary">07. Summary</h2> | <h2 id="07summary">07. Summary</h2> | ||||
<p>You have successfully generated a web site with two pages. <a href="http://opengamestudio.org/pskov/sample/01.TwoPages/about.html">Check out the result</a>.</p> | <p>You have successfully generated a web site with two pages. <a href="http://opengamestudio.org/pskov/sample/01.TwoPages/about.html">Check out the result</a>.</p> | ||||
<p>Introduced PSKOV constants include:</p> | |||||
<p>Introduced <strong>PSKOV</strong> constants include:</p> | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
@@ -299,7 +311,7 @@ PORT: '8000' | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_TITLE</code></td> | <td><code>PSKOV_ITEM_TITLE</code></td> | ||||
<td>Provides title from <code>Title:</code> part of page's header section</td> | |||||
<td>Value of <code>Title</code> key of the page's Markdown file</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_CONTENTS</code></td> | <td><code>PSKOV_ITEM_CONTENTS</code></td> | ||||
@@ -326,21 +338,21 @@ PORT: '8000' | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p>Introduced header constants include:</p> | |||||
<p>Introduced header keys include:</p> | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Header constant</th> | |||||
<th>Header key</th> | |||||
<th>Description</th> | <th>Description</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>Title:</code></td> | |||||
<td><code>Title</code></td> | |||||
<td>Provides value for <code>PSKOV_ITEM_TITLE</code> constant when generating HTML out of Markdown</td> | <td>Provides value for <code>PSKOV_ITEM_TITLE</code> constant when generating HTML out of Markdown</td> | ||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>Slug:</code></td> | |||||
<td><code>Slug</code></td> | |||||
<td>Tells <strong>PSKOV</strong> that particular Markdown file should be saved under <code><slug>.html</code> filename</td> | <td>Tells <strong>PSKOV</strong> that particular Markdown file should be saved under <code><slug>.html</code> filename</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
@@ -363,6 +375,11 @@ PORT: '8000' | |||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -1,5 +1,5 @@ | |||||
Title: Education: 03. Site | Title: Education: 03. Site | ||||
Date: 2019-05-14 00:00 | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | Category: Page | ||||
Slug: education.03.site | Slug: education.03.site | ||||
Lang: en | Lang: en | ||||
@@ -17,7 +17,7 @@ Estimated completion time: 10 minutes. | |||||
**Table of contents** | **Table of contents** | ||||
* [01. Inspiration](#inspiration) | * [01. Inspiration](#inspiration) | ||||
* [02. Investigate `cfg` file](#cfg) | |||||
* [02. Investigate `pskov.cfg` file](#cfg) | |||||
* [03. Investigate `item.template` file](#item) | * [03. Investigate `item.template` file](#item) | ||||
* [04. Investigate `about.md` and `cv.md` files](#md) | * [04. Investigate `about.md` and `cv.md` files](#md) | ||||
* [05. Launch LFSA](#lfsa) | * [05. Launch LFSA](#lfsa) | ||||
@@ -37,7 +37,7 @@ You set on to create the following pages: | |||||
Some time later you have the following files in your [site directory][01-files]: | Some time later you have the following files in your [site directory][01-files]: | ||||
* cfg | |||||
* pskov.cfg | |||||
* item.template | * item.template | ||||
* about.md | * about.md | ||||
* cv.md | * cv.md | ||||
@@ -46,23 +46,23 @@ Let's look at their contents closer. | |||||
<a name="cfg"/> | <a name="cfg"/> | ||||
## 02. Investigate `cfg` file | |||||
## 02. Investigate `pskov.cfg` file | |||||
`cfg` file has the following contents: | |||||
`pskov.cfg` file has the following contents: | |||||
``` | ``` | ||||
input = . | input = . | ||||
item = item.template | item = item.template | ||||
``` | ``` | ||||
`cfg` is an [INI file][ini-file] with the following keys specified: | |||||
`pskov.cfg` is an [INI file][ini-file] with the following keys specified: | |||||
| Key | Description | | | Key | Description | | ||||
|---|---| | |---|---| | ||||
| `input` | Points to a directory where `item`'s file is located | | | `input` | Points to a directory where `item`'s file is located | | ||||
| `item` | Points to an HTML template file that is used to generate HTML files out of Markdown ones | | | `item` | Points to an HTML template file that is used to generate HTML files out of Markdown ones | | ||||
In our case, `item.template` file is located alongside `cfg`, so we use `.` to denote current directory. | |||||
In our case, `item.template` file is located alongside `pskov.cfg`, so we use `.` to denote current directory. | |||||
<a name="item"/> | <a name="item"/> | ||||
@@ -105,13 +105,13 @@ As you can see, `item.template` is an average HTML file with two **PSKOV** const | |||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_ITEM_TITLE` | Provides title from `Title:` part of page's header section | | |||||
| `PSKOV_ITEM_TITLE` | Value of `Title` key of the page's Markdown file | | |||||
| `PSKOV_ITEM_CONTENTS` | Provides HTML contents generated out of Markdown contents | | | `PSKOV_ITEM_CONTENTS` | Provides HTML contents generated out of Markdown contents | | ||||
**Notes**: | **Notes**: | ||||
* other **PSKOV** constants are described later | * other **PSKOV** constants are described later | ||||
* page's header section is described below | |||||
* page's Markdown file is described below | |||||
<a name="md"/> | <a name="md"/> | ||||
@@ -142,10 +142,10 @@ As you can see, `item.template` is an average HTML file with two **PSKOV** const | |||||
`about.md` starts with a so-called header section: | `about.md` starts with a so-called header section: | ||||
| Header constant | Description | | |||||
| Header key | Description | | |||||
|---|---| | |---|---| | ||||
| `Title:` | Provides value for `PSKOV_ITEM_TITLE` constant when generating HTML out of Markdown | | |||||
| `Slug:` | Tells **PSKOV** that particular Markdown file should be saved under `<slug>.html` filename | | |||||
| `Title` | Provides value for `PSKOV_ITEM_TITLE` constant when generating HTML out of Markdown | | |||||
| `Slug` | Tells **PSKOV** that particular Markdown file should be saved under `<slug>.html` filename | | |||||
The rest of `about.md` contents is what any Markdown file looks like. | The rest of `about.md` contents is what any Markdown file looks like. | ||||
@@ -178,7 +178,7 @@ As you can see, there's nothing new in `cv.md` except for a Markdown table. | |||||
Launch [LFSA][lfsa] so that it points to directory with the files we just observed: | Launch [LFSA][lfsa] so that it points to directory with the files we just observed: | ||||
``` | ``` | ||||
$ /path/to/lfsa-201905.py /path/to/dir/01.TwoPages | |||||
$ /path/to/lfsa_1.0.0.py /path/to/dir/01.TwoPages | |||||
``` | ``` | ||||
You should see output similar to this: | You should see output similar to this: | ||||
@@ -196,8 +196,8 @@ Now it's finally time to generate your personal web site: | |||||
* Go to [Tool][tool] page | * Go to [Tool][tool] page | ||||
* Make sure | * Make sure | ||||
* `Path:` points to the same directory you specified before | |||||
* `Input directory:` and `Item template:` have values from `cfg` | |||||
* `Path` points to the same directory you specified before | |||||
* `Input directory` and `Item template` have values from `pskov.cfg` | |||||
* Press `Generate` button to generate HTML files right where Markdown ones reside | * Press `Generate` button to generate HTML files right where Markdown ones reside | ||||
* Open generated `about.html` from the site's directory | * Open generated `about.html` from the site's directory | ||||
* You should see your web site running locally | * You should see your web site running locally | ||||
@@ -208,11 +208,11 @@ Now it's finally time to generate your personal web site: | |||||
You have successfully generated a web site with two pages. [Check out the result][01-sample]. | You have successfully generated a web site with two pages. [Check out the result][01-sample]. | ||||
Introduced PSKOV constants include: | |||||
Introduced **PSKOV** constants include: | |||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_ITEM_TITLE` | Provides title from `Title:` part of page's header section | | |||||
| `PSKOV_ITEM_TITLE` | Value of `Title` key of the page's Markdown file | | |||||
| `PSKOV_ITEM_CONTENTS` | Provides HTML contents generated out of Markdown contents | | | `PSKOV_ITEM_CONTENTS` | Provides HTML contents generated out of Markdown contents | | ||||
Introduced configuration keys include: | Introduced configuration keys include: | ||||
@@ -222,12 +222,12 @@ Introduced configuration keys include: | |||||
| `input` | Points to a directory where `item`'s file is located | | | `input` | Points to a directory where `item`'s file is located | | ||||
| `item` | Points to an HTML template file that is used to generate HTML files out of Markdown ones | | | `item` | Points to an HTML template file that is used to generate HTML files out of Markdown ones | | ||||
Introduced header constants include: | |||||
Introduced header keys include: | |||||
| Header constant | Description | | |||||
| Header key | Description | | |||||
|---|---| | |---|---| | ||||
| `Title:` | Provides value for `PSKOV_ITEM_TITLE` constant when generating HTML out of Markdown | | |||||
| `Slug:` | Tells **PSKOV** that particular Markdown file should be saved under `<slug>.html` filename | | |||||
| `Title` | Provides value for `PSKOV_ITEM_TITLE` constant when generating HTML out of Markdown | | |||||
| `Slug` | Tells **PSKOV** that particular Markdown file should be saved under `<slug>.html` filename | | |||||
</div><div class="contents"> | </div><div class="contents"> | ||||
@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/education.04.lang.html">EN</a> | |||||
<a href="../ru/education.04.lang.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
Education: 04. Language | Education: 04. Language | ||||
@@ -101,7 +113,7 @@ Education: 04. Language | |||||
<p><strong>Table of contents</strong></p> | <p><strong>Table of contents</strong></p> | ||||
<ul> | <ul> | ||||
<li><a href="#localization">01. Localization</a></li> | <li><a href="#localization">01. Localization</a></li> | ||||
<li><a href="#cfg">02. Investigate <code>cfg</code> file</a></li> | |||||
<li><a href="#cfg">02. Investigate <code>pskov.cfg</code> file</a></li> | |||||
<li><a href="#item">03. Investigate template files</a></li> | <li><a href="#item">03. Investigate template files</a></li> | ||||
<li><a href="#md">04. Investigate Markdown files</a></li> | <li><a href="#md">04. Investigate Markdown files</a></li> | ||||
<li><a href="#gen">05. Launch LFSA and generate the site</a></li> | <li><a href="#gen">05. Launch LFSA and generate the site</a></li> | ||||
@@ -112,7 +124,7 @@ Education: 04. Language | |||||
<p>Now that you have your web site in English you start to wonder why there's no Russian version, you're Russian after all!</p> | <p>Now that you have your web site in English you start to wonder why there's no Russian version, you're Russian after all!</p> | ||||
<p>You set on to create the following <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/02.Language">directory structure</a>:</p> | <p>You set on to create the following <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/02.Language">directory structure</a>:</p> | ||||
<ul> | <ul> | ||||
<li><code>cfg</code></li> | |||||
<li><code>pskov.cfg</code></li> | |||||
<li><code>en/item.template</code></li> | <li><code>en/item.template</code></li> | ||||
<li><code>en/about.md</code></li> | <li><code>en/about.md</code></li> | ||||
<li><code>en/cv.md</code></li> | <li><code>en/cv.md</code></li> | ||||
@@ -122,8 +134,8 @@ Education: 04. Language | |||||
</ul> | </ul> | ||||
<p>Let's look at the contents of these files closer.</p> | <p>Let's look at the contents of these files closer.</p> | ||||
<p><a name="cfg"/></p> | <p><a name="cfg"/></p> | ||||
<h2 id="02investigatecfgfile">02. Investigate <code>cfg</code> file</h2> | |||||
<p><code>cfg</code> file has the following contents:</p> | |||||
<h2 id="02investigatepskovcfgfile">02. Investigate <code>pskov.cfg</code> file</h2> | |||||
<p><code>pskov.cfg</code> file has the following contents:</p> | |||||
<pre><code>input = en;ru | <pre><code>input = en;ru | ||||
item = item.template | item = item.template | ||||
</code></pre> | </code></pre> | ||||
@@ -185,14 +197,14 @@ item = item.template | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_URL</code></td> | <td><code>PSKOV_ITEM_URL</code></td> | ||||
<td>Provides generated page's file name: <code><slug>.html</code></td> | |||||
<td>Provides generated page's file name</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p>As you see, <code>PSKOV_ITEM_URL</code> is all you need to have your page in as many languages as you please.</p> | <p>As you see, <code>PSKOV_ITEM_URL</code> is all you need to have your page in as many languages as you please.</p> | ||||
<p><a name="md"/></p> | <p><a name="md"/></p> | ||||
<h2 id="04investigatemarkdownfiles">04. Investigate Markdown files</h2> | <h2 id="04investigatemarkdownfiles">04. Investigate Markdown files</h2> | ||||
<p><code>en/about.md</code> and <code>en/cv.md</code> files look almost exactly as <a href="education.03.site.html">before</a>. <code>ru/about.md</code> and <code>ru/cv.md</code> are simply Russian variants of the same pages.</p> | |||||
<p><code>en/about.md</code> and <code>en/cv.md</code> files look almost exactly as <a href="education.03.site.html">before</a>. <code>ru/about.md</code> and <code>ru/cv.md</code> are simply Russian variants of corresponding pages.</p> | |||||
<p>For example, <code>ru/cv.md</code> has the following contents:</p> | <p>For example, <code>ru/cv.md</code> has the following contents:</p> | ||||
<pre><code> Title: Резюме | <pre><code> Title: Резюме | ||||
Slug: cv | Slug: cv | ||||
@@ -208,11 +220,11 @@ item = item.template | |||||
| Учёба | Императорская Академия художеств | | | Учёба | Императорская Академия художеств | | ||||
| Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) | | | Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) | | ||||
</code></pre> | </code></pre> | ||||
<p><strong>Note</strong>: Russian page has exactly the same <code>Slug:</code> value as English one.</p> | |||||
<p><strong>Note</strong>: Russian page has exactly the same <code>Slug</code> value as English one.</p> | |||||
<p><a name="gen"/></p> | <p><a name="gen"/></p> | ||||
<h2 id="05launchlfsaandgeneratethesite">05. Launch LFSA and generate the site</h2> | <h2 id="05launchlfsaandgeneratethesite">05. Launch LFSA and generate the site</h2> | ||||
<p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p> | <p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p> | ||||
<pre><code>$ /path/to/lfsa-201905.py /path/to/dir/02.Language | |||||
<pre><code>$ /path/to/lfsa_1.0.0.py /path/to/dir/02.Language | |||||
</code></pre> | </code></pre> | ||||
<p>Generate the site:</p> | <p>Generate the site:</p> | ||||
<ul> | <ul> | ||||
@@ -235,7 +247,7 @@ item = item.template | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_URL</code></td> | <td><code>PSKOV_ITEM_URL</code></td> | ||||
<td>Provides generated page's file name: <code><slug>.html</code></td> | |||||
<td>Provides generated page's file name</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -257,6 +269,11 @@ item = item.template | |||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -1,5 +1,5 @@ | |||||
Title: Education: 04. Language | Title: Education: 04. Language | ||||
Date: 2019-05-21 00:00 | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | Category: Page | ||||
Slug: education.04.lang | Slug: education.04.lang | ||||
Lang: en | Lang: en | ||||
@@ -17,7 +17,7 @@ Estimated completion time: 10 minutes. | |||||
**Table of contents** | **Table of contents** | ||||
* [01. Localization](#localization) | * [01. Localization](#localization) | ||||
* [02. Investigate `cfg` file](#cfg) | |||||
* [02. Investigate `pskov.cfg` file](#cfg) | |||||
* [03. Investigate template files](#item) | * [03. Investigate template files](#item) | ||||
* [04. Investigate Markdown files](#md) | * [04. Investigate Markdown files](#md) | ||||
* [05. Launch LFSA and generate the site](#gen) | * [05. Launch LFSA and generate the site](#gen) | ||||
@@ -31,7 +31,7 @@ Now that you have your web site in English you start to wonder why there's no Ru | |||||
You set on to create the following [directory structure][02-files]: | You set on to create the following [directory structure][02-files]: | ||||
* `cfg` | |||||
* `pskov.cfg` | |||||
* `en/item.template` | * `en/item.template` | ||||
* `en/about.md` | * `en/about.md` | ||||
* `en/cv.md` | * `en/cv.md` | ||||
@@ -43,9 +43,9 @@ Let's look at the contents of these files closer. | |||||
<a name="cfg"/> | <a name="cfg"/> | ||||
## 02. Investigate `cfg` file | |||||
## 02. Investigate `pskov.cfg` file | |||||
`cfg` file has the following contents: | |||||
`pskov.cfg` file has the following contents: | |||||
``` | ``` | ||||
input = en;ru | input = en;ru | ||||
@@ -112,7 +112,7 @@ Language selection uses new **PSKOV** constant: | |||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_ITEM_URL` | Provides generated page's file name: `<slug>.html` | | |||||
| `PSKOV_ITEM_URL` | Provides generated page's file name | | |||||
As you see, `PSKOV_ITEM_URL` is all you need to have your page in as many languages as you please. | As you see, `PSKOV_ITEM_URL` is all you need to have your page in as many languages as you please. | ||||
@@ -120,7 +120,7 @@ As you see, `PSKOV_ITEM_URL` is all you need to have your page in as many langua | |||||
## 04. Investigate Markdown files | ## 04. Investigate Markdown files | ||||
`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 the same pages. | |||||
`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. | |||||
For example, `ru/cv.md` has the following contents: | For example, `ru/cv.md` has the following contents: | ||||
@@ -140,7 +140,7 @@ For example, `ru/cv.md` has the following contents: | |||||
| Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) | | | Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) | | ||||
``` | ``` | ||||
**Note**: Russian page has exactly the same `Slug:` value as English one. | |||||
**Note**: Russian page has exactly the same `Slug` value as English one. | |||||
<a name="gen"/> | <a name="gen"/> | ||||
@@ -149,7 +149,7 @@ For example, `ru/cv.md` has the following contents: | |||||
Launch [LFSA][lfsa] so that it points to directory with the files we just observed: | Launch [LFSA][lfsa] so that it points to directory with the files we just observed: | ||||
``` | ``` | ||||
$ /path/to/lfsa-201905.py /path/to/dir/02.Language | |||||
$ /path/to/lfsa_1.0.0.py /path/to/dir/02.Language | |||||
``` | ``` | ||||
Generate the site: | Generate the site: | ||||
@@ -169,7 +169,7 @@ Introduced PSKOV constants include: | |||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_ITEM_URL` | Provides generated page's file name: `<slug>.html` | | |||||
| `PSKOV_ITEM_URL` | Provides generated page's file name | | |||||
</div><div class="contents"> | </div><div class="contents"> | ||||
@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/education.05.blog.html">EN</a> | |||||
<a href="../ru/education.05.blog.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
Education: 05. Blog | Education: 05. Blog | ||||
@@ -96,15 +108,15 @@ Education: 05. Blog | |||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p></div><div class="contents"></p> | <p></div><div class="contents"></p> | ||||
<p>In this document we create "dynamic" pages like blog posts.</p> | |||||
<p>In this document we create "dynamic" pages for a blog.</p> | |||||
<p>Estimated completion time: 20 minutes.</p> | <p>Estimated completion time: 20 minutes.</p> | ||||
<p><strong>Table of contents</strong></p> | <p><strong>Table of contents</strong></p> | ||||
<ul> | <ul> | ||||
<li><a href="#blog">01. Blog</a></li> | <li><a href="#blog">01. Blog</a></li> | ||||
<li><a href="#cfg">02. Investigate <code>cfg</code> file</a></li> | |||||
<li><a href="#cfg">02. Investigate <code>pskov.cfg</code> file</a></li> | |||||
<li><a href="#item">03. Investigate item templates of the blog</a></li> | <li><a href="#item">03. Investigate item templates of the blog</a></li> | ||||
<li><a href="#preview">04. Investigate preview templates</a></li> | <li><a href="#preview">04. Investigate preview templates</a></li> | ||||
<li><a href="#index">05. Investigate index (summary) templates</a></li> | |||||
<li><a href="#index">05. Investigate templates of preview pages</a></li> | |||||
<li><a href="#pagination">06. Investigate pagination templates</a></li> | <li><a href="#pagination">06. Investigate pagination templates</a></li> | ||||
<li><a href="#md">07. Investigate Markdown files</a></li> | <li><a href="#md">07. Investigate Markdown files</a></li> | ||||
<li><a href="#gen">08. Launch LFSA and generate the site</a></li> | <li><a href="#gen">08. Launch LFSA and generate the site</a></li> | ||||
@@ -112,10 +124,10 @@ Education: 05. Blog | |||||
</ul> | </ul> | ||||
<p><a name="blog"/></p> | <p><a name="blog"/></p> | ||||
<h2 id="01blog">01. Blog</h2> | <h2 id="01blog">01. Blog</h2> | ||||
<p>So, you have your web site in both English and Russian. You start to feel the need to constantly share your thoughts with the world as blog posts.</p> | |||||
<p>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.</p> | |||||
<p>You set on to create the following <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/03.Blog">directory structure</a>:</p> | <p>You set on to create the following <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/03.Blog">directory structure</a>:</p> | ||||
<ul> | <ul> | ||||
<li><code>cfg</code></li> | |||||
<li><code>pskov.cfg</code></li> | |||||
<li><code>en/blog/</code><ul> | <li><code>en/blog/</code><ul> | ||||
<li><code>item.template</code></li> | <li><code>item.template</code></li> | ||||
<li><code>index.template</code></li> | <li><code>index.template</code></li> | ||||
@@ -157,8 +169,8 @@ Education: 05. Blog | |||||
</ul> | </ul> | ||||
<p>Let's look at the contents of these files closer.</p> | <p>Let's look at the contents of these files closer.</p> | ||||
<p><a name="cfg"/></p> | <p><a name="cfg"/></p> | ||||
<h2 id="02investigatecfgfile">02. Investigate <code>cfg</code> file</h2> | |||||
<p><code>cfg</code> file has the following contents:</p> | |||||
<h2 id="02investigatepskovcfgfile">02. Investigate <code>pskov.cfg</code> file</h2> | |||||
<p><code>pskov.cfg</code> file has the following contents:</p> | |||||
<pre><code>input = en/page;ru/page;en/blog;ru/blog | <pre><code>input = en/page;ru/page;en/blog;ru/blog | ||||
item = item.template | item = item.template | ||||
preview = preview.template | preview = preview.template | ||||
@@ -171,7 +183,7 @@ previewEnding = . . . | |||||
previewsPerPage = 3 | previewsPerPage = 3 | ||||
previewPageBaseName = index | previewPageBaseName = index | ||||
</code></pre> | </code></pre> | ||||
<p>Apart from already used <code>input</code> and <code>item</code> keys, we have quite a lot of new ones. Let's break them down:</p> | |||||
<p>You already met <code>input</code> and <code>item</code> keys. Let's see into new ones:</p> | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
@@ -182,39 +194,39 @@ previewPageBaseName = index | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>preview</code></td> | <td><code>preview</code></td> | ||||
<td>Points to an HTML template file that is used to generate HTML previews out of the first <code>previewSize</code> (approximately) characters of Markdown files</td> | |||||
<td>Points to an HTML template that is used to generate HTML preview out of the first <code>previewSize</code> (approximately) characters for each Markdown file</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>index</code></td> | <td><code>index</code></td> | ||||
<td>Points to an HTML template file that is used to generate HTML index (summary) files to host previews</td> | |||||
<td>Points to an HTML template that is used to generate preview page to host previews</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>paginationPrev</code></td> | <td><code>paginationPrev</code></td> | ||||
<td>Points to an HTML template file that is used to generate pagination section used by the <em>last</em> index (summary) file</td> | |||||
<td>Points to an HTML template that is used to generate pagination section to navigate backwards</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>paginationNext</code></td> | <td><code>paginationNext</code></td> | ||||
<td>Points to an HTML template file that is used to generate pagination section used by the <em>first</em> index (summary) file</td> | |||||
<td>Points to an HTML template that is used to generate pagination section to navigate forward</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>paginationPrevNext</code></td> | <td><code>paginationPrevNext</code></td> | ||||
<td>Points to an HTML template file that is used to generate pagination section used by index (summary) files <em>except the ones at the beginning and at the end</em></td> | |||||
<td>Points to an HTML template that is used to generate pagination section</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewSize</code></td> | <td><code>previewSize</code></td> | ||||
<td>How many characters (approximately) to take out of a Markdown file to generate an HTML preview</td> | |||||
<td>How many characters (approximately) to take out of a Markdown file to generate a preview</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewEnding</code></td> | <td><code>previewEnding</code></td> | ||||
<td>String to use at the end of HTML previews</td> | |||||
<td>String to use at the end of each preview</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewsPerPage</code></td> | <td><code>previewsPerPage</code></td> | ||||
<td>Number of HTML previews hosted by single index (summary) file</td> | |||||
<td>Maximum number of previews hosted by a preview page</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewsPageBaseName</code></td> | <td><code>previewsPageBaseName</code></td> | ||||
<td>Index (summary) file base name</td> | |||||
<td>Base file name for preview pages</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -222,8 +234,8 @@ previewPageBaseName = index | |||||
<ul> | <ul> | ||||
<li>we restrict previews to <code>200</code> characters in size (approximately)</li> | <li>we restrict previews to <code>200</code> characters in size (approximately)</li> | ||||
<li>we use <code>. . .</code> string at the end of each preview</li> | <li>we use <code>. . .</code> string at the end of each preview</li> | ||||
<li>index (summary) files host <code>3</code> previews maximum</li> | |||||
<li>index (summary) files are saved as <code>index.html</code>, <code>index2.html</code>, <code>index3.html</code>, etc.</li> | |||||
<li>preview pages host <code>3</code> previews maximum</li> | |||||
<li>preview pages are saved as <code>index.html</code>, <code>index2.html</code>, <code>index3.html</code>, etc.</li> | |||||
</ul> | </ul> | ||||
<p><a name="item"/></p> | <p><a name="item"/></p> | ||||
<h2 id="03investigateitemtemplatesoftheblog">03. Investigate item templates of the blog</h2> | <h2 id="03investigateitemtemplatesoftheblog">03. Investigate item templates of the blog</h2> | ||||
@@ -291,8 +303,8 @@ PSKOV_ITEM_CONTENTS | |||||
<p>As you can see, both files look similar to <code>item.template</code> files we saw <a href="education.04.lang.html">before</a>.</p> | <p>As you can see, both files look similar to <code>item.template</code> files we saw <a href="education.04.lang.html">before</a>.</p> | ||||
<p>The changes include:</p> | <p>The changes include:</p> | ||||
<ul> | <ul> | ||||
<li>new URLs to reference pages in <code>page</code> directory and first index (summary) file in <code>blog</code> directory</li> | |||||
<li>title is now referenced inside <code>contents</code> section as a link to complete page</li> | |||||
<li>new URLs to reference pages in <code>page</code> directory and the first preview page in <code>blog</code> directory</li> | |||||
<li>title is referenced inside <code>contents</code> section as a link pointing to a complete blog post</li> | |||||
<li>date is referenced to highlight relationship among different blog posts in time</li> | <li>date is referenced to highlight relationship among different blog posts in time</li> | ||||
</ul> | </ul> | ||||
<p>Date reference uses new <code>PSKOV_ITEM_DATE</code> constant:</p> | <p>Date reference uses new <code>PSKOV_ITEM_DATE</code> constant:</p> | ||||
@@ -306,7 +318,7 @@ PSKOV_ITEM_CONTENTS | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_DATE</code></td> | <td><code>PSKOV_ITEM_DATE</code></td> | ||||
<td>Provides date from <code>Date:</code> part of page's header section</td> | |||||
<td>Value of <code>Date</code> key of the page's Markdown file</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -338,7 +350,7 @@ PSKOV_PREVIEW | |||||
</div> | </div> | ||||
</code></pre></li> | </code></pre></li> | ||||
</ul> | </ul> | ||||
<p>Previews have no <code><head></code>, <code><body></code>, and similar full page HTML tags. Previews represent sections inserted into index (summary) files.</p> | |||||
<p>Previews have no <code><head></code>, <code><body></code>, and similar full page HTML tags. Previews represent sections inserted into preview pages.</p> | |||||
<p>Preview itself is referenced by <code>PSKOV_PREVIEW</code> constant:</p> | <p>Preview itself is referenced by <code>PSKOV_PREVIEW</code> constant:</p> | ||||
<table> | <table> | ||||
<thead> | <thead> | ||||
@@ -350,12 +362,12 @@ PSKOV_PREVIEW | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PREVIEW</code></td> | <td><code>PSKOV_PREVIEW</code></td> | ||||
<td>Provides contents from a Markdown file limited by <code>previewSize</code> characters (approximately)</td> | |||||
<td>Provides contents of a Markdown file limited by <code>previewSize</code> characters (approximately)</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p><a name="index"/></p> | <p><a name="index"/></p> | ||||
<h2 id="05investigateindexsummarytemplates">05. Investigate index (summary) templates</h2> | |||||
<h2 id="05investigatetemplatesofpreviewpages">05. Investigate templates of preview pages</h2> | |||||
<ul> | <ul> | ||||
<li><p><code>en/blog/index.template</code> contents:</p> | <li><p><code>en/blog/index.template</code> contents:</p> | ||||
<pre><code>- - - - Collapsed for brevity - - - - | <pre><code>- - - - Collapsed for brevity - - - - | ||||
@@ -411,7 +423,6 @@ PSKOV_PAGINATION | |||||
<li>beginning and ending were collapsed for brevity</li> | <li>beginning and ending were collapsed for brevity</li> | ||||
<li><code>PSKOV_INDEX_URL</code> constant is used to provide language selection</li> | <li><code>PSKOV_INDEX_URL</code> constant is used to provide language selection</li> | ||||
</ul> | </ul> | ||||
<p>Index (summary) files are used to host previews.</p> | |||||
<p>Here are new <strong>PSKOV</strong> constants explained:</p> | <p>Here are new <strong>PSKOV</strong> constants explained:</p> | ||||
<table> | <table> | ||||
<thead> | <thead> | ||||
@@ -423,21 +434,21 @@ PSKOV_PAGINATION | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_INDEX_URL</code></td> | <td><code>PSKOV_INDEX_URL</code></td> | ||||
<td>Provides generated page's file name: <code><previewsPageBaseName><id>.html</code></td> | |||||
<td>Provides generated preview page file name: <code><previewsPageBaseName><id>.html</code></td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PREVIEWS</code></td> | <td><code>PSKOV_PREVIEWS</code></td> | ||||
<td>Provides a combination of <code>PSKOV_PREVIEW</code> sections</td> | |||||
<td>Provides a set of previews</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PAGINATION</code></td> | <td><code>PSKOV_PAGINATION</code></td> | ||||
<td>Provides pagination section to navigate index (summary) pages</td> | |||||
<td>Provides pagination section to navigate preview pages</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p><a name="pagination"/></p> | <p><a name="pagination"/></p> | ||||
<h2 id="06investigatepaginationtemplates">06. Investigate pagination templates</h2> | <h2 id="06investigatepaginationtemplates">06. Investigate pagination templates</h2> | ||||
<p>Pagination templates represent sections used to navigate index (summary) pages.</p> | |||||
<p>Pagination templates represent HTML sections to navigate preview pages.</p> | |||||
<p>There are free pagination templates:</p> | <p>There are free pagination templates:</p> | ||||
<table> | <table> | ||||
<thead> | <thead> | ||||
@@ -448,16 +459,16 @@ PSKOV_PAGINATION | |||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td>prev</td> | |||||
<td>Is used for the last index (summary) page because we can only go backwards</td> | |||||
<td>Previous</td> | |||||
<td>A visitor can only go backwards</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>next</td> | |||||
<td>Is used for the first index (summary) page because we can only go forward</td> | |||||
<td>Next</td> | |||||
<td>A visitor can only go forward</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>both</td> | |||||
<td>Is used for intermediate index (summary) pages because we can either go backwards, or forward</td> | |||||
<td>Both</td> | |||||
<td>A visitor can either go backwards, or forward</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -501,19 +512,19 @@ PSKOV_PAGINATION | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PAGE_ID</code></td> | <td><code>PSKOV_PAGE_ID</code></td> | ||||
<td>Provides index (summary) page id starting from <code>1</code></td> | |||||
<td>Provides preview page id starting from <code>1</code></td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PAGES_COUNT</code></td> | <td><code>PSKOV_PAGES_COUNT</code></td> | ||||
<td>Provides total number of index (summary) pages generated</td> | |||||
<td>Provides total number of generated preview pages</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PREV_PAGE_URL</code></td> | <td><code>PSKOV_PREV_PAGE_URL</code></td> | ||||
<td>Provides previous index (summary) page file name</td> | |||||
<td>Provides previous preview page file name</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_NEXT_PAGE_URL</code></td> | <td><code>PSKOV_NEXT_PAGE_URL</code></td> | ||||
<td>Provides next index (summary) page file name</td> | |||||
<td>Provides next preview page file name</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -530,17 +541,17 @@ PSKOV_PAGINATION | |||||
[bullocks]: https://upload.wikimedia.org/wikipedia/commons/c/cb/Walentin_Aleksandrovich_Serov_Bullocks.jpg | [bullocks]: https://upload.wikimedia.org/wikipedia/commons/c/cb/Walentin_Aleksandrovich_Serov_Bullocks.jpg | ||||
</code></pre> | </code></pre> | ||||
<p>Date is used to sort blog posts by date in ascending order:</p> | |||||
<p>Date is used to sort blog posts by date in descending order:</p> | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Header constant</th> | |||||
<th>Header key</th> | |||||
<th>Description</th> | <th>Description</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>Date:</code></td> | |||||
<td><code>Date</code></td> | |||||
<td>Provides value for <code>PSKOV_ITEM_DATE</code> constant when generating HTML out of Markdown</td> | <td>Provides value for <code>PSKOV_ITEM_DATE</code> constant when generating HTML out of Markdown</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
@@ -548,18 +559,18 @@ PSKOV_PAGINATION | |||||
<p><a name="gen"/></p> | <p><a name="gen"/></p> | ||||
<h2 id="08launchlfsaandgeneratethesite">08. Launch LFSA and generate the site</h2> | <h2 id="08launchlfsaandgeneratethesite">08. Launch LFSA and generate the site</h2> | ||||
<p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p> | <p>Launch <a href="http://opengamestudio.org/lfsa">LFSA</a> so that it points to directory with the files we just observed:</p> | ||||
<pre><code>$ /path/to/lfsa-201905.py /path/to/dir/03.Blog | |||||
<pre><code>$ /path/to/lfsa_1.0.0.py /path/to/dir/03.Blog | |||||
</code></pre> | </code></pre> | ||||
<p>Generate the site:</p> | <p>Generate the site:</p> | ||||
<ul> | <ul> | ||||
<li>Go to <a href="http://opengamestudio.org/pskov">Tool</a> page</li> | <li>Go to <a href="http://opengamestudio.org/pskov">Tool</a> page</li> | ||||
<li>Press <code>Generate</code> button</li> | <li>Press <code>Generate</code> button</li> | ||||
<li>Open generated <code>en/blog/index.html</code> or <code>ru/blog/index.html</code> from the site's directory locally</li> | <li>Open generated <code>en/blog/index.html</code> or <code>ru/blog/index.html</code> from the site's directory locally</li> | ||||
<li>Navigate index (summary) pages to make sure everything works fine</li> | |||||
<li>Navigate preview pages to make sure everything works fine</li> | |||||
</ul> | </ul> | ||||
<p><a name="summary"/></p> | <p><a name="summary"/></p> | ||||
<h2 id="09summary">09. Summary</h2> | <h2 id="09summary">09. Summary</h2> | ||||
<p>You have successfully generated a web site with "constant" and "dynamic" pages. <a href="http://opengamestudio.org/pskov/sample/03.Blog/en/blog/index.html">Check out the result</a>.</p> | |||||
<p>You have successfully generated a web site with "dynamic" blog posts. <a href="http://opengamestudio.org/pskov/sample/03.Blog/en/blog/index.html">Check out the result</a>.</p> | |||||
<p>Introduced PSKOV constants include:</p> | <p>Introduced PSKOV constants include:</p> | ||||
<table> | <table> | ||||
<thead> | <thead> | ||||
@@ -571,39 +582,39 @@ PSKOV_PAGINATION | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_ITEM_DATE</code></td> | <td><code>PSKOV_ITEM_DATE</code></td> | ||||
<td>Provides date from <code>Date:</code> part of page's header section</td> | |||||
<td>Value of <code>Date</code> key of the page's Markdown file</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PREVIEW</code></td> | <td><code>PSKOV_PREVIEW</code></td> | ||||
<td>Provides contents from a Markdown file limited by <code>previewSize</code> characters (approximately)</td> | |||||
<td>Provides contents of a Markdown file limited by <code>previewSize</code> characters (approximately)</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_INDEX_URL</code></td> | <td><code>PSKOV_INDEX_URL</code></td> | ||||
<td>Provides generated page's file name: <code><previewsPageBaseName><id>.html</code></td> | |||||
<td>Provides generated preview page file name: <code><previewsPageBaseName><id>.html</code></td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PREVIEWS</code></td> | <td><code>PSKOV_PREVIEWS</code></td> | ||||
<td>Provides a combination of <code>PSKOV_PREVIEW</code> sections</td> | |||||
<td>Provides a set of previews</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PAGINATION</code></td> | <td><code>PSKOV_PAGINATION</code></td> | ||||
<td>Provides pagination section to navigate index (summary) pages</td> | |||||
<td>Provides pagination section to navigate preview pages</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PAGE_ID</code></td> | <td><code>PSKOV_PAGE_ID</code></td> | ||||
<td>Provides index (summary) page id starting from <code>1</code></td> | |||||
<td>Provides preview page id starting from <code>1</code></td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PAGES_COUNT</code></td> | <td><code>PSKOV_PAGES_COUNT</code></td> | ||||
<td>Provides total number of index (summary) pages generated</td> | |||||
<td>Provides total number of generated preview pages</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_PREV_PAGE_URL</code></td> | <td><code>PSKOV_PREV_PAGE_URL</code></td> | ||||
<td>Provides previous index (summary) page file name</td> | |||||
<td>Provides previous preview page file name</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>PSKOV_NEXT_PAGE_URL</code></td> | <td><code>PSKOV_NEXT_PAGE_URL</code></td> | ||||
<td>Provides next index (summary) page file name</td> | |||||
<td>Provides next preview page file name</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -618,58 +629,58 @@ PSKOV_PAGINATION | |||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>preview</code></td> | <td><code>preview</code></td> | ||||
<td>Points to an HTML template file that is used to generate HTML previews out of the first <code>previewSize</code> (approximately) characters of Markdown files</td> | |||||
<td>Points to an HTML template that is used to generate HTML preview out of the first <code>previewSize</code> (approximately) characters for each Markdown file</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>index</code></td> | <td><code>index</code></td> | ||||
<td>Points to an HTML template file that is used to generate HTML index (summary) files to host previews</td> | |||||
<td>Points to an HTML template that is used to generate preview page to host previews</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>paginationPrev</code></td> | <td><code>paginationPrev</code></td> | ||||
<td>Points to an HTML template file that is used to generate pagination section used by the <em>last</em> index (summary) file</td> | |||||
<td>Points to an HTML template that is used to generate pagination section to navigate backwards</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>paginationNext</code></td> | <td><code>paginationNext</code></td> | ||||
<td>Points to an HTML template file that is used to generate pagination section used by the <em>first</em> index (summary) file</td> | |||||
<td>Points to an HTML template that is used to generate pagination section to navigate forward</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>paginationPrevNext</code></td> | <td><code>paginationPrevNext</code></td> | ||||
<td>Points to an HTML template file that is used to generate pagination section used by index (summary) files <em>except the ones at the beginning and at the end</em></td> | |||||
<td>Points to an HTML template that is used to generate pagination section</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewSize</code></td> | <td><code>previewSize</code></td> | ||||
<td>How many characters (approximately) to take out of a Markdown file to generate an HTML preview</td> | |||||
<td>How many characters (approximately) to take out of a Markdown file to generate a preview</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewEnding</code></td> | <td><code>previewEnding</code></td> | ||||
<td>String to use at the end of HTML previews</td> | |||||
<td>String to use at the end of each preview</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewsPerPage</code></td> | <td><code>previewsPerPage</code></td> | ||||
<td>Number of HTML previews hosted by single index (summary) file</td> | |||||
<td>Maximum number of previews hosted by a preview page</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td><code>previewsPageBaseName</code></td> | <td><code>previewsPageBaseName</code></td> | ||||
<td>Index (summary) file base name</td> | |||||
<td>Base file name for preview pages</td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p>Introduced header constants include:</p> | |||||
<p>Introduced header keys include:</p> | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Header constant</th> | |||||
<th>Header key</th> | |||||
<th>Description</th> | <th>Description</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td><code>Date:</code></td> | |||||
<td><code>Date</code></td> | |||||
<td>Provides value for <code>PSKOV_ITEM_DATE</code> constant when generating HTML out of Markdown</td> | <td>Provides value for <code>PSKOV_ITEM_DATE</code> constant when generating HTML out of Markdown</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p>This was the final document to make you proficient in generating static sites with <strong>PSKOV</strong>. If you like what we do, support us by joining our group at <a href="https://twitter.com/OpenGameStudio">Twitter</a>, <a href="https://www.facebook.com/groups/162611230470183">Facebook</a>, or <a href="https://vk.com/opengamestudo">VK</a>.</p> | |||||
<p>This was the final document to make you proficient in generating static sites with <strong>PSKOV</strong>. If you like what we do, join us at <a href="https://vk.com/opengamestudo">VK</a>, <a href="https://twitter.com/OpenGameStudio">Twitter</a>, or <a href="https://www.facebook.com/groups/162611230470183">Facebook</a>.</p> | |||||
<p>Now use <strong>PSKOV</strong> to generate your very own web site!</p> | <p>Now use <strong>PSKOV</strong> to generate your very own web site!</p> | ||||
<p></div><div class="contents"></p> | <p></div><div class="contents"></p> | ||||
<table> | <table> | ||||
@@ -689,6 +700,11 @@ PSKOV_PAGINATION | |||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -10,17 +10,17 @@ Lang: en | |||||
</div><div class="contents"> | </div><div class="contents"> | ||||
In this document we create "dynamic" pages like blog posts. | |||||
In this document we create "dynamic" pages for a blog. | |||||
Estimated completion time: 20 minutes. | Estimated completion time: 20 minutes. | ||||
**Table of contents** | **Table of contents** | ||||
* [01. Blog](#blog) | * [01. Blog](#blog) | ||||
* [02. Investigate `cfg` file](#cfg) | |||||
* [02. Investigate `pskov.cfg` file](#cfg) | |||||
* [03. Investigate item templates of the blog](#item) | * [03. Investigate item templates of the blog](#item) | ||||
* [04. Investigate preview templates](#preview) | * [04. Investigate preview templates](#preview) | ||||
* [05. Investigate index (summary) templates](#index) | |||||
* [05. Investigate templates of preview pages](#index) | |||||
* [06. Investigate pagination templates](#pagination) | * [06. Investigate pagination templates](#pagination) | ||||
* [07. Investigate Markdown files](#md) | * [07. Investigate Markdown files](#md) | ||||
* [08. Launch LFSA and generate the site](#gen) | * [08. Launch LFSA and generate the site](#gen) | ||||
@@ -30,11 +30,11 @@ Estimated completion time: 20 minutes. | |||||
## 01. Blog | ## 01. Blog | ||||
So, you have your web site in both English and Russian. You start to feel the need to constantly share your thoughts with the world as blog posts. | |||||
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]: | You set on to create the following [directory structure][03-files]: | ||||
* `cfg` | |||||
* `pskov.cfg` | |||||
* `en/blog/` | * `en/blog/` | ||||
* `item.template` | * `item.template` | ||||
* `index.template` | * `index.template` | ||||
@@ -78,9 +78,9 @@ Let's look at the contents of these files closer. | |||||
<a name="cfg"/> | <a name="cfg"/> | ||||
## 02. Investigate `cfg` file | |||||
## 02. Investigate `pskov.cfg` file | |||||
`cfg` file has the following contents: | |||||
`pskov.cfg` file has the following contents: | |||||
``` | ``` | ||||
input = en/page;ru/page;en/blog;ru/blog | input = en/page;ru/page;en/blog;ru/blog | ||||
@@ -96,26 +96,26 @@ previewsPerPage = 3 | |||||
previewPageBaseName = index | previewPageBaseName = index | ||||
``` | ``` | ||||
Apart from already used `input` and `item` keys, we have quite a lot of new ones. Let's break them down: | |||||
You already met `input` and `item` keys. Let's see into new ones: | |||||
| Key | Description | | | Key | Description | | ||||
|---|---| | |---|---| | ||||
| `preview` | Points to an HTML template file that is used to generate HTML previews out of the first `previewSize` (approximately) characters of Markdown files | | |||||
| `index` | Points to an HTML template file that is used to generate HTML index (summary) files to host previews | | |||||
| `paginationPrev` | Points to an HTML template file that is used to generate pagination section used by the *last* index (summary) file | | |||||
| `paginationNext` | Points to an HTML template file that is used to generate pagination section used by the *first* index (summary) file | | |||||
| `paginationPrevNext` | Points to an HTML template file that is used to generate pagination section used by index (summary) files *except the ones at the beginning and at the end* | | |||||
| `previewSize` | How many characters (approximately) to take out of a Markdown file to generate an HTML preview | | |||||
| `previewEnding` | String to use at the end of HTML previews | | |||||
| `previewsPerPage` | Number of HTML previews hosted by single index (summary) file | | |||||
| `previewsPageBaseName` | Index (summary) file base name | | |||||
| `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: | In our case: | ||||
* we restrict previews to `200` characters in size (approximately) | * we restrict previews to `200` characters in size (approximately) | ||||
* we use `. . .` string at the end of each preview | * we use `. . .` string at the end of each preview | ||||
* index (summary) files host `3` previews maximum | |||||
* index (summary) files are saved as `index.html`, `index2.html`, `index3.html`, etc. | |||||
* preview pages host `3` previews maximum | |||||
* preview pages are saved as `index.html`, `index2.html`, `index3.html`, etc. | |||||
<a name="item"/> | <a name="item"/> | ||||
@@ -190,15 +190,15 @@ As you can see, both files look similar to `item.template` files we saw [before] | |||||
The changes include: | The changes include: | ||||
* new URLs to reference pages in `page` directory and first index (summary) file in `blog` directory | |||||
* title is now referenced inside `contents` section as a link to complete page | |||||
* 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 is referenced to highlight relationship among different blog posts in time | ||||
Date reference uses new `PSKOV_ITEM_DATE` constant: | Date reference uses new `PSKOV_ITEM_DATE` constant: | ||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_ITEM_DATE` | Provides date from `Date:` part of page's header section | | |||||
| `PSKOV_ITEM_DATE` | Value of `Date` key of the page's Markdown file | | |||||
<a name="preview"/> | <a name="preview"/> | ||||
@@ -234,17 +234,17 @@ Date reference uses new `PSKOV_ITEM_DATE` constant: | |||||
</div> | </div> | ||||
``` | ``` | ||||
Previews have no `<head>`, `<body>`, and similar full page HTML tags. Previews represent sections inserted into index (summary) files. | |||||
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: | Preview itself is referenced by `PSKOV_PREVIEW` constant: | ||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_PREVIEW` | Provides contents from a Markdown file limited by `previewSize` characters (approximately) | | |||||
| `PSKOV_PREVIEW` | Provides contents of a Markdown file limited by `previewSize` characters (approximately) | | |||||
<a name="index"/> | <a name="index"/> | ||||
## 05. Investigate index (summary) templates | |||||
## 05. Investigate templates of preview pages | |||||
* `en/blog/index.template` contents: | * `en/blog/index.template` contents: | ||||
@@ -305,29 +305,27 @@ Preview itself is referenced by `PSKOV_PREVIEW` constant: | |||||
* beginning and ending were collapsed for brevity | * beginning and ending were collapsed for brevity | ||||
* `PSKOV_INDEX_URL` constant is used to provide language selection | * `PSKOV_INDEX_URL` constant is used to provide language selection | ||||
Index (summary) files are used to host previews. | |||||
Here are new **PSKOV** constants explained: | Here are new **PSKOV** constants explained: | ||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_INDEX_URL` | Provides generated page's file name: `<previewsPageBaseName><id>.html` | | |||||
| `PSKOV_PREVIEWS` | Provides a combination of `PSKOV_PREVIEW` sections | | |||||
| `PSKOV_PAGINATION` | Provides pagination section to navigate index (summary) pages | | |||||
| `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"/> | <a name="pagination"/> | ||||
## 06. Investigate pagination templates | ## 06. Investigate pagination templates | ||||
Pagination templates represent sections used to navigate index (summary) pages. | |||||
Pagination templates represent HTML sections to navigate preview pages. | |||||
There are free pagination templates: | There are free pagination templates: | ||||
| Pagination template | Description | | | Pagination template | Description | | ||||
|---|---| | |---|---| | ||||
| prev | Is used for the last index (summary) page because we can only go backwards | | |||||
| next | Is used for the first index (summary) page because we can only go forward | | |||||
| both | Is used for intermediate index (summary) pages because we can either go backwards, or forward | | |||||
| 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: | Let's look at English pagination templates: | ||||
@@ -373,10 +371,10 @@ Here are new **PSKOV** constants we used: | |||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_PAGE_ID` | Provides index (summary) page id starting from `1` | | |||||
| `PSKOV_PAGES_COUNT` | Provides total number of index (summary) pages generated | | |||||
| `PSKOV_PREV_PAGE_URL` | Provides previous index (summary) page file name | | |||||
| `PSKOV_NEXT_PAGE_URL` | Provides next index (summary) page file name | | |||||
| `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"/> | <a name="md"/> | ||||
@@ -396,11 +394,11 @@ Markdown files represent blog posts and they look almost like Markdown files for | |||||
[bullocks]: https://upload.wikimedia.org/wikipedia/commons/c/cb/Walentin_Aleksandrovich_Serov_Bullocks.jpg | [bullocks]: https://upload.wikimedia.org/wikipedia/commons/c/cb/Walentin_Aleksandrovich_Serov_Bullocks.jpg | ||||
``` | ``` | ||||
Date is used to sort blog posts by date in ascending order: | |||||
Date is used to sort blog posts by date in descending order: | |||||
| Header constant | Description | | |||||
| Header key | Description | | |||||
|---|---| | |---|---| | ||||
| `Date:` | Provides value for `PSKOV_ITEM_DATE` constant when generating HTML out of Markdown | | |||||
| `Date` | Provides value for `PSKOV_ITEM_DATE` constant when generating HTML out of Markdown | | |||||
<a name="gen"/> | <a name="gen"/> | ||||
@@ -409,7 +407,7 @@ Date is used to sort blog posts by date in ascending order: | |||||
Launch [LFSA][lfsa] so that it points to directory with the files we just observed: | Launch [LFSA][lfsa] so that it points to directory with the files we just observed: | ||||
``` | ``` | ||||
$ /path/to/lfsa-201905.py /path/to/dir/03.Blog | |||||
$ /path/to/lfsa_1.0.0.py /path/to/dir/03.Blog | |||||
``` | ``` | ||||
Generate the site: | Generate the site: | ||||
@@ -417,49 +415,49 @@ Generate the site: | |||||
* Go to [Tool][tool] page | * Go to [Tool][tool] page | ||||
* Press `Generate` button | * Press `Generate` button | ||||
* Open generated `en/blog/index.html` or `ru/blog/index.html` from the site's directory locally | * Open generated `en/blog/index.html` or `ru/blog/index.html` from the site's directory locally | ||||
* Navigate index (summary) pages to make sure everything works fine | |||||
* Navigate preview pages to make sure everything works fine | |||||
<a name="summary"/> | <a name="summary"/> | ||||
## 09. Summary | ## 09. Summary | ||||
You have successfully generated a web site with "constant" and "dynamic" pages. [Check out the result][03-sample]. | |||||
You have successfully generated a web site with "dynamic" blog posts. [Check out the result][03-sample]. | |||||
Introduced PSKOV constants include: | Introduced PSKOV constants include: | ||||
| PSKOV constant | Description | | | PSKOV constant | Description | | ||||
|---|---| | |---|---| | ||||
| `PSKOV_ITEM_DATE` | Provides date from `Date:` part of page's header section | | |||||
| `PSKOV_PREVIEW` | Provides contents from a Markdown file limited by `previewSize` characters (approximately) | | |||||
| `PSKOV_INDEX_URL` | Provides generated page's file name: `<previewsPageBaseName><id>.html` | | |||||
| `PSKOV_PREVIEWS` | Provides a combination of `PSKOV_PREVIEW` sections | | |||||
| `PSKOV_PAGINATION` | Provides pagination section to navigate index (summary) pages | | |||||
| `PSKOV_PAGE_ID` | Provides index (summary) page id starting from `1` | | |||||
| `PSKOV_PAGES_COUNT` | Provides total number of index (summary) pages generated | | |||||
| `PSKOV_PREV_PAGE_URL` | Provides previous index (summary) page file name | | |||||
| `PSKOV_NEXT_PAGE_URL` | Provides next index (summary) page file name | | |||||
| `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: | Introduced configuration keys include: | ||||
| Key | Description | | | Key | Description | | ||||
|---|---| | |---|---| | ||||
| `preview` | Points to an HTML template file that is used to generate HTML previews out of the first `previewSize` (approximately) characters of Markdown files | | |||||
| `index` | Points to an HTML template file that is used to generate HTML index (summary) files to host previews | | |||||
| `paginationPrev` | Points to an HTML template file that is used to generate pagination section used by the *last* index (summary) file | | |||||
| `paginationNext` | Points to an HTML template file that is used to generate pagination section used by the *first* index (summary) file | | |||||
| `paginationPrevNext` | Points to an HTML template file that is used to generate pagination section used by index (summary) files *except the ones at the beginning and at the end* | | |||||
| `previewSize` | How many characters (approximately) to take out of a Markdown file to generate an HTML preview | | |||||
| `previewEnding` | String to use at the end of HTML previews | | |||||
| `previewsPerPage` | Number of HTML previews hosted by single index (summary) file | | |||||
| `previewsPageBaseName` | Index (summary) file base name | | |||||
Introduced header constants include: | |||||
| Header constant | 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 | | |||||
| `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, support us by joining our group at [Twitter][tw], [Facebook][fb], or [VK][vk]. | |||||
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! | Now use **PSKOV** to generate your very own web site! | ||||
@@ -477,6 +475,6 @@ Now use **PSKOV** to generate your very own web site! | |||||
[lfsa]: http://opengamestudio.org/lfsa | [lfsa]: http://opengamestudio.org/lfsa | ||||
[tool]: http://opengamestudio.org/pskov | [tool]: http://opengamestudio.org/pskov | ||||
[vk]: https://vk.com/opengamestudo | |||||
[tw]: https://twitter.com/OpenGameStudio | [tw]: https://twitter.com/OpenGameStudio | ||||
[fb]: https://www.facebook.com/groups/162611230470183 | [fb]: https://www.facebook.com/groups/162611230470183 | ||||
[vk]: https://vk.com/opengamestudo |
@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/education.html">EN</a> | |||||
<a href="../ru/education.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
Education | Education | ||||
@@ -84,7 +96,7 @@ Education | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Item</th> | |||||
<th>Property</th> | |||||
<th>Details</th> | <th>Details</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
@@ -103,7 +115,7 @@ Education | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Item</th> | |||||
<th>Property</th> | |||||
<th>Details</th> | <th>Details</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
@@ -122,7 +134,7 @@ Education | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Item</th> | |||||
<th>Property</th> | |||||
<th>Details</th> | <th>Details</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
@@ -148,8 +160,8 @@ Education | |||||
<td><ol> <li><code>input</code></li> <li><code>item</code></li> </ol></td> | <td><ol> <li><code>input</code></li> <li><code>item</code></li> </ol></td> | ||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>Introduced header constants</td> | |||||
<td><ol> <li><code>Title:</code></li> <li><code>Slug:</code></li> </ol></td> | |||||
<td>Introduced header keys</td> | |||||
<td><ol> <li><code>Title</code></li> <li><code>Slug</code></li> </ol></td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
@@ -157,7 +169,7 @@ Education | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Item</th> | |||||
<th>Property</th> | |||||
<th>Details</th> | <th>Details</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
@@ -184,14 +196,14 @@ Education | |||||
<table> | <table> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th>Item</th> | |||||
<th>Property</th> | |||||
<th>Details</th> | <th>Details</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr> | <tr> | ||||
<td>Description</td> | <td>Description</td> | ||||
<td>Learn how to create "dynamic" pages like blog posts</td> | |||||
<td>Learn how to create "dynamic" pages for a blog</td> | |||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>Estimated completion time</td> | <td>Estimated completion time</td> | ||||
@@ -210,13 +222,18 @@ Education | |||||
<td><ol> <li><code>preview</code></li> <li><code>index</code></li> <li><code>paginationPrev</code></li> <li><code>paginationNext</code></li> <li><code>paginationPrevNext</code></li> <li><code>previewSize</code></li> <li><code>previewEnding</code></li> <li><code>previewsPerPage</code></li> <li><code>previewsPageBaseName</code></li> </ol></td> | <td><ol> <li><code>preview</code></li> <li><code>index</code></li> <li><code>paginationPrev</code></li> <li><code>paginationNext</code></li> <li><code>paginationPrevNext</code></li> <li><code>previewSize</code></li> <li><code>previewEnding</code></li> <li><code>previewsPerPage</code></li> <li><code>previewsPageBaseName</code></li> </ol></td> | ||||
</tr> | </tr> | ||||
<tr> | <tr> | ||||
<td>Introduced header constants</td> | |||||
<td><ol> <li><code>Date:</code></li> </ol></td> | |||||
<td>Introduced header keys</td> | |||||
<td><ol> <li><code>Date</code></li> </ol></td> | |||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<p>If you like what we do, support us by joining our group at <a href="https://twitter.com/OpenGameStudio">Twitter</a>, <a href="https://www.facebook.com/groups/162611230470183">Facebook</a>, or <a href="https://vk.com/opengamestudo">VK</a>.</p> | |||||
<p>If you like what we do, join us at <a href="https://vk.com/opengamestudo">VK</a>, <a href="https://twitter.com/OpenGameStudio">Twitter</a>, or <a href="https://www.facebook.com/groups/162611230470183">Facebook</a>.</p> | |||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -1,5 +1,5 @@ | |||||
Title: Education | Title: Education | ||||
Date: 2019-05-20 00:00 | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | Category: Page | ||||
Slug: education | Slug: education | ||||
Lang: en | Lang: en | ||||
@@ -8,32 +8,32 @@ Here is a set of documents to make you proficient in generating static sites wit | |||||
## [01. Why][why] | ## [01. Why][why] | ||||
| Item | Details | | |||||
| Property | Details | | |||||
|---|---| | |---|---| | ||||
| Description | Find out why **PSKOV** was created | | | Description | Find out why **PSKOV** was created | | ||||
| Estimated completion time | 5 minutes | | | Estimated completion time | 5 minutes | | ||||
## [02. Dependencies][deps] | ## [02. Dependencies][deps] | ||||
| Item | Details | | |||||
| Property | Details | | |||||
|---|---| | |---|---| | ||||
| Description | Install dependencies to start using **PSKOV** | | | Description | Install dependencies to start using **PSKOV** | | ||||
| Estimated completion time | 5 minutes | | | Estimated completion time | 5 minutes | | ||||
## [03. Site][site] | ## [03. Site][site] | ||||
| Item | Details | | |||||
| Property | Details | | |||||
|---|---| | |---|---| | ||||
| Description | Learn how to create a simple static web site with two pages | | | Description | Learn how to create a simple static web site with two pages | | ||||
| Estimated completion time | 10 minutes | | | Estimated completion time | 10 minutes | | ||||
| Demonstration | [TwoPages][01-sample] | | | Demonstration | [TwoPages][01-sample] | | ||||
| Introduced PSKOV constants | <ol> <li>`PSKOV_ITEM_TITLE`</li> <li>`PSKOV_ITEM_CONTENTS`</li> </ol> | | | Introduced PSKOV constants | <ol> <li>`PSKOV_ITEM_TITLE`</li> <li>`PSKOV_ITEM_CONTENTS`</li> </ol> | | ||||
| Introduced configuration keys | <ol> <li>`input`</li> <li>`item`</li> </ol> | | | Introduced configuration keys | <ol> <li>`input`</li> <li>`item`</li> </ol> | | ||||
| Introduced header constants | <ol> <li>`Title:`</li> <li>`Slug:`</li> </ol> | | |||||
| Introduced header keys | <ol> <li>`Title`</li> <li>`Slug`</li> </ol> | | |||||
## [04. Language][lang] | ## [04. Language][lang] | ||||
| Item | Details | | |||||
| Property | Details | | |||||
|---|---| | |---|---| | ||||
| Description | Learn how to add language selection | | | Description | Learn how to add language selection | | ||||
| Estimated completion time | 10 minutes | | | Estimated completion time | 10 minutes | | ||||
@@ -42,16 +42,16 @@ Here is a set of documents to make you proficient in generating static sites wit | |||||
## [05. Blog][blog] | ## [05. Blog][blog] | ||||
| Item | Details | | |||||
| Property | Details | | |||||
|---|---| | |---|---| | ||||
| Description | Learn how to create "dynamic" pages like blog posts | | |||||
| Description | Learn how to create "dynamic" pages for a blog | | |||||
| Estimated completion time | 20 minutes | | | Estimated completion time | 20 minutes | | ||||
| Demonstration | [Blog][03-sample] | | | Demonstration | [Blog][03-sample] | | ||||
| Introduced PSKOV constants | <ol> <li>`PSKOV_ITEM_DATE`</li> <li>`PSKOV_PREVIEW`</li> <li>`PSKOV_INDEX_URL`</li> <li>`PSKOV_PREVIEWS`</li> <li>`PSKOV_PAGINATION`</li> <li>`PSKOV_PAGE_ID`</li> <li>`PSKOV_PAGES_COUNT`</li> <li>`PSKOV_PREV_PAGE_URL`</li> <li>`PSKOV_NEXT_PAGE_URL`</li> </ol> | | | Introduced PSKOV constants | <ol> <li>`PSKOV_ITEM_DATE`</li> <li>`PSKOV_PREVIEW`</li> <li>`PSKOV_INDEX_URL`</li> <li>`PSKOV_PREVIEWS`</li> <li>`PSKOV_PAGINATION`</li> <li>`PSKOV_PAGE_ID`</li> <li>`PSKOV_PAGES_COUNT`</li> <li>`PSKOV_PREV_PAGE_URL`</li> <li>`PSKOV_NEXT_PAGE_URL`</li> </ol> | | ||||
| Introduced configuration keys | <ol> <li>`preview`</li> <li>`index`</li> <li>`paginationPrev`</li> <li>`paginationNext`</li> <li>`paginationPrevNext`</li> <li>`previewSize`</li> <li>`previewEnding`</li> <li>`previewsPerPage`</li> <li>`previewsPageBaseName`</li> </ol> | | | Introduced configuration keys | <ol> <li>`preview`</li> <li>`index`</li> <li>`paginationPrev`</li> <li>`paginationNext`</li> <li>`paginationPrevNext`</li> <li>`previewSize`</li> <li>`previewEnding`</li> <li>`previewsPerPage`</li> <li>`previewsPageBaseName`</li> </ol> | | ||||
| Introduced header constants | <ol> <li>`Date:`</li> </ol> | | |||||
| Introduced header keys | <ol> <li>`Date`</li> </ol> | | |||||
If you like what we do, support us by joining our group at [Twitter][tw], [Facebook][fb], or [VK][vk]. | |||||
If you like what we do, join us at [VK][vk], [Twitter][tw], or [Facebook][fb]. | |||||
[why]: education.01.why.html | [why]: education.01.why.html | ||||
[deps]: education.02.deps.html | [deps]: education.02.deps.html | ||||
@@ -63,6 +63,6 @@ If you like what we do, support us by joining our group at [Twitter][tw], [Faceb | |||||
[02-sample]: http://opengamestudio.org/pskov/sample/02.Language/en/about.html | [02-sample]: http://opengamestudio.org/pskov/sample/02.Language/en/about.html | ||||
[03-sample]: http://opengamestudio.org/pskov/sample/03.Blog/en/blog/index.html | [03-sample]: http://opengamestudio.org/pskov/sample/03.Blog/en/blog/index.html | ||||
[vk]: https://vk.com/opengamestudo | |||||
[tw]: https://twitter.com/OpenGameStudio | [tw]: https://twitter.com/OpenGameStudio | ||||
[fb]: https://www.facebook.com/groups/162611230470183 | [fb]: https://www.facebook.com/groups/162611230470183 | ||||
[vk]: https://vk.com/opengamestudo |
@@ -64,9 +64,17 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | </style> | ||||
<title> | <title> | ||||
pskov_1.0.0 | |||||
PSKOV | |||||
</title> | </title> | ||||
</head> | </head> | ||||
<body> | <body> | ||||
@@ -74,6 +82,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/PSKOV_ITEM_URL">EN</a> | |||||
<a href="../ru/PSKOV_ITEM_URL">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
PSKOV_ITEM_TITLE | PSKOV_ITEM_TITLE | ||||
@@ -81,6 +93,11 @@ PSKOV_ITEM_TITLE | |||||
<center><div class="contents"> | <center><div class="contents"> | ||||
PSKOV_ITEM_CONTENTS | PSKOV_ITEM_CONTENTS | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
</script> | </script> | ||||
</body> | </body> | ||||
@@ -64,6 +64,14 @@ | |||||
text-align: left; | text-align: left; | ||||
color: #444; | color: #444; | ||||
} | } | ||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
table | table | ||||
{ | { | ||||
border-collapse: collapse; | border-collapse: collapse; | ||||
@@ -98,6 +106,10 @@ | |||||
<strong id="title">PSKOV</strong> | <strong id="title">PSKOV</strong> | ||||
<a href="pskov_1.0.0.html">Tool</a> | <a href="pskov_1.0.0.html">Tool</a> | ||||
<a href="education.html">Education</a> | <a href="education.html">Education</a> | ||||
<div id="lang"> | |||||
<a href="../en/pskov_1.0.0.html">EN</a> | |||||
<a href="../ru/pskov_1.0.0+ru.html">RU</a> | |||||
</div> | |||||
</div> | </div> | ||||
<center><h1> | <center><h1> | ||||
PSKOV 1.0.0 (2019-06) | PSKOV 1.0.0 (2019-06) | ||||
@@ -182,6 +194,11 @@ | |||||
</tr> | </tr> | ||||
</table> | </table> | ||||
</div></center> | </div></center> | ||||
<div id="footer"> | |||||
The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a> | |||||
from <a href="http://github.com/ogstudio/site-pskov">this source code</a>. | |||||
The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | <script type="text/javascript"> | ||||
<!-- showdown.js --> | <!-- showdown.js --> | ||||
;/*! showdown v 2.0.0-alpha1 - 24-10-2018 */ | ;/*! showdown v 2.0.0-alpha1 - 24-10-2018 */ | ||||
@@ -0,0 +1,230 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/education.01.why.html">EN</a> | |||||
<a href="../ru/education.01.why.html">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
Обучение: 01. Почему | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Отсутствует</td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.02.deps.html">02. Зависимости</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<p>В этом документе мы кратко объясним причины создания <strong>ПСКОВА</strong>.</p> | |||||
<p>Ожидаемое время завершения: 5 минут.</p> | |||||
<p><strong>Содержание</strong></p> | |||||
<ul> | |||||
<li><a href="#why">01. Почему</a></li> | |||||
<li><a href="#features">02. Возможности</a></li> | |||||
</ul> | |||||
<p><a name="why"/></p> | |||||
<h2 id="01">01. Почему</h2> | |||||
<p>Возможно, вы знаете о существовании множества <a href="https://habr.com/ru/company/selectel/blog/236441/">генераторов статических сайтов</a>, зачем же создавать ещё один? Потому что <strong>они не были достаточно хороши</strong> для нужд <a href="http://opengamestudio.org">Студии Открытых Игр</a>.</p> | |||||
<p>Таков список <strong>избыточных для нас функциональностей</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>№</th> | |||||
<th>Избыточная функциональность</th> | |||||
<th>Детали</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>1</td> | |||||
<td>Изучение чего-либо, кроме HTML, CSS, JavaScript и Markdown</td> | |||||
<td>Этих технологий достаточно для создания чистого веб-сайта</td> | |||||
</tr> | |||||
<tr> | |||||
<td>2</td> | |||||
<td>На стороне сервера</td> | |||||
<td>Никто не должен иметь возможность выключить ваш сайт кроме вас</td> | |||||
</tr> | |||||
<tr> | |||||
<td>3</td> | |||||
<td>Установка</td> | |||||
<td>Отсутствие принудительных обновлений, о которых никто не просил</td> | |||||
</tr> | |||||
<tr> | |||||
<td>4</td> | |||||
<td>Осязаемый исходный код</td> | |||||
<td>Отсутствие миллионов файлов исходного кода</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><a name="features"/></p> | |||||
<h2 id="02">02. Возможности</h2> | |||||
<p>Как следствие, таковы <strong>возможности ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>№</th> | |||||
<th>Функциональность ПСКОВА</th> | |||||
<th>Детали</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>1</td> | |||||
<td>HTML, CSS, JavaScript и Markdown</td> | |||||
<td>То, что вы уже знаете</td> | |||||
</tr> | |||||
<tr> | |||||
<td>2</td> | |||||
<td>На стороне клиента</td> | |||||
<td><strong>ПСКОВ</strong> является приложением JavaScript, исполняемым на стороне клиента, строго на вашем устройств</td> | |||||
</tr> | |||||
<tr> | |||||
<td>3</td> | |||||
<td>Доступен в сети</td> | |||||
<td><a href="http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html">http://opengamestudio.org/pskov</a></td> | |||||
</tr> | |||||
<tr> | |||||
<td>4</td> | |||||
<td>Доступен без сети</td> | |||||
<td>Просто сохраните страницу <a href="http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html">Инструмент</a>, а затем откройте её локально</td> | |||||
</tr> | |||||
<tr> | |||||
<td>5</td> | |||||
<td>Осязаемый исходный код</td> | |||||
<td><strong>ПСКОВ</strong> умещается в один файл HTML</td> | |||||
</tr> | |||||
<tr> | |||||
<td>6</td> | |||||
<td>Принадлежит каждому</td> | |||||
<td><strong>ПСКОВ</strong> выпущен под лицензией <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a> (общественное достояние)</td> | |||||
</tr> | |||||
<tr> | |||||
<td>7</td> | |||||
<td>Работает десятилетия</td> | |||||
<td>Вы можете использовать <strong>ПСКОВ</strong> и на Windows 2000, и на Windows 2030*</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>* Windows 2030 не существует (ещё), мы просто указываем на тот факт, что <strong>ПСКОВ</strong> создан для работы на операционных системах, выпущенных в период 2000-2030 годов.</p> | |||||
<p></div><div class="contents"></p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Отсутствует</td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.02.deps.html">02. Зависимости</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||
@@ -0,0 +1,67 @@ | |||||
Title: Обучение: 01. Почему | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | |||||
Slug: education.01.why | |||||
Lang: ru | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| Отсутствует | [Обучение][index] | [02. Зависимости][next] | | |||||
</div><div class="contents"> | |||||
В этом документе мы кратко объясним причины создания **ПСКОВА**. | |||||
Ожидаемое время завершения: 5 минут. | |||||
**Содержание** | |||||
* [01. Почему](#why) | |||||
* [02. Возможности](#features) | |||||
<a name="why"/> | |||||
## 01. Почему | |||||
Возможно, вы знаете о существовании множества [генераторов статических сайтов][other-generators], зачем же создавать ещё один? Потому что **они не были достаточно хороши** для нужд [Студии Открытых Игр][ogs]. | |||||
Таков список **избыточных для нас функциональностей**: | |||||
| № | Избыточная функциональность | Детали | | |||||
|---|---|---| | |||||
| 1 | Изучение чего-либо, кроме HTML, CSS, JavaScript и Markdown | Этих технологий достаточно для создания чистого веб-сайта | | |||||
| 2 | На стороне сервера | Никто не должен иметь возможность выключить ваш сайт кроме вас | | |||||
| 3 | Установка | Отсутствие принудительных обновлений, о которых никто не просил | | |||||
| 4 | Осязаемый исходный код | Отсутствие миллионов файлов исходного кода | | |||||
<a name="features"/> | |||||
## 02. Возможности | |||||
Как следствие, таковы **возможности ПСКОВА**: | |||||
| № | Функциональность ПСКОВА | Детали | | |||||
|---|---|---| | |||||
| 1 | HTML, CSS, JavaScript и Markdown | То, что вы уже знаете | | |||||
| 2 | На стороне клиента | **ПСКОВ** является приложением JavaScript, исполняемым на стороне клиента, строго на вашем устройств | | |||||
| 3 | Доступен в сети | [http://opengamestudio.org/pskov][pskov] | | |||||
| 4 | Доступен без сети | Просто сохраните страницу [Инструмент][pskov], а затем откройте её локально | | |||||
| 5 | Осязаемый исходный код | **ПСКОВ** умещается в один файл HTML | | |||||
| 6 | Принадлежит каждому | **ПСКОВ** выпущен под лицензией [CC0][cc0] (общественное достояние)| | |||||
| 7 | Работает десятилетия | Вы можете использовать **ПСКОВ** и на Windows 2000, и на Windows 2030\* | | |||||
\* Windows 2030 не существует (ещё), мы просто указываем на тот факт, что **ПСКОВ** создан для работы на операционных системах, выпущенных в период 2000-2030 годов. | |||||
</div><div class="contents"> | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| Отсутствует | [Обучение][index] | [02. Зависимости][next] | | |||||
[index]: education.html | |||||
[next]: education.02.deps.html | |||||
[other-generators]: https://habr.com/ru/company/selectel/blog/236441/ | |||||
[ogs]: http://opengamestudio.org | |||||
[pskov]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html | |||||
[cc0]: https://creativecommons.org/share-your-work/public-domain/cc0/ |
@@ -0,0 +1,185 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/education.02.deps.html">EN</a> | |||||
<a href="../ru/education.02.deps.html">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
Обучение: 02. Зависимости | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.01.why.html">01. Почему</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.03.site.html">03. Сайт</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<p>В этом документы мы коснёмся зависимостей <strong>ПСКОВА</strong> и их установку.</p> | |||||
<p>Ожидаемое время завершения: 5 минут.</p> | |||||
<p><strong>Содержание</strong></p> | |||||
<ul> | |||||
<li><a href="#deps">01. Зависимости</a></li> | |||||
<li><a href="#details">02. Подробности</a></li> | |||||
</ul> | |||||
<p><a name="deps"/></p> | |||||
<h2 id="01">01. Зависимости</h2> | |||||
<p>Мы спроектировали <strong>ПСКОВ</strong> таким образом, чтобы он исполнялся в веб-браузере. Для запуска <strong>ПСКОВА</strong> вам понадобятся:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>№</th> | |||||
<th>Зависимость ПСКОВА</th> | |||||
<th>Подробности</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>1</td> | |||||
<td>Веб-браузер 2010-го года или новее</td> | |||||
<td><strong>ПСКОВ</strong> использует ECMAScript 5 (2009), любой современный веб-браузер должен подойти</td> | |||||
</tr> | |||||
<tr> | |||||
<td>2</td> | |||||
<td>К локальной файловой системе доступ</td> | |||||
<td><a href="http://opengamestudio.org/lfsa/ru">ЛФСД</a> предоставляет <strong>ПСКОВУ</strong> доступ к вашей локальной файловой системе. Установите ЛФСД, чтобы использовать <strong>ПСКОВ</strong>.</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><strong>Внимание</strong>: <a href="http://opengamestudio.org/lfsa/ru">установите ЛФСД</a>, чтобы использовать <strong>ПСКОВ</strong>.</p> | |||||
<p><a name="details"/></p> | |||||
<h2 id="02">02. Подробности</h2> | |||||
<p><strong>ПСКОВ</strong>:</p> | |||||
<ul> | |||||
<li>является приложением JavaScript на стороне клиента</li> | |||||
<li>не имеет прямого доступа к локальной файловой системе</li> | |||||
<li>использует <a href="http://opengamestudio.org/lfsa/ru">ЛФСД</a> для доступа к локальной файловой системе</li> | |||||
<li>использует <a href="https://github.com/showdownjs/showdown">Showdown</a> для перевода Markdown в HTML</li> | |||||
</ul> | |||||
<p><strong>ЛФСД</strong>:</p> | |||||
<ul> | |||||
<li>является крошечным веб-сервером, предоставляющим доступ к локальной файловой системе</li> | |||||
<li>использует порт 8000</li> | |||||
<li>занимает менее 200 строк кода, <a href="https://bitbucket.org/ogstudio/lfsa/src/default/lfsa_1.0.0.py">удостоверьтесь в этом</a> сами</li> | |||||
</ul> | |||||
<p></div><div class="contents"></p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.01.why.html">01. Почему</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.03.site.html">03. Сайт</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||
@@ -0,0 +1,64 @@ | |||||
Title: Обучение: 02. Зависимости | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | |||||
Slug: education.02.deps | |||||
Lang: ru | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [01. Почему][prev] | [Обучение][index] | [03. Сайт][next] | | |||||
</div><div class="contents"> | |||||
В этом документы мы коснёмся зависимостей **ПСКОВА** и их установку. | |||||
Ожидаемое время завершения: 5 минут. | |||||
**Содержание** | |||||
* [01. Зависимости](#deps) | |||||
* [02. Подробности](#details) | |||||
<a name="deps"/> | |||||
## 01. Зависимости | |||||
Мы спроектировали **ПСКОВ** таким образом, чтобы он исполнялся в веб-браузере. Для запуска **ПСКОВА** вам понадобятся: | |||||
| № | Зависимость ПСКОВА | Подробности | | |||||
|---|---|---| | |||||
| 1 | Веб-браузер 2010-го года или новее | **ПСКОВ** использует ECMAScript 5 (2009), любой современный веб-браузер должен подойти | | |||||
| 2 | К локальной файловой системе доступ | [ЛФСД][lfsa] предоставляет **ПСКОВУ** доступ к вашей локальной файловой системе. Установите ЛФСД, чтобы использовать **ПСКОВ**. | | |||||
**Внимание**: [установите ЛФСД][lfsa], чтобы использовать **ПСКОВ**. | |||||
<a name="details"/> | |||||
## 02. Подробности | |||||
**ПСКОВ**: | |||||
* является приложением JavaScript на стороне клиента | |||||
* не имеет прямого доступа к локальной файловой системе | |||||
* использует [ЛФСД][lfsa] для доступа к локальной файловой системе | |||||
* использует [Showdown][showdown] для перевода Markdown в HTML | |||||
**ЛФСД**: | |||||
* является крошечным веб-сервером, предоставляющим доступ к локальной файловой системе | |||||
* использует порт 8000 | |||||
* занимает менее 200 строк кода, [удостоверьтесь в этом][lfsa-src] сами | |||||
</div><div class="contents"> | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [01. Почему][prev] | [Обучение][index] | [03. Сайт][next] | | |||||
[index]: education.html | |||||
[prev]: education.01.why.html | |||||
[next]: education.03.site.html | |||||
[lfsa]: http://opengamestudio.org/lfsa/ru | |||||
[lfsa-src]: https://bitbucket.org/ogstudio/lfsa/src/default/lfsa_1.0.0.py | |||||
[showdown]: https://github.com/showdownjs/showdown |
@@ -0,0 +1,387 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/education.03.site.html">EN</a> | |||||
<a href="../ru/education.03.site.html">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
Обучение: 03. Сайт | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.02.deps.html">02. Зависимости</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.04.lang.html">04. Язык</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<p>В этом документы мы создадим простой статический сайт с двумя страницами.</p> | |||||
<p>Ожидаемое время завершения: 10 минут.</p> | |||||
<p><strong>Содержание</strong></p> | |||||
<ul> | |||||
<li><a href="#inspiration">01. Вдохновление</a></li> | |||||
<li><a href="#cfg">02. Изучите файл <code>pskov.cfg</code></a></li> | |||||
<li><a href="#item">03. Изучите файл <code>item.template</code></a></li> | |||||
<li><a href="#md">04. Изучите файлы <code>about.md</code> и <code>cv.md</code></a></li> | |||||
<li><a href="#lfsa">05. Запустите ЛФСД</a></li> | |||||
<li><a href="#gen">06. Сгенерируйте сайт</a></li> | |||||
<li><a href="#summary">07. Итог</a></li> | |||||
</ul> | |||||
<p><a name="inspiration"/></p> | |||||
<h2 id="01">01. Вдохновление</h2> | |||||
<p>Представьте, что вы являетесь выдающимся русским живописцем Валентином Серовым. Каждый раз, когда кто-либо хочет узнать о вас, он идёт на <a href="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">Википедию</a>. Сегодня утром вы просыпаетесь раньше обычного с отчётливым желанием создать свой собственный веб-сайт.</p> | |||||
<p>Вы приступаете к созданию следующих страницы:</p> | |||||
<ul> | |||||
<li>About me</li> | |||||
<li>Curriculum vitae (CV)</li> | |||||
</ul> | |||||
<p>Несколько позже в <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages">директории вашего сайта</a> у вас оказываются следующие файлы:</p> | |||||
<ul> | |||||
<li>pskov.cfg</li> | |||||
<li>item.template</li> | |||||
<li>about.md</li> | |||||
<li>cv.md</li> | |||||
</ul> | |||||
<p>Давайте взглянем на их содержимое.</p> | |||||
<p><a name="cfg"/></p> | |||||
<h2 id="02pskovcfg">02. Изучите файл <code>pskov.cfg</code></h2> | |||||
<p>Файл <code>pskov.cfg</code> содержит следующее:</p> | |||||
<pre><code>input = . | |||||
item = item.template | |||||
</code></pre> | |||||
<p><code>pskov.cfg</code> является <a href="https://ru.wikipedia.org/wiki/.ini">файлом настроек</a> со следующими ключами:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>input</code></td> | |||||
<td>Указывает на директорию с файлом, на который ссылается ключ <code>item</code></td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>item</code></td> | |||||
<td>Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>В нашем случае файл <code>item.template</code> расположен рядом с <code>pskov.cfg</code>, поэтому мы используем <code>.</code> для обозначения текущей директории.</p> | |||||
<p><a name="item"/></p> | |||||
<h2 id="03itemtemplate">03. Изучите файл <code>item.template</code></h2> | |||||
<p>Файл <code>item.template</code> содержит следующее:</p> | |||||
<pre><code><!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</style> | |||||
<title>Serov</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong>Serov</strong> | |||||
<a href="about.html">About me</a> | |||||
<a href="cv.html">CV</a> | |||||
</div> | |||||
<center> | |||||
<h1>PSKOV_ITEM_TITLE</h1> | |||||
<div class="contents"> | |||||
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> | |||||
</html> | |||||
</code></pre> | |||||
<p><strong>Внимание</strong>: стиль схлопнут для краткости.</p> | |||||
<p>Как видите, <code>item.template</code> представляет из себя обычный файл HTML с двумя константами <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_TITLE</code></td> | |||||
<td>Значение ключа <code>Title</code> из файла Markdown страницы</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_CONTENTS</code></td> | |||||
<td>Предоставляет содержимое HTML, сгенерированное из Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><strong>Замечания</strong>:</p> | |||||
<ul> | |||||
<li>другие константы <strong>ПСКОВА</strong> описаны позже</li> | |||||
<li>файл Markdown страницы описан ниже</li> | |||||
</ul> | |||||
<p><a name="md"/></p> | |||||
<h2 id="04aboutmdcvmd">04. Изучите файлы <code>about.md</code> и <code>cv.md</code></h2> | |||||
<p>Файл <code>about.md</code> содержит следующее:</p> | |||||
<pre><code> Title: About me | |||||
Slug: about | |||||
Hi, my name is Valentin Serov. Here's my self-portrait: | |||||
![Valentin Serov self-portrait][serov-portrait] | |||||
- - - - Схлопнуто для краткости - - - - | |||||
Have a look at my [CV][cv] now. | |||||
[serov]: https://en.wikipedia.org/wiki/Valentin_Serov | |||||
[revolution]: https://en.wikipedia.org/wiki/Russian_Revolution | |||||
[serov-portrait]: myself.jpg | |||||
[serov-work]: mywork.jpg | |||||
[girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches | |||||
[pskov]: http://opengamestudio.org/pskov | |||||
[cv]: cv.html | |||||
</code></pre> | |||||
<p><code>about.md</code> начинается с так называемого заголовка:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ заголовка</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>Title</code></td> | |||||
<td>Предоставляет значение для константы <code>PSKOV_ITEM_TITLE</code> во время генерации HTML из Markdown</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>Slug</code></td> | |||||
<td>Сообщает <strong>ПСКОВУ</strong> о том, что этот файл должен быть сохранён как <code><slug>.html</code></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>В остальном содержимое <code>about.md</code> ничем не отличается от любых других файлов Markdown.</p> | |||||
<p><strong>Внимание</strong>: ссылка на страницу <code>cv</code> указана как <code>cv.html</code>, не <code>cv.md</code></p> | |||||
<p>Файл <code>cv.md</code> содержит следующее:</p> | |||||
<pre><code> Title: Curriculum vitae | |||||
Slug: cv | |||||
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! | |||||
| Key | Value | | |||||
|---|---| | |||||
| Name | Valentin Serov | | |||||
| Age | 46 | | |||||
| Marital status | Married | | |||||
| Country | Russian Empire | | |||||
| Alma mater | Imperial Academy of Arts | | |||||
| Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) | | |||||
</code></pre> | |||||
<p>Как видите, в <code>cv.md</code> нет ничего нового за исключением таблицы Markdown.</p> | |||||
<p><a name="lfsa"/></p> | |||||
<h2 id="05">05. Запустите ЛФСД</h2> | |||||
<p>Запустите <a href="http://opengamestudio.org/lfsa/ru">ЛФСД</a> с указанием директории, содержащей только что рассмотренные файлы:</p> | |||||
<pre><code>$ /путь/до/lfsa_1.0.0.py /путь/до/директории/01.TwoPages | |||||
</code></pre> | |||||
<p>Вы должны увидеть примерно такой вывод:</p> | |||||
<pre><code>DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages' | |||||
PORT: '8000' | |||||
</code></pre> | |||||
<p><a name="gen"/></p> | |||||
<h2 id="06">06. Сгенерируйте сайт</h2> | |||||
<p>Настало время сгенерировать свой собственный веб-сайт:</p> | |||||
<ul> | |||||
<li>Перейдите на страницу <a href="http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html">Инструмент</a></li> | |||||
<li>Убедитесь в том, что:<ul> | |||||
<li><code>Путь</code> указывает на нужную директорию</li> | |||||
<li><code>Входящая директория</code> и <code>Шаблон элемента</code> содержат значения из <code>pskov.cfg</code></li></ul></li> | |||||
<li>Нажмите кнопку <code>Генерировать</code> для генерации файлов HTML рядом с файлами Markdown</li> | |||||
<li>Откройте сгенерированный файл <code>about.html</code> из директории сайта</li> | |||||
<li>Перед вами ваш собственный веб-сайт, запущенный локально</li> | |||||
</ul> | |||||
<p><a name="summary"/></p> | |||||
<h2 id="07">07. Итог</h2> | |||||
<p>Вы успешно сгенерировали веб-сайт с двумя страницами. <a href="http://opengamestudio.org/pskov/sample/01.TwoPages/about.html">Проверьте результат</a>.</p> | |||||
<p>Представлены константы <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_TITLE</code></td> | |||||
<td>Значение ключа <code>Title</code> из файла Markdown страницы</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_CONTENTS</code></td> | |||||
<td>Предоставляет содержимое HTML, сгенерированное из Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Представлены ключи настроек:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>input</code></td> | |||||
<td>Указывает на директорию с файлом, на который ссылается ключ <code>item</code></td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>item</code></td> | |||||
<td>Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Представлены ключи заголовка:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ заголовка</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>Title</code></td> | |||||
<td>Предоставляет значение для константы <code>PSKOV_ITEM_TITLE</code> во время генерации HTML из Markdown</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>Slug</code></td> | |||||
<td>Сообщает <strong>ПСКОВУ</strong> о том, что этот файл должен быть сохранён как <code><slug>.html</code></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.02.deps.html">02. Зависимости</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.04.lang.html">04. Язык</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||
@@ -0,0 +1,247 @@ | |||||
Title: Обучение: 03. Сайт | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | |||||
Slug: education.03.site | |||||
Lang: ru | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [02. Зависимости][prev] | [Обучение][index] | [04. Язык][next] | | |||||
</div><div class="contents"> | |||||
В этом документы мы создадим простой статический сайт с двумя страницами. | |||||
Ожидаемое время завершения: 10 минут. | |||||
**Содержание** | |||||
* [01. Вдохновление](#inspiration) | |||||
* [02. Изучите файл `pskov.cfg`](#cfg) | |||||
* [03. Изучите файл `item.template`](#item) | |||||
* [04. Изучите файлы `about.md` и `cv.md`](#md) | |||||
* [05. Запустите ЛФСД](#lfsa) | |||||
* [06. Сгенерируйте сайт](#gen) | |||||
* [07. Итог](#summary) | |||||
<a name="inspiration"/> | |||||
## 01. Вдохновление | |||||
Представьте, что вы являетесь выдающимся русским живописцем Валентином Серовым. Каждый раз, когда кто-либо хочет узнать о вас, он идёт на [Википедию][serov]. Сегодня утром вы просыпаетесь раньше обычного с отчётливым желанием создать свой собственный веб-сайт. | |||||
Вы приступаете к созданию следующих страницы: | |||||
* About me | |||||
* Curriculum vitae (CV) | |||||
Несколько позже в [директории вашего сайта][01-files] у вас оказываются следующие файлы: | |||||
* pskov.cfg | |||||
* item.template | |||||
* about.md | |||||
* cv.md | |||||
Давайте взглянем на их содержимое. | |||||
<a name="cfg"/> | |||||
## 02. Изучите файл `pskov.cfg` | |||||
Файл `pskov.cfg` содержит следующее: | |||||
``` | |||||
input = . | |||||
item = item.template | |||||
``` | |||||
`pskov.cfg` является [файлом настроек][ini-file] со следующими ключами: | |||||
| Ключ | Описание | | |||||
|---|---| | |||||
| `input` | Указывает на директорию с файлом, на который ссылается ключ `item` | | |||||
| `item` | Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown | | |||||
В нашем случае файл `item.template` расположен рядом с `pskov.cfg`, поэтому мы используем `.` для обозначения текущей директории. | |||||
<a name="item"/> | |||||
## 03. Изучите файл `item.template` | |||||
Файл `item.template` содержит следующее: | |||||
``` | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</style> | |||||
<title>Serov</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong>Serov</strong> | |||||
<a href="about.html">About me</a> | |||||
<a href="cv.html">CV</a> | |||||
</div> | |||||
<center> | |||||
<h1>PSKOV_ITEM_TITLE</h1> | |||||
<div class="contents"> | |||||
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> | |||||
</html> | |||||
``` | |||||
**Внимание**: стиль схлопнут для краткости. | |||||
Как видите, `item.template` представляет из себя обычный файл HTML с двумя константами **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_ITEM_TITLE` | Значение ключа `Title` из файла Markdown страницы | | |||||
| `PSKOV_ITEM_CONTENTS` | Предоставляет содержимое HTML, сгенерированное из Markdown | | |||||
**Замечания**: | |||||
* другие константы **ПСКОВА** описаны позже | |||||
* файл Markdown страницы описан ниже | |||||
<a name="md"/> | |||||
## 04. Изучите файлы `about.md` и `cv.md` | |||||
Файл `about.md` содержит следующее: | |||||
``` | |||||
Title: About me | |||||
Slug: about | |||||
Hi, my name is Valentin Serov. Here's my self-portrait: | |||||
![Valentin Serov self-portrait][serov-portrait] | |||||
- - - - Схлопнуто для краткости - - - - | |||||
Have a look at my [CV][cv] now. | |||||
[serov]: https://en.wikipedia.org/wiki/Valentin_Serov | |||||
[revolution]: https://en.wikipedia.org/wiki/Russian_Revolution | |||||
[serov-portrait]: myself.jpg | |||||
[serov-work]: mywork.jpg | |||||
[girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches | |||||
[pskov]: http://opengamestudio.org/pskov | |||||
[cv]: cv.html | |||||
``` | |||||
`about.md` начинается с так называемого заголовка: | |||||
| Ключ заголовка | Описание | | |||||
|---|---| | |||||
| `Title` | Предоставляет значение для константы `PSKOV_ITEM_TITLE` во время генерации HTML из Markdown | | |||||
| `Slug` | Сообщает **ПСКОВУ** о том, что этот файл должен быть сохранён как `<slug>.html` | | |||||
В остальном содержимое `about.md` ничем не отличается от любых других файлов Markdown. | |||||
**Внимание**: ссылка на страницу `cv` указана как `cv.html`, не `cv.md` | |||||
Файл `cv.md` содержит следующее: | |||||
``` | |||||
Title: Curriculum vitae | |||||
Slug: cv | |||||
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! | |||||
| Key | Value | | |||||
|---|---| | |||||
| Name | Valentin Serov | | |||||
| Age | 46 | | |||||
| Marital status | Married | | |||||
| Country | Russian Empire | | |||||
| Alma mater | Imperial Academy of Arts | | |||||
| Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) | | |||||
``` | |||||
Как видите, в `cv.md` нет ничего нового за исключением таблицы Markdown. | |||||
<a name="lfsa"/> | |||||
## 05. Запустите ЛФСД | |||||
Запустите [ЛФСД][lfsa] с указанием директории, содержащей только что рассмотренные файлы: | |||||
``` | |||||
$ /путь/до/lfsa_1.0.0.py /путь/до/директории/01.TwoPages | |||||
``` | |||||
Вы должны увидеть примерно такой вывод: | |||||
``` | |||||
DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages' | |||||
PORT: '8000' | |||||
``` | |||||
<a name="gen"/> | |||||
## 06. Сгенерируйте сайт | |||||
Настало время сгенерировать свой собственный веб-сайт: | |||||
* Перейдите на страницу [Инструмент][tool] | |||||
* Убедитесь в том, что: | |||||
* `Путь` указывает на нужную директорию | |||||
* `Входящая директория` и `Шаблон элемента` содержат значения из `pskov.cfg` | |||||
* Нажмите кнопку `Генерировать` для генерации файлов HTML рядом с файлами Markdown | |||||
* Откройте сгенерированный файл `about.html` из директории сайта | |||||
* Перед вами ваш собственный веб-сайт, запущенный локально | |||||
<a name="summary"/> | |||||
## 07. Итог | |||||
Вы успешно сгенерировали веб-сайт с двумя страницами. [Проверьте результат][01-sample]. | |||||
Представлены константы **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_ITEM_TITLE` | Значение ключа `Title` из файла Markdown страницы | | |||||
| `PSKOV_ITEM_CONTENTS` | Предоставляет содержимое HTML, сгенерированное из Markdown | | |||||
Представлены ключи настроек: | |||||
| Ключ | Описание | | |||||
|---|---| | |||||
| `input` | Указывает на директорию с файлом, на который ссылается ключ `item` | | |||||
| `item` | Указывает на файл с шаблоном HTML, который используется для генерации файлов HTML из Markdown | | |||||
Представлены ключи заголовка: | |||||
| Ключ заголовка | Описание | | |||||
|---|---| | |||||
| `Title` | Предоставляет значение для константы `PSKOV_ITEM_TITLE` во время генерации HTML из Markdown | | |||||
| `Slug` | Сообщает **ПСКОВУ** о том, что этот файл должен быть сохранён как `<slug>.html` | | |||||
</div><div class="contents"> | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [02. Зависимости][prev] | [Обучение][index] | [04. Язык][next] | | |||||
[index]: education.html | |||||
[prev]: education.02.deps.html | |||||
[next]: education.04.lang.html | |||||
[01-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages | |||||
[01-sample]: http://opengamestudio.org/pskov/sample/01.TwoPages/about.html | |||||
[ini-file]: https://ru.wikipedia.org/wiki/.ini | |||||
[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 | |||||
[lfsa]: http://opengamestudio.org/lfsa/ru | |||||
[tool]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html |
@@ -0,0 +1,281 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/education.04.lang.html">EN</a> | |||||
<a href="../ru/education.04.lang.html">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
Обучение: 04. Язык | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.03.site.html">03. Сайт</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.05.blog.html">05. Блог</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<p>В этом документе мы добавим выбор языка.</p> | |||||
<p>Ожидаемое время завершения: 10 минут.</p> | |||||
<p><strong>Содержание</strong></p> | |||||
<ul> | |||||
<li><a href="#localization">01. Локализация</a></li> | |||||
<li><a href="#cfg">02. Изучите файл <code>pskov.cfg</code></a></li> | |||||
<li><a href="#item">03. Изучите файлы шаблонов</a></li> | |||||
<li><a href="#md">04. Изучите файлы Markdown</a></li> | |||||
<li><a href="#gen">05. Запустите ЛФСД и сгенерируйте сайт</a></li> | |||||
<li><a href="#summary">06. Итог</a></li> | |||||
</ul> | |||||
<p><a name="localization"/></p> | |||||
<h2 id="01">01. Локализация</h2> | |||||
<p>Теперь, когда у вас есть собственный веб-сайт на английском, вы задумываетесь о русской версии, ведь вы же всё-таки русский!</p> | |||||
<p>Вы создаёте директорию со <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/02.Language">следующей структурой файлов</a>:</p> | |||||
<ul> | |||||
<li><code>pskov.cfg</code></li> | |||||
<li><code>en/item.template</code></li> | |||||
<li><code>en/about.md</code></li> | |||||
<li><code>en/cv.md</code></li> | |||||
<li><code>ru/item.template</code></li> | |||||
<li><code>ru/about.md</code></li> | |||||
<li><code>ru/cv.md</code></li> | |||||
</ul> | |||||
<p>Давайте взглянем на содержимое этих файлов.</p> | |||||
<p><a name="cfg"/></p> | |||||
<h2 id="02pskovcfg">02. Изучите файл <code>pskov.cfg</code></h2> | |||||
<p>Файл <code>pskov.cfg</code> содержит следующее:</p> | |||||
<pre><code>input = en;ru | |||||
item = item.template | |||||
</code></pre> | |||||
<p>Как видите, <code>input</code> может принимать несколько директорий, разделённых символом <code>;</code>. <strong>ПСКОВ</strong> обработает каждую указанную директорию так же, как и ранее.</p> | |||||
<p>В нашем случае каждая из директорий - <code>en/</code> и <code>ru/</code> - содержит собственный шаблон <code>item.template</code>.</p> | |||||
<p><a name="item"/></p> | |||||
<h2 id="03">03. Изучите файлы шаблонов</h2> | |||||
<ul> | |||||
<li><p>Содержимое <code>en/item.template</code>:</p> | |||||
<pre><code>- - - - Схлопнуто для краткости - - - - | |||||
<title>Serov</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong>Serov</strong> | |||||
<a href="about.html">About me</a> | |||||
<a href="cv.html">CV</a> | |||||
<div id="lang"> | |||||
<a href="../en/PSKOV_ITEM_URL">EN</a> | |||||
<a href="../ru/PSKOV_ITEM_URL">RU</a> | |||||
</div> | |||||
</div> | |||||
<center> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</code></pre></li> | |||||
<li><p>Содержимое <code>ru/item.template</code>:</p> | |||||
<pre><code>- - - - Схлопнуто для краткости - - - - | |||||
<title>Серов</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong>Серов</strong> | |||||
<a href="about.html">Обо мне</a> | |||||
<a href="cv.html">Резюме</a> | |||||
<div id="lang"> | |||||
<a href="../en/PSKOV_ITEM_URL">EN</a> | |||||
<a href="../ru/PSKOV_ITEM_URL">RU</a> | |||||
</div> | |||||
</div> | |||||
<center> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</code></pre></li> | |||||
</ul> | |||||
<p><strong>Внимание</strong>: начало и конец схлопнуты для краткости.</p> | |||||
<p>Как видите, <code>en/item.template</code> и <code>ru/item.template</code> очень похожи на <a href="education.03.site.html">виденный ранее</a> <code>item.template</code>.</p> | |||||
<p>Изменения следующие:</p> | |||||
<ul> | |||||
<li>использование секции <code><div id="lang">...</div></code> для отображения выбора языка</li> | |||||
<li>локализация заголовков на Английском и Русском языках</li> | |||||
</ul> | |||||
<p>Выбор языка использует следующую новую константу <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_URL</code></td> | |||||
<td>Предоставляет имя файла генерируемой страницы</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Использование <code>PSKOV_ITEM_URL</code> даёт вам поддержку стольких языков, сколько пожелаете.</p> | |||||
<p><a name="md"/></p> | |||||
<h2 id="04markdown">04. Изучите файлы Markdown</h2> | |||||
<p>Файлы <code>en/about.md</code> и <code>en/cv.md</code> выглядят почти идентично <a href="education.03.site.html">виденным ранее</a>. <code>ru/about.md</code> и <code>ru/cv.md</code> представляют собой русские версии соответствующих английских страниц.</p> | |||||
<p>Например, <code>ru/cv.md</code> содержит:</p> | |||||
<pre><code> Title: Резюме | |||||
Slug: cv | |||||
Здесь вы можете увидеть моё резюме в том случае, если мои произведения всё ещё вас интересуют. Я использовал современный подход ИТ для структурирования своего резюме в виде пар ключ-значение словаря (карты). Наслаждайтесь! | |||||
| Ключ | Значение | | |||||
|---|---| | |||||
| Имя | Валентин Серов | | |||||
| Возраст | 46 | | |||||
| Семейное положение | Женат | | |||||
| Страна | Российская Империя | | |||||
| Учёба | Императорская Академия художеств | | |||||
| Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) | | |||||
</code></pre> | |||||
<p><strong>Внимание</strong>: русская страница использует точно такое же значение <code>Slug</code>, как и английская страница.</p> | |||||
<p><a name="gen"/></p> | |||||
<h2 id="05">05. Запустите ЛФСД и сгенерируйте сайт</h2> | |||||
<p>Запустите <a href="http://opengamestudio.org/lfsa/ru">ЛФСД</a> с указанием директории, содержащей только что рассмотренные файлы:</p> | |||||
<pre><code>$ /путь/до/lfsa_1.0.0.py /путь/до/директории/02.Language | |||||
</code></pre> | |||||
<p>Сгенерируйте сайт:</p> | |||||
<ul> | |||||
<li>Перейдите на страницу <a href="http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html">Инструмент</a></li> | |||||
<li>Нажмите кнопку <code>Генерировать</code></li> | |||||
<li>Откройте сгенерированный файл <code>en/about.html</code> или <code>ru/about.html</code> из директории сайта</li> | |||||
<li>Переключите язык, чтобы убедиться в корректной работе</li> | |||||
</ul> | |||||
<p><a name="summary"/></p> | |||||
<h2 id="06">06. Итог</h2> | |||||
<p>Вы успешно добавили выбор языка. <a href="http://opengamestudio.org/pskov/sample/02.Language/ru/about.html">Проверьте результат</a>.</p> | |||||
<p>Представлены константы <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_URL</code></td> | |||||
<td>Предоставляет имя файла генерируемой страницы</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.03.site.html">03. Сайт</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td><a href="education.05.blog.html">05. Блог</a></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||
@@ -0,0 +1,187 @@ | |||||
Title: Обучение: 04. Язык | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | |||||
Slug: education.04.lang | |||||
Lang: ru | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [03. Сайт][prev] | [Обучение][index] | [05. Блог][next] | | |||||
</div><div class="contents"> | |||||
В этом документе мы добавим выбор языка. | |||||
Ожидаемое время завершения: 10 минут. | |||||
**Содержание** | |||||
* [01. Локализация](#localization) | |||||
* [02. Изучите файл `pskov.cfg`](#cfg) | |||||
* [03. Изучите файлы шаблонов](#item) | |||||
* [04. Изучите файлы Markdown](#md) | |||||
* [05. Запустите ЛФСД и сгенерируйте сайт](#gen) | |||||
* [06. Итог](#summary) | |||||
<a name="localization"/> | |||||
## 01. Локализация | |||||
Теперь, когда у вас есть собственный веб-сайт на английском, вы задумываетесь о русской версии, ведь вы же всё-таки русский! | |||||
Вы создаёте директорию со [следующей структурой файлов][02-files]: | |||||
* `pskov.cfg` | |||||
* `en/item.template` | |||||
* `en/about.md` | |||||
* `en/cv.md` | |||||
* `ru/item.template` | |||||
* `ru/about.md` | |||||
* `ru/cv.md` | |||||
Давайте взглянем на содержимое этих файлов. | |||||
<a name="cfg"/> | |||||
## 02. Изучите файл `pskov.cfg` | |||||
Файл `pskov.cfg` содержит следующее: | |||||
``` | |||||
input = en;ru | |||||
item = item.template | |||||
``` | |||||
Как видите, `input` может принимать несколько директорий, разделённых символом `;`. **ПСКОВ** обработает каждую указанную директорию так же, как и ранее. | |||||
В нашем случае каждая из директорий - `en/` и `ru/` - содержит собственный шаблон `item.template`. | |||||
<a name="item"/> | |||||
## 03. Изучите файлы шаблонов | |||||
* Содержимое `en/item.template`: | |||||
``` | |||||
- - - - Схлопнуто для краткости - - - - | |||||
<title>Serov</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong>Serov</strong> | |||||
<a href="about.html">About me</a> | |||||
<a href="cv.html">CV</a> | |||||
<div id="lang"> | |||||
<a href="../en/PSKOV_ITEM_URL">EN</a> | |||||
<a href="../ru/PSKOV_ITEM_URL">RU</a> | |||||
</div> | |||||
</div> | |||||
<center> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
``` | |||||
* Содержимое `ru/item.template`: | |||||
``` | |||||
- - - - Схлопнуто для краткости - - - - | |||||
<title>Серов</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong>Серов</strong> | |||||
<a href="about.html">Обо мне</a> | |||||
<a href="cv.html">Резюме</a> | |||||
<div id="lang"> | |||||
<a href="../en/PSKOV_ITEM_URL">EN</a> | |||||
<a href="../ru/PSKOV_ITEM_URL">RU</a> | |||||
</div> | |||||
</div> | |||||
<center> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
``` | |||||
**Внимание**: начало и конец схлопнуты для краткости. | |||||
Как видите, `en/item.template` и `ru/item.template` очень похожи на [виденный ранее][prev] `item.template`. | |||||
Изменения следующие: | |||||
* использование секции `<div id="lang">...</div>` для отображения выбора языка | |||||
* локализация заголовков на Английском и Русском языках | |||||
Выбор языка использует следующую новую константу **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_ITEM_URL` | Предоставляет имя файла генерируемой страницы | | |||||
Использование `PSKOV_ITEM_URL` даёт вам поддержку стольких языков, сколько пожелаете. | |||||
<a name="md"/> | |||||
## 04. Изучите файлы Markdown | |||||
Файлы `en/about.md` и `en/cv.md` выглядят почти идентично [виденным ранее][prev]. `ru/about.md` и `ru/cv.md` представляют собой русские версии соответствующих английских страниц. | |||||
Например, `ru/cv.md` содержит: | |||||
``` | |||||
Title: Резюме | |||||
Slug: cv | |||||
Здесь вы можете увидеть моё резюме в том случае, если мои произведения всё ещё вас интересуют. Я использовал современный подход ИТ для структурирования своего резюме в виде пар ключ-значение словаря (карты). Наслаждайтесь! | |||||
| Ключ | Значение | | |||||
|---|---| | |||||
| Имя | Валентин Серов | | |||||
| Возраст | 46 | | |||||
| Семейное положение | Женат | | |||||
| Страна | Российская Империя | | |||||
| Учёба | Императорская Академия художеств | | |||||
| Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) | | |||||
``` | |||||
**Внимание**: русская страница использует точно такое же значение `Slug`, как и английская страница. | |||||
<a name="gen"/> | |||||
## 05. Запустите ЛФСД и сгенерируйте сайт | |||||
Запустите [ЛФСД][lfsa] с указанием директории, содержащей только что рассмотренные файлы: | |||||
``` | |||||
$ /путь/до/lfsa_1.0.0.py /путь/до/директории/02.Language | |||||
``` | |||||
Сгенерируйте сайт: | |||||
* Перейдите на страницу [Инструмент][tool] | |||||
* Нажмите кнопку `Генерировать` | |||||
* Откройте сгенерированный файл `en/about.html` или `ru/about.html` из директории сайта | |||||
* Переключите язык, чтобы убедиться в корректной работе | |||||
<a name="summary"/> | |||||
## 06. Итог | |||||
Вы успешно добавили выбор языка. [Проверьте результат][02-sample]. | |||||
Представлены константы **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_ITEM_URL` | Предоставляет имя файла генерируемой страницы | | |||||
</div><div class="contents"> | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [03. Сайт][prev] | [Обучение][index] | [05. Блог][next] | | |||||
[index]: education.html | |||||
[prev]: education.03.site.html | |||||
[next]: education.05.blog.html | |||||
[02-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/02.Language | |||||
[02-sample]: http://opengamestudio.org/pskov/sample/02.Language/ru/about.html | |||||
[lfsa]: http://opengamestudio.org/lfsa/ru | |||||
[tool]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html |
@@ -0,0 +1,712 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/education.05.blog.html">EN</a> | |||||
<a href="../ru/education.05.blog.html">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
Обучение: 05. Блог | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.04.lang.html">04. Язык</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td>Отсутствует</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p></div><div class="contents"></p> | |||||
<p>В этом документе мы создадим "динамические" страницы блога.</p> | |||||
<p>Ожидаемое время завершения: 20 минут.</p> | |||||
<p><strong>Содержание</strong></p> | |||||
<ul> | |||||
<li><a href="#blog">01. Блог</a></li> | |||||
<li><a href="#cfg">02. Изучите файл <code>pskov.cfg</code></a></li> | |||||
<li><a href="#item">03. Изучите шаблоны элементов</a></li> | |||||
<li><a href="#preview">04. Изучите шаблоны предпросмотров</a></li> | |||||
<li><a href="#index">05. Изучите шаблоны страниц с предпросмотрами</a></li> | |||||
<li><a href="#pagination">06. Изучите постраничные шаблоны</a></li> | |||||
<li><a href="#md">07. Изучите файлы Markdown</a></li> | |||||
<li><a href="#gen">08. Запустите ЛФСД и сгенерируйте сайт</a></li> | |||||
<li><a href="#summary">09. Итог</a></li> | |||||
</ul> | |||||
<p><a name="blog"/></p> | |||||
<h2 id="01">01. Блог</h2> | |||||
<p>Итак, у вас есть веб-сайт на Английском и Русском языках. Вы начинаете ощущать желание регулярно делиться своими мыслями с миром в виде заметок блога.</p> | |||||
<p>Вы создаёте директорию со <a href="https://github.com/OGStudio/site-pskov-sample/tree/master/03.Blog">следующей структурой файлов</a>:</p> | |||||
<ul> | |||||
<li><code>pskov.cfg</code></li> | |||||
<li><code>en/blog/</code><ul> | |||||
<li><code>item.template</code></li> | |||||
<li><code>index.template</code></li> | |||||
<li><code>preview.template</code></li> | |||||
<li><code>pagination.template</code></li> | |||||
<li><code>pagination.prev.template</code></li> | |||||
<li><code>pagination.next.template</code></li> | |||||
<li><code>1885.md</code></li> | |||||
<li><code>1886.01.md</code></li> | |||||
<li><code>1886.02.md</code></li> | |||||
<li><code>1887.01.md</code></li> | |||||
<li><code>1887.02.md</code></li> | |||||
<li><code>1888.md</code></li> | |||||
<li><code>1896.md</code></li> | |||||
<li><code>1899.md</code></li></ul></li> | |||||
<li><code>en/page/</code><ul> | |||||
<li><code>item.template</code></li> | |||||
<li><code>about.md</code></li> | |||||
<li><code>cv.md</code></li></ul></li> | |||||
<li><code>ru/blog/</code><ul> | |||||
<li><code>item.template</code></li> | |||||
<li><code>index.template</code></li> | |||||
<li><code>preview.template</code></li> | |||||
<li><code>pagination.template</code></li> | |||||
<li><code>pagination.prev.template</code></li> | |||||
<li><code>pagination.next.template</code></li> | |||||
<li><code>1885.md</code></li> | |||||
<li><code>1886.01.md</code></li> | |||||
<li><code>1886.02.md</code></li> | |||||
<li><code>1887.01.md</code></li> | |||||
<li><code>1887.02.md</code></li> | |||||
<li><code>1888.md</code></li> | |||||
<li><code>1896.md</code></li> | |||||
<li><code>1899.md</code></li></ul></li> | |||||
<li><code>ru/page/</code><ul> | |||||
<li><code>item.template</code></li> | |||||
<li><code>about.md</code></li> | |||||
<li><code>cv.md</code></li></ul></li> | |||||
</ul> | |||||
<p>Давайте взглянем на содержимое этих файлов.</p> | |||||
<p><a name="cfg"/></p> | |||||
<h2 id="02pskovcfg">02. Изучите файл <code>pskov.cfg</code></h2> | |||||
<p>Файл <code>pskov.cfg</code> содержит следующее:</p> | |||||
<pre><code>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 | |||||
</code></pre> | |||||
<p>Вы уже встречались с ключами <code>input</code> и <code>item</code>. Рассмотрим остальные:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>preview</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых <code>previewSize</code> (приблизительно) символов для каждого файла Markdown</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>index</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>paginationPrev</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>paginationNext</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>paginationPrevNext</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewSize</code></td> | |||||
<td>Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewEnding</code></td> | |||||
<td>Строка для добавления в конец каждого предпросмотра</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewsPerPage</code></td> | |||||
<td>Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewsPageBaseName</code></td> | |||||
<td>Базовое имя файла для страниц с предпросмотрами</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>В нашем случае:</p> | |||||
<ul> | |||||
<li>мы ограничиваем предпросмотр <code>200</code> символами (приблизительно)</li> | |||||
<li>мы используем строку <code>. . .</code> в конце каждого предпросмотра</li> | |||||
<li>страницы с предпросмотрами вмещают максимум <code>3</code> предпросмотра</li> | |||||
<li>страницы с предпросмотрами будут сохранены как <code>index.html</code>, <code>index2.html</code>, <code>index3.html</code> и т.д.</li> | |||||
</ul> | |||||
<p><a name="item"/></p> | |||||
<h2 id="03">03. Изучите шаблоны элементов</h2> | |||||
<ul> | |||||
<li><p>Содержимое <code>en/blog/item.template</code>:</p> | |||||
<pre><code>- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</code></pre></li> | |||||
<li><p>Содержимое <code>ru/blog/item.template</code>:</p> | |||||
<pre><code>- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</code></pre></li> | |||||
</ul> | |||||
<p><strong>Внимание</strong>: начало и конец схлопнуты для краткости.</p> | |||||
<p>Как видите, оба файла выглядят практически так же, как и файлы <code>item.template</code>, рассмотренные <a href="education.04.lang.html">ранее</a>.</p> | |||||
<p>Изменения следующие:</p> | |||||
<ul> | |||||
<li>новые URL страниц в директории <code>page</code> и первой страницы с предпросмотрами в директории <code>blog</code></li> | |||||
<li>заголовок используется внутри секции <code>contents</code> в качестве ссылки на полную заметку блога</li> | |||||
<li>дата используется для подчёркивания временной зависимости между заметками блога</li> | |||||
</ul> | |||||
<p>Дату мы получаем из константы <code>PSKOV_ITEM_DATE</code>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_DATE</code></td> | |||||
<td>Значение ключа <code>Date</code> файла Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><a name="preview"/></p> | |||||
<h2 id="04">04. Изучите шаблоны предпросмотров</h2> | |||||
<ul> | |||||
<li><p>Содержимое <code>en/blog/preview.template</code>:</p> | |||||
<pre><code><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> | |||||
</code></pre></li> | |||||
<li><p>Содержимое <code>ru/blog/preview.template</code>:</p> | |||||
<pre><code><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> | |||||
</code></pre></li> | |||||
</ul> | |||||
<p>У предпросмотров нет <code><head></code>, <code><body></code> и прочих полностраничных тэгов HTML. Предпросмотры являются секциями, вставляемыми в страницы с предпросмотрами.</p> | |||||
<p>Сам предпросмотр мы получаем из константы <code>PSKOV_PREVIEW</code>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_PREVIEW</code></td> | |||||
<td>Предоставляет содержимое файла Markdown, ограниченное <code>previewSize</code> символами (приблизительно)</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><a name="index"/></p> | |||||
<h2 id="05">05. Изучите шаблоны страниц с предпросмотрами</h2> | |||||
<ul> | |||||
<li><p>Содержимое <code>en/blog/index.template</code>:</p> | |||||
<pre><code>- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</code></pre></li> | |||||
<li><p>Содержимое <code>ru/blog/index.template</code>:</p> | |||||
<pre><code>- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
</code></pre></li> | |||||
</ul> | |||||
<p><strong>Замечания</strong>:</p> | |||||
<ul> | |||||
<li>начало и конец схлопнуты для краткости</li> | |||||
<li>константа <code>PSKOV_INDEX_URL</code> используется для выбора языка</li> | |||||
</ul> | |||||
<p>Новые константы <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_INDEX_URL</code></td> | |||||
<td>Предоставляет генерируемое имя файла страницы с предпросмотрами: <code><previewsPageBaseName><id>.html</code></td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PREVIEWS</code></td> | |||||
<td>Предоставляет набор предпросмотров</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PAGINATION</code></td> | |||||
<td>Предоставляет секцию для перехода между страницами с предпросмотрами</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><a name="pagination"/></p> | |||||
<h2 id="06">06. Изучите постраничные шаблоны</h2> | |||||
<p>Постраничные шаблоны являются секциями HTML для перехода между страницами с предпросмотрами.</p> | |||||
<p>Существует три постраничных шаблона:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Постраничный шаблон</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Предыдущий</td> | |||||
<td>Посетитель может перейти лишь назад</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Следующий</td> | |||||
<td>Посетитель может перейти лишь вперёд</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Оба</td> | |||||
<td>Посетитель может перейти либо вперёд, либо назад</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Рассмотрим английские постраничные шаблоны:</p> | |||||
<ul> | |||||
<li><p>Содержимое <code>en/blog/pagination.prev.template</code>:</p> | |||||
<pre><code><p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p> | |||||
<p> | |||||
<a href="PSKOV_PREV_PAGE_URL">« Newer</a> | |||||
</p> | |||||
</code></pre></li> | |||||
<li><p>Содержимое <code>en/blog/pagination.next.template</code>:</p> | |||||
<pre><code><p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p> | |||||
<p> | |||||
<a href="PSKOV_NEXT_PAGE_URL">Older »</a> | |||||
</p> | |||||
</code></pre></li> | |||||
<li><p>Содержимое <code>en/blog/pagination.template</code>:</p> | |||||
<pre><code><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> | |||||
</code></pre></li> | |||||
</ul> | |||||
<p>Русские версии выглядят схожим образом. Например, содержимое <code>ru/blog/pagination.template</code>:</p> | |||||
<pre><code><p>Страница PSKOV_PAGE_ID из PSKOV_PAGES_COUNT</p> | |||||
<p> | |||||
<a href="PSKOV_PREV_PAGE_URL">« Новее</a> | |||||
<a href="PSKOV_NEXT_PAGE_URL">Старее »</a> | |||||
</p> | |||||
</code></pre> | |||||
<p>Новые константы <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_PAGE_ID</code></td> | |||||
<td>Предоставляет порядковый номер страницы с предпросмотрами, начиная с <code>1</code></td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PAGES_COUNT</code></td> | |||||
<td>Предоставляет количество сгенерированных страниц с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PREV_PAGE_URL</code></td> | |||||
<td>Предоставляет имя файла предыдущей страницы с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_NEXT_PAGE_URL</code></td> | |||||
<td>Предоставляет имя файла следующей страницы с предпросмотрами</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><a name="md"/></p> | |||||
<h2 id="07markdown">07. Изучите файлы Markdown</h2> | |||||
<p>Файлы Markdown являются заметками блога, они похожи на файлы Markdown обычных страниц. Вот как выглядит содержимое <code>en/blog/1885.md</code>:</p> | |||||
<pre><code> 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 | |||||
</code></pre> | |||||
<p>Заметки блога сортируются по дате: новые заметки размещаются перед старыми.</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ заголовка</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>Date</code></td> | |||||
<td>Предоставляет значение для константы <code>PSKOV_ITEM_DATE</code> при генерации HTML из Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p><a name="gen"/></p> | |||||
<h2 id="08">08. Запустите ЛФСД и сгенерируйте сайт</h2> | |||||
<p>Запустите <a href="http://opengamestudio.org/lfsa/ru">ЛФСД</a> с указанием директории, содержащей только что рассмотренные файлы:</p> | |||||
<pre><code>$ /путь/до/lfsa_1.0.0.py /путь/до/директории/03.Blog | |||||
</code></pre> | |||||
<p>Сгенерируйте сайт:</p> | |||||
<ul> | |||||
<li>Перейдите на страницу <a href="http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html">Инструмент</a></li> | |||||
<li>Нажмите кнопку <code>Генерировать</code></li> | |||||
<li>Откройте сгенерированный файл <code>en/blog/index.html</code> или <code>ru/blog/index.html</code> из директории сайта</li> | |||||
<li>Осуществите переход между страницами предпросмотра</li> | |||||
</ul> | |||||
<p><a name="summary"/></p> | |||||
<h2 id="09">09. Итог</h2> | |||||
<p>Вы успешно сгенерировали веб-сайт с "динамическими" страницами блога. <a href="http://opengamestudio.org/pskov/sample/03.Blog/ru/blog/index.html">Проверьте результат</a>.</p> | |||||
<p>Представлены константы <strong>ПСКОВА</strong>:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Константа ПСКОВА</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>PSKOV_ITEM_DATE</code></td> | |||||
<td>Значение ключа <code>Date</code> файла Markdown</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PREVIEW</code></td> | |||||
<td>Предоставляет содержимое файла Markdown, ограниченное <code>previewSize</code> символами (приблизительно)</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_INDEX_URL</code></td> | |||||
<td>Предоставляет генерируемое имя файла страницы с предпросмотрами: <code><previewsPageBaseName><id>.html</code></td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PREVIEWS</code></td> | |||||
<td>Предоставляет набор предпросмотров</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PAGINATION</code></td> | |||||
<td>Предоставляет секцию для перехода между страницами с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PAGE_ID</code></td> | |||||
<td>Предоставляет порядковый номер страницы с предпросмотрами, начиная с <code>1</code></td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PAGES_COUNT</code></td> | |||||
<td>Предоставляет количество сгенерированных страниц с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_PREV_PAGE_URL</code></td> | |||||
<td>Предоставляет имя файла предыдущей страницы с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>PSKOV_NEXT_PAGE_URL</code></td> | |||||
<td>Предоставляет имя файла следующей страницы с предпросмотрами</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Представлены ключи настроек:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>preview</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых <code>previewSize</code> (приблизительно) символов для каждого файла Markdown</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>index</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>paginationPrev</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>paginationNext</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>paginationPrevNext</code></td> | |||||
<td>Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewSize</code></td> | |||||
<td>Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewEnding</code></td> | |||||
<td>Строка для добавления в конец каждого предпросмотра</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewsPerPage</code></td> | |||||
<td>Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами</td> | |||||
</tr> | |||||
<tr> | |||||
<td><code>previewsPageBaseName</code></td> | |||||
<td>Базовое имя файла для страниц с предпросмотрами</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Представлены ключи заголовка:</p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Ключ заголовка</th> | |||||
<th>Описание</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><code>Date</code></td> | |||||
<td>Предоставляет значение для константы <code>PSKOV_ITEM_DATE</code> при генерации HTML из Markdown</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Это был последний документ, призванный научить вас уверенно владеть генератором статических сайтов <strong>ПСКОВ</strong>. Если вам нравится наш труд, присоединяйтесь к нам в <a href="https://vk.com/opengamestudo">VK</a>, <a href="https://twitter.com/OpenGameStudio">Twitter</a> или <a href="https://www.facebook.com/groups/162611230470183">Facebook</a>.</p> | |||||
<p>А теперь используйте <strong>ПСКОВ</strong> для генерация своего собственного веб-сайта!</p> | |||||
<p></div><div class="contents"></p> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>< Назад</th> | |||||
<th>Начало</th> | |||||
<th>Далее ></th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td><a href="education.04.lang.html">04. Язык</a></td> | |||||
<td><a href="education.html">Обучение</a></td> | |||||
<td>Отсутствует</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||
@@ -0,0 +1,480 @@ | |||||
Title: Обучение: 05. Блог | |||||
Date: 2019-06-19 00:00 | |||||
Category: Page | |||||
Slug: education.05.blog | |||||
Lang: ru | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [04. Язык][prev] | [Обучение][index] | Отсутствует | | |||||
</div><div class="contents"> | |||||
В этом документе мы создадим "динамические" страницы блога. | |||||
Ожидаемое время завершения: 20 минут. | |||||
**Содержание** | |||||
* [01. Блог](#blog) | |||||
* [02. Изучите файл `pskov.cfg`](#cfg) | |||||
* [03. Изучите шаблоны элементов](#item) | |||||
* [04. Изучите шаблоны предпросмотров](#preview) | |||||
* [05. Изучите шаблоны страниц с предпросмотрами](#index) | |||||
* [06. Изучите постраничные шаблоны](#pagination) | |||||
* [07. Изучите файлы Markdown](#md) | |||||
* [08. Запустите ЛФСД и сгенерируйте сайт](#gen) | |||||
* [09. Итог](#summary) | |||||
<a name="blog"/> | |||||
## 01. Блог | |||||
Итак, у вас есть веб-сайт на Английском и Русском языках. Вы начинаете ощущать желание регулярно делиться своими мыслями с миром в виде заметок блога. | |||||
Вы создаёте директорию со [следующей структурой файлов][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` | |||||
Давайте взглянем на содержимое этих файлов. | |||||
<a name="cfg"/> | |||||
## 02. Изучите файл `pskov.cfg` | |||||
Файл `pskov.cfg` содержит следующее: | |||||
``` | |||||
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 | |||||
``` | |||||
Вы уже встречались с ключами `input` и `item`. Рассмотрим остальные: | |||||
| Ключ | Описание | | |||||
|---|---| | |||||
| `preview` | Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых `previewSize` (приблизительно) символов для каждого файла Markdown | | |||||
| `index` | Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами | | |||||
| `paginationPrev` | Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу | | |||||
| `paginationNext` | Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу | | |||||
| `paginationPrevNext` | Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам | | |||||
| `previewSize` | Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра | | |||||
| `previewEnding` | Строка для добавления в конец каждого предпросмотра | | |||||
| `previewsPerPage` | Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами | | |||||
| `previewsPageBaseName` | Базовое имя файла для страниц с предпросмотрами | | |||||
В нашем случае: | |||||
* мы ограничиваем предпросмотр `200` символами (приблизительно) | |||||
* мы используем строку `. . .` в конце каждого предпросмотра | |||||
* страницы с предпросмотрами вмещают максимум `3` предпросмотра | |||||
* страницы с предпросмотрами будут сохранены как `index.html`, `index2.html`, `index3.html` и т.д. | |||||
<a name="item"/> | |||||
## 03. Изучите шаблоны элементов | |||||
* Содержимое `en/blog/item.template`: | |||||
``` | |||||
- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
``` | |||||
* Содержимое `ru/blog/item.template`: | |||||
``` | |||||
- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
``` | |||||
**Внимание**: начало и конец схлопнуты для краткости. | |||||
Как видите, оба файла выглядят практически так же, как и файлы `item.template`, рассмотренные [ранее][prev]. | |||||
Изменения следующие: | |||||
* новые URL страниц в директории `page` и первой страницы с предпросмотрами в директории `blog` | |||||
* заголовок используется внутри секции `contents` в качестве ссылки на полную заметку блога | |||||
* дата используется для подчёркивания временной зависимости между заметками блога | |||||
Дату мы получаем из константы `PSKOV_ITEM_DATE`: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_ITEM_DATE` | Значение ключа `Date` файла Markdown | | |||||
<a name="preview"/> | |||||
## 04. Изучите шаблоны предпросмотров | |||||
* Содержимое `en/blog/preview.template`: | |||||
``` | |||||
<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`: | |||||
``` | |||||
<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> | |||||
``` | |||||
У предпросмотров нет `<head>`, `<body>` и прочих полностраничных тэгов HTML. Предпросмотры являются секциями, вставляемыми в страницы с предпросмотрами. | |||||
Сам предпросмотр мы получаем из константы `PSKOV_PREVIEW`: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_PREVIEW` | Предоставляет содержимое файла Markdown, ограниченное `previewSize` символами (приблизительно) | | |||||
<a name="index"/> | |||||
## 05. Изучите шаблоны страниц с предпросмотрами | |||||
* Содержимое `en/blog/index.template`: | |||||
``` | |||||
- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
``` | |||||
* Содержимое `ru/blog/index.template`: | |||||
``` | |||||
- - - - Схлопнуто для краткости - - - - | |||||
<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> | |||||
- - - - Схлопнуто для краткости - - - - | |||||
``` | |||||
**Замечания**: | |||||
* начало и конец схлопнуты для краткости | |||||
* константа `PSKOV_INDEX_URL` используется для выбора языка | |||||
Новые константы **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_INDEX_URL` | Предоставляет генерируемое имя файла страницы с предпросмотрами: `<previewsPageBaseName><id>.html` | | |||||
| `PSKOV_PREVIEWS` | Предоставляет набор предпросмотров | | |||||
| `PSKOV_PAGINATION` | Предоставляет секцию для перехода между страницами с предпросмотрами | | |||||
<a name="pagination"/> | |||||
## 06. Изучите постраничные шаблоны | |||||
Постраничные шаблоны являются секциями HTML для перехода между страницами с предпросмотрами. | |||||
Существует три постраничных шаблона: | |||||
| Постраничный шаблон | Описание | | |||||
|---|---| | |||||
| Предыдущий | Посетитель может перейти лишь назад | | |||||
| Следующий | Посетитель может перейти лишь вперёд | | |||||
| Оба | Посетитель может перейти либо вперёд, либо назад | | |||||
Рассмотрим английские постраничные шаблоны: | |||||
* Содержимое `en/blog/pagination.prev.template`: | |||||
``` | |||||
<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`: | |||||
``` | |||||
<p>Page PSKOV_PAGE_ID of PSKOV_PAGES_COUNT</p> | |||||
<p> | |||||
<a href="PSKOV_NEXT_PAGE_URL">Older »</a> | |||||
</p> | |||||
``` | |||||
* Содержимое `en/blog/pagination.template`: | |||||
``` | |||||
<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> | |||||
``` | |||||
Русские версии выглядят схожим образом. Например, содержимое `ru/blog/pagination.template`: | |||||
``` | |||||
<p>Страница PSKOV_PAGE_ID из PSKOV_PAGES_COUNT</p> | |||||
<p> | |||||
<a href="PSKOV_PREV_PAGE_URL">« Новее</a> | |||||
<a href="PSKOV_NEXT_PAGE_URL">Старее »</a> | |||||
</p> | |||||
``` | |||||
Новые константы **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_PAGE_ID` | Предоставляет порядковый номер страницы с предпросмотрами, начиная с `1` | | |||||
| `PSKOV_PAGES_COUNT` | Предоставляет количество сгенерированных страниц с предпросмотрами | | |||||
| `PSKOV_PREV_PAGE_URL` | Предоставляет имя файла предыдущей страницы с предпросмотрами | | |||||
| `PSKOV_NEXT_PAGE_URL` | Предоставляет имя файла следующей страницы с предпросмотрами | | |||||
<a name="md"/> | |||||
## 07. Изучите файлы Markdown | |||||
Файлы Markdown являются заметками блога, они похожи на файлы Markdown обычных страниц. Вот как выглядит содержимое `en/blog/1885.md`: | |||||
``` | |||||
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` | Предоставляет значение для константы `PSKOV_ITEM_DATE` при генерации HTML из Markdown | | |||||
<a name="gen"/> | |||||
## 08. Запустите ЛФСД и сгенерируйте сайт | |||||
Запустите [ЛФСД][lfsa] с указанием директории, содержащей только что рассмотренные файлы: | |||||
``` | |||||
$ /путь/до/lfsa_1.0.0.py /путь/до/директории/03.Blog | |||||
``` | |||||
Сгенерируйте сайт: | |||||
* Перейдите на страницу [Инструмент][tool] | |||||
* Нажмите кнопку `Генерировать` | |||||
* Откройте сгенерированный файл `en/blog/index.html` или `ru/blog/index.html` из директории сайта | |||||
* Осуществите переход между страницами предпросмотра | |||||
<a name="summary"/> | |||||
## 09. Итог | |||||
Вы успешно сгенерировали веб-сайт с "динамическими" страницами блога. [Проверьте результат][03-sample]. | |||||
Представлены константы **ПСКОВА**: | |||||
| Константа ПСКОВА | Описание | | |||||
|---|---| | |||||
| `PSKOV_ITEM_DATE` | Значение ключа `Date` файла Markdown | | |||||
| `PSKOV_PREVIEW` | Предоставляет содержимое файла Markdown, ограниченное `previewSize` символами (приблизительно) | | |||||
| `PSKOV_INDEX_URL` | Предоставляет генерируемое имя файла страницы с предпросмотрами: `<previewsPageBaseName><id>.html` | | |||||
| `PSKOV_PREVIEWS` | Предоставляет набор предпросмотров | | |||||
| `PSKOV_PAGINATION` | Предоставляет секцию для перехода между страницами с предпросмотрами | | |||||
| `PSKOV_PAGE_ID` | Предоставляет порядковый номер страницы с предпросмотрами, начиная с `1` | | |||||
| `PSKOV_PAGES_COUNT` | Предоставляет количество сгенерированных страниц с предпросмотрами | | |||||
| `PSKOV_PREV_PAGE_URL` | Предоставляет имя файла предыдущей страницы с предпросмотрами | | |||||
| `PSKOV_NEXT_PAGE_URL` | Предоставляет имя файла следующей страницы с предпросмотрами | | |||||
Представлены ключи настроек: | |||||
| Ключ | Описание | | |||||
|---|---| | |||||
| `preview` | Указывает на шаблон HTML, используемый для генерации предпросмотра HTML из первых `previewSize` (приблизительно) символов для каждого файла Markdown | | |||||
| `index` | Указывает на шаблон HTML, используемый для генерации страницы с предпросмотрами | | |||||
| `paginationPrev` | Указывает на шаблон HTML, используемый для генерации секции с переходом лишь на предыдущую страницу | | |||||
| `paginationNext` | Указывает на шаблон HTML, используемый для генерации секции с переходм лишь на следующую страницу | | |||||
| `paginationPrevNext` | Указывает на шаблон HTML, используемый для генерации секции с переходами по страницам | | |||||
| `previewSize` | Количество символов (приблизительное) из файла Markdown, используемое для генерации предпросмотра | | |||||
| `previewEnding` | Строка для добавления в конец каждого предпросмотра | | |||||
| `previewsPerPage` | Максимальное количество предпросмотров, умещающееся на странице с предпросмотрами | | |||||
| `previewsPageBaseName` | Базовое имя файла для страниц с предпросмотрами | | |||||
Представлены ключи заголовка: | |||||
| Ключ заголовка | Описание | | |||||
|---|---| | |||||
| `Date` | Предоставляет значение для константы `PSKOV_ITEM_DATE` при генерации HTML из Markdown | | |||||
Это был последний документ, призванный научить вас уверенно владеть генератором статических сайтов **ПСКОВ**. Если вам нравится наш труд, присоединяйтесь к нам в [VK][vk], [Twitter][tw] или [Facebook][fb]. | |||||
А теперь используйте **ПСКОВ** для генерация своего собственного веб-сайта! | |||||
</div><div class="contents"> | |||||
| < Назад | Начало | Далее > | | |||||
|---|---|---| | |||||
| [04. Язык][prev] | [Обучение][index] | Отсутствует | | |||||
[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/ru/blog/index.html | |||||
[lfsa]: http://opengamestudio.org/lfsa/ru | |||||
[tool]: http://opengamestudio.org/pskov/ru/pskov_1.0.0+ru.html | |||||
[vk]: https://vk.com/opengamestudo | |||||
[tw]: https://twitter.com/OpenGameStudio | |||||
[fb]: https://www.facebook.com/groups/162611230470183 |
@@ -0,0 +1,241 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/education.html">EN</a> | |||||
<a href="../ru/education.html">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
Обучение | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
<p>Представленные здесь документы научат вас уверенно владеть генератором статических сайтов <strong>ПСКОВ</strong>. Советуем читать документы по порядку.</p> | |||||
<h2 id="01why"><a href="education.01.why.html">01. Почему</a></h2> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Свойство</th> | |||||
<th>Подробности</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Описание</td> | |||||
<td>Узнайте причины создания <strong>ПСКОВА</strong></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Ожидаемое время завершения</td> | |||||
<td>5 минут</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<h2 id="02deps"><a href="education.02.deps.html">02. Зависимости</a></h2> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Свойство</th> | |||||
<th>Подробности</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Описание</td> | |||||
<td>Установите зависимости, чтобы начать использовать <strong>ПСКОВ</strong></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Ожидаемое время завершения</td> | |||||
<td>5 минут</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<h2 id="03site"><a href="education.03.site.html">03. Сайт</a></h2> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Свойство</th> | |||||
<th>Подробности</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Описание</td> | |||||
<td>Научитесь создавать простой статический сайт с двумя страницами</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Ожидаемое время завершения</td> | |||||
<td>10 минут</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Демонстрация</td> | |||||
<td><a href="http://opengamestudio.org/pskov/sample/01.TwoPages/about.html">ДвеСтраницы</a></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные константы ПСКОВА</td> | |||||
<td><ol> <li><code>PSKOV_ITEM_TITLE</code></li> <li><code>PSKOV_ITEM_CONTENTS</code></li> </ol></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные ключи настроек</td> | |||||
<td><ol> <li><code>input</code></li> <li><code>item</code></li> </ol></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные ключи заголовка</td> | |||||
<td><ol> <li><code>Title</code></li> <li><code>Slug</code></li> </ol></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<h2 id="04lang"><a href="education.04.lang.html">04. Язык</a></h2> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Свойство</th> | |||||
<th>Подробности</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Описание</td> | |||||
<td>Научитесь добавлять выбор языка</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Ожидаемое время завершения</td> | |||||
<td>10 минут</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Демонстрация</td> | |||||
<td><a href="http://opengamestudio.org/pskov/sample/02.Language/ru/about.html">Язык</a></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные константы ПСКОВА</td> | |||||
<td><ol> <li><code>PSKOV_ITEM_URL</code></li> </ol></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<h2 id="05blog"><a href="education.05.blog.html">05. Блог</a></h2> | |||||
<table> | |||||
<thead> | |||||
<tr> | |||||
<th>Свойство</th> | |||||
<th>Подробности</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr> | |||||
<td>Описание</td> | |||||
<td>Научитесь создавать "динамические" страницы для блога</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Ожидаемое время завершения</td> | |||||
<td>20 минут</td> | |||||
</tr> | |||||
<tr> | |||||
<td>Демонстрация</td> | |||||
<td><a href="http://opengamestudio.org/pskov/sample/03.Blog/ru/blog/index.html">Блог</a></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные константы ПСКОВА</td> | |||||
<td><ol> <li><code>PSKOV_ITEM_DATE</code></li> <li><code>PSKOV_PREVIEW</code></li> <li><code>PSKOV_INDEX_URL</code></li> <li><code>PSKOV_PREVIEWS</code></li> <li><code>PSKOV_PAGINATION</code></li> <li><code>PSKOV_PAGE_ID</code></li> <li><code>PSKOV_PAGES_COUNT</code></li> <li><code>PSKOV_PREV_PAGE_URL</code></li> <li><code>PSKOV_NEXT_PAGE_URL</code></li> </ol></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные ключи настроек</td> | |||||
<td><ol> <li><code>preview</code></li> <li><code>index</code></li> <li><code>paginationPrev</code></li> <li><code>paginationNext</code></li> <li><code>paginationPrevNext</code></li> <li><code>previewSize</code></li> <li><code>previewEnding</code></li> <li><code>previewsPerPage</code></li> <li><code>previewsPageBaseName</code></li> </ol></td> | |||||
</tr> | |||||
<tr> | |||||
<td>Представленные ключи заголовка</td> | |||||
<td><ol> <li><code>Date</code></li> </ol></td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
<p>Если вам нравится наш труд, присоединяйтесь к нам в <a href="https://vk.com/opengamestudo">VK</a>, <a href="https://twitter.com/OpenGameStudio">Twitter</a> или <a href="https://www.facebook.com/groups/162611230470183">Facebook</a>.</p> | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||
@@ -0,0 +1,68 @@ | |||||
Title: Обучение | |||||
Date: 2019-06-18 00:00 | |||||
Category: Page | |||||
Slug: education | |||||
Lang: ru | |||||
Представленные здесь документы научат вас уверенно владеть генератором статических сайтов **ПСКОВ**. Советуем читать документы по порядку. | |||||
## [01. Почему][why] | |||||
| Свойство | Подробности | | |||||
|---|---| | |||||
| Описание | Узнайте причины создания **ПСКОВА** | | |||||
| Ожидаемое время завершения | 5 минут | | |||||
## [02. Зависимости][deps] | |||||
| Свойство | Подробности | | |||||
|---|---| | |||||
| Описание | Установите зависимости, чтобы начать использовать **ПСКОВ** | | |||||
| Ожидаемое время завершения | 5 минут | | |||||
## [03. Сайт][site] | |||||
| Свойство | Подробности | | |||||
|---|---| | |||||
| Описание | Научитесь создавать простой статический сайт с двумя страницами | | |||||
| Ожидаемое время завершения | 10 минут | | |||||
| Демонстрация | [ДвеСтраницы][01-sample] | | |||||
| Представленные константы ПСКОВА | <ol> <li>`PSKOV_ITEM_TITLE`</li> <li>`PSKOV_ITEM_CONTENTS`</li> </ol> | | |||||
| Представленные ключи настроек | <ol> <li>`input`</li> <li>`item`</li> </ol> | | |||||
| Представленные ключи заголовка | <ol> <li>`Title`</li> <li>`Slug`</li> </ol> | | |||||
## [04. Язык][lang] | |||||
| Свойство | Подробности | | |||||
|---|---| | |||||
| Описание | Научитесь добавлять выбор языка | | |||||
| Ожидаемое время завершения | 10 минут | | |||||
| Демонстрация | [Язык][02-sample] | | |||||
| Представленные константы ПСКОВА | <ol> <li>`PSKOV_ITEM_URL`</li> </ol> | | |||||
## [05. Блог][blog] | |||||
| Свойство | Подробности | | |||||
|---|---| | |||||
| Описание | Научитесь создавать "динамические" страницы для блога | | |||||
| Ожидаемое время завершения | 20 минут | | |||||
| Демонстрация | [Блог][03-sample] | | |||||
| Представленные константы ПСКОВА | <ol> <li>`PSKOV_ITEM_DATE`</li> <li>`PSKOV_PREVIEW`</li> <li>`PSKOV_INDEX_URL`</li> <li>`PSKOV_PREVIEWS`</li> <li>`PSKOV_PAGINATION`</li> <li>`PSKOV_PAGE_ID`</li> <li>`PSKOV_PAGES_COUNT`</li> <li>`PSKOV_PREV_PAGE_URL`</li> <li>`PSKOV_NEXT_PAGE_URL`</li> </ol> | | |||||
| Представленные ключи настроек | <ol> <li>`preview`</li> <li>`index`</li> <li>`paginationPrev`</li> <li>`paginationNext`</li> <li>`paginationPrevNext`</li> <li>`previewSize`</li> <li>`previewEnding`</li> <li>`previewsPerPage`</li> <li>`previewsPageBaseName`</li> </ol> | | |||||
| Представленные ключи заголовка | <ol> <li>`Date`</li> </ol> | | |||||
Если вам нравится наш труд, присоединяйтесь к нам в [VK][vk], [Twitter][tw] или [Facebook][fb]. | |||||
[why]: education.01.why.html | |||||
[deps]: education.02.deps.html | |||||
[site]: education.03.site.html | |||||
[lang]: education.04.lang.html | |||||
[blog]: education.05.blog.html | |||||
[01-sample]: http://opengamestudio.org/pskov/sample/01.TwoPages/about.html | |||||
[02-sample]: http://opengamestudio.org/pskov/sample/02.Language/ru/about.html | |||||
[03-sample]: http://opengamestudio.org/pskov/sample/03.Blog/ru/blog/index.html | |||||
[vk]: https://vk.com/opengamestudo | |||||
[tw]: https://twitter.com/OpenGameStudio | |||||
[fb]: https://www.facebook.com/groups/162611230470183 |
@@ -0,0 +1,105 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<meta charset="utf-8"> | |||||
<head> | |||||
<style> | |||||
#header | |||||
{ | |||||
background: #856d51; | |||||
padding: 0.7em; | |||||
text-align: left; | |||||
} | |||||
#header a | |||||
{ | |||||
color: white; | |||||
text-decoration: none; | |||||
padding: 0.5em 1em 0.5em 1em; | |||||
} | |||||
#title | |||||
{ | |||||
color: #433729; | |||||
} | |||||
html | |||||
{ | |||||
font-family: sans-serif; | |||||
} | |||||
body | |||||
{ | |||||
line-height: 1.5em; | |||||
} | |||||
body | |||||
{ | |||||
background: #FAFAFA; | |||||
} | |||||
table | |||||
{ | |||||
border-collapse: collapse; | |||||
width: 100%; | |||||
} | |||||
table, th, td | |||||
{ | |||||
border: 1px solid #aaa; | |||||
padding: 0.5em; | |||||
margin-top: 0.5em; | |||||
margin-bottom: 0.5em; | |||||
} | |||||
code, pre | |||||
{ | |||||
font-family: monospace, serif; | |||||
font-size: 1em; | |||||
color: #7f0a0c; | |||||
background: #f5f5f5; | |||||
white-space: pre-wrap; | |||||
} | |||||
.contents | |||||
{ | |||||
background: #FFFFFF; | |||||
width: 720px; | |||||
padding: 1em; | |||||
margin-top: 2em; | |||||
margin-bottom: 2em; | |||||
border: 1px solid #E0E0E0; | |||||
text-align: left; | |||||
color: #444; | |||||
} | |||||
#footer | |||||
{ | |||||
text-align: center; | |||||
} | |||||
#lang | |||||
{ | |||||
float: right; | |||||
} | |||||
</style> | |||||
<title> | |||||
PSKOV | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="header"> | |||||
<strong id="title">ПСКОВ</strong> | |||||
<a href="pskov_1.0.0+ru.html">Инструмент</a> | |||||
<a href="education.html">Обучение</a> | |||||
<div id="lang"> | |||||
<a href="../en/PSKOV_ITEM_URL">EN</a> | |||||
<a href="../ru/PSKOV_ITEM_URL">RU</a> | |||||
</div> | |||||
</div> | |||||
<center><h1> | |||||
PSKOV_ITEM_TITLE | |||||
</h1></center> | |||||
<center><div class="contents"> | |||||
PSKOV_ITEM_CONTENTS | |||||
</div></center> | |||||
<div id="footer"> | |||||
Сайт сгенерирован <a href="http://opengamestudio.org/pskov">ПСКОВОМ</a> | |||||
из <a href="http://github.com/ogstudio/site-pskov">этого исходного кода</a>. | |||||
Сайт расположен на <a href="https://pages.github.com">GitHub Pages</a>. | |||||
</div> | |||||
<script type="text/javascript"> | |||||
</script> | |||||
</body> | |||||
</html> | |||||