jekyllのスタイルのカスタマイズの知見が広がった… 結果にとても満足。

jekyll標準スタイルのカスタマイズも、jekyll-agencyスタイルのカスタマイズにしても、ドキュメントで基本を知った上でそれらの実装を直接読むことが近道だった…どのコンピュータフレームワークもソースを理解することが近道だ…と判っていたのにドキュメントと作業で見えている物だけしか見ていないと、フレームワークで定義した部分は見えてこない、と言うことを再確認できて、かつ、思い知った。…既に、そして、何度も思い知ったんだけどなぁ〜

_include/default.htmlと_layouts配下のhtml

.mdが.htmlに変換される過程で適用するファイルを示すと分かりやすいか

  1. resume/*.md
    • 冒頭の---区切り内layout:で_layoutsのファイルが決まる
    • resumeとしているのでresume.htmlが選ばれる
  2. _layouts/*.html
    • このhtmlにliquidと共に直にhtmlで記述しても良いが
    • liquidが利用できるのでincludeも可能なのだ
    • _includesに自分で決めた単位で細切れにhtmlを記述しておけばlayout毎に配置(layout)が変えられるのだな
    • このhtmlの冒頭の---セクションlayoutを指定すると_includesのhtmlを指し示すことになる
    • ここのファイル名だけ異なる同じ内容のhtmlを記述すれば.mdでlayout指定を違えていても、同じレイアウトにしてしまうことが出来る
  3. _includes/*.html
    • htmlを記述する
    • ファイル冒頭の---セクションは解釈されない。最終的なhtmlを記述する、ということだろう
    • liquidも利用できる。制限もなさそうだ

jekyll-agency を追跡してみよう

  1. index.md
    • layout: home
    • これしか記述されていない
  2. _layouts/home.html
    • ここに全てのセクションが並んでいる
    • include が順番に並んでいるだけ
    • html記述はない
    • layout: defaultとある
    • 作業ディレクトリ生成時にはこのファイルも存在していなかったかも…過去にインストールディレクトリからコピーしてきたな
    • 無用なセクションをコメントアウトしてあるよ…以前はここで？？となったのだ。今日再度、冒頭の思い知りを経験してたんだ
    • つまり、元は<jekyll-agencyインストールディレクトリ>_layouts/home.hmtlが利用されていた
  3. _includesにdefault.htmlが無い
    • ここで？？となってしまった…ドキュメントの登場である
    • 「gemのインストールディレクトリ(bundle infor jekyll-agency)のファイルが参照される」
    • この場合、_layoutsのファイルのlayoutで指し示したので、インストールディレクトリ_includesのレイアウト名のファイル
    • つまり、<jekyll-agencyインストールディレクトリ>_includes/default.hmtlが利用される
    • 思い返せば、作業ディレクトリ生成時にはこのディレクトリ自体が無かったかも…以下同上同文
  4. <jekyll-agencyインストールディレクトリ>_includes/default.hmtl
    • htmlタグから始まる、ページ全体を記述するliquid拡張されたhtmlファイルである

コンパイルで.mdで post や portfolio をレイアウトにしておくと「そんなレイアウトは無い」と警告される。

でも、pageレイアウトだけは警告されない。これはインストールディレクトリの_layouts/page.htmlが存在してたからだった。

ドキュメントとbundlerで生成した作業ディレクトリには現れないことで、注意（視野）をフレームワークにまで広げないと理解できなかった。

ポータルでカスタマイズしたこと

発端はresumeをblogから移動して、そのスタイルを整えることだった

  1. resume/css/resume.scss
  2. _layouts/resume.html
    • layoutをdefaultとして、resume/css/resume.cssを読み込むようにした

これで、目的は果たされたけど、方法が判ったらblog側で追加した tableスタイルとか使いたいな〜とかblog側のpost/pageスタイルも流用したいな〜とか贅沢したくなる。

贅沢は学習の糧なので、ためらわずに取り掛かろう

  1. _sassにblogの.scssをコピー
  2. _layouts/resume.htmlを_includes/resume.htmlを利用するように変更
    • layout参照はdefault
    • jekyll-agencyの恩恵も授かれるように
  3. _includes/resume.html
    • ここでresume/css/resume.cssを読み込むようにした
    • resume.cssはblog/css/main.scssと同じに
    • 同じにすることで_sassのスタイルを利用できるようにした
    • これでblogのpage、post、table、hcol、mermaid、highlight-syntax、の恩恵を得られる

これで今の所満足だ

更なるカスタマイズも可能になった

jekyllでWebサイト作る基礎が整ったかな