Pico導入

そういえばどうやってPicoを導入して見栄えをそれっぽくしたのか書いていなかった.

環境

さくらのレンタルサーバ上で動かしています.$HOME/wwwがApacheのDocumentRootです.

Picoのtarballをダウンロードし,展開する.

picocms/Picoから tarballをダウンロードし,$HOME/wwwへ展開します. Picoの導入は基本的にtarballをDocumentRootへ展開するだけで終わります.楽.

$ wget https://github.com/picocms/Pico/archive/v1.0.5.tar.gz
$ tar zxvf v1.0.5.tar.gz -C $HOME/www

あとは公式文書を読んで

picocms.orgを読めば大抵のことは分かります. Markdown文書はcontentディレクトリ以下に置けばよいとかそういう話が書いてあります.

Bloggingだけ少し悩んだ

ディレクトリの階層構造と使うファイルは

となります.blogディレクトリに記事を置いていきます. PicoはMarkdown文書先頭のYAMLを見て文書をソートするので最低でも

---
Title: Example Title
Description: Short Abstract of Article
Date: 2017/05/13 15:30:00
Template: index
---

は書いておきます. 問題はblog.mdとindex.twig,blog.twigの内容ですがblog.mdは

---
Title: Blog
Template: blog
---

のみ書きます. index.twigはheaderを定義している箇所を編集します.具体的には

  <header id="header">
    <div class="inner clearfix">
      <h1><a href="{{ "index"|link }}" id="logo">{{ site_title }}</a></h1>
      <nav>
        <ul>
          {% for page in pages if page.title %}
          <!--
            ヘッダーにはブログ記事を表示しない.
          --!>
            {% if not (page.id starts with "blog/") %}
              <li{% if page.id == current_page.id %} class="active"{% e    ndif %}>
                <a href="{{ page.url }}">{{ page.title }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </nav>
    </div>
  </header>

……です.これによりヘッダーにブログ記事が表示されなります. blog.twigはindex.twigをコピーし,contentセクションをいじります.具体的に

<section id="content">
  <div class="inner">
    {{ content }}
    {% for page in pages|sort_by("time")|reverse %}
      {% if page.id starts with "blog/" %}
        <div class="post">
          <h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
          <p class="date">{{ page.date_formatted }}</p>
          <p class="excerpt">{{ page.description }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</section>

……となります. こうすることで記事のYAMLデータのDataをもとにソートし, 記事へのリンクを自動で貼ってくれます. なのでYAMLさえしっかり書いておけば 記事はすべてblog/ディレクトリに放り込むだけでいいのです.

おわり

Twigの記法とか全然分からない ゼロからのPico導入だったので,Bloggingの説明がさっぱり理解できませんでしたが やっていくうちに段々分かってきたので手を動かすのはやはり正義. あとMarkdown文書を放り込むだけでよい手軽さはすごい.