Cet article est le deuxième article de Jekyll Super Primer à partir de 0.

Qu'est-ce qu'un thème unique?

Jwkyll vous permet de créer vos propres thèmes pour créer votre propre site de conception. Rappelez-vous que dans l'article \ # 1, vous définissez layout: post lorsque vous avez créé l'article? Cela signifie utiliser la mise en page de l'article du thème.

Créer votre propre thème dans Jekyll est très simple, c'est comme créer une mise en page dans le répertoire _layouts et l'appliquer en le spécifiant dans les articles et les pages comme vous le faisiez auparavant.

Ici, je vais essayer d'appliquer mon propre thème à la première page et à la page de publication.

Note) Puisque je veux me concentrer sur la partie opération et logique, j'omettrai considérablement la partie conception. Si vous voulez le rendre beau, vous pouvez écrire scss à partir de zéro ou utiliser un framework css tel que Bootstrap ou Bulma.

Ensuite, je le ferai immédiatement.

Préparation avant de créer un thème

Supprimer les fichiers inutiles ou créer les fichiers nécessaires

Tout d'abord, Créez un répertoire _layouts dans votre répertoire racine de travail. Pour confirmation de la dernière fois, je posterai un diagramme de l'annuaire pour le moment. (Ceux spécifiés dans le .gitignore généré automatiquement sont exclus.

.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _layouts
├── _posts
│   ├── 2020-05-19-hello-world.md
│   └── 2020-05-19-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown

Index.markdown et about.markdown ne sont pas nécessaires pour le moment, supprimons-les.

Modifier le fichier de paramètres

Ouvrez _config.yml et écrasez-le comme suit.

`_congig.yml`


title:Jekyll super introduction à partir de 0#Titre du site
description: >- #Rédiger une description du site
Veuillez rédiger une description du site.
On dit généralement qu'environ 200 caractères sont bons.

baseurl: "" #Vous pouvez ignorer cela
url: "https://<type-your-domain>" #Entrez le domaine de votre site.

plugins: #Ajoutez les plugins que vous souhaitez utiliser ici
  - jekyll-feed

exclude: #Ajoutez ici ce que vous n'incluez pas dans la génération du site
  - .sass-cache/
  - .jekyll-cache/
  - gemfiles/
  - Gemfile
  - Gemfile.lock
  - node_modules/
  - vendor/bundle/
  - vendor/cache/
  - vendor/gems/
  - vendor/ruby/

C'est tout pour la préparation.

Syntaxe Lquid de Jekyll

Avant de faire la mise en page, je vais expliquer la syntaxe simple. Premièrement, Jekyll peut fondamentalement être écrit en html. Vous pouvez également utiliser une syntaxe appelée Liquid. Liquid est considéré comme un langage de modèle avec trois parties principales: les objets, les balises et les filtres.

objet

Dans Liquid, vous pouvez produire en englobant divers objets (variables, etc.) avec {{ et}} . Par exemple

<title>
 {{ page.title }}
</title>
<!-- page.title = "Bonjour,monde!" ->

Avec une telle source, le fichier html généré ressemblerait à ceci:

<title>
  "Bonjour,monde!"
</title>

marque

Vous pouvez utiliser un modèle avec logique à l'aide de la balise Liquid. Si vous utilisez la balise Liquid, placez-la entre {% et %}.

Par exemple, dans le cas suivant, si page.title vaut "true" Autrement dit, si la valeur existe, «{{page.title}} - {{site.title}}» est affiché. Ou "Hello, world -! Jekyll ultra Getting Started" sera affiché. Si «faux», {{site.title}} Autrement dit, "Jekyll Super Introduction" est affiché.

<title>
  {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}
</title>
<!-- page.title = "Bonjour,monde!", site.title = "Jekyll Super Primer" ->

Jekyll propose également une variété de balises Liquid, vous pouvez donc lire ici.

filtre

Les filtres liquides peuvent traiter la sortie des objets liquides. Il peut être implémenté en séparant la sortie de l'objet par «|».

Par exemple, prenons le cas de la source suivante. À propos, page.date est un objet qui affiche la date de création de l'article. Il est généré en fonction de la convention de dénomination du fichier article aaaa-mm-jj- <title> .md.

<p>date de sortie: {{ page.date | date: "%Y année%m mois%jour j" }}</p>
<!-- page.date = 2020-01-01 00:00:00 +0900 -->

Dans ce cas, il sera généré comme suit:

<p>date de sortie:01 janvier 2020</p>

Il existe divers autres filtres utiles. Vous voudrez peut-être jeter un œil aux documents officiels sur ici.

Front Matter Jekyll vous permet d'ajouter des variables à votre page en utilisant Front Matter. Au fait, j'ai spécifié un post pour la mise en page dans # 1, mais c'est aussi une sorte de variable, Vous pouvez l'obtenir sur page.layout.

Front Matter est écrit au format yaml entre «---» et «---» au début de chaque fichier markdown et fichier html. Jetez un œil aux _posts / aaaa-mm-jj-hello-world générés via Jekyll Admin dans \ # 1.

`2020-05-19-hello-world.md`


---
title: Hello, world!
layout: post
---

# Hello, world!
##Bonjour le monde!
**Konnichiha,Sekai**

Bonjour le monde

Certains d'entre eux sont pris en sandwich entre «---» et «---» au début. C'est Front Matter.

Vous pouvez vous y référer avec page.title ou page.layout dans la mise en page supérieure. Vous pouvez également définir cette variable vous-même, donc par exemple, si vous ajoutez text: hello! Sous mise en page, Il peut être référencé par page.text et" hello! "Est affiché.

Utiliser scss / sass

Jekyll a la possibilité d'utiliser scss / sass par défaut. Créez un répertoire _sass dans la racine du projet et ajoutez-y les fichiers sass / scss.

Créez également index.scss à un endroit approprié sous la racine du projet, Chargez le fichier créé avec @ import. (À ce stade, le point de départ du chemin relatif est le répertoire _sass.

Par exemple, si le répertoire _scss ressemble à ceci:

.
├── _errors.scss
├── _global.scss
├── _index.scss
├── _navbar.scss
├── _page.scss
├── _post.scss
├── _variables.scss
└── bulma
    ├── ...

`index.scss`


---
---

@import 'bulma/bulma';
@import 'bulma/bulma-tooltip/index';
@import 'variables';
@import 'global'; 
@import 'navbar';
@import 'index';
@import 'page';
@import 'post';
@import 'errors';

Créez index.scss sous les actifs et créez En ajoutant <link href =" {{"/assets/index.css" | absolute_url}} "rel =" stylesheet "> à la mise en page, Vous pouvez le faire en lisant.

Ajouter une mise en page

Ensuite, je commencerai à créer des thèmes. Comme mentionné ci-dessus, c'est facile car vous ajoutez simplement des mises en page.

D'une manière générale

Disposition par défaut, qui est la base de toutes les mises en page --Mise en page des messages
Mise en page de la page fixe (statique?)

Si vous en avez trois, vous pouvez créer un joli site.

De plus, puisque nous allons nous concentrer sur la partie opération et logique, nous omettons considérablement la partie conception. ** Utilisez MVP.css. ** ** Il s'agit d'un framework css qui crée des styles directement à partir de balises HTML.

mise en page par défaut

Tout d'abord, ajoutons la mise en page par défaut qui est à la base de toutes les pages. Il existe des différences individuelles considérables dans la méthode de mise en œuvre ici, mais Pour le moment, j'aime hériter de la mise en page par défaut vers une autre mise en page.

Code source

Créez default.html dans le répertoire _layouts et procédez comme suit:

`_layouts/default.html`


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
      {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}
    </title>
    <meta name="description" content="{% if page.desc %}{{ page.desc }}{% else %}{{ page.content | strip_html | truncate: 130 }}{% endif %}">

    <!--Paramètres OGP-->
    <meta property="og:title" content="{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
    <meta property="og:site_name" content="{{ site.title }}" />
    <meta property="og:description" content="{% if page.desc %}{{ page.desc }}{% else %}{{ page.content | strip_html | truncate: 130 }}{% endif %}" />
    <meta property="og:image" content="{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ "/assets/images/ogp-image.png " | absolute_url }}{% endif %}" />

    <!--Spécification du flux RSS-->
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }} RSS" href="{{ "/feed.xml" | absolute_url }}" />

    <!-- mvp.css https://andybrewer.github.io/mvp/Utiliser. Publié sous licence MIT.-->
    <link href="{{ "/mvp.css" | absolute_url }}" rel="stylesheet">
  </head>
  <body>
    {% include _header.html %}

    {{ content }}

    {% include _footer.html %}
  </body>
