HexoのテーマをBootstrap準拠のFreewillにした
Hexoのテーマをデフォルトのものから、Bootstrap準拠のFreewillにした。
BootstrapのテーマBootswatchというものを採用しているようで、外観を簡単に変更出来る。
他のテーマ同様
git clone https://github.com/yieme/hexo-theme-freewill.git themes/freewill
でインストール。
Freewillの_config.ymlでbootswatch:
で種々のBootswatchテーマに変更出来る。
Bootswatchのナビゲーションバーには、テーマ毎に2種類のカラーバリエーションがあり、freewill/layout/_partial/navigation.ejsの2行目でnavbar-default
とnavbar-inverse
(逆の配色)のどちらかに切り替え可能。
デフォルトの設定では画面をスクロールしたりマウスが離れると、ナビゲーションバーがフェードアウト、マウスを合わせるとフェードインする仕様になっていた。
出たり消えたりがかえって邪魔だったので、themes/freewill/source/js/main.jsの7、10、17、22行目の
$(".navbar").stop().fadeTo(333, 0.2);
$(".navbar").stop().fadeTo(333, 1);
$(".navbar").fadeTo(100, 1);
$(".navbar").fadeTo(100, 0.2);
を削除したら、フェードアウトしなくなった。
navigation.ejs2行目のnavbar-fixed-top
を削除すると、スクロールとともにナビゲーションバーが上方に移動。
_config.ymlの表示不要な項目は先頭に#
を付けてコメントアウト。
テーマの変更でAtomフィードが表示されなくなってしまったが、freewill/_config.ymlのrss: true
をrss: atom.xml
に変更してナビゲーションバーに追加したら表示された。
layout/_partial/head.ejsのtheme.rssの箇所のlink rel="alternative"
をlink rel="alternate"
に変更。アドレスバーにもアイコンが表示された。
Bootstrapのテーマらしく、すっきりしていて機能的な印象。
ただ、paginationのページ上方にでかでかと表示されているJumbotronというのをどう使えばいいか分からない。
デフォルトではブログタイトルもしくはブログの説明が表示されるようだが。