Pico CMS テーマ変数まとめ

先に結論

  • テーマ変数はテーマを構成するファイル内で有効
  • Array型の変数は分けて使うこと
  • 覚えておくといろいろ便利

Picoのテーマ変数って?

Pico CMSが内包してる、テーマ作成時に便利な変数のこと。

基本「複雑なことしたいならプラグイン書け」スタイルなPicoちゃんだけど、意外とこれで対応できる。

 

それらは全部公式ドキュメントに書いてるけれど、毎回見るのめんど……げふんげふん。

僕個人の利便性を上げるために、記事の形でまとめたよ。

テーマ変数が有効な状況

テーマ変数は、テーマを構成するファイル内でのみ有効。

つまり記事内容に書いても効果なし

 

.mdファイルに{{ base_url }}とかって書いても、そのままの表示が返ってくるだけなんだな、これが。

僕もたまにしくじる。

テーマ変数の使い方

Twigテンプレートの基本そのままで問題ない。

用法 効果
{{ example }} 変数exampleの内容をprint
{% if example is defined %} 変数exampleに何か入っていれば〜〜
{% for example in examples %} 変数examples内のexampleだけ繰り返す

などなど、よくある使い方だね。

 

Array型の変数

直接書いて効果がある変数も多いが、いくつかArrayと表示されてしまうタイプの物がある。{{ meta }}とかが好例。

これはPHPではおなじみ、「Array型=複数情報が詰め込まれた変数」。

 

それぞれの値を取り出すには、{{ meta.title }}だとか{{ meta.date }}などの書き方で「欲しい情報だけを取り出す」こと。

Picoテーマ変数一覧

以下は公式ドキュメントであるDocs | Picoのざっくり和訳。

  • {{ config }} - config.config.php内の情報を出力する
  • {{ base_dir }} - ルートディレクトリを表示
  • {{ base_url }} - トップページのURLを表示
    • {{ "sub/page" |link }}とすれば、特定記事のURLを取れる
  • {{ theme_dir }} - 使用中のテーマディレクトリを表示
  • {{ theme_url }} - 使用中のテーマURLを表示
  • {{ rewrite_url }} - rewrite_url機能を使っているか否か
  • {{ site_title }} - サイトタイトルのショートカット
  • {{ meta }} - 閲覧されているページのmeta情報詰め合わせ
    • {{ meta.title }}
    • {{ meta.description }}
    • {{ meta.author }}
    • {{ meta.date }}
    • {{ meta.date_formatted }}
    • {{ meta.time }}
    • {{ meta.robots }}
    • この他にも、記事YAMLヘッダーで指定した内容を何でも表示できる
  • {{ content }} - 閲覧中ページの記事内容(html変換済み)を表示
  • {{ pages }} - サイト全体に含まれる記事すべての情報詰め合わせ
    • {{ page.id }} - 単一記事のディレクトリパス(ユニークID)
    • {{ page.url }} - その記事のURL
    • {{ page.title }} - その記事のタイトル情報
    • {{ page.description }} - その記事の説明文
    • {{ page.author }}- その記事の著者
    • {{ page.time }} - タイムスタンプ(dateから換算)
    • {{ page.date }} - 日付情報
    • {{ page.date_formatted }} - フォーマット済み日付情報
    • {{ page.raw_content }} - その記事の生Markdownファイル
    • {{ page.meta }} - その記事のmeta情報詰め合わせ
  • {{ prev_page }} - 閲覧中ページの一つ前の記事情報詰め合わせ
  • {{ current_page }} - 閲覧中ページの記事情報詰め合わせ
  • {{ next_page }} - 閲覧中ページの一つ次の記事情報詰め合わせ
  • {{ is_front_page }} - トップページか否かのboolean型フラグ

ちょっと便利な使い方

個人的に便利そうな使い方を列挙。

  • {% for page in pages %}で、全記事を順番に表示
  • {{ current_page.url }}で、閲覧中ページのURL取得
  • {% if config.hoge is defined %}などでの設定振り分け
  • {{ meta.images }}で、その記事サムネイル画像(事前設定済み)を取得

Pico テーマ変数早分かり表

このページでテーマ変数を使った場合、こうした結果になるよ。

変数名 結果
{{ config.theme }} doppel
{{ base_dir }} 長いので省略
{{ base_url }} https://dettalant.com
{{ theme_dir }} 長いので省略
{{ theme_url }} https://dettalant.com/themes/doppel
{{ "pico/pico-theme-variables" |link }} https://dettalant.com/pico/pico-theme-variables
{{ rewrite_url }} 1
{{ site_title }} まださなぎ
{{ meta }} Array
{{ meta.title }} Pico CMS テーマ変数まとめ
{{ meta.description }} 長いので省略
{{ meta.template }} pico_variable_test
{{ meta.tags }} pico
{{ meta.date }} 2017/08/17
{{ meta.date_formatted }} 08/17/17 00:00:00
{{ meta.time }} 1502895600
{{ meta.robots }} follow,index
{{ content }} 長いので省略
{{ prev_page.id }} pico/how-to-pico-cms-install
{{ current_page.id }} pico/pico-theme-variables
{{ next_page.id }} python/jandent-is-japanese-text-indent-script