CMintS

Ich und i18n

Spricht 3.1 Sprachen
Be2 und C-date
Google Chrome Erweiterungen
Websiten für eyeo
Adblock Plus UI

Lokalisierung

Datum

Datum: 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

Dezimaltrennzeichen

Nummer: 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

Auftrag

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')));

Zugänglichkeit

lang Attribut

Deklariert die Standard Sprache des Dokuments


    <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 Kopfzeile


  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 Größe der locale

Eigenschaften


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

Richtung


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


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

Die Layouts sind für feste Breiten erstellt

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;
  }

Schriftarten

Unterstützt von Zielsprachen

Betrachten Sie Fallbacks

Verwende Unicode Bereiche

350kb woff2
1.1mb ttf

Unicode Bereiche (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

Übersetze Seitentitel und die Beschreibung


  <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>

Benutze canonical zum Inhalt verdoppeln


  <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">

Internationalisierung

Übersetzungsdateien

JSON

XML

.po, .pot

Übersetzungszeilen

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": "О нас"
    }
  }

Benutze Übersetzungszeilen

Referenzübersetzungsdatei

Refferenz 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>

Wortstellung


    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> եմ"
    }
  }

Festgelegt

Befristungen

Markennamen

Benutzernamen


    "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-ом

Struktur

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

Einfache Website erstellen

Statische Inhaltserstellung
Vorlagen-Engine
Front Matter
Preprocessors (LESS or SASS)
i18n
- Anordnung
- TMS Integration
- Markdown

Seiten

Serverseite über locale


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

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

Markdown Seite


  ## 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/

Ressourcen

Biblitoheken/Rahmen

Ressourcen

Folgen/Kontaktieren

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

Hauptpunkte der Internationalisierung