Ghostブログにタグ一覧ページを作る (Sourceテーマの場合)
記事を分類するのにタグをつけているのですが、いくらタグをつけたところで絞り込みに使えないのであれば何の意味もないですよね。
僕はSourceというGhostのデフォルトのテーマを使っているのですが、このテーマだと、それぞれのタグをそのままナビゲーションバーに設置することはできるんですが、ドロップダウンでタグを選んだり、タグの一覧を表示したりはすぐにはできないようです。
そこで今回は、Sourceテーマを使ってタグ一覧のページを作ってみましたという記事です。
Sourceテーマを使ってタグ絞り込みをしたいときにできること
上でも述べましたが、このテーマだと、ドロップダウンとか一覧ページはそのままだと出せません。
できるのは、それぞれのタグをナビゲーションバーに置くくらいです。
これは例えば、「ブログ」というタグをつけた記事があって、そのタグを持っている記事一覧を出せるようにしようと思ったら、ナビゲーションバーに「ブログ」という項目をわざわざ作らないといけないということです。
これだとタグが増えてくると全部を載せるのは不可能ですし、それ以前に記事のタグをメニューに載せるのがどうもしっくりこなかったので、別の方法を考えました。
ドロップダウンがいいけれど
本当はドロップダウンメニューでタグ一覧から選択できるようにするのが一番スマートなんでしょうけど、ちょこっと調べた限りだといくつか方法を解説している人がいるにはいるものの、そのコメント欄で「このテーマだとうまくいかない」だとか「何かエラーが出る」みたいなことが書かれているものばかりだったので、ああこれは泥沼にはまる可能性もあるなと思い、今回は見送ることにしました。
僕はWebデザインとかWeb開発みたいなことは全くやったことがないので、複雑なCSSとかJavaScriptをさらっと修正する勘もないですし、そもそも読むのに時間がかかるというのもありました。
このブログを続けているうちに少しずつWebの知識も得られるでしょうから、ある程度慣れてきたらまた考えようかと思います。
で、代わりにタグ一覧のページを作ろうということになりました。
こちらもネット上の情報をそのまま使うということは出来なさそうではあったんですが、コードがすごく簡単で僕でもテーマに合わせていじることができました。
ということで以下にSourceテーマでタグ一覧ページを作る方法を書いておきます。
タグ一覧のページ作成
基本的に参考にしたのは以下のGhostのフォーラムの情報です。
ahmadajmi
このTopicだと昔のデフォルトテーマだったCasperを例に説明してあります。
大まかな流れは以下の通りで、細かいところは自分の使っているテーマに合わせて変える必要があります。
- Themeフォルダの中に、
custom-tags.hbsというファイルを作り、そこにタグ一覧を取得して表示するコードを含んだHTMLを書く。
※画像を表示したい場合はその処理も書くのと同時に、Ghostの管理画面でそれぞれのタグに画像を設定しておく。 - Ghostを再起動して設定を読み込ませる。これで新しいテンプレートが使えるようになる
- Ghostの管理画面で以下の設定をする
- Tagsからそれぞれのタグに画像を設定する(画像を表示する場合)
- Pagesから新しくタグ一覧のページを作る。その際に新しくできたテンプレートを読み込む
- 管理画面下部のSettings(歯車アイコン)からナビゲーションの表示項目を設定する
一つずつ見ていきましょう。
1. custom-tags.hbsファイルの作成
Ghostのフォルダ構成の全体像はまだ把握できていないのですが、今回やりたいことはテーマが入っているフォルダだけ見れば大丈夫でした。
今使っているテーマは、Ghostが入っているフォルダの中の、current/content/themes/以下にあります。
僕の場合はSourceテーマを使っているので、current/content/themes/source/に移動します。
※Sourceテーマの構成はGitHubで確認することができます。
TryGhost移動できたらそこでcustom-tags.hbsというファイルを新規作成します。
作ったファイルには以下のコードを記述します。
{{!< default}}
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
{{#post}}
<main class="gh-main">
<article class="gh-article {{post_class}}">
<header class="gh-article-header gh-canvas">
<h1 class="gh-article-title is-title">{{title}}</h1>
</header>
<section class="gh-content gh-canvas">
{{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
{{#foreach tags}}
<a href='{{ url }}'>
<h2>{{ name }} <small>({{ count.posts }})</small></h2>
<img src='{{ img_url feature_image }}' alt='{{ title }}' style="height:128px;"/>
</a>
{{/foreach}}
{{/get}}
</section>
</article>
</main>
{{/post}}
custom-tags.hbs
このコードでは、タグ一覧を取ってきてタグごとの記事件数の多い順に記事数とともに表示する処理をしています。({{#getから始まる部分)
また、僕は画像も出したかったのでタグ名、記事件数の下に画像も表示できるように書き足しています。(<img から始まる部分。)
page.hbsがPageの基本構造になっているので、これをcustom-tags.hbsにコピペして、タグを表示したい場所に上記の{{#getから始まる部分を記述すればうまくいくはずです。2. Ghostの再起動
Ghost CLIのコマンドでGhostを再起動します。
ghost restart
3. Ghostの管理画面での設定
それぞれのタグに画像を設定
※画像を表示させない場合はこの部分は不要です。
管理画面のTagsからそれぞれのタグに画像(Tag image)を設定します。
タグの内容説明を書きたい場合はDescription欄に記載します。
タグ一覧ページの作成
管理画面のPagesから新規ページを作る。
ページタイトルはTagsなど、自分のタグ一覧ページにふさわしいタイトルを書く。
1.の設定がうまくできていると、右側からテンプレートがドロップダウンで選べるようになっているので、そこから作ったTagsテンプレートを選ぶ。
ナビゲーションバーの設定
最後にSettingからSiteカテゴリのNavigationを選択します。
タグ一覧ページへのリンクを表示したい場所に先ほど作ったTagsページへのリンクを記述します。
ページ上部の場合はPrimary、下部に表示する場合はSecondaryに入力しましょう。
僕はPrimaryに設定して、Homeの隣に表示されるようにしました。
以上で出来上がりです。
あとはPublishするとタグ一覧のページが見られるようになっています。
おわり
ウェブの知識がなくても意外と何とかなりました。
本当はもっとかっこいい見た目にしたいんですが、それをするにはHTML＋CSSの勉強が必要ですね。