</html>

Commentaire

<title>
  {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}
</title>

Comme expliqué précédemment. Cela affichera {{page.title}} - {{site.title}} s'il y a une valeur dans page.title, Sinon, il imprime "{{site.title}}".

<meta name="description" content="{% if page.desc %}{{ page.desc }}{% else %}{{ page.content | strip_html | truncate: 130 }}{% endif %}">

Cela imprime également page.desc si la valeur existe dans page.desc, sinon imprime les 130 premiers caractères de page.content (la variable qui contient le contenu de la page).

prochain,

 {% include _header.html %}
...
 {% include _footer.html  %}

L'inclusion de l'étiquette liquide. Ceci est très utile pour diviser la mise en page. Vous pouvez lire les fichiers sous _include.

`_include/_header.html`


<header>
  <nav>
      <a href="/">{{ site.title }}</a>
      <ul>
          <li><a href="/">domicile</a></li>
      </ul>
  </nav>
  <h1>{{ page.title }}</h1>
</header>

Finalement,

{{ content }}

Cela fait référence à la source à partir de laquelle il a été lu.

mise en page de l'article

Code source

`_layouts/post.html`


---
layout: default
---

<main>
  <article>
    <p>date de sortie: {{ page.date | date: "%Y année%m mois%jour j" }}</p>
    {% if page.desc %}
    <h2>{{ page.desc }}</h2>
    {% endif %}
  
    <div>
      {{ content }}
    </div>
  </article>
</main>

Commentaire

---
layout: default
---

Front Matter. Il spécifie la disposition par défaut sous-jacente.

<p>date de sortie: {{ page.date | date: "%Y année%m mois%jour j" }}</p>

Le format de la date. La valeur renvoyée par page.date n'est pas très propre, donc J'ai utilisé le filtre de date pour le rendre joli.

Je ne pense pas qu'il y ait d'autres points à noter. J'ai également expliqué la déclaration if plus tôt.

mise en page

Code source

`_layouts/page.html`


---
layout: default
---

<main>
  <div>
    {% if page.desc %}
    <h2>{{ page.desc }}</h2>
    {% endif %}

    <div>
      {{ content }}
    </div>
  </div>
</main>

Commentaire

Il n'y a rien de spécial à mentionner. C'est presque la même chose que la publication. N'oubliez pas de spécifier la mise en page de la page d'accueil.

Essayez de créer d'autres pages

index.html Sans index.html, vous vous retrouverez avec une page d'index maladroite lorsque vous accédez à la racine de votre domaine. Créons index.html.

`index.html`


---
layout: default
---

<main>
  <section>
    <header>
      <h2>Liste des messages</h2>
    </header>

    {% for post in site.posts %}
      <aside>
        <a href="{{ post.url }}"><h3>{{ post.title }}</h3></a>
        <p>{% if post.desc %}{{ post.desc }}{% else %}{{ post.content | strip_html | truncate: 130 }}{% endif %}</p>
      </aside>  
    {% endfor %}
  </section>
</main>

Commentaire

J'utilise l'étiquette liquide pour. Il tire chaque élément dans une variable sous la forme de pour <nom de la variable> dans le tableau.

Structure du répertoire final

.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _includes
│   ├── _footer.html
│   └── _header.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── 2020-05-19-hello-world.md
│   └── 2020-05-19-welcome-to-jekyll.markdown
├── index.html
└── mvp.css

Tout le code source

Le code source est disponible sur Github. https://github.com/yu-san-19/zero-starts-jektyll-nyumon/tree/7c75428c880be369a552bf72bf6a2f87d7a5293e

Essayez de courir

Eh bien, je pense que j'ai tout fait, alors faisons-le.

$ bundle exec jekyll s

Si vous trouvez quelque chose qui ressemble à une écoute, essayez d'accéder à ce qui suit. Si ce qui suit est affiché, cela réussit.

http://localhost:4000/

http: // localhost: 4000 / aaaa / mm / jj / hello-world.html (Entrez les numéros de nom de fichier md en aaaa, jj, mm selon le cas)

à la fin

Cette fois, j'ai expliqué la mise en page et le tag liquide car il s'agissait d'une création de thème. Il peut être un peu omis ou l'explication est insuffisante, mais le document japonais a une explication assez solide, veuillez donc le lire.

Si vous ne comprenez pas cela, ou si c'est faux, ou si cette explication est plus facile à comprendre, n'hésitez pas à commenter.

Jusqu'à présent (même si j'ignore le design, etc.), le site est prêt pour le moment. Cependant, ce n'est pas quelque chose que tout le monde peut voir. La prochaine fois, j'expliquerai la sortie du site.

À la prochaine!

[RUBY] Jekyll Super Introduction # 2-À partir de 0-Créer votre propre thème

2 Création de thèmes originaux <-Cette fois

Qu'est-ce qu'un thème unique?

Préparation avant de créer un thème

Supprimer les fichiers inutiles ou créer les fichiers nécessaires

Modifier le fichier de paramètres

`_congig.yml`

Syntaxe Lquid de Jekyll

objet

marque

filtre

`2020-05-19-hello-world.md`

Utiliser scss / sass

`index.scss`

Ajouter une mise en page

mise en page par défaut

Code source

`_layouts/default.html`

Commentaire

`_include/_header.html`

mise en page de l'article

Code source

`_layouts/post.html`

Commentaire

mise en page

Code source

`_layouts/page.html`

Commentaire

Essayez de créer d'autres pages

`index.html`

Commentaire

Structure du répertoire final

Tout le code source

Essayez de courir

à la fin