Dieser Artikel ist der zweite Artikel in Jekyll Super Primer ab 0.

Was ist ein einzigartiges Thema?

Mit Jwkyll können Sie Ihre eigenen Themen erstellen, um Ihre eigene Design-Site zu erstellen. Denken Sie daran, dass Sie im Artikel \ # 1 das Layout festgelegt haben: Post, als Sie den Artikel erstellt haben? Dies bedeutet, dass Sie das Post-Layout des Themas verwenden.

Das Erstellen eines eigenen Themas in Jekyll ist sehr einfach. Es ist so, als würden Sie ein Layout im Verzeichnis "_layouts" erstellen und es wie zuvor in Posts und Seiten anwenden.

Hier werde ich versuchen, mein eigenes Thema auf die obere Seite und die Post-Seite anzuwenden.

Hinweis) Da ich mich auf den Operations- und Logikteil konzentrieren möchte, werde ich den Entwurfsteil erheblich weglassen. Wenn Sie es schön machen möchten, schreiben Sie scss von Grund auf neu oder verwenden Sie ein CSS-Framework wie Bootstrap oder Bulma.

Dann werde ich es sofort schaffen.

Vorbereitung vor dem Erstellen eines Themas

Löschen Sie nicht benötigte Dateien oder erstellen Sie die erforderlichen Dateien

Zuerst, Erstellen Sie ein "_layouts" -Verzeichnis in Ihrem Arbeitsstammverzeichnis. Zur Bestätigung vom letzten Mal werde ich vorerst ein Diagramm des Verzeichnisses veröffentlichen. (Die im automatisch generierten .gitignore angegebenen sind ausgeschlossen.

.
├── 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 und about.markdown sind vorerst nicht erforderlich. Löschen Sie sie daher.

Bearbeiten Sie die Einstellungsdatei

Öffnen Sie _config.yml und überschreiben Sie es wie folgt.

`_congig.yml`


title:Jekyll Super Einführung ab 0#Seitentitel
description: >- #Schreiben Sie eine Beschreibung der Website
Bitte schreiben Sie eine Beschreibung der Website.
Es wird allgemein gesagt, dass ungefähr 200 Zeichen gut sind.

baseurl: "" #Sie können dies ignorieren
url: "https://<type-your-domain>" #Geben Sie die Domain Ihrer Site ein.

plugins: #Fügen Sie hier alle Plugins hinzu, die Sie verwenden möchten
  - jekyll-feed

exclude: #Fügen Sie hier hinzu, was Sie nicht in die Site-Generierung einbeziehen
  - .sass-cache/
  - .jekyll-cache/
  - gemfiles/
  - Gemfile
  - Gemfile.lock
  - node_modules/
  - vendor/bundle/
  - vendor/cache/
  - vendor/gems/
  - vendor/ruby/

Das ist alles zur Vorbereitung.

Jekylls Lquid-Syntax

Bevor ich das Layout erstelle, werde ich die einfache Syntax erklären. Erstens kann Jekyll grundsätzlich auf HTML-Basis geschrieben werden. Sie können auch eine Syntax namens Liquid verwenden. Liquid wird als Vorlagensprache mit drei Hauptteilen betrachtet: Objekte, Tags und Filter.

Objekt

In Liquid können Sie ausgeben, indem Sie verschiedene Objekte (Variablen usw.) mit {{ und}} einschließen. Zum Beispiel

<title>
 {{ page.title }}
</title>
<!-- page.title = "Hallo,Welt!" ->

Mit einer solchen Quelle würde die generierte HTML-Datei folgendermaßen aussehen:

<title>
  "Hallo,Welt!"
</title>

Etikett

Sie können eine Vorlage mit Logik verwenden, indem Sie das Liquid-Tag verwenden. Wenn Sie das Liquid-Tag verwenden, schließen Sie es in "{%" und "%}" ein.

Zum Beispiel im folgenden Fall, wenn page.title "true" ist Das heißt, wenn der Wert vorhanden ist, wird "{{page.title}} - {{site.title}}" ausgegeben. Oder "Hallo Welt -! Jekyll ultra Erste Schritte" wird ausgegeben. Wenn "falsch", {{site.title}} Das heißt, "Jekyll Super Introduction" wird ausgegeben.

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

Jekyll bietet auch eine Vielzahl von Liquid-Tags an. Lesen Sie daher hier.

Filter

Flüssigkeitsfilter können die Ausgabe von Flüssigkeitsobjekten verarbeiten. Es kann implementiert werden, indem die Ausgabe des Objekts durch | getrennt wird.

Nehmen Sie zum Beispiel die folgende Quelle. "Page.date" ist übrigens ein Objekt, das das Erstellungsdatum des Artikels ausgibt. Die Ausgabe basiert auf der Namenskonvention für Artikeldateien "JJJJ-MM-TT- .md".

<p>Veröffentlichungsdatum: {{ page.date | date: "%Y Jahr%m Monat%d Tag" }}</p>
<!-- page.date = 2020-01-01 00:00:00 +0900 -->

In diesem Fall wird es wie folgt generiert:

<p>Veröffentlichungsdatum:01. Januar 2020</p>

Es gibt verschiedene andere nützliche Filter. Vielleicht möchten Sie einen Blick auf die offiziellen Dokumente unter [hier] werfen (http://jekyllrb-ja.github.io/docs/liquid/filters/).

Front Matter Mit Jekyll können Sie Ihrer Seite mithilfe von Front Matter Variablen hinzufügen. Übrigens habe ich in # 1 einen Beitrag für das Layout angegeben, aber dies ist auch eine Art Variable. Sie erhalten es unter page.layout.

Front Matter wird im Yaml-Format zwischen "---" und "---" am Anfang jeder Markdown-Datei und HTML-Datei geschrieben. Werfen wir einen Blick auf _posts / yyyy-mm-dd-hello-world, die über Jekyll Admin in \ # 1 generiert wurden.

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


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

# Hello, world!
##Hallo Welt!
**Konnichiha,Sekai**

Hallo Welt

Einige sind am Anfang zwischen "---" und "---" eingeklemmt. Das ist Front Matter.

Sie können darauf mit page.title oder page.layout im oberen Layout verweisen. Sie können diese Variable auch selbst festlegen, wenn Sie beispielsweise "text: hello!" Es kann durch page.text referenziert werden und" Hallo! "Wird ausgegeben.

Verwenden Sie scss / sass

Jekyll kann standardmäßig scss / sass verwenden. Erstellen Sie ein _sass-Verzeichnis im Projektstamm und fügen Sie darunter sass / scss-Dateien hinzu.

Erstellen Sie außerdem index.scss an einer geeigneten Stelle unter dem Projektstamm. Laden Sie die erstellte Datei mit "@ import". (Zu diesem Zeitpunkt ist der Startpunkt des relativen Pfads das Verzeichnis _sass.

Wenn das Verzeichnis "_scss" beispielsweise folgendermaßen aussieht:

.
├── _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';

Erstellen Sie index.scss unter Assets und erstellen Sie Durch Hinzufügen von "<link href =" {{"/assets/index.css" | absolute_url}} "rel =" stylesheet ">" zum Layout wird Sie können es durch Lesen tun.

Layout hinzufügen

Dann werde ich anfangen, Themen zu machen. Wie oben erwähnt, ist es einfach, weil Sie nur Layouts hinzufügen.

Allgemein gesprochen

Standardlayout, das die Grundlage aller Layouts ist --Post-Layout für Beiträge
Seitenlayout der festen (statischen?) Seite

Wenn Sie drei haben, können Sie eine hübsche Website erstellen.

Da wir uns außerdem auf den Operations- und Logikteil konzentrieren, werden wir den Entwurfsteil erheblich weglassen. ** Verwenden Sie MVP.css. ** ** ** Dies ist ein CSS-Framework, das direkt aus HTML-Tags formatiert.

Standardlayout

Fügen wir zunächst das Standardlayout hinzu, das die Grundlage aller Seiten bildet. Es gibt hier jedoch erhebliche individuelle Unterschiede in der Implementierungsmethode Vorerst möchte ich vom Standardlayout auf ein anderes Layout erben.

Quellcode

Erstellen Sie "default.html" im Verzeichnis "_layouts" und gehen Sie wie folgt vor:

`_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 %}">

    <!--OGP-Einstellungen-->
    <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 %}" />

    <!--Angeben des RSS-Feeds-->
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }} RSS" href="{{ "/feed.xml" | absolute_url }}" />

    <!-- mvp.css https://andybrewer.github.io/mvp/Benutzen. Veröffentlicht unter MIT-Lizenz.-->
    <link href="{{ "/mvp.css" | absolute_url }}" rel="stylesheet">
  </head>
  <body>
    {% include _header.html %}

    {{ content }}

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

Kommentar

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

Wie bereits erläutert. Dies gibt {{page.title}} - {{site.title}} aus, wenn in page.title ein Wert vorhanden ist. Wenn nicht, wird "{{site.title}}" gedruckt.

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

Dadurch wird auch page.desc gedruckt, wenn der Wert in page.desc vorhanden ist. Andernfalls werden die ersten 130 Zeichen von page.content (der Variablen, die den Inhalt der Seite enthält) gedruckt.

Nächster,

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

Das Einschließen des Flüssigkeitsetiketts. Dies ist sehr nützlich, um das Layout aufzuteilen. Sie können die Dateien unter "_include" lesen.

`_include/_header.html`


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

Schließlich,

{{ content }}

Dies bezieht sich auf die Quelle, aus der es gelesen wurde.

Post-Layout

Quellcode

`_layouts/post.html`


---
layout: default
---

<main>
  <article>
    <p>Veröffentlichungsdatum: {{ page.date | date: "%Y Jahr%m Monat%d Tag" }}</p>
    {% if page.desc %}
    <h2>{{ page.desc }}</h2>
    {% endif %}
  
    <div>
      {{ content }}
    </div>
  </article>
</main>

Kommentar

---
layout: default
---

Front Angelegenheit. Es gibt das zugrunde liegende Standardlayout an.

<p>Veröffentlichungsdatum: {{ page.date | date: "%Y Jahr%m Monat%d Tag" }}</p>

Das Datumsformat. Der von page.date zurückgegebene Wert ist also nicht sehr sauber Ich habe den Datumsfilter verwendet, damit es schön aussieht.

Ich glaube nicht, dass es noch andere Punkte zu beachten gibt. Ich habe auch die if-Anweisung früher erklärt.

Seitenlayout

Quellcode

`_layouts/page.html`


---
layout: default
---

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

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

Kommentar

Es gibt nichts Besonderes zu erwähnen. Es ist fast das gleiche wie bei der Post. Vergessen Sie nicht, das Layout für die vordere Angelegenheit anzugeben.

Versuchen Sie, andere Seiten zu erstellen

index.html Ohne index.html wird beim Zugriff auf das Stammverzeichnis Ihrer Domain eine klobige Indexseite angezeigt. Lassen Sie uns index.html erstellen.

`index.html`


---
layout: default
---

<main>
  <section>
    <header>
      <h2>Beitragsliste</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>

Kommentar

Ich benutze das Liquid Tag für. Es zieht jedes Element in eine Variable in Form von "für im Array".

Endgültige Verzeichnisstruktur

.
├── 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

Alle Quellcode

Der Quellcode ist auf Github verfügbar. https://github.com/yu-san-19/zero-starts-jektyll-nyumon/tree/7c75428c880be369a552bf72bf6a2f87d7a5293e

Versuche zu rennen

Nun, ich glaube, ich habe alles getan, also lass es uns tun.

$ bundle exec jekyll s

Wenn Sie etwas finden, das sich nach Zuhören anfühlt, versuchen Sie, auf Folgendes zuzugreifen. Wenn Folgendes angezeigt wird, ist dies erfolgreich.

http://localhost:4000/

http: // localhost: 4000 / JJJJ / MM / TT / Hallo-Welt.html (Geben Sie die MD-Dateinamen in JJJJ, TT, MM ein.)

schließlich

Dieses Mal erklärte ich das Layout und das Liquid-Tag, da es sich um eine Themenerstellung handelte. Es kann ein wenig weggelassen werden oder die Erklärung ist unzureichend, aber das japanische Dokument hat eine ziemlich solide Erklärung, also lesen Sie es bitte.

Wenn Sie dies nicht verstehen oder wenn dies falsch ist oder wenn diese Erklärung leichter zu verstehen ist, können Sie dies gerne kommentieren.

Bis zu diesem Punkt (obwohl ich das Design usw. ignoriere) ist die Site vorerst bereit. Dies ist jedoch nicht jedermanns Sache. Nächstes Mal werde ich die Veröffentlichung der Website erläutern.

Bis zum nächsten Mal!

[RUBY] Jekyll Super Introductory Ab 0 # 2-Original Theme Creation

2 Original-Themenerstellung <- Diesmal

Was ist ein einzigartiges Thema?

Vorbereitung vor dem Erstellen eines Themas

Löschen Sie nicht benötigte Dateien oder erstellen Sie die erforderlichen Dateien

Bearbeiten Sie die Einstellungsdatei

`_congig.yml`

Jekylls Lquid-Syntax

Objekt

Etikett

Filter

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

Verwenden Sie scss / sass

`index.scss`

Layout hinzufügen

Standardlayout

Quellcode

`_layouts/default.html`

Kommentar

`_include/_header.html`

Post-Layout

Quellcode

`_layouts/post.html`

Kommentar

Seitenlayout

Quellcode

`_layouts/page.html`

Kommentar

Versuchen Sie, andere Seiten zu erstellen

`index.html`

Kommentar

Endgültige Verzeichnisstruktur

Alle Quellcode

Versuche zu rennen

schließlich