blog

初めての Middleman シリーズ初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法

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

    前回はMiddleman-Syntaxを使ったシンタックスハイライトを試しました。今回はMiddleman-Blogで記事毎の画像を管理する方法について小ネタを紹介します。すでにMiddleman-Blogを使っている前提で説明します。Middleman-Blogについてはこちら初めてのMiddleman:サイトにブログ機能を追加するを参考にしてください。

    記事データのディレクトリ構造とファイル名を変更する

    記事データと一緒に画像ファイルを同じディレクトリで管理できるようにMiddleman-Blogの設定を変更します。変更対象はconfig.sourcesです。articles/{year}/{month}/{day}/{title}/このように年、月、日、タイトルでディレクトリを作り、記事ファイルをindex.html.erbという名前で保存します。例えばこの記事の場合articles/2015/04/06/middleman-management-article-images/index.html.erbとして保存されることになります。

    .
    └── 2015
        └── 04
            └── 06
                └── middleman-management-article-images
                    ├── index.html.md
                    └── photo.jpg
    

    config.rb

    config.rbの設定サンプルは下記の通りです。

    ########################
    #
    # Blog setting
    #
    ########################
    activate :blog do |config|
      # This will add a prefix to all links, template references and source paths
      # config.name   = "blog"
      # config.prefix = "blog"
    
      # Matcher for blog source files
      config.sources = "articles/{year}/{month}/{day}/{title}/index.html"
    
      # Dist articles
      # config.permalink = "{year}/{month}/{day}/{title}.html"
      # config.summary_separator = /()/
      # config.summary_length    = 250
      # config.taglink           = "tags/{tag}.html"
      # config.year_link         = "{year}.html"
      # config.month_link        = "{year}/{month}.html"
      # config.day_link          = "{year}/{month}/{day}.html"
      # config.default_extension = ".markdown"
    
      # Layout and Template
      config.layout            = "post"
      config.tag_template      = "tag.html"
      config.calendar_template = "calendar.html"
    
      # Enable pagination
      config.paginate = true
      # config.per_page = 3
      # config.page_link = "page/{num}"
    end
    
    page "/feed.xml", layout: false
    

    画像の保存場所

    画像の保存場所は記事データと同じarticles/{year}/{month}/{day}/{title}/になります。これにより記事内から簡単に画像にアクセスできます。

    記事から画像にアクセスする方法

    Markdownの場合は下記のようにファイル名だけでアクセスできます。

    ![写真](photo.jpg)
    

    Middleman ImageOptimで圧縮も問題なく動きます。

    以上、小ネタの紹介でした。

    次回:初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する

    シリーズ

    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で管理されているフォントファイルをインポートする

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