yukuro’s blog

ぽえむ日記

ターミナルライクでイケてるHugoのTheme作ってみた

この記事はStatic Site Generator Advent Calendar 202120日*1の記事です

作ったもの

shellという名前のHugoのThemeを作りました

github.com

ベースとなるのは7月ぐらいに完成していたのですが、ちょくちょくアップデートをかけたものが一応ひと段落しました

イケてるポイント

①Goghから取得可能なカラースキーム

ターミナルライクなので配色(カラースキーム)を変更できます

7月の時点では、テーマ内に用意された数種類からしか選べなかったのですが、この度 Mayccoll/Gogh のカラースキームに対応しました

Mayccoll/Goghとは

github.com

GoghはGnome等のターミナルの配色を変更できるツールです

変更できる配色はかなり多く、以下のページにあるだけ選択肢があります

mayccoll.github.io

これらの配色はjson形式で配布されており、他のアプリケーション等で使うことができます


shellではHugoの機能を使ってこのjsonを取得し、config.tomlにテーマ名を書くだけで使えるようにしてあります

f:id:kuroblo039:20211220184349p:plain

なので、豊富なカラースキームを自分のWebサイトに適用できます

②忠実に再現したターミナルっぽさ

本物のターミナルっぽさ*2を追求しました

下記のgif画像のように、コマンドの部分のみにタイピングエフェクトがかかるようにし、それ以外は即表示されるようにしました

f:id:kuroblo039:20211220173541g:plain

また、レスポンシブにも対応しています*3

最後に

ターミナルっぽい見た目のThemeが欲しいなと思って作ってみました

豊富なカラースキームが使えるようになり、よりターミナルっぽさが増したかと思います

README.mdも極力丁寧にかいてるつもりなので、ぜひ使ってみてもらえたら幸いです

もしよければGitHubリポジトリStarでも付けてもらえると嬉しいです*4

*1:去年のアドカレは割と栄えていたのにどうして...

*2:ぽいだけでありWebシェルの類ではありません

*3:その過程でCSSを若干嫌いになりました

*4:単純な人間なのでモチベが倍増します