この記事は研究室のWebページに2018/8/27に掲載したものの転載です。
せっかくなので、Scrapbox に書いた記事を Middleman でコンバートしてみることにした。 そこで問題になるのが、プログラムソースの記載と画像であった。 それぞれ、簡易的なメソッドを書くことで簡単に描画できるようになったので、ここに示しておく。 なお、基本的に画像はスクリーンショットになるので、Scrapbox と同様 Gyazo を利用することにした。 - 共通に利用するヘルパメソッドを lib/custom_helpers.rb というファイルにまとめることにする。 まず config.rb でこのファイルをヘルパとして登録する
require 'lib/custom_helpers.rb' helpers CustomHelpers
- CustomHelpers にソースを描画する include_source、画像を描画する include_gyazo を追加する haml をコード内に記載したくないので、haml 部分はテンプレートに記載した。
module CustomHelpers def include_source(source, lang = :bash) partial 'include_source', locals: {source: source, lang: lang} end def include_gyazo(fname, alt) partial 'include_gyazo', locals: {fname: fname, alt: alt} end
- _include_source.html.haml は以下のように記載した。hilightjs を入れているので、言語にしたがってコンテンツハイライトが実行される。
%pre %code{class: lang} = preserve { html_escape source } _include_gyazo は以下のように記載した。画像は card でくくり、画像の説明は footer で指示している。 .card.border-info.mb-3{style: 'width: 100%;'} .card-body %img{src: "https://i.gyazo.com/#{fname}", alt: alt, style: 'width: 100%;'} .card-footer = alt
- 1行のプログラムソースを記載したい時には、以下のように記述する。
= include_source 'be middleman b'
複数行のプログラムソースを記載したい場合には、Frontmatter に記載した変数を指定する(上の _include_source.html.haml を例にした)。
= include_source current_page.data.include_source, :ruby
この時、Frontmatter に include_source という変数を指定する。 ここで YAML の | を使うことで、複数行のテキストであっても、余計なエスケープなどを気にしないでよくなる
include_source: | %pre %code{class: lang} = preserve { html_escape source }
- その後色々と見た目の修正をした
- ページヘッダ・フッタを固定化
- タグと年・月・日をバッチを使ったリンクとして追加
- if current_article - current_article.tags.each do |key| = link_to key, tag_path(key), class: 'badge badge-pill badge-info' - d = current_article.date = link_to "#{d.year}年", blog_year_path(d.year), class: 'badge badge-pill badge-warning' = link_to "#{d.month}月", blog_month_path(d.year, d.month), class: 'badge badge-pill badge-warning' = link_to "#{d.day}日", blog_day_path(d.year, d.month, d.day), class: 'badge badge-pill badge-warning'