Customize Base

Baseもいろいろカスタマイズしてみる。

Base

シンプルで、ブログというよりはジャンル毎に記事をまとめてる感じ。
実は記事を全部_posts/に放り込んでおけば、ジャンルごとに整えて表示してくれている。
Base | CloudCannon Academy Jekyll theme Base

サイトのタイトルと説明を表示

_layouts/default.htmlのこの部分を、 こうしてみる。

記事タイトルのアイコンを追加

SVGとやらのアイコンなのだが、せっかくだからFont Awesome 5のを使ってみたい。
まずは_layouts/default.htmlの<head>…</head>内に、Font Awesome 5を呼び出すように追加。

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

最新バージョンはFont Awesome - Get started - SVG with JAで確認。
使いたいアイコンをIconsで探して、名前を確認。
今回使ったのは無料で使えるmobile-altアイコン。

_include/document-icon.htmlに、こういうのを追加。 あとは記事のYAMLヘッダに、

type: Mobile

と記述すればOKです。
どういうものを追加するかというと、まずwhenに書かれているのがtypeオプションになり、調べておいたアイコンのclassで<i class=...</i>と定義しておいて、<svg class=...</svg>では定義しておいたdata-fa-symbolを指定すればいいみたい。 Base Custom Icon

ロゴ

実はロゴがSVG画像? データというの? そういう形式になっている。
_includes/logo.html

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="68.375px" height="24px" viewBox="0 0 68.375 24" enable-background="new 0 0 68.375 24" xml:space="preserve">
<path d="M4.59,6.89c0.7-0.71,
...

そこに.pngを放り込むのも無粋なので、.svg画像を作って置いてみた。
GimpでSVG出力のようにテキスト→パス→.svgにエクスポート。
要領が判ってきたので、画像のアウトラインもパスに変換して、同じくエクスポート。

オリジナルのlogo.htmlでは、マークとb, a, s, eをそれぞれの文字でpathを書いてあったけど、面倒なので画像1枚で。
アイコンとタイトルをそれぞれパスに変換したあと、可視パスを統合。
エクスポートした.svgファイルをテキストエディタで開き、<svg>の中身のサイズを調整したり、<path d=...の部分に貼り付けたり。