ターミナルライクでイケてるHugoのTheme作ってみた
この記事はStatic Site Generator Advent Calendar 2021の20日目*1の記事です
作ったもの
shell
という名前のHugoのThemeを作りました
ベースとなるのは7月ぐらいに完成していたのですが、ちょくちょくアップデートをかけたものが一応ひと段落しました
研究そっちのけで作ってたHugoのThemeが完成した pic.twitter.com/o7TMYwmaao
— ユクロ (@kurokuro_dev) 2021年7月16日
イケてるポイント
①Goghから取得可能なカラースキーム
ターミナルライクなので配色(カラースキーム)を変更できます
7月の時点では、テーマ内に用意された数種類からしか選べなかったのですが、この度 Mayccoll/Gogh のカラースキームに対応しました
Mayccoll/Goghとは
GoghはGnome等のターミナルの配色を変更できるツールです
変更できる配色はかなり多く、以下のページにあるだけ選択肢があります
これらの配色はjson形式で配布されており、他のアプリケーション等で使うことができます
shell
ではHugoの機能を使ってこのjsonを取得し、config.toml
にテーマ名を書くだけで使えるようにしてあります
なので、豊富なカラースキームを自分のWebサイトに適用できます
②忠実に再現したターミナルっぽさ
本物のターミナルっぽさ*2を追求しました
下記のgif画像のように、コマンドの部分のみにタイピングエフェクトがかかるようにし、それ以外は即表示されるようにしました
また、レスポンシブにも対応しています*3
最後に
ターミナルっぽい見た目のThemeが欲しいなと思って作ってみました
豊富なカラースキームが使えるようになり、よりターミナルっぽさが増したかと思います
README.md
も極力丁寧にかいてるつもりなので、ぜひ使ってみてもらえたら幸いです