--- 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**. ```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. Download TeXt Theme 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} ### 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 `` dans le fichier Markdown de l'article. Vous pouvez trouver plus d'informations [ICI](https://jekyllrb.com/docs/posts/#post-excerpts). | ```yaml excerpt_separator: 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*. ### 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 `` 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

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

### 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*. Les clés de traduction et les noms multilingues mentionnés ci-dessus prennent en charge les langues suivantes : | Language | `lang` | | --- | --- | | **English** | en, en-GB, en-US, en-CA, en-AU | | **French** | fr, fr-BE, fr-CA, fr-CH, fr-FR, fr-LU | 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. ### 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**
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_border"){:.border}
![Image](path-to-image){:.border}
**Shadow**
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_shadow"){:.shadow}
![Image](path-to-image){:.shadow}
**Rounded**
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_rounded"){:.rounded}
![Image](path-to-image){:.rounded}
**Circle**
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_circle"){:.circle}
![Image](path-to-image){:.circle}
**Mixture**
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_border+rounded"){:.border.rounded}
![Image](path-to-image){:.border.rounded}
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_circle+shadow"){:.circle.shadow}
![Image](path-to-image){:.circle.shadow}
![Image](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/image.jpg "Image_circle+border+shadow"){:.circle.border.shadow}
![Image](path-to-image){:.circle.border.shadow}
## 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
``` ```html
``` ```html
``` ## Grid ### Base
6 cells
2 cells
4 cells
```html
6 cells
2 cells
4 cells
``` ### Responsive
12/12/6 cells
12/4/2 cells
12/8/4 cells
```html
12/12/6 cells
12/4/2 cells
12/8/4 cells
``` ### Auto Sizing
2 cells
Whatever's left!
```html
2 cells
whatever's left!
```
shrink
expand
```html
shrink
expand
``` ### Gutters
6 cells
6 cells
6 cells
6 cells
```html
6 cells
6 cells
6 cells
6 cells
```
6 cells
6 cells
6 cells
6 cells
```html
6 cells
6 cells
6 cells
6 cells
```
6 cells
6 cells
6 cells
6 cells
```html
6 cells
6 cells
6 cells
6 cells
``` ### Overflow
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
## 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). ```html ```
Download TeXt Theme
```html Download TeXt Theme ``` ## Image | Type | Class Names | | ---- | ---- | | **base** | image | | **size** | image\-\-md (default), image\-\-xs, image\-\-sm, image\-\-lg, image\-\-xl | ### Size **Extreme Small** ```html ``` **Small** ```html ``` **Middle** ```html ``` **Large** ```html ``` **Extreme Large** ```html ``` ## 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**
BUTTON
[BUTTON](#){:.button.button--primary.button--pill} ```html BUTTON ``` **Secondary**
BUTTON
[BUTTON](#){:.button.button--secondary.button--pill} ```html BUTTON ``` **Success**
BUTTON
[BUTTON](#){:.button.button--success.button--pill} ```html BUTTON ``` **Outline**
BUTTON
[BUTTON](#){:.button.button--outline-success.button--pill} ```html BUTTON ``` ### Shape **Pill**
BUTTON
[BUTTON](#){:.button.button--primary.button--pill} ```html BUTTON ``` **Rounded**
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded} ```html BUTTON ``` **Circle**
X
[X](#){:.button.button--primary.button--circle} ```html X ``` ### Size **Extreme Small**
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded.button--xs} ```html BUTTON ``` **Small**
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded.button--sm} ```html BUTTON ``` **Middle**
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded} ```html BUTTON ``` **Large**
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded.button--lg} ```html BUTTON ``` **Extreme Large**
BUTTON
[BUTTON](#){:.button.button--primary.button--rounded.button--xl} ```html BUTTON ``` ## Item ### Content

Photograph

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.

```html

Photograph

...

``` ### Image and Content

Photograph

```html

Photograph

```

Photograph

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.

```html

Photograph

...

``` ### Image Size

Photograph

```html

Photograph

```

Photograph

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.

```html

Photograph

...

```

Photograph

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.

```html

Photograph

...

``` ## Card ### Image
```html
``` ### Content

Photograph

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.

```html

Photograph

...

``` ### Image and Content

Photograph

```html

Photograph

```

Photograph

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.

```html

Photograph

...

``` ### Image Overlay

Photograph

```html

Photograph

```

Photograph

```html

Photograph

``` ### Flat

Photograph

```html

Photograph

``` ### Clickable
```html
``` ## Hero ### Normal

Hero

```html

Hero

``` ### Center

Hero

```html

Hero

``` ### Dark Theme

Hero

```html

Hero

``` ### Background Image

Hero

```html

Hero

```

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

```html

Hero

...

``` ### Height

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

```html

Hero

...

``` ### Background Image + Center

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

```html

Hero

...

```

Hero

There's a hero, If you look inside your heart,

You don't have to be afraid of what you are.

```html

Hero

...

``` ## Swiper `Alpha`{:.warning} ### Normal
1
2
3
4
5
6
7
```css .swiper-demo { height: 220px; } ``` ```html
1
2
3
4
5
6
7
``` ```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
1
2
3
4
5
6
7
### Dark Theme
1
2
3
4
5
6
7
**Without Animation**
1
2
3
4
5
6
7