OGS-Main
/
ogs-site
2
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
139 コミット
2 ブランチ
257MB
ツリー: e86cb254c2
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'e86cb254c2' から
${ noResults }
ogs-site/pskov/en/education.04.lang.md

6.3KB
Raw Blame 履歴

Title: Education: 04. Language Date: 2019-06-25 00:00 Category: Page Slug: education.04.lang Lang: en

< Back Index Next >
03. Site Education 05. Blog

In this document we add language selection.

Estimated completion time: 10 minutes.

Table of contents

01. Localization

Now that you have your web site in English you start to wonder why there's no Russian version, you're Russian after all!

You set on to create the following directory structure:

  • pskov.cfg
  • en/item.template
  • en/about.md
  • en/cv.md
  • ru/item.template
  • ru/about.md
  • ru/cv.md

Let's look at the contents of these files closer.

02. Investigate pskov.cfg file

pskov.cfg file has the following contents:

input = en;ru
item = item.template

As you see, input can accept multiple directories separated by ; symbol: PSKOV will go over each directory specified and run as before.

In this case, both en/ and ru/ directories have their own item.template file.

03. Investigate template files

  • en/item.template contents:

    - - - - Collapsed for brevity - - - -
        <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>
- - - - Collapsed for brevity - - - -

  • ru/item.template contents:

    - - - - Collapsed for brevity - - - -
        <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>
- - - - Collapsed for brevity - - - -

Note: beginning and ending were collapsed for brevity.

As you can see, both en/item.template and ru/item.template look similar to item.template we saw before.

The changes include:

  • use of <div id="lang">...</div> section to present language selection
  • localization of titles into English and Russian

Language selection uses new PSKOV constant:

PSKOV constant Description
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.

04. Investigate Markdown files

en/about.md and en/cv.md files look almost exactly as before. ru/about.md and ru/cv.md are simply Russian variants of corresponding pages.

For example, ru/cv.md has the following contents:

 Title: Резюме
 Slug: cv

 Здесь вы можете увидеть моё резюме в том случае, если мои произведения всё ещё вас интересуют. Я использовал современный подход ИТ для структурирования своего резюме в виде пар ключ-значение словаря (карты). Наслаждайтесь!

 | Ключ | Значение |
 |---|---|
 | Имя | Валентин Серов |
 | Возраст | 46 |
 | Семейное положение | Женат |
 | Страна | Российская Империя |
 | Учёба | Императорская Академия художеств |
 | Звания | * академик ИАХ (1898) <br> * действительный член ИАХ (1903) |

Note: Russian page has exactly the same Slug value as English one.

05. Launch LFSA

ERROR Your browser does not support HTML5 video

Launch LFSA so that it points to directory with the files we just observed:

$ /path/to/lfsa_1.0.0.py /path/to/dir/02.Language

06. Generate the site

ERROR Your browser does not support HTML5 video

Go to Tool page and press Generate button to generate HTML files right where Markdown ones reside.

07. Observe the site

ERROR Your browser does not support HTML5 video

Observe generated web site locally by opening en/about.html or ru/about.html and switching language.

08. Summary

You have successfully added language selection. Check out the result.

Introduced PSKOV constants include:

PSKOV constant Description
PSKOV_ITEM_URL Provides generated page's file name
< Back Index Next >
03. Site Education 05. Blog