ブログのテーマを作成した
はじめに
ブログのテーマを新しく作成しました。 これでデフォルトテーマとはおさらばです。
この記事では適当に製作について書いていきます。
hexoのテーマの作成
テーマはpugで作成しました。 hexo-renderer-pug - npmを入れるとpugでレンダリングしてくれます。
テーマの作成に使える変数はドキュメントに記載されています。 しかし、微妙にドキュメントが足りなかったりリンクが切れていたりで 結局デフォルトテーマのソースコードを読みながら作りました。
過去記事に「続きを読む」のリンクを追加した
テーマを新しくするタイミングで 過去の記事へ「続きを読む」のリンクを追加しました。
以前はリンクをクリックせずにスクロールだけで記事を読めるほうが楽だろうと考えて 意図的に「続きを読む」を使っていませんでした。 しかし、画像が多く縦に長い記事を多く書くようになって 次の記事までスクロールしなければならない大変さが無視できなくなったので、 このタイミングで「続きを読む」を追加しました。
ロゴとサイトタイトル
タイトルロゴはサイト名を決めるときにあらかじめ考えていたものです。 数ヶ月越しでようやくロゴを作りました。 微妙に整っていないせいか若干素人っぽさが拭えないのですが 今後微調整していくかもしれません。
「測度ゼロの抹茶チョコ」というタイトル名には深い意味はありません。 私が普段読んでいるブログで特に意味のないタイトル名を使っているものがあって、 それでもなんの不自由もなく使えていました。 ブログタイトルは他のサイトと区別できる一意の名前が与えられていれば 割とどんな名前でもよさそうだということがわかったので自分もそうすることにしました。 抹茶チョコレートが好きなので「抹茶チョコ」をタイトルに入れました。 あとは適当に理系用語を組み合わせるとかっこよいかなと考えて 適当にいくつか考えた中でロゴが作りやすいものを選びました。
Barba.js
新しいテーマではPjaxライブラリのBarba.jsを利用しています。 Prefetchを有効にしているので若干サイトの体感速度が向上したかもしれません。
Barba.jsを利用するとあっという間にPjaxが使えて拍子抜けするほどでした。 とはいえ実際に使うにはいくつか手を入れる必要があったのでメモします。
Barba.jsではheadタグの書き換えを行ってくれません。 次のページを参考にしてheadを書き換える処理を書きました。
Google Analyticsに対応するため次のコードを書き足しました。
Barba.Dispatcher.on('initStateChange', () => {
gtag('config', gtagCode, {
page_title: document.title,
page_path:
window.location.pathname.replace(/^\/?/, '/') + window.location.search
})
})favicon
Webサイトに必要なfaviconの種類は大量にあって大変です。 そこで次のサイトを利用してfaviconを用意しました。
このWebサービスでは260×260以上の画像を指定すると
必要なアイコンを一括生成してくれます。
それだけでなくて<head>タグ内に入れるコードも表示してくれます。
一括生成された画像から16×16だけ自分でドットを打ち直しました。