呼称をポータルからランディングページに変えた。その他、諸々整備したことを書き連ねる

水平並び複数アイテムの自動中央寄せ

teamセクション(タイトルAuthor)には複数人分のプロファイルを並べることができるが３人に固定されていた。sitetext.ymlのteam.peopleで一人文の表示にすることは可能だが左寄りになってしまっていた。

同じように、servicesセクションも3サービスに固定でsitetext.ymlのservices.listの項目を減らすと左寄りになってしまう。

htmlテンプレートを読むとそれぞれ、col-sm-4、col-md-4、となっていた。bootstrapのGridクラスで、水平方向に 4/12 の幅にするクラスだ。この 4 の部分をそれぞれのエントリ数に対応した数にすれば良い。

servicesセクションの変更を例示する。

{% assign service_col_ratio = 12 | divided_by: site.data.sitetext[site.locale].services.list.size %}
:
{% for ...
<div class="col-md-{{ service_col_ratio }}" ...

Liquidのオブジェクト(表示対象のこと{{}}の部分)、変数タグ({% assing … %})、divided_byフィルタ(オブジェクトかタグで | で接続する)、で実装した。

冒頭の{% assign…で変数service_col_ratioを宣言かつ 12 / services.list.size で初期化。 ‘/’と表現した部分は | devided_by: に置き換える。この変数をservice_col_ratioをdivタグのクラスcol-md-{{ service_col_ratio }}と表してservices.listのエントリ数を反映させた。

Liquidは他のテンプレートエンジンと異なり、一般的な算術演算子を組み込まずに一貫してフィルターで計算するポリシーだ。慣れれば構わないのだが、敷居が高い。

portfolioのサムネール画像

portfolioセクションのサムネール画像と、クリックして現れるportfolio_modal内の画像のサイズが固定されている。それぞれ、400x300と x875、だ。サムネールは幅も高さも左の値に固定で、portfolio_modal内画像は高さを875が必須だ。レイアウトが崩れる。

不可解な箇所もある。_portfolioディレクトリ下portfolio_modal中文章.mdファイルのthumbnail、ここにはサムネイル画像を与えるのだが、ランディングページ上で当該portfolioグリッドの画像で利用されるのは、同ファイル中のimageに与えた画像だ。無用と判断してエントリを取り除くと、当該portfolioグリッドの画像がなくなる。試しに、imageで与えた画像をthumbnailに与えると当該portfolioグリッドのサイズが崩れる。thubmail画像のサイズだけが利用さているかのような挙動だ。あまり深追いしないことにした。