blog

初めての Middleman シリーズ初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    前回、Middleman-OGPについて紹介しました。

    今回はMiddleman-Titleを使ってページのタイトルを設定したいと思います。Middleman-Titleを使うとサイトのタイトルと記事毎のタイトルを記事タイトル | サイトタイトルのように設定できます。

    インストールと有効化

    GemfileにMiddleman-Titleを追加します。

    gem 'middleman-title'
    

    config.rbでMiddleman-Titleを有効化し設定を加えます。

    activate :title, site: 'サイト名', separator: ' | '
    

    site:はまんまサイト名ですがseparatorは日本でよく使われている|等の区切り文字のことです。

    基本的な設定はこれだけです。

    使ってみる

    タイトルタグにヘルパーを指定します。

    <title><%= page_title %></title>
    

    あとは各ページのYAML Front Matterにページのタイトルを加えます。

    title: ページタイトル
    

    これでコンパイルするとこのようなタイトルタグになります。

    <title>ページタイトル | サイト名</title>
    

    Webサイト名を先頭に持ってくる

    YAML Front Matterにオプションを加えるとWebサイト名を先頭に持ってこれます。

    ---
    title: ページタイトル
    title_reverse: true
    ---
    
    <title>サイト名 | ページタイトル</title>
    

    サイト全体に適用したい場合はconfig.rbに設定を加えます。

    activate :title, site: 'サイト名', reverse: true
    

    カテゴリなどの階層構造を表現したい場合

    タイトルで階層構造を表現したい場合、YAML Front Matterのタイトルを配列にすることで実現できます。

    ---
    title:
    - ページタイトル
    - カテゴリ名
    ---
    
    <title>ページタイトル | カテゴリ | サイト名</title>
    

    簡単に使えて便利ですね。

    次回:初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み

    シリーズ

    1. 初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman:パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman:サイトにブログ機能を追加する
    8. 初めてのMiddleman:Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman:HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman:設定について
    11. 初めてのMiddleman:静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman:Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman:Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman:Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman:スケルトンを自作する方法
    17. 初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman:Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman:RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman:Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman:Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman:Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman:Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman:Bowerで管理されているフォントファイルをインポートする

    コメント・フィードバック