picoでブログ構築
投稿日：
picoの基本的な構築はこちらを参照してください。
PHP製のCMS「pico」の紹介
picoを使ってブログを構築する方法です。
公式ページにpicoをブログ化する手順が書いてあります。
公式の手順
公式の方法はWEBページ内にブログ領域を作る方法のようなので
そもそもメインコンテンツがブログである場合は以下のように修正します。
なお、できあがったものをテンプレートとして公開しています。
簡単にブログ解説したいだけの人はこちらをご利用ください。
mildjester/pico-blog
プラグインの追加
プラグインはpico/pluginsの中にダウンロードしておきます。
ページネーション
https://github.com/rewdy/Pico-Pagination/releases
ダウンロードした圧縮ファイルの中にpagination.phpがあるので
それを/pico/pluginsの中に配置します。
そしてconfig.ymlにプラグイン用の設定を追記しておきます。
##
# Plugin: Pico-Pagination
#
pagination_limit: 10 # 一覧ページにて１ページに表示する記事数
pagination_next_text: 次へ>> # 次へリンクのテキスト
pagination_prev_text: <<戻る # 戻るリンクのテキスト
タグ
https://github.com/PontusHorn/Pico-Tags
PicoTags.phpを/pico/pluginsの中に配置します。
サイト内検索
https://github.com/mwgg/Pico-Search
40-PicoSearch.phpを/pico/pluginsの中に配置します。
このプラグインではページのタイトルをキーにして検索する事はできるようですが。
記事本文をキーにして検索することはできないようでした。
サイトマップ
https://github.com/DaveKin/Pico_Sitemap/
PicoXMLSitemap.phpを/pico/pluginsの中に配置します。
テーマの編集
/pico/themes配下のテーマを編集します。
デフォルトの/pico/themes/defaultをそのまま編集しても良いですし
defaultをコピーして自分用のテーマを作っても良いです。
別テーマを作成する場合はconfig.ymlのtheme: defaultの部分も作成したテーマのディレクトリ名に変更してください。
なお、公式ページなどからテーマをダウンロードすることも可能です。
ただしpico 1.x用のテーマだからか、そのままではうまく動かなかったりするので要注意です。
公式ページのテーマ一覧
index.twigの分離
デフォルトではindex.twigにHTMLの全てが記載されていますが、
テンプレートを増やした際にメンテナンス性が悪くなるので
ヘッダー部分とフッター部分を分離してしまいます。
まずindex.twigと同じディレクトリに_header.twigを作成し、
index.twigの１行目から<div id="main">の上までをコピーします。
次に、同様に_footer.twigを作成して<div id="main">の閉じタグの下から
最終行までをコピーします。
そしてindex.twigのヘッダーとフッターにコピーした部分は削除し、
代わりに{% include '_header.twig' %} と {% include '_footer.twig' %}
に置き換えます。
できあがったindex.twigはこんな感じです。
{% include '_header.twig' %}
<div id="main">
<div class="container">
{% if meta.title %}<h2>{{ meta.title }}</h2>{% endif %}
<p class="meta">{{ meta.date_formatted }}</p>
{{ content }}
</div>
</div>
{% include '_footer.twig' %}
※どこまでを共通化するかは個人の趣向もあると思うので
共通化範囲は増減あっても構いません。
ヘッダーにサイト内検索フォームを追加する
ヘッダーの好きな位置に以下のソースコードを埋め込みます。
これがサイト内検索のフォームになります。
<form id="search_form" action="/search" method="get">
<input type="search" id="search_input" name="q" />
<input type="submit" value="検索" />
</form>
ページ別テンプレートの作成
index.twigと同じディレクトリに以下のようなtwigファイルを作成します
index.twig
全ての記事一覧を表示します。
{% include '_header.twig' %}
<div id="main">
<div class="container">
{% for page in paged_pages|sort_by("time")|reverse %}
{% if page.id starts with "posts/" and not page.hidden %}
<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 %}
{{ pagination_links }}
</div>
</div>
{% include '_footer.twig' %}
article.twig
記事ページを表示します。
{% include '_header.twig' %}
<div id="main">
<div class="container">
{% if meta.title %}<h2>{{ meta.title }}</h2>{% endif %}
<p class="meta"><b>
投稿日：{{ meta.date_formatted }}
<span class="article_tags">
タグ：
{% for tag in meta.tags %}
<a href="/tags/{{ tag }}" >{{ tag }}</a>
{% endfor %}
</span>
</b></p>
{{ content }}
</div>
</div>
{% include '_footer.twig' %}
static.twig
固定ページを表示します。
※ページタイトルと日付を非表示にしています。
{% include '_header.twig' %}
<div id="main">
<div class="container">
{{ content }}
</div>
</div>
{% include '_footer.twig' %}
tags.twig
タグ一覧を表示します
{% include '_header.twig' %}
<div id="main">
<div class="container">
{% if meta.title %}<h2>{{ meta.title }}</h2>{% endif %}
<ul>
{% for page in pages %}
{% if page.id starts with "tags/" and not page.hidden %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% include '_footer.twig' %}
tag-index.twig
タグを絞った記事一覧を表示します。
{% include '_header.twig' %}
<div id="main">
<div class="container">
{% if meta.title %}<h2>{{ meta.title }}</h2>{% endif %}
{% for page in pages|sort_by("time")|reverse %}
{% if page.id starts with "posts/" and not page.hidden %}
<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>
</div>
{% include '_footer.twig' %}
search.twig
サイト内検索結果を表示します。
{% include '_header.twig' %}
<div id="main">
<div class="container">
<div class="SearchResults">
{% if meta.purpose == "search_results" %}
<p class="meta">「{{ search_term }}」の検索結果（{{ search_num_results }} 件）</p>
{% for page in search_results %}
{% if page.id starts with "posts/" and not page.hidden %}
<h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
<p class="date">{{ page.date_formatted }}</p>
<p class="excerpt">{{ page.description }}</p>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% include '_footer.twig' %}
スタイル(CSS)の調整
記事ページのタグ一覧用のスタイルも追加しておきます。
テーマディレクトリのcss/style.cssに以下を追加します。
/* 記事ページのタグ一覧 */
span.article_tags {
margin-left: 40px;
font-size: 0.9em;
}
span.article_tags a {
border-radius: 5px; /* CSS3草案 */
-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */
background-color: #707070;
color: #ffffff;
padding: 1px 7px;
}
これでテーマの準備は完了です。
mdファイルの作成
ここから実際のページのコンテンツとなるmdファイルを作成していきます。
pico/content/index.md
全記事一覧ページです。
---
title: ブログ
summary: これはブログですよ
date: 2010-12-31
draft: false
---
pico/content/tags.md
タグ一覧ページです。
---
title: タグ一覧
summary: タグの一覧ページですよ
date: 2010-12-25
draft: false
---
pico/content/tags/sampleTag.md
タグの記事一覧ページです。
本例ではタグがsampleTagとなっている記事の一覧を取得します。
---
title: sampleTag
summary: sampleTagの一覧です
Filter: sampleTag
---
pico/content/posts/sampleArticles.md
記事ページです。
Tagsには上記のpico/content/tags/に作成したタグを指定します。
---
title: 記事ですよ
summary: これは記事ページです
tags:
- sampleTag
date: 2015-08-08 15:35:56
draft: false
---
記事の本文ですよー
pico/content/search.md
サイト内検索結果ページです。
---
Purpose: search_results
---
pico/content/hogehoge.md
固定ページです。
必要に応じて作成してください。
特に固定ページが不要であれば作成しなくて良いです。
---
title: 何かのページ
summary: 何か固定ページだよ
date: 2001-01-01
draft: false
---
固定ページですよー
これで基本的に作成すべきmdは揃いました。
もしGoogle等にインデックスさせたくない(検索させたくない)場合は
YAMLヘッダーに以下を追加してください。
Robots: noindex,nofollow
これでpicoのブログ化は完了です。
Wordpressからデータ移行する場合はWordpressからPicoへデータ移行を参照してください。
