yannstatic/aide-jekyll-text-theme.md

---
layout: article  
title:  Aide Jekyll TeXt thème  
mermaid: true
chart: true
---

*TeXt est un thème Jekyll super personnalisable pour site personnel, site d’équipe, blog, projet, documentation, etc…*

## Sommaire

- [Caractéristiques](#caractéristiques)
- [Démarrage rapide](#démarrage-rapide)
    - [Installer le thème](#installer-le-thème)
    - [Configuration](#configuration)
    - [Paramètres du site](#paramètres-du-site)
- [Navigation](#navigation)
    - [Header Navigation](#header-navigation)
    - [Sidebar Navigation](#sidebar-navigation)
- [Layout](#layout)
    - [Mise en page](#mise-en-page)
    - [Article Layout](#article-layout)
    - [Home Layout](#home-layout)
    - [Archive Layout](#archive-layout)
    - [Landing Layout](#landing-layout)
    - [404 Layout](#404-layout)
- [Logo et Favicon](#logo-et-favicon)
    - [Logo](#logo)
    - [Favicon](#favicon)
- [Auteurs](#auteurs)
- [Internationalisation](#internationalisation)
- [Rédaction des messages](#rédaction-des-messages)
    - [Création de fichiers de poste](#création-de-fichiers-de-poste)
- [Chart](#chart)
- [Autres styles](#autres-styles)
    - [Alerte](#alerte)
    - [Tag](#tag)
    - [Image](#image)
- [Spacing](#spacing)
    - [EXEMPLES](#exemples)
- [Grid](#grid)
    - [Base](#base)
    - [Responsive](#responsive)
    - [Auto Sizing](#auto-sizing)
    - [Gutters](#gutters)
    - [Overflow](#overflow)
- [Icons](#icons)
- [Image](#image)
    - [Size](#size)
- [Button](#button)
    - [Type](#type)
    - [Shape](#shape)
    - [Size](#size)
- [Item](#item)
    - [Content](#content)
    - [Image and Content](#image-and-content)
    - [Image Size](#image-size)
- [Card](#card)
    - [Image](#image)
    - [Content](#content)
    - [Image and Content](#image-and-content)
    - [Image Overlay](#image-overlay)
    - [Flat](#flat)
    - [Clickable](#clickable)
- [Hero](#hero)
    - [Normal](#normal)
    - [Center](#center)
    - [Dark Theme](#dark-theme)
    - [Background Image](#background-image)
    - [Height](#height)
    - [Background Image + Center](#background-image--center)
- [Swiper](#swiper)
    - [Normal](#normal)
    - [Light Theme](#light-theme)
    - [Dark Theme](#dark-theme)


## Caractéristiques

* [Github jekyll-text-theme (original)](https://github.com/kitian616/jekyll-TeXt-theme)
- Responsive
- HTML sémantique
- Skins
- Thème principal
- Internationalisation
- Recherchez
- Table des matières
- Auteurs
- Styles supplémentaires (alerte, tag, image, icône, bouton, grille, etc.)
- Extensions (audios, vidéos, diapositives, démos)
- Améliorations de la démarque ([mermaid](https://mermaidjs.github.io/), [chartjs](http://www.chartjs.org/))
- RSS ([jekyll-feed](https://github.com/jekyll/jekyll-feed))

**Skins**

TeXt dispose de 6 skins intégrés, vous pouvez également créer votre propre skin.

| `default` | `dark` | `forest` |
| --- |  --- | --- |
| ![Default](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_default.jpg) | ![Dark](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_dark.jpg) | ![Forest](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_forest.jpg) |

| `ocean` | `chocolate` | `orange` |
| --- |  --- | --- |
| ![Ocean](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_ocean.jpg) | ![Chocolate](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_chocolate.jpg) | ![Orange](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_orange.jpg) |

**Highlight Theme**

TeXt utilise [Tomorrow](https://github.com/chriskempson/tomorrow-theme) comme thème principal.

| `tomorrow` | `tomorrow-night` | `tomorrow-night-eighties` | `tomorrow-night-blue` | `tomorrow-night-bright` |
| --- |  --- | --- | --- |  --- |
| ![Tomorrow](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow.png) | ![Tomorrow Night](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night.png) | ![Tomorrow Night Eighties](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night-eighties.png) | ![Tomorrow Night Blue](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night-blue.png) | ![Tomorrow Night Bright](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night-bright.png) |

## Démarrage rapide

TeXt Theme est 100% compatible avec les pages GitHub et a été développé en tant que [thèmes basés sur les pierres précieuses](https://jekyllrb.com/docs/themes/) pour une utilisation plus facile.

Dans ce document, vous apprendrez comment **installer le thème**, **régler votre site**, **prévision locale** pour le développement, **construire** et **publier**.

<!--more-->

```mermaid
graph LR;
    A0(Installing TeXt)
    B0(Common Method)
    B1[Ruby Gem Method]
    C0[Fork this repo]
    C1[Clone from GitHub]
    C2[Download]
    D0[Setup Your Site]
    E0(Installing Development Environment)
    F0[Installing Directly]
    F1[Docker]
    A0-->B0;
    A0-->B1;
    B0-->C0;
    B0-->C1;
    B0-->C2;
    B1-->D0;
    C1-->E0
    C2-->E0
    D0-->E0
    E0-->F0
    E0-->F1
```

### Installer le thème

**Méthode commune**

Pour l'installer avec la méthode commune, il vous suffit de copier tous les fichiers du thème dans votre projet. Il y a plusieurs façons de le faire :

1. Cloner [jekyll-TeXt-theme](https://github.com/kitian616/jekyll-TeXt-theme) à partir de github.

   **Clone avec HTTPS:**

   ```bash
   git clone https://github.com/kitian616/jekyll-TeXt-theme.git
   ```

   **Clone with SSH:**

   ```bash
   git clone git@github.com:kitian616/jekyll-TeXt-theme.git
   ```

2. Téléchargez et dézippez le fichier dans le répertoire de votre site Jekyll.

   <a class="button button--success button--rounded" href="https://github.com/kitian616/jekyll-TeXt-theme/archive/master.zip"><i class="fas fa-download"></i> Download TeXt Theme</a>

3. Si vous hébergez votre site sur les pages GitHub, vous pouvez simplement bifurquer vers [jekyll-TeXt-theme](https://github.com/kitian616/jekyll-TeXt-theme), puis renommer le dépôt en **USERNAME.github.io** - en remplaçant **USERNAME** par votre nom d'utilisateur GitHub.

   ![Fork](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/github-fork.jpg)

   ![Rename](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/github-rename-repo.jpg)

**Méthode Ruby Gem**

1. Ajoutez cette ligne au *Gemfile* de votre site Jekyll :

   ```ruby
   gem "jekyll-text-theme"
   ```

2. Ajoutez cette ligne au fichier *_config.yml* de votre site Jekyll :

   ```yaml
   theme: jekyll-text-theme
   ```

**Configurez votre site**

Si vous installez le thème avec la méthode commune, vous pouvez passer directement à l'étape suivante. Mais **si vous installez le thème avec la méthode ruby gem, vous devez faire quelques travaux supplémentaires**.

Avec les thèmes basés sur gem, certains des répertoires du site (tels que les répertoires *assets*, *_layouts*, *_includes* et *_sass*) sont stockés dans le gem du thème, cachés de votre vue immédiate. Vous devez ajouter quelques fichiers dans le répertoire de votre site Jekyll :

```bash
├── 404.html
├── Gemfile
├── _config.yml
├── _data
│   └── locale.yml
├── _posts
│   └── ...
├── about.md
├── archive.html
└── index.html
```

Vous pouvez vous référer au dossier [/test](https://github.com/kitian616/jekyll-TeXt-theme/tree/master/test), c'est un exemple avec des thèmes basés sur les pierres précieuses.

**Installation de l'environnement de développement**

Si vous souhaitez les exécuter localement, vous devez d'abord installer Ruby et Jekyll, voir [Installation](https://jekyllrb.com/docs/installation/) pour plus de détails.

Ensuite, lancez le bundler pour installer les dépendances :

```bash
bundle install --path vendor/bundle
```

De plus, TeXt offre [Docker](https://www.docker.com/) un soutien au développement et au public, ce qui facilite la mise en place de l'environnement.

![Docker](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/docker.jpg){:width="400px"}

Il suffit de suivre ces trois étapes :

1. [Installer le docker](https://docs.docker.com/install/).

2. Générer *Gemfile.lock* :

   ```bash
   docker run --rm -v "$PWD":/usr/src/app -w /usr/src/app ruby:2.6 bundle install
   ```

3. Construire l'image du Docker :

   ```bash
   docker-compose -f ./docker/docker-compose.build-image.yml build
   ```

**Avant-première locale**

Lancez le service `bundle exec jekyll serve` pour démarrer le serveur de développement, puis vous pouvez visiter [http://localhost:4000/](http://localhost:4000/) pour prévisualiser votre site.

Pour Docker, lancez `docker-compose -f./docker/docker-compose.default.yml up` pour démarrer le serveur de développement.

**Construction et publication**


Si vous hébergez votre site sur les pages GitHub, il suffit de pousser la source vers la branche principale de votre dépôt USERNAME.github.io, GitHub se construira automatiquement. Vous pouvez visiter votre site sur **https://USERNAME.github.io** quelques minutes plus tard.

Si vous hébergez votre site sur votre serveur, vous devez d'abord lancer `JEKYLL_ENV=production bundle exec jekyll build` pour générer votre site, puis mettre à jour les fichiers du dossier *_site* sur votre serveur.

**Structure**


```bash
├── _data
│   ├── locale.yml
│   ├── navigation.yml
│   └── variables.yml
├── _includes
│   ├── analytics-providers
│   ├── aside
│   ├── comments-providers
│   ├── markdown-enhancements
│   ├── pageview-providers
│   ├── scripts
│   ├── sidebar
│   ├── snippets
│   ├── svg
│   │   ├── icon
│   │   │   ├── social
│   │   │   │   ├── facebook.svg
│   │   │   │   └── ...
│   │   └── logo.svg
│   └── ...
├── _layouts
│   ├── 404.html
│   ├── archive.html
│   ├── article.html
│   ├── base.html
│   ├── home.html
│   ├── none.html
│   └── page.html
├── _sass
├── assets
│   ├── css
│   │   └── blog.scss
│   └── images
├── tools
├── 404.html
├── Gemfile
├── _config.yml
├── about.md
├── archive.html
├── favicon.ico
├── gulpfile.js
├── index.html
├── jekyll-text-theme.gemspec
└── package.json
```

### Configuration

Jekyll vous permet de concocter vos sites comme vous le souhaitez, et c'est grâce aux options de configuration puissantes et flexibles que cela est possible. Ces options peuvent être spécifiées soit dans un fichier *_config.yml* placé dans le répertoire racine de votre site, soit sous forme de drapeaux pour l'exécutable jekyll dans le terminal.

Pour des raisons techniques, *_config.yml* n'est **PAS** rechargé automatiquement lorsque vous utilisez `jekyll serve`. Si vous modifiez ce fichier, veuillez redémarrer le processus du serveur.
{:.warning}

<!--more-->

### Paramètres du site

**Thème**

Si vous utilisez la version Ruby gem du thème, vous aurez besoin de cette ligne pour l'activer :

```yaml
theme: jekyll-text-theme
```

**Skin**

TeXt dispose de 6 skins intégrés, vous pouvez également créer votre propre skin.

| `default` | `dark` | `forest` |
| --- |  --- | --- |
| ![Default](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_default.jpg) | ![Dark](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_dark.jpg) | ![Forest](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_forest.jpg) |

| `ocean` | `chocolate` | `orange` |
| --- |  --- | --- |
| ![Ocean](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_ocean.jpg) | ![Chocolate](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_chocolate.jpg) | ![Orange](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/skins_orange.jpg) |

```yaml
text_skin: default # "default" (default), "dark", "forest", "ocean", "chocolate", "orange"
```

**Highlight Theme**

TeXt use [Tomorrow](https://github.com/chriskempson/tomorrow-theme) as the highlight theme.

| `tomorrow` | `tomorrow-night` | `tomorrow-night-eighties` | `tomorrow-night-blue` | `tomorrow-night-bright` |
| --- |  --- | --- | --- |  --- |
| ![Tomorrow](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow.png) | ![Tomorrow Night](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night.png) | ![Tomorrow Night Eighties](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night-eighties.png) | ![Tomorrow Night Blue](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night-blue.png) | ![Tomorrow Night Bright](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/screenshots/highlight_tomorrow-night-bright.png) |

Every skin has a default highlight theme, but you can overwrite it by `highlight_theme` variable.

```yaml
highlight_theme: default # "default" (default), "tomorrow", "tomorrow-night", "tomorrow-night-eighties", "tomorrow-night-blue", "tomorrow-night-bright"
```

**URL**

Le nom d'hôte et le protocole de base de votre site. Si vous hébergez le site sur des pages Github, celui-ci sera défini comme le domaine des pages GitHub (cname ou user domain) [^gitHub_metadata]. Par exemple, https://kitian616.github.io ou https://tianqi.name s'il y a un fichier cname.

Jekyll 3.3 remplace cette valeur par l'url suivante : http://localhost:4000 lorsque vous exécutez `jekyll serve` dans un environnement de développement [^jekyll_site_variables]. Vous pouvez spécifier l'environnement Jekyll [^jekyll_specifying_environment] à l'environnement de production par `JEKYLL_ENV=production` pour éviter ce comportement.
{:.warning}

[^gitHub_metadata]: [GitHub Metadata, a.k.a. site.github](https://github.com/jekyll/github-metadata#what-it-does)

[^jekyll_site_variables]: [Variables#Site Variables](https://jekyllrb.com/docs/variables/#site-variables)

[^jekyll_specifying_environment]: [Configuration#Specifying a Jekyll environment at build timePermalink](https://jekyllrb.com/docs/configuration/#specifying-a-jekyll-environment-at-build-time)

**URL de base**

L'URL de base de votre site, par défaut, est "/". Si vous hébergez le site sur des pages Github, elle sera définie comme le nom du projet pour les pages de projet si aucune n'est définie [^gitHub_metadata].

**Titre**

Le nom de votre site.

```yaml
title: "My Awesome Website"
```

**Description**

Utilisez quelques mots pour décrire votre site.

```yaml
description: > # this means to ignore newlines until "nav_lists:"
  A website with awesome stories.
```

**Langue et fuseau horaire**

La langue de votre site, vous pouvez la remplacer par d'autres sur des postes spécifiques, des pages de YAML Front Matter [^font_matter], en savoir plus sur [Internationalisation](#internationalisation).

```yaml
lang: fr
```

[^font_matter]: [Front Matter](https://jekyllrb.com/docs/frontmatter/)

Définissez le fuseau horaire pour la génération du site. Cela définit la variable d'environnement TZ, que Ruby utilise pour gérer la création et la manipulation de l'heure et de la date. Une liste de toutes les valeurs disponibles se trouve [ICI](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).

Lorsque le service est effectué sur une machine locale, le fuseau horaire par défaut est défini par votre système d'exploitation. Mais lorsqu'il est servi sur un hôte/serveur distant, le fuseau horaire par défaut dépend du paramétrage ou de l'emplacement du serveur [^jekyll_global_configuration].

[^jekyll_global_configuration]: [Configuration#Global Configuration](https://jekyllrb.com/docs/configuration/#global-configuration)

```yaml
timezone: Europe/Paris
```

**Auteur et social**

Informations sur l'auteur du site (une personne, une équipe ou une organisation).

**Type**

Type de l'auteur du site, une personne ou une organisation, utilisé par le balisage [schema.org](https://schema.org/), par défaut "personne".

**Nom**

Utilisé pour désigner l'auteur d'un site.

**Avatar**

Photo ou Logo de l'auteur du site

**Bio**

Brève introduction pour l'auteur du site

**Social**

Nom d'utilisateur ou identifiant des réseaux sociaux de l'auteur du site.

TeXt supporte Email, Facebook, Twitter, Weibo, Google Plus, Telegram, Medium, Zhihu, Douban, Linkedin, Github et Npm, plus à ajouter.

En fonction de vos paramètres, les boutons de réseau social s'afficheront dans le pied de page de chaque page.

**Dépôt GitHub**

Pour plus d'informations sur l'installation du plugin [GitHub Metadata](https://github.com/jekyll/github-metadata), veuillez consulter [ICI](https://github.com/jekyll/github-metadata/blob/master/docs/configuration.md#configuration).

Pour que jekyll-github-metadata sache quelles métadonnées rechercher, il doit être capable de déterminer le dépôt NWO à demander à GitHub.

"NWO" signifie "nom avec propriétaire". Il s'agit du nom d'utilisateur du propriétaire du dépôt, plus une barre oblique vers l'avant et le nom du dépôt, par exemple kitian616/jekyll-TeXt-theme, où "kitian616" est le propriétaire et "jekyll-TeXt-theme" est le nom du dépôt.

```yaml
repository: user_name/repo_name
```

**Post Extrait**

Chaque message prend automatiquement le premier bloc de texte, du début du contenu à la première occurrence de `excerpt_separator`, et le définit comme l'extrait du message.

L'extrait de l'article est affiché dans la liste des articles dans la mise en page d'accueil. Il existe deux types d'extrait, le type texte et le type html.

| Type Name | Description |
| --- | --- |
| **text** | l'extrait est un texte simple qui filtre tous les éléments non textuels (tels que le titre, le lien, la liste, le tableau, l'image, etc.) et ne comporte que 350 caractères au maximum.|
| **html** | L'extrait est un document HTML tout comme le contenu de l'article. Il affiche tout le contenu par défaut, à l'exception de l'ajout de `<!--more-->` dans le fichier Markdown de l'article. Vous pouvez trouver plus d'informations [ICI](https://jekyllrb.com/docs/posts/#post-excerpts). |

```yaml
excerpt_separator: <!--more-->
excerpt_type: text # text (default), html
```

**Licence**

| Name | License | Image |
| --- | --- | --- |
| CC-BY-4.0     | [Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/) | ![CC-BY-4.0](https://i.creativecommons.org/l/by/4.0/88x31.png) |
| CC-BY-SA-4.0  | [Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/) | ![CC-BY-SA-4.0](https://i.creativecommons.org/l/by-sa/4.0/88x31.png) |
| CC-BY-NC-4.0  | [Attribution-NonCommercial 4.0 International](https://creativecommons.org/licenses/by-nc/4.0/) | ![CC-BY-NC-4.0](https://i.creativecommons.org/l/by-nc/4.0/88x31.png) |
| CC-BY-ND-4.0  | [Attribution-NoDerivatives 4.0 International](https://creativecommons.org/licenses/by-nd/4.0/) | ![CC-BY-ND-4.0](https://i.creativecommons.org/l/by-nd/4.0/88x31.png) |

```yaml
license: CC-BY-NC-4.0
```

**TOC**

Éléments à utiliser comme titres.

```yaml
toc:
  selectors: "h1,h2,h3"
```

**Améliorations markdown**

Afin d'améliorer l'expérience de l'utilisateur tant pour la lecture que pour l'écriture des messages, TeXt a apporté quelques améliorations pour la démarque. Par défaut, toutes les améliorations pour la démarque sont activées. Vous devez régler les paramètres sur true pour les activer :

```yaml
## Mermaid
mermaid: true

## Chart
chart: true
```

Et vous pouvez également le remplacer par d'autres sur des postes spécifiques, des pages de YAML Front Matter [^font_matter].

Vérifiez [Writing Posts](/) pour une utilisation détaillée.

**Paginer**

Paramètres du plugin [Jekyll Paginate](https://github.com/jekyll/jekyll-paginate). Pour activer la pagination des articles de votre blog, ajoutez une ligne au fichier *_config.yml* qui précise le nombre d'articles à afficher par page :

```yaml
paginate: 8
```

Le nombre doit être le nombre maximum de messages que vous souhaitez voir affichés par page dans le site généré.

Vous pouvez également spécifier la destination des pages de pagination :

```yaml
paginate_path: /page:num # don't change this unless for special need
```

**Sources**

TeXt utilise CDN[^cdn] pour améliorer la vitesse, vous pouvez choisir [BootCDN](http://www.bootcdn.cn/) (par défaut) ou [unpkg](https://unpkg.com/) comme fournisseur CDN de votre site, les deux sont open source et gratuits.

Si votre site est principalement destiné aux Chinois, utilisez simplement BootCDN.

```yaml
sources: bootcdn # bootcdn (default), unpkg
```

[^cdn]: [Content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network)

**Partage**

| Name | Sharing Provider | Minimum Version |
| --- | --- | --- |
| **addtoany** | [AddToAny](https://www.addtoany.com/) | 2.2.2 |
| **addthis** | [AddThis](https://www.addthis.com/) | 2.2.3 |
| **custom** | | |

**AddToAny**

```yaml
comments:
  provider: addtoany
```

**AddThis**

```yaml
comments:
  provider: addthis
  addthis:
    id: "your-addthis-pubid"
```

Vous DEVEZ définir la variable "sharing" comme "true" dans le **YAML Front Matter** de la page pour permettre le partage sur cette page
{:.warning}

## Navigation

Il existe deux types de navigation dans TeXt : **Header Navigation** et **Sidebar Navigation**, toutes deux définies dans *data/navigation.yml*.

<!--more-->

### Header Navigation

La navigation dans l'en-tête est définie sous la clé "header" dans *data/navigation.yml*, c'est un tableau de titre(s) et d'url :

```yaml
header:
  - title:      Docs
    url:        /docs/en/quick-start
  - title:      文档
    url:        /docs/zh/quick-start
  - titles:
      en:       Archive
      zh:       归档
      zh-Hans:  归档
      zh-Hant:  歸檔
    url:        /archive.html
  - titles:
      en:       About
      zh:       关于
      zh-Hans:  关于
      zh-Hant:  關於
    url:        /about.html
  - title:      GitHub
    url:        https://github.com/kitian616/jekyll-TeXt-theme
```

Vous pouvez utiliser des `titles` pour un nom multilingue.

### Sidebar Navigation

Pour utiliser la navigation latérale, vous devez d'abord définir une navigation dans *data/navigation.yml*.

```yaml
docs-en:
  - title:      Start
    children:
      - title:  Quick Start
        url:    /docs/en/quick-start
      - title:  Structure
        url:    /docs/en/structure
      ...
  - title:      Customization
    children:
      - title:  Configuration
        url:    /docs/en/configuration
      - title:  Navigation
        url:    /docs/en/navigation
      ...
```

Ensuite, utilisez la navigation définie comme navigation latérale de l'article dans le Front Matter :

```yaml
sidebar:
  nav: docs-en
```

## Layout


```mermaid
graph TB;
    NONE[none]
    BASE[base]
    PAGE[page]
    ARTICLE[article]
    ARTICLES[articles]
    HOME[home]
    ARCHIVE[archive]
    LANDING[landing]
    404[404]
    NONE-->BASE;
    BASE-->PAGE;
    PAGE-->ARTICLE;
    PAGE-->ARTICLES;
    ARTICLES-->HOME;
    PAGE-->ARCHIVE;
    PAGE-->LANDING;
    PAGE-->404;
```

### Mise en page

Base sur le schéma de base.

| Variable          | Option Values         | Description | Minimum Version |
| ---               | ---                   | ---         | ---     |
| **mode**          | normal (default), immersive | mode of the page. | 2.2.0 |
| **type**          | webpage (default), article | type of the page, used by [schema.org](https://schema.org/) markup. | |
| **key**           | `!!str`               | Unique key for the post, required by Comments and Pageview. begin with a letter (`[A-Za-z]`) and may be followed by any number of letters, digits (`[0-9]`), hyphens (`-`), underscores (`_`), colons (`:`), and periods (`.`). | |
| **lang**          | en (default), zh, zh-Hans, zh-Hant | Language of this page. | |
| **show_title**    | true (default), false | Set as `false` to hide title on this page. | |
| **show_date**     | true (default), false | Set as `false` to hide date on this page. | 2.2.0 |
| **show_tags**     | true (default), false | Set as `false` to hide tags on this page. | 2.2.0 |
| **full_width**    | true, false (default) | Set as `true` to make main full width on this page. | |
| **pageview**      | true, false (default) | Set as `true` to enable pageview on this page. | 2.2.0 |
| **comment**       | true (default), false | Set as `false` to disable comment on this page. | |
| **mermaid**       | true, false           | Set as `true` to enable Mermaid on this page. | |
| **chart**         | true, false           | Set as `true` to enable Chart on this page. | |
| **cover**         | `!!str`               | Url of the cover image. | 2.2.0 |
| **header**        | false, `!!map`        | Set as `false` to hide header on this page. | 2.2.0 |
| **article_header**| `!!map`               | | 2.2.0 |
| **aside**         | `!!map`               | | |
| **sidebar**       | `!!map`               | | |
| **footer**        | false                 | Set as `false` to hide footer on this page. | 2.2.3 |
| **lightbox**      | true, false           | Set as `true` to enable lightbox (modal image gallery) for large images on this page, you can set `lightbox-ignore` class name to ignore the certain image. | 2.2.4 |

**header**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **theme**         | light, dark           | |
| **background**    | `!!str`               | Available when specified theme. |

**article_header**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **type**          | overlay, cover        | |
| **align**         | left (default), center| |
| **theme**         | light (default), dark | |
| **background_color** | `!!str`            | Available when type is `overlay`. If set to a dark color, you need set theme as 'dark'. |
| **background_image** | `!!map`            | Available when type is `overlay`, set as `false` can overwrite `cover` to disable background image. |
| **image**         | `!!map`               | Available when type is `cover`. |
| **actions**       | `!!seq`               | |

**article_header.background_image**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **gradient**      | `!!str`               | |
| **src**           | `!!str`               | Default to `cover` |

**article_header.image**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **src**           | `!!str`               | |

**aside**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **toc**           | true, false           | Set as `true` to enable TOC on this page's aside. |

**sidebar**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **nav**           | `!!str`               | |

### Article Layout

Basé sur Page Layout.

| Variable          | Option Values         | Description | Minimum Version |
| ---               | ---                   | ---         | ---     |
| **modify_date**   | `!!str`               | The last modified date of this article, the date is modified in the format `YYYY-MM-DD HH:MM:SS +/-TTTT`; hours, minutes, seconds, and timezone offset are optional. just like `date` variable. | |
| **sharing**       | true, false (default) | Set as `true` to enable Sharing on this article. | 2.2.2 |
| **show_author_profile** | true, false (default) | Set as `true` to show author profile at the beginning of the article. | |
| **show_subscribe**| true, false (default) | Set as `true` to show subscribe info on this page. | latest |
| **license**       | true, false (default), CC-BY-4.0, CC-BY-SA-4.0, CC-BY-NC-4.0, CC-BY-ND-4.0 | license of the article. Set true to use `license` variable that set in *_config.yml*, set false to enable it. | |

**Articles Layout**

Basé sur Page Layout, valable depuis version **2.2.0**.

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **articles**      | `!!map`               | |

**articles**

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **data_source**   | `!!str`               | You can set it as a collections name, then the page will show the article list of this collections. You can refer to [Collections](https://jekyllrb.com/docs/collections/) to learn more about collections. |
| **type**          | item, brief, grid | TeXt supports 3 article list type with various settings, yan can find EXEMPLES [ICI](https://tianqi.name/jekyll-TeXt-theme/samples.html#articles-layout). |
| **size**          | md, sm        | Available when type is `grid`. |
| **article_type**  | BlogPosting       | Available when type is `normal`. |
| **show_cover**    | true (default), false | Available when type is `normal`. Before set it to `true`, you need first set each article a cover image, refer to the `cover` variable in [Page Layout](#page-layout). |
| **cover_size**    | lg, md, sm | Available when type is `normal`. |
| **show_excerpt**  | true, false (default) | Available when type is `normal`, refer to [excerpt_type](#excerpt_type) below. |
| **excerpt_type**  | text, html    | Available when type is `normal`. |
| **show_readmore** | true, false (default) | Available when type is `normal`. |
| **show_info**     | true, false (default) | Available when type is `normal` or `brief`. |

**articles.excerpt_type**

Chaque message prend automatiquement le premier bloc de texte, du début du contenu à la première occurrence de `excerpt_separator`, et le définit comme l'extrait du message.

L'extrait est affiché dans la liste des articles dans les articles et la mise en page d'accueil. Il existe deux types d'extrait, le type texte et le type html.

| Type Name | Description |
| ---       | ---         |
| **text** | l'extrait est un texte simple qui filtre tous les éléments non textuels (tels que le titre, le lien, la liste, le tableau, l'image, etc.) et ne comporte que 350 caractères au maximum. |
| **html** | l'extrait est un document HTML tout comme le contenu de l'article, Cela affichera tout le contenu par défaut, sauf l'ajout de `<!--more-->` dans le fichier Markdown de l'article, Vous pouvez trouver plus d'informations [ICI](https://jekyllrb.com/docs/posts/#post-excerpts).  |

Pour la page d'accueil, vous pouvez mettre `excerpt_type` à `HTML` comme ceci :

```yaml
layout: home
articles:
  excerpt_type: html
```

### Home Layout

Basé sur Articles Layout.

### Archive Layout

Basé sur Page Layout.

### Landing Layout

Basé sur Page Layout.

| Variable          | Option Values         | Description |
| ---               | ---                   | ---         |
| **data**          | `!!map`               | |

### 404 Layout

Basé surPage Layout.

## Logo et Favicon


### Logo

<p>TeXt <span>{% include svg/logo.svg %}</span> comme logo, vous pouvez le changer en remplaçant <em>_includes/svg/logo.svg</em> par votre propre logo.</p>

### Favicon

TeXt recommande [RealFaviconGenerator](https://realfavicongenerator.net/) pour générer des favicons.

Ouvrez [RealFaviconGenerator](https://realfavicongenerator.net/), cliquez sur "Select your Favicon picture" et choisissez ensuite votre image de favicon.

![Sélectionnez votre image Favicon](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/realfavicongenerator-select-favicon-picture.jpg)

Après les réglages, vous devez indiquer au générateur où vous placerez les fichiers favicon, TeXt les met par défaut à */actifs*.

Il est recommandé de placer les fichiers favicon à la racine de votre site.
{:.warning}

![Sélectionnez votre chemin Favicon](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/realfavicongenerator-path.jpg)

Si tout est fait, il suffit de cliquer sur "Générez vos Favicons et votre code HTML" à la dernière étape.

![Résultat](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/realfavicongenerator-result.jpg)

Téléchargez le paquet favicon et dézippez-le dans le chemin que vous venez de définir, et remplacez le code HTML dans *_includes/head/favicon.html*.

## Auteurs

Par défaut, tous les messages ou pages sont rédigés par l'"auteur" configuré dans *_config.yml*, mais vous pouvez l'écraser dans le YAML Front Mater de la page.

Pour ce faire, vous devez créer *_data/authors.yml* et ajouter des auteurs en utilisant le format suivant. Toutes les variables se trouvant sous "auteur" dans *_config.yml* peuvent être utilisées (type, nom, url, avatar, bio, email, facebook, etc.).

```yml
Tian Qi:
  name      : Tian Qi
  url       : https://tianqi.name
  avatar    : https://wx3.sinaimg.cn/large/73bd9e13ly1fjkqy66hl8j208c08c0td.jpg
  bio       : Author of TeXt.
  email     : kitian616@outlook.com
  facebook  : # "user_name" the last part of your profile url, e.g. https://www.facebook.com/user_name
  twitter   : kitian616 # "user_name" the last part of your profile url, e.g. https://twitter.com/user_name
  weibo     : 234695683 # "user_id"   the last part of your profile url, e.g. https://www.weibo.com/user_id/profile?...
  googleplus: 101827554735084402671 # "user_id"   the last part of your profile url, e.g. https://plus.google.com/u/0/user_id
  telegram  : # "user_name" the last part of your profile url, e.g. https://t.me/user_name
  medium    : # "user_name" the last part of your profile url, e.g. https://medium.com/user_name
  zhihu     : # "user_name" the last part of your profile url, e.g. https://www.zhihu.com/people/user_name
  douban    : # "user_name" the last part of your profile url, e.g. https://www.douban.com/people/user_name
  linkedin  : # "user_name" the last part of your profile url, e.g. https://www.linkedin.com/in/user_name
  github    : kitian616 # "user_name" the last part of your profile url, e.g. https://github.com/user_name
  npm       : # "user_name" the last part of your profile url, e.g. https://www.npmjs.com/~user_name
```

Assignez un des auteurs dans *authors.yml* à un message ou une page que vous souhaitez remplacer par `site.author`.

    ---
    author: Yann M
    ---

## Internationalisation


Les textes des éléments de l'interface utilisateur sont regroupés sous forme d'un ensemble de clés de traduction dans *_data/locale.yml*, ce qui permet à TeXt de prendre facilement en charge différentes langues.

En utilisant les `titres`, vous pouvez définir un nom multilingue pour la page, la mise en page et le titre du navigateur. Par défaut, TeXt a défini un nom multilingue dans *_data/navigation*, *_layouts/archive*, *_layouts/home* et *about.md*.

<!-- more -->

Les clés de traduction et les noms multilingues mentionnés ci-dessus prennent en charge les langues suivantes :
<!-- @start locale config -->

| Language                | `lang` |
| ---                     | ---    |
| **English**             | en, en-GB, en-US, en-CA, en-AU |
| **French**              | fr, fr-BE, fr-CA, fr-CH, fr-FR, fr-LU |

<!-- @end locale config -->
Vous pouvez voir des exemples pour différentes langues [ICI](https://tianqi.name/jekyll-TeXt-theme/samples.html#languages).

## Rédaction des messages

Comme expliqué sur la page [structure des répertoires](https://jekyllrb.com/docs/structure/), **le dossier */_posts* est l'endroit où se trouvent les articles de votre blog**. Ces fichiers sont généralement Markdown ou HTML. Tous les articles doivent avoir le format YAML Front Matter, et ils seront convertis de leur format source en une page HTML qui fait partie de votre site statique.

<!--more-->

### Création de fichiers de poste

Pour créer un nouveau poste, il suffit de créer un fichier dans le répertoire */_posts*. Jekyll exige que les fichiers de messages de blog soient nommés comme ceux-ci :

    2011-12-31-new-years-eve-is-awesome.md
    2012-09-12-how-to-write-a-blog.markdown

**Contenu**

Tous les fichiers d'articles de blog doivent commencer par YAML Front Matter.

Afin d'améliorer l'expérience de l'utilisateur tant pour la lecture que pour l'écriture des billets, TeXt a apporté quelques améliorations pour la démarque et quelques styles supplémentaires.

**YAML Front Matter**

    ---
    layout: article
    title: Document - Writing Posts
    ---

Entre ces lignes à triple pointillés, vous pouvez définir des variables. Vous pouvez considérer cela comme une configuration de page, celles-ci remplaceraient la configuration globale dans *_config.yml*.

En plus des variables prédéfinies par Jekyll, TeXt définit de nouvelles variables pour chaque mise en page, voir [Layout](#layout) pour plus de détails.

## Chart

[Chart.js](http://www.chartjs.org/docs/latest/) supporte 7 sortes of graphique:

- [Line Chart](http://www.chartjs.org/docs/latest/charts/line.html)
- [Bar Chart](http://www.chartjs.org/docs/latest/charts/bar.html)
- [Radar Chart](http://www.chartjs.org/docs/latest/charts/radar.html)
- [Polar Area Chart](http://www.chartjs.org/latest/charts/polar.html)
- [Pie Chart](http://www.chartjs.org/docs/latest/charts/doughnut.html)
- [Doughnut Chart](http://www.chartjs.org/docs/latest/charts/doughnut.html)
- [Bubble Chart](http://www.chartjs.org/docs/latest/charts/bubble.html)

## Autres styles


Jekyll utilise kramdown comme processeur de démarque par défaut. kramdown peut ajouter des attributs aux éléments de niveau bloc et span thgird-containre ALDs [^ALDs] feature. avec l'aide des ALD, nous pouvons définir les noms de classe d'un élément par `{ :.class-name1.class-name-2}`.


[^ALDs]: [Attribute List Definitions](https://kramdown.gettalong.org/syntax.html#attribute-list-definitions)

### Alerte

| Class Names |
| ---- |
| **success** |
| **info** |
| **warning** |
| **error** |

Success Text.
{:.success}

Info Text.
{:.info}

Warning Text.
{:.warning}

Error Text.
{:.error}

**markdown:**

    Success Text.
    {:.success}
^
    Info Text.
    {:.info}
^
    Warning Text.
    {:.warning}
^
    Error Text.
    {:.error}

### Tag

| Class Names |
| ---- |
| **success** |
| **info** |
| **warning** |
| **error** |

`success`{:.success}

`info`{:.info}

`warning`{:.warning}

`error`{:.error}

**markdown:**

    `success`{:.success}
^
    `info`{:.info}
^
    `warning`{:.warning}
^
    `error`{:.error}

### Image

| Class Names |
| ---- |
| **border** |
| **shadow** |
| **rounded** |
| **circle** |

**Border**

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_border"){:.border}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.border}
</div>
</div>
</div>

**Shadow**

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_shadow"){:.shadow}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.shadow}
</div>
</div>
</div>

**Rounded**

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_rounded"){:.rounded}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.rounded}
</div>
</div>
</div>

**Circle**

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_circle"){:.circle}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.circle}
</div>
</div>
</div>

**Mixture**

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_border+rounded"){:.border.rounded}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.border.rounded}
</div>
</div>
</div>

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_circle+shadow"){:.circle.shadow}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.circle.shadow}
</div>
</div>
</div>

<div class="grid-containre">
<div class="grid grid--p-2">
<div class="cell cell--12 cell--md-4 " markdown="1">
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_circle+border+shadow"){:.circle.border.shadow}
</div>
<div class="cell cell--12 cell--md-auto" markdown="1">
    ![Image](path-to-image){:.circle.border.shadow}
</div>
</div>
</div>

## Spacing


Spacing classes are named using the format `{property}{side}-{spacer}`.

where *property* is one of:

- `m` - for classes that set `margin`
- `p` - for classes that set `padding`

where *side* is one of:

- `t` - for classes that set `margin-top` or `padding-top`
- `b` - for classes that set `margin-bottom` or `padding-bottom`
- `l` - for classes that set `margin-left` or `padding-left`
- `r` - for classes that set `margin-right` or `padding-right`
- `x` - for classes that set both `*-left` and `*-right`
- `y` - for classes that set both `*-top` and `*-bottom`

blank - for classes that set a `margin` or `padding` on all 4 sides of the element

where *spacer* is one of:

- 0 - for classes that eliminate the `margin` or `padding` by setting it to `0`
- 1 - for classes that set the `margin` or `padding` to `$spacer * .25`
- 2 - for classes that set the `margin` or `padding` to `$spacer * .5`
- 3 - for classes that set the `margin` or `padding` to `$spacer`
- 4 - for classes that set the `margin` or `padding` to `$spacer * 1.5`
- 5 - for classes that set the `margin` or `padding` to `$spacer * 3`
- auto - for classes that set the `margin` to `auto`

`$spacer` is default to `1rem`, you can change or add new entries to the `$spacers` Sass map variable.

### EXEMPLES

```html
<div class="mt-2"></div>
<div style="margin-top: ($spacer * .5)"></div>
```

```html
<div class="mx-3"></div>
<div class="margin-left: $spacer; margin-right: $spacer;"></div>
```

```html
<div class="p-4"></div>
<div class="padding: ($spacer * 1.5);"></div>
```

## Grid


<style>
.grid-example {
  background-color: rgba(37, 147, 252, .28);
}
.content {
  padding: 5px 0;
  overflow: auto;
  color: #fff;
  word-wrap: normal;
  background-color: #2593fc;
  border: 1px rgba(0, 0, 0, .4) solid;
}
.content--auto {
  background-color: #ff69b4;
}
</style>

### Base

<div class="grid-example my-5">
  <div class="grid">
    <div class="cell cell--6 content">6 cells</div>
    <div class="cell cell--2 content">2 cells</div>
    <div class="cell cell--4 content">4 cells</div>
  </div>
</div>

```html
<div class="grid">
  <div class="cell cell--6">6 cells</div>
  <div class="cell cell--2">2 cells</div>
  <div class="cell cell--4">4 cells</div>
</div>
```

### Responsive

<div class="grid-example my-5">
  <div class="grid">
    <div class="cell cell--12 cell--lg-6 content">12/12/6 cells</div>
    <div class="cell cell--12 cell--md-4 cell--lg-2 content">12/4/2 cells</div>
    <div class="cell cell--12 cell--md-8 cell--lg-4 content">12/8/4 cells</div>
  </div>
</div>

```html
<div class="grid">
  <div class="cell cell--12 cell--lg-6 content">12/12/6 cells</div>
  <div class="cell cell--12 cell--md-4 cell--lg-2 content">12/4/2 cells</div>
  <div class="cell cell--12 cell--md-8 cell--lg-4 content">12/8/4 cells</div>
</div>
```

### Auto Sizing

<div class="grid-example my-5">
  <div class="grid">
    <div class="cell cell--2 content">2 cells</div>
    <div class="cell cell--auto content content--auto">Whatever's left!</div>
  </div>
</div>

```html
<div class="grid">
  <div class="cell cell--2">2 cells</div>
  <div class="cell cell--auto">whatever's left!</div>
</div>
```

<div class="grid-example my-5">
  <div class="grid">
    <div class="cell cell--shrink content">shrink</div>
    <div class="cell cell--auto content content--auto">expand</div>
  </div>
</div>

```html
<div class="grid">
  <div class="cell cell--shrink">shrink</div>
  <div class="cell cell--auto">expand</div>
</div>
```

### Gutters

<div class="grid-container my-5 grid-example">
  <div class="grid grid--p-3">
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
  </div>
</div>

```html
<div class="grid-container">
  <div class="grid grid--p-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>
```

<div class="grid-container my-5 grid-example">
  <div class="grid grid--px-3">
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
  </div>
</div>

```html
<div class="grid-container">
  <div class="grid grid--px-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>
```

<div class="grid-container my-5 grid-example">
  <div class="grid grid--py-3">
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
    <div class="cell cell--6">
      <div class="content">6 cells</div>
    </div>
  </div>
</div>

```html
<div class="grid-container">
  <div class="grid grid--py-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>
```

### Overflow

<div class="grid-example my-5">
  <div class="grid">
    <div class="cell cell--6">
      <div class="content">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
    </div>
    <div class="cell cell--6">
      <div class="content">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
    </div>
  </div>
</div>

<div class="grid-example my-5">
  <div class="grid">
    <div class="cell cell--4">
      <div class="content">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
    </div>
    <div class="cell cell--auto">
      <div class="content content--auto">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
    </div>
  </div>
</div>

<div class="grid-example grid-container my-5">
  <div class="grid grid--p-3">
    <div class="cell cell--6">
      <div class="content">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
    </div>
    <div class="cell cell--6">
      <div class="content">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
    </div>
  </div>
</div>

## Icons


TeXt uses Font Awesome for icons, you can search available icon code snippet [ICI](https://fontawesome.com/icons?d=gallery&q=donw&m=free).

<i class="fas fa-download"></i>

```html
<i class="fas fa-download"></i>
```

<div class="button button--success button--rounded button--lg"><i class="fas fa-download"></i> Download TeXt Theme</div>

```html
<a class="button button--success button--rounded button--lg" href="#"><i class="fas fa-download"></i> Download TeXt Theme</a>
```

## Image


| Type | Class Names |
| ---- | ---- |
| **base**  | image |
| **size**  | image\-\-md (default), image\-\-xs, image\-\-sm, image\-\-lg, image\-\-xl |

### Size

**Extreme Small**

<img class="image image--xs" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>

```html
<img class="image image--xs" src=""/>
```

**Small**

<img class="image image--sm" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>

```html
<img class="image image--sm" src=""/>
```

**Middle**

<img class="image image--md" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>

```html
<img class="image image--md" src=""/>
```

**Large**

<img class="image image--lg" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>

```html
<img class="image image--lg" src=""/>
```

**Extreme Large**

<img class="image image--xl" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>

```html
<img class="image image--xl" src=""/>
```

## Button


| Type | Class Names |
| ---- | ---- |
| **base**  | button |
| **type**  | button\-\-primary, button\-\-secondary, button\-\-success, button\-\-info, button\-\-warning, button\-\-error, button\-\-outline\-primary, button\-\-outline\-secondary, button\-\-outline\-success, button\-\-outline\-info, button\-\-outline\-warning, button\-\-outline\-error |
| **shape** | button\-\-pill, button\-\-rounded, button\-\-circle |
| **size**  | button\-\-md (default), button\-\-xs, button\-\-sm, button\-\-lg, button\-\-xl |

### Type

**Primary**

<div class="button button--primary button--pill">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--pill}

```html
<a class="button button--primary button--pill" href="">BUTTON</a>
```

**Secondary**

<div class="button button--secondary button--pill">BUTTON</div>

    [BUTTON](#){:.button.button--secondary.button--pill}

```html
<a class="button button--secondary button--pill" href="">BUTTON</a>
```

**Success**

<div class="button button--success button--pill">BUTTON</div>

    [BUTTON](#){:.button.button--success.button--pill}

```html
<a class="button button--success button--pill" href="">BUTTON</a>
```

**Outline**

<div class="button button--outline-success button--pill">BUTTON</div>

    [BUTTON](#){:.button.button--outline-success.button--pill}

```html
<a class="button button--outline-success button--pill" href="">BUTTON</a>
```

### Shape

**Pill**

<div class="button button--primary button--pill">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--pill}

```html
<a class="button button--primary button--pill" href="">BUTTON</a>
```

**Rounded**

<div class="button button--primary button--rounded">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--rounded}

```html
<a class="button button--primary button--rounded" href="">BUTTON</a>
```

**Circle**

<div class="button button--primary button--circle">X</div>

    [X](#){:.button.button--primary.button--circle}

```html
<a class="button button--primary button--circle" href="">X</a>
```

### Size

**Extreme Small**

<div class="button button--primary button--rounded button--xs">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--rounded.button--xs}

```html
<a class="button button--primary button--rounded button--xs" href="">BUTTON</a>
```

**Small**

<div class="button button--primary button--rounded button--sm">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--rounded.button--sm}

```html
<a class="button button--primary button--rounded button--sm" href="">BUTTON</a>
```

**Middle**

<div class="button button--primary button--rounded">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--rounded}

```html
<a class="button button--primary button--rounded" href="">BUTTON</a>
```

**Large**

<div class="button button--primary button--rounded button--lg">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--rounded.button--lg}

```html
<a class="button button--primary button--rounded button--lg" href="">BUTTON</a>
```

**Extreme Large**

<div class="button button--primary button--rounded button--xl">BUTTON</div>

    [BUTTON](#){:.button.button--primary.button--rounded.button--xl}

```html
<a class="button button--primary button--rounded button--xl" href="">BUTTON</a>
```

## Item


### Content

<div class="item">
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>
        A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
      </p>
    </div>
  </div>
</div>

```html
<div class="item">
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>
```

### Image and Content


<div class="item">
  <div class="item__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

```html
<div class="item">
  <div class="item__image">
    <img class="image" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>
```

<div class="item">
  <div class="item__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>
        A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
      </p>
    </div>
  </div>
</div>

```html
<div class="item">
  <div class="item__image">
    <img class="image" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>
```

### Image Size

<div class="item">
  <div class="item__image">
    <img class="image image--xs" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

```html
<div class="item">
  <div class="item__image">
    <img class="image image--xs" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>
```

<div class="item">
  <div class="item__image">
    <img class="image image--sm" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>
        A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
      </p>
    </div>
  </div>
</div>

```html
<div class="item">
  <div class="item__image">
    <img class="image image--sm" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>
```

<div class="item">
  <div class="item__image">
    <img class="image image--lg" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>
        A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
      </p>
    </div>
  </div>
</div>

```html
<div class="item">
  <div class="item__image">
    <img class="image image--lg" src=""/>
  </div>
  <div class="item__content">
    <div class="item__header">
      <h4>Photograph</h4>
    </div>
    <div class="item__description">
      <p>...</p>
    </div>
  </div>
</div>
```

## Card



### Image

<div class="card">
  <div class="card__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
</div>

```html
<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
</div>
```

### Content

<div class="card">
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.</p>
  </div>
</div>

```html
<div class="card">
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>...</p>
  </div>
</div>
```

### Image and Content

<div class="card">
  <div class="card__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

```html
<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>
```

<div class="card">
  <div class="card__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>
      A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
    </p>
  </div>
</div>

```html
<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>...</p>
  </div>
</div>
```

### Image Overlay

<div class="card">
  <div class="card__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
    <div class="overlay">
      <p>Photograph</p>
    </div>
  </div>
</div>

```html
<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
    <div class="overlay">
      <p>Photograph</p>
    </div>
  </div>
</div>
```

<div class="card">
  <div class="card__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
    <div class="overlay overlay--bottom">
      <p>Photograph</p>
    </div>
  </div>
</div>

```html
<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
    <div class="overlay overlay--bottom">
      <p>Photograph</p>
    </div>
  </div>
</div>
```

### Flat

<div class="card card--flat">
  <div class="card__image">
    <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

```html
<div class="card card--flat">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>
```

### Clickable

<div>
  <div class="card card--clickable">
    <div class="card__image">
      <img class="image" src="https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg"/>
    </div>
  </div>
</div>

```html
<a href="">
  <div class="card card--clickable">
    <div class="card__image">
      <img class="image" src=""/>
    </div>
  </div>
</a>
```

## Hero

### Normal

<div class="hero hero-example hero-fill-example my-3">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

```html
<div class="hero" style="background-color: #ccc;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>
```

### Center

<div class="hero hero-example hero--center hero-fill-example my-3">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

```html
<div class="hero hero--center" style="background-color: #ccc;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>
```

### Dark Theme

<div class="hero hero-example hero--dark hero-fill-example--dark my-3">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

```html
<div class="hero hero--dark" style="background-color: #123;">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>
```

### Background Image

<div class="hero hero-example hero--dark hero-bg-image-example my-3">
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>

```html
<div class="hero hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
  </div>
</div>
```

<div class="hero hero-example hero--dark hero-bg-image-example my-3">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>There's a hero, If you look inside your heart,</p>
    <p>You don't have to be afraid of what you are.</p>
  </div>
</div>

```html
<div class="hero hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>
```

### Height

<div class="hero hero-example hero--dark hero-bg-image-example hero-example--height my-3">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>There's a hero, If you look inside your heart,</p>
    <p>You don't have to be afraid of what you are.</p>
  </div>
</div>

```html
<div class="hero hero--dark" style='height: 500px; background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>
```

### Background Image + Center

<div class="hero hero-example hero--center hero--dark hero-bg-image-example my-3">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>There's a hero, If you look inside your heart,</p>
    <p>You don't have to be afraid of what you are.</p>
  </div>
</div>

```html
<div class="hero hero--center hero--dark" style='background-image: url("path-to-image");'>
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>
```

<div class="hero hero-example hero--center hero--dark hero-bg-image-example--linear-gradient my-3">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>There's a hero, If you look inside your heart,</p>
    <p>You don't have to be afraid of what you are.</p>
  </div>
</div>

```html
<style>
  .hero-example--linear-gradient {
    background-image: linear-gradient(135deg, rgba(255, 69, 0, .5), rgba(255, 197, 0, .2)), url("path-to-image");
  }
</style>

<div class="hero hero--center hero--dark hero-example--linear-gradient">
  <div class="hero__content">
    <h3>Hero</h3>
    <p>...</p>
  </div>
</div>
```

## Swiper


<style>
  .swiper-demo {
    height: 220px;
  }
  .swiper-demo .swiper__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
  }
  .swiper-demo .swiper__slide:nth-child(even) {
    background-color: #ff69b4;
  }
  .swiper-demo .swiper__slide:nth-child(odd) {
    background-color: #2593fc;
  }
  .swiper-demo--dark .swiper__slide:nth-child(even) {
    background-color: #312;
  }
  .swiper-demo--dark .swiper__slide:nth-child(odd) {
    background-color: #123;
  }
  .swiper-demo--image .swiper__slide:nth-child(n) {
    background-color: #000;
  }
</style>

`Alpha`{:.warning}

### Normal

<div class="swiper my-3 swiper-demo swiper-demo--0">
  <div class="swiper__wrapper">
    <div class="swiper__slide">1</div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <!-- <div class="swiper__pagination"></div> -->
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
  <!-- <div class="swiper-scrollbar"></div> -->
</div>

```css
.swiper-demo {
  height: 220px;
}
```

```html
<div class="swiper swiper-demo">
  <div class="swiper__wrapper">
    <div class="swiper__slide">1</div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>
```

```js
{%- raw -%}
{%- include scripts/lib/swiper.js -%}
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
  $('.swiper-demo').swiper();
});
{% endraw %}
```

### Light Theme

<div class="swiper swiper--light my-3 swiper-demo swiper-demo--1">
  <div class="swiper__wrapper">
    <div class="swiper__slide">1</div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>

### Dark Theme

<div class="swiper swiper--dark my-3 swiper-demo swiper-demo--dark swiper-demo--2">
  <div class="swiper__wrapper">
    <div class="swiper__slide">1</div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>


**Without Animation**

<div class="swiper my-3 swiper-demo swiper-demo--4">
  <div class="swiper__wrapper">
    <div class="swiper__slide">1</div>
    <div class="swiper__slide">2</div>
    <div class="swiper__slide">3</div>
    <div class="swiper__slide">4</div>
    <div class="swiper__slide">5</div>
    <div class="swiper__slide">6</div>
    <div class="swiper__slide">7</div>
  </div>
  <div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
  <div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>

<script>
  {%- include scripts/lib/swiper.js -%}
  var SOURCES = window.TEXT_VARIABLES.sources;
  window.Lazyload.js(SOURCES.jquery, function() {
    $('.swiper-demo--0').swiper();
    $('.swiper-demo--1').swiper();
    $('.swiper-demo--2').swiper();
    $('.swiper-demo--3').swiper();
    $('.swiper-demo--4').swiper({ animation: false });
  });
</script>