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-defaultnavbar-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: truerss: atom.xmlに変更してナビゲーションバーに追加したら表示された。
layout/_partial/head.ejsのtheme.rssの箇所のlink rel="alternative"link rel="alternate"に変更。アドレスバーにもアイコンが表示された。

Bootstrapのテーマらしく、すっきりしていて機能的な印象。

ただ、paginationのページ上方にでかでかと表示されているJumbotronというのをどう使えばいいか分からない。
デフォルトではブログタイトルもしくはブログの説明が表示されるようだが。

表示   このエントリーをはてなブックマークに追加

Comments

2014年12月1日