CMintS

Ես եւ միջազգայնացումը:

Խոսում եմ 3.1 լազուներով
Be2 եւ C-date
Chrome Հավելումներ
eyeo-ի վեբ կայքերը
Adblock Plus UI

Տեղայնացում

Ամսաթիվեր

12/11/2018 Ամսաթիվը


  const date = new Date(2018, 10, 12);
  console.log(new Intl.DateTimeFormat('en-GB').format(date));
  console.log(new Intl.DateTimeFormat('en-US').format(date));
  console.log(new Intl.DateTimeFormat('lt-LT').format(date));
  console.log(new Intl.DateTimeFormat('hy-AM').format(date));

12/11/2018
11/12/2018
2018-11-12
12.11.2018

Կոտորակային տարանջատում

1234567.89 թիվը


  const number = 1234567.89;
  console.log(new Intl.NumberFormat('en-US').format(number));
  console.log(new Intl.NumberFormat('fr-FR').format(number));
  console.log(new Intl.NumberFormat('de-CH').format(number));
  console.log(new Intl.NumberFormat('es-ES').format(number));

en-US: 1,234,567.89
fr-FR: 1 234 567,89
de-CH: 1’234’567.89
es-ES: 1.234.567,89

Հերթականություն

Bob
Nika
Yves


  const items = ["Bob", "Nika", "Yves"];
  console.log(items.sort((a, b) => a.localeCompare(b)));
  console.log(items.sort((a, b) => a.localeCompare(b, 'lt')));

Հասանելիություն

lang ատրիբուտը

Հայտարարում է փաստաթղթի կանխադրված լեզուն


    <html lang="de"></html>

hreflang


  <a href="/de/documentation" hreflang="de">Dokumentation</a>
  <a href="/en/address" hreflang="en">Address</a>


  a[hreflang]:after
  {
    content: "["attr(hreflang)"]"; 
    color: #999;
    vertical-align: super;
    font-size: 50%;
  }

Dokumentation
Address

Accept-Language «header»-ը


  Accept-Language : en-US,en;q=0.9,ru-RU;q=0.8,ru;q=0.7,
                    hy-AM;q=0.6,hy;q=0.5


  console.log(navigator.languages); // ["en-US", "ru", "es"]

q - լեզվի կարեւորությունը

Ատրիբուտներ


  <div title="Svetainės logotipas" id="logo">
    <img src="/images/puma.svg" alt="Šokinėja puma" />
  </div>

Ուղղություն


  <html dir="rtl"></html>


  .vert { writing-mode: vertical-lr; }

Նախագծում ֆիքսվաց չափերով

Review your notification settings


  button
  {
    width: 120px;
  }


  button
  {
    /* width: 120px; */
    padding: 0 10px;
  }


  .message-next-to-button
  {
    margin-right: 100px;
  }


  .message-next-to-button
  {
    /* Use with precaution  */
    margin-inline-end: 100px; 
    -webkit-margin-end: 100px;
  }
  html:not([dir="rtl"]) .message-next-to-button
  {
    margin-right: 100px;
  }
  html([dir="rtl"]) .message-next-to-button
  {
    margin-left: 100px;
  }

Տառատեսակներ(Ֆոնտեր)

Թիրախային լեզվի համապատասխանություն

Շրջանցիկ նկատառում

Օգտագործել յունիքոդի միջակայքը

350kb woff2
1.1mb ttf

Յունիքոդ միջակայք (5-18kb)


  @font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Sans Pro'), url("300/cyrillic.woff2") format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }


  # https://github.com/fonttools/fonttools
  pyftsubset DejaVuSans-ExtraLight.ttf --unicodes=U+0530-058F --flavor=woff2 --output-file=armenian.woff2

https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese

SEO

Թարգմանել էջի վերնագիրը եւ նկարագրությունը


  <head>
    <title>Surfez sans désagrément</title>
    <meta name="description" content="Adblock Plus est le bloqueur de publicités le plus populaire">
  </head>

rel-alternate-hreflang


  <html lang="de">
  <head>
    <link rel="alternate" href="http://www.example.com/en" hreflang="en">
    <link rel="alternate" href="http://www.example.com/es" hreflang="es">
  ...
  <head>

Օգտագործել canonical կրկնվող քոնթենթի համար


  <link rel="canonical" href="https://example.com">

SMM/SMO


  <meta property="og:image" content="http://example.com/images/thumbnail-fr.png">
  <meta property="og:title" content="Surfez sans désagrément">
  <meta property="og:description" content="Adblock Plus est le bloqueur de publicités le plus populaire">

  <meta name="og:locale" content="fr_FR">
  <meta name="og:locale:alternate" content="es_ES">
  <meta name="og:locale:alternate" content="es_MX">

Միջազգայնացում

Թարգմանության ֆայլեր

JSON

XML

.po, .pot

Թարգմանության տողեր

String ID

Description

Message/Text


  /* /en/menu/header.json */
  {
    "menu-item-about": {
      "description": "Menu item label located in the header",
      "message": "About us"
    }
  }


  /* /ru/menu/header.json */
  {
    "menu-item-about": {
      "description": "Menu item label located in the header",
      "message": "О нас"
    }
  }

Թարգմանության տողերի օգտագործում

Հղղել թարգմանության ֆայլին

Հղղել թարգմանության տողի ID-ին(StringID)


  getText("stringId", "filePath")


  {stringId(filePath)}


  <ul>
    <li>
      {menu-item-about(menu/header)}
    </li>
  </ul>


  <ul>
    <li>
      About us
    </li>
  </ul>


  <ul>
    <li>
      О нас
    </li>
  </ul>


  <ul>
    <li>
      Մեր մասին
    </li>
  </ul>

Հերթականություն


    I <a href="#link1" class="red">love</a> <a href="#link2" class="blue">you</a>

I love you ^{[SVO ~42%]}

I you love ^{[SOV ~45%]}

love I you ^{[VSO ~9%]}

love you I ^{[VOS ~3%]}

you I love ^{[OVS ~1%]}


  {
    "like-button-title": {
      "message": "je <a2>t'</a2><a1>aime</a1>"
    }
  }


  {
    "like-button-title": {
      "message": "eu <a2>te</a2> <a1>amo</a1>"
    }
  }


  {
    "like-button-title": {
      "message": "Ես <a2>քեզ</a2> <a1>սիրում</a1> եմ"
    }
  }

Ֆիքսված

Ֆիքսված տերմիններ

Բրենդերի անուններ

Օգտատերերի անուններ(Usernames)


    "whitelisted_notification": {
      "message": "$domain$ was whitelisted",
      "placeholders": {
        "domain": {
          "content": "$1",
          "example": "www.example.com"
        }
      }
    }


    getMessage("whitelisted_notification", ["www.example.com"]);

www.example.com was whitelisted


  {fixed-id <fix>CMintS</fix> uses <fix>fix</fix> tag}


  "fixed-id": {
    "message": "<fix2> тэг используется <fix1>-ом"
  }


  fix тэг используется CMintS-ом

Կառուցվածքը

Locales
Layouts/Themes
Pages/Content


  locales
  ├── de
  │   ├── about.json
  │   └── header.json
  ├── en
  │   ├── about.json
  │   └── header.json
  └── ru
      ├── about.json
      └── header.json


  theme
  ├── layouts
  │   ├── default.ejs
  │   └── home.ejs
  └── less/sass
      ├── _header.less
      ├── index.less
      └── main.less


  pages
  ├── about
  │   └── team.md
  ├── about.md
  ├── index.ejs
  └── news.md

Ստեղծել պարզ կայք

Ստատիկ քոնթենթի գեներացիա
Ձեւանմուշի շարժիչ(Templating engine)
Front Matter
Preprocessors (LESS or SASS)
i18n
- Դասավորություն(Layout)
- TMS ինտեգրացիա
- Markdown

Էջեր

Առանձին էջ լեզվի համար


  // From Hexo website
  /en/index.html
  /zh-tw/index.html

  // From Hugo website
  /content/about.md
  /content/about.fr.md

Markdown էջ


  ## Translation strings

  The translation strings can be defined in the source files by placing them
  inside of opening and closing curly braces. Translation string consist of
  stringId, optional description and source text:

  ## Heading IDs in markdown

  Markdown headers are automatically getting ID set to them, for the future
  reference and TOC generation, whenever a translation string is used as a
  markdown heading element text translation StringID is used as a header ID.

{StringId[Description] Message}


  ## {translation-strings[Page heading] Translation strings}

  {translation-strings-p[Paragraph in 'Translation strings' section]
  The translation strings can be defined in the source files by placing them
  inside of opening and closing curly braces. Translation string consist of
  stringId, optional description and source text:
  }

  ## {markdown-heading-id[Page heading] Heading IDs in markdown}

  {markdown-heading-id-p[Paragraph in 'Heading IDs in markdown' section]
  Markdown headers are automatically getting ID set to them, for the future
  reference and TOC generation, whenever a translation string is used as a
  markdown heading element text translation StringID is used as a header ID.
  }

Translation management tools

Comprehensive i18n website development tool

Lightweight and simple

Out of the box

https://cmints.io/

Ռեսուրսներ

Գրադարաններ

Ռեսուրսներ

Կոնտակտներ եւ հետեւելու հարթակներ

Blog: https://manvel.me
Email: saroyanm@gmail.com
Github: @Manvel
Gitlab: @saroyanm
Linkedin: /in/saroyanm
Twitter: @saroyanm

Շնորհակալությու ուշադրության համար

Table Of Content

start
Ես եւ միջազգայնացումը:
Տեղայնացում
date-format-meme
Ամսաթիվեր
Կոտորակային տարանջատում
Հերթականություն
Հասանելիություն
lang ատրիբուտը
hreflang
Accept-Language «header»-ը
chrome-language
german-ad
Ատրիբուտներ
Ուղղություն
ltr
rtl
rtl-ar
Ուղղություն
Նախագծում ֆիքսվաց չափերով
Տառատեսակներ(Ֆոնտեր)
big-font-file
Յունիքոդ միջակայք (5-18kb)
SEO
Թարգմանել էջի վերնագիրը եւ նկարագրությունը
rel-alternate-hreflang
Օգտագործել canonical կրկնվող քոնթենթի համար
SMM/SMO
Միջազգայնացում
Թարգմանության ֆայլեր
Թարգմանության տողեր
Թարգմանության տողերի օգտագործում
Հերթականություն
Ֆիքսված
Կառուցվածքը
Ստեղծել պարզ կայք
Էջեր
Markdown էջ
Translation management tools
Comprehensive i18n website development tool
Lightweight and simple
Out of the box
CMintS
Ռեսուրսներ
Գրադարաններ
Ռեսուրսներ
Կոնտակտներ եւ հետեւելու հարթակներ
Շնորհակալությու ուշադրության համար