Pico(Ver1.06)のプラグイン設定メモなど（twigサンプル付）

2023/1/26追記：[Picoの2.1](http://picocms.org/)が正式に発表されています。というのは、2020/4/9に気づいたので投稿したつもりが、下書きに突っ込んだままでした。

デザインのカスタマイズが楽にできるというので、データベース不要のFlat-File CMSの[Pico CMS](http://picocms.org/)(Ver.1.06)を使ってみた記録です。~~2018年3月現在、[Pico2.0](https://github.com/picocms/Pico/tree/pico-1.1)の開発が進められています。知識のある方ならばβ版である2.0を試されるのもいいかもしれません（php7に対応しているようなので）。~~
（注：公開は2018/5/26ですが、書いたのは3月頃です。この記事の通りに設定したサイトは動作していますが、その後の更新などはチェックしていません。ご了承ください）

# インストール

[pico-release-v1.0.6.tar.gz](https://github.com/picocms/Pico/releases/tag/v1.0.6)を落としてしまえばComposerを動かす必要はありません。これを解凍してconfig.php.templateをconfig.phpにリネームして、必要箇所のコメントを外しましょう。

デザインテンプレートは[いろいろあります](http://picocms.org/themes/)が、私は[Template Party](https://template-party.com/)を書き換えて使いました。

## config.php設定

date_formattedで呼び出せる日付のフォーマットは自分の良いように書き換えた方が何かと便利ですね。これは年/月/日で出力してくれます。

```
$config['date_format'] = '%Y/%m/%d';
```

# プラグイン

というわけで、本題。

私が使ったのは、

- [PicoPagination](https://github.com/rewdy/Pico-Pagination)
- [PicoTags](https://github.com/PontusHorn/Pico-Tags)
- [PicoPlacing](https://github.com/ufgum/Pico-Placing)

この三つです。実はこのリストの並び通りに導入しないとPicoTagsでタグリストを作った際に不具合が出ます。41-PicoTags.phpと42-PicoPlacing.phpという風にリネームした方がよいでしょう。
（実行順序については[Pico1.0での変更点（追記予定あり）](https://qiita.com/TakamiChie/items/6d93f4c0f728ff229a8c)を参考にいたしました）

## PicoPagination

ページネーションを実現するプラグインです。これを用いて「新しい記事が上に来る」「ページをめくる毎に古い記事になる」ことを実現する一番楽な方法は、config.phpで順序を逆にすることです。

```
$config['pages_order'] = 'desc';
```

順序を逆にした上で、複数ページにまたがる場合は、次の設定をやっておくと自然なページネーションが実現できます。

```
 $config['pagination_flip_links'] = true;
 $config['pagination_next_text'] = '< Older Posts';
 $config['pagination_prev_text'] = 'Newer Posts >';
```

トップページ（content_dir直下のindex.md）以外にブログページを置きたい場合は、以下の設定が必要です。

```
 $config['pagination_sub_page'] = true;
 $config['pagination_page_indicator'] = 'blog';
```

## PicoTags

タグと同名のページにタグをフィルタリングするテンプレート(blog-list)を適用しておき、BLOG表示ページのタグにリンクを貼れば完成です。このblog-listですが、PicoPlacingが先に読み込まれる状態だと真っ白になります。config.phpの設定は不要です。

## PicoPlacing

サンプルのmdファイルにPlacingなる項目が入っているので何ぞや？と思ったら、このプラグインのための設定値でした。日本語でメニューを作る場合には必須のプラグインと言っていいでしょう。config.phpで有効にする必要があります。

```
 $config[ 'PicoPlacing.enabled' ] = true;
 $config[ 'pages_order_by' ] = 'placing';
```

Placingは値が重複してはいけません。あと、このプラグインを使用している際にblog-listテンプレートを正常に書き出すには、1つのタグごとに__最低1つ、Placingを設定しないblog記事__が必要になります。すべてのブログ記事にPlacingを設定してしまうとエラーが出ます。原因については調査していません。

# twigサンプル

せっかくなので、私が書いたtwigテンプレートを置きます。プラグインのドキュメントにあるサンプルの切り貼りではありますが、動くことは検証済みです。

## blog.twig

```
{{ include( 'header.twig' ) }}

<div id="main">
<div>{{ content }}</div>
      {% for page in paged_pages %}
        {% if page.id starts with "blog/" %}
            <section class="box">
				<h2><a href="{{ page.url }}"><span style="color:#fff;">{{ page.date_formatted }}: {{ page.title }}</span></a></h2>
              <div>
		{% if page.meta['decription'] %}
		<p>{{ page.meta['decription'] }}</p>
		{% endif %}
		<p><a href="{{ page.url }}">続きを読む</a></p>
		<p>
		  {% set tags = page.meta['tags'] | split( ',' ) %}
		  {% for tag in tags %}
		    {% if not tag is empty %}
		      分類：<a href="{{ base_url }}/filter/{{ tag }}" class="post-tag">{{ tag }}</a>
		    {% endif %}
		  {% endfor %}
		</p>
                {% if page.meta['image'] %}
                  <img class="post-image" src="{{ base_url }}/assets/images/{{ page.meta['image'] }}"/>
                {% endif %}
              </div>
            </section>
            <!--/box-->
        {% endif %}
      {% endfor %}
      
      {{ pagination_links }}
</div>
<!--/main-->

{{ include( 'footer.twig' ) }}

```

## blog-list.twig

```
{{ include( 'header.twig' ) }}

<div id="main">
    <div>{{ content }}</div>
	<section class="box">
	{% for page in pages | sort_by( 'time' ) | reverse %}
	        <p><img src="../images/icon.jpg"><a href="{{ page.url }}">{{ page.title }}</a> ({{ page.date_formatted }})</p>
	{% endfor %}
	</section>
</div>
<!--/main-->

{{ include( 'footer.twig' ) }}
```

# あとがき

2018年3月時点でPicoの日本語情報はかなり古くなっているようで、Ver.1.0以降の情報はあまりない印象を受けました。私はphpもtwigもあまり知りませんが、手探りでトラブルシュートした話でもあれば違うかなと思いました。