Powered by SmartDoc
<< JelyllでWebページを作る/とりあえず Jelyll チュートリアル/Jekyll チュートリアルの簡潔バージョンで >>

3.2 Jekyll チュートリアルの簡潔バージョンで

Jelyll自体のチュートリアルは[3]にあります．ここでは時間がないのでザクっと

  1. とりあえず"Hello World!"

    1. index.htmlを作る

      <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

    2. サイトを構築しウェブサーバー(WEBRick)を立ち上げる

      • ローカルなら

        % jekyll serve

      • Jekyll VMなら

        % jekyll serve -Ht.truefc.org -P8080

      　このとき，_site ディレクトリに HTML コンテンツが 吐き出されたことを確認

    3. できたページを確認

  2. "Hello World!"を小文字に

    フロントマター(front matter) というのを追加して， liquid という言語 の downcase フィルターを使う．

    ---
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

  3. Aboutページを追加

    1. Aboutページとの切替えのためのナビゲーションを_includes/navigation.htmlに作成

      <nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

    2. 共通のレイアウトdefault.htmlを_layoutsディレクトリに作成

      　ナビゲーションファイルを liquid のincludeタグでイ ンクルード．制御はタグと呼ばれる "{%" と "%}" で括った 操作で行なう．

      <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

      • page.title :このレイアウトを呼び出したコンテンツのフロントマターで定義されるtitleの中身
      • content :このレイアウトを呼び出したフロントマター以下の内容

    3. index.htmlの修正

      ---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

      • _layouts/default.htmlはフロントマターでlayout: defaultとすることで呼び出せる

    4. about.mdを作成

      ---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

      • about.mdの内容はマークダウンであることに注意

  4. 現在のページを強調

    　現在のページの URL を保持している Jekyll 変数 を用いてnavigation.html を変更

    <nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
    Home
  </a>
  <a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
    About
  </a>
</nav>

  5. 現在のページを緑色で強調

    　Sassを使います．CSS のソー スファイルを _sass/main.scss に置き， assets/css/styles.scss でそれをインポートします．

    　ついでにページデータを _data/navigation.yml に入れ一 元管理．

    1. navigation.yml

      - name: Home
  link: /
- name: About
  link: /about.html

    2. main.scss

      .current {
  color: green;
}

    3. styles.scss

      ---
---
@import "main";

    4. navigation.html

      <nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

    5. 最後に_layouts/default.htmlでスタイルシートを参照して終了

      <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

  6. ブログページを追加

    　個々のブログ(ブログポスト)は _posts ディレクトリ下に YYYY-MM-DD-タイトル.md という名前で作成し，そのレイアウトを _layouts/post.html で指定すると，_site/YYYY/MM/DD/ タイトル.html に作られる．

    　個々のブログポストの URL およびタイトル は site.posts の要素の url，title で参照できる．

    1. ブログポストを作成

      　ここでは，bananas，apples，kiwifruit というタイトルの 3 つ を作成

      ---
layout: post
author: jill
---
A banana is an edible fruit - botanically a berry - produced by several kinds
of large herbaceous flowering plants in the genus Musa.

In some countries, bananas used for cooking may be called "plantains",
distinguishing them from dessert bananas. The fruit is variable in size, color,
and firmness, but is usually elongated and curved, with soft flesh rich in
starch covered with a rind, which may be green, yellow, red, purple, or brown
when ripe.

      ---
layout: post
author: jill
---
An apple is a sweet, edible fruit produced by an apple tree.

Apple trees are cultivated worldwide, and are the most widely grown species in
the genus Malus. The tree originated in Central Asia, where its wild ancestor,
Malus sieversii, is still found today. Apples have been grown for thousands of
years in Asia and Europe, and were brought to North America by European
colonists.

      ---
layout: post
author: ted
---
Kiwifruit (often abbreviated as kiwi), or Chinese gooseberry is the edible
berry of several species of woody vines in the genus Actinidia.

The most common cultivar group of kiwifruit is oval, about the size of a large
hen's egg (5-8 cm (2.0-3.1 in) in length and 4.5-5.5 cm (1.8-2.2 in) in
diameter). It has a fibrous, dull greenish-brown skin and bright green or
golden flesh with rows of tiny, black, edible seeds. The fruit has a soft
texture, with a sweet and unique flavor.

    2. ポストレイアウト(_layouts/post.html)の作成

      ---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>

{{ content }}

      • date_to_stringは日付を良きに図らうフィルター

    3. ブログレイアウト(_layouts/blog.html)の作成

      ---
layout: default
title: Blog
---
<h1>Latest Posts</h1>

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

      • post.excerptは最初の一段落

    4. ナビゲーションにブログを追加

      - name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html

  7. スタッフページを追加

    　ブログの著者と，そのブログの一覧を表示する．

    　まず，ファイルをまとめて入れるディレクトリ名(コレクション名)を collections キー で _config.yml で定義．それぞれの著者別の説明ファイルを jekyll_root_dir/_コレクション名 に入れ，後はブログと同じ．ここでは，コレクション名は authors

    1. コレクション名(authors)を定義

      collections:
  authors:
    output: true

      • output: trueしないと出力されないらしい

    2. 各著者のドキュメント(_authors/*.md)を作成

      　ここでは jill と ted

      ---
short_name: jill
name: Jill Smith
position: Chief Editor
---
Jill is an avid fruit grower based in the south of France.

      ---
short_name: ted
name: Ted Doe
position: Writer
---
Ted has been eating fruit since he was baby.

    3. 著者のレイアウト(_layouts/author.html)を作成

      　ついでに著者の作成したブログポストを表示

      ---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

<h2>Posts</h2>
<ul>
  {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
  {% for post in filtered_posts %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

      • contentはマークダウンであるが，ここでは自動でMarkdown⇒HTML変換される
      • where: A, Bは「A == Bである配列のみを抽出」

    4. スタッフページ(staff.html)の作成

      ---
layout: default
title: Staff
---
<h1>Staff</h1>

<ul>
  {% for author in site.authors %}
    <li>
      <h2><a href="{{ author.url }}">{{ author.name }}</a></h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

      • author.contentはcontentじゃないのでmarkdownifyによってMarkdown⇒HTML変換が必要

    5. ブログページ(_layouts/post.html)に著者のページへのリンクを追加

      ---
layout: default
---
<h1>{{ page.title }}</h1>

<p>
  {{ page.date | date_to_string }}
  {% assign author = site.authors | where: 'short_name', page.author | first %}
  {% if author %}
    - <a href="{{ author.url }}">{{ author.name }}</a>
  {% endif %}
</p>

{{ content }}

    6. ナビゲーション(_data/navigation.yml)にスタッフを追加

      - name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html
- name: Staff
  link: /staff.html

    7. ドキュメントファイル(*.md)のデフォルトレイアウトを_config.ymlで設定

      collections:
  authors:
    output: true

defaults:
  - scope:
      path: ""
      type: "authors"
    values:
      layout: "author"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"

<< JelyllでWebページを作る/とりあえず Jelyll チュートリアル/Jekyll チュートリアルの簡潔バージョンで >>