2020年8月10日月曜日

nanoc 超入門

概要

nanoc は Ruby で書かれた静的なページのサイトを構築するためのツールです
今回はチュートリアルを試してみました

概要

  • macOS 10.15.6
  • Ruby 2.7.1p83
    • nanoc 4.11.18

インストール

  • bundle init
  • vim Gemfile
gem "nanoc"
gem "adsf"
gem "kramdown"
  • bundle config path vendor
  • bundle install

adsf は nanoc で作成したサイトを確認するために使います
kramdown は Markdown でページを書くために使います

サイトの作成

  • bundle exec nanoc create-site tutorial

サイトの雛形が作成されます

ビルドする

  • cd tutorial
  • bundle exec nanoc

これで output ディレクトリ配下に html や css が作成されます

とりあえず確認する

  • bundle exec nanoc view

これで localhost:3000 で雛形のサイトが確認できます

ホームページの編集

  • vim content/index.html
---
title: My Home
---

<h1>Welcom My Home!</h1>
  • bundle exec nanoc && bundle exec nanoc view

ページを追加する

  • vim content/about.html
---
title: About
---

<p>New page!</p>
  • bundle exec nanoc && bundle exec nanoc view

これで localhost:3000/about で追加したページにアクセスできます

レイアウトを変更する

  • vim layout/default.html
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Brand New Nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" href="/stylesheet.css">

    <!-- you don't need to keep this, but it's cool for stats! -->
    <meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
  </head>
  <body>
    <div id="main">
      <%= yield %>
      <% ary = (1..10).to_a %>
      <ul>
      <% ary.each do |data| %>
        <li><%= data %></li>
      <% end %>
      </ul>
    </div>
  </body>
</html>

erb のように <% %> で囲えば ruby が書けます
変数の展開も同じように <%= %> で書けます

  • bundle exec nanoc && bundle exec nanoc view

ページ全体の共通部分などを管理したいときに使いましょう

Markdown でページを追加する

これが nanoc の一つの特徴かもしれません
ページは HTML だけではなく Markdown でも追加できます
まずは Markdown で作成したページを追加します

  • vim content/test.md
---
title: Markdown Test Page
---

# Markdown Test
This page is a markdown test page.

## List
* a
* b
* c

---

## Link
[My blog](http://hawksnowlog.blogspot.com/)

そしてコンパイルルールを管理する Rules ファイルを編集し Markdown のファイルもコンパイル対象に含めます

compile '/**/*.md' do
  filter :kramdown
  layout '/default.*'

  if item.identifier =~ '**/index.*'
    write item.identifier.to_s
  else
    write item.identifier.without_ext + '/index.html'
  end
end

上記はデフォルトでコメントアウトされているのでコメントを外せば OK です
これでコンパイルしてみましょう

  • bundle exec nanoc && bundle exec nanoc view

http://localhost:3000/test にアクセスすると確認できます
ちゃんと HTML として出力されているのが確認できると思います

YAML frontmatter でカスタム属性を定義する

lib 配下に定義した関数は layouts で参照することができます
その特性を使って YAML frontmatter の部分にカスタム属性をもたせることができます
例えば tags という属性を追加したい場合には以下のようにします

まず lib/tags.rb を作成し tags 属性を取得する関数を定義します
YAML frontmatter に定義した情報は @item というインスタンス変数に格納されています

  • vim lib/tags.rb
def tags
  if @item[:tags].nil?
    []
  else
    @item[:tags]
  end
end

次に YAML frontmatter に tags 属性を追加しましょう

  • vim content/about.html
---
title: About
tags:
  - test
  - markdown
---

<p>New page!</p>

そして layouts で定義した関数を使えばページに設定した tags 属性の値を取得することができます

  • vim layouts/default.html
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Brand New Nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" href="/stylesheet.css">

    <!-- you don't need to keep this, but it's cool for stats! -->
    <meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
  </head>
  <body>
    <div id="main">
      <%= yield %>
      <% ary = (1..10).to_a %>
      <ul>
      <% ary.each do |data| %>
        <li><%= data %></li>
      <% end %>
      </ul>
      <h2>Tags</h2>
      <ul>
      <% tags.each do |tag| %>
      <li><%= tag %></li>
      <% end %>
      </ul>
    </div>
  </body>
</html>

ちなみに erb の式は layouts 配下でないと使えないので注意しましょう
これで動作確認するとタグの情報が設定されていることが確認できると思います

  • bundle exec nanoc && bundle exec nanoc view

ヘルパー関数を使う

実は先程のようにタグを取得するユーティリティ関数はすでに nanoc がヘルパー関数として定義してくれています
今度はヘルパー関数を使ってタグ情報を取得してみます

デフォルトで使えるヘルパーの一覧はここにあります
ヘルパーを使う場合には use_helper を使って読み込みます

  • vim lib/tags.rb
use_helper Nanoc::Helpers::Tagging

ヘルパーで使える関数も決まっています
今回は tags_for という関数を使います
これは tags という属性を拾ってそれを join して文字列として返すヘルパー関数です

  • vim layouts/default.html
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Brand New Nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" href="/stylesheet.css">

    <!-- you don't need to keep this, but it's cool for stats! -->
    <meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
  </head>
  <body>
    <div id="main">
      <%= yield %>
      <% ary = (1..10).to_a %>
      <ul>
      <% ary.each do |data| %>
        <li><%= data %></li>
      <% end %>
      </ul>
      <h2>Tags</h2>
      <p>Tags: <%= tags_for(@item) %></p>
    </div>
  </body>
</html>
  • bundle exec nanoc && bundle exec nanoc view

こんな感じで文字列として取得できているのが確認できると思います

最後に

これでチュートリアルは終了です
基本的な使い方は把握できたかなと思います

Ruby だと似たようなツールに Jekyll や Middleman などがあるので好きなやつを使えば良いかなと思います

参考サイト

時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)