KeM's Clew をアップグレードしました
表題のとおり、KeM’s Clew をアップグレードしました。v2 系としています。
経緯と更新内容について紹介します！
経緯
私生活の状況が色々と変わったことがきっかけです。
それに先立ち、掲載情報を手軽に活用したり、静的サイト運用周りの技術を楽しく試せる場にしたいと考えていました。そのためには、まず既存の「とりあえず動いたのでヨシ！」なコード群を整理するのが前提になるというもので……。
そんなわけで、KeM’s Clew のサイト構成をイチから見直すことにしました。
内部処理を刷新
- Minima をベースとした構成へ刷新。
Gemfile,Gemfile.lockなど Ruby 関連ファイルの追加。- 反映するスタイルシートを
.cssから.scssへ刷新。- 各コンポーネントの冗長構成を見直し・切り分け。
まずはこのあたり。
主に GitHub Pages の公式情報 と Minima テーマの構成を参考にして、各コンポーネントの切り分けや構成の見直しを諸々対応しています。
具体的な技術情報は次の内容をご参考ください。
Jekyll の Liquid 構文や Sass など、改めて触れる機会になってよかった。
サイドメニューを設置
- Notes 配下のページへ各機能を実装。
- (一覧ページ / 記事ページ) サイドメニューを新規設置。
- (一覧ページ) タグ一覧をサイドメニューへ設置。
- (記事ページ) 目次をサイドメニューへ設置。
今までは Works ページにのみ実装していたサイドメニューを、Notes 配下のページにも新設しました。
-
更新前:
-
更新後:
このサイドメニューは position: sticky; による固定表示を実装しています。
このサイドメニューは画面幅が狭い場合、メニューボタンでの開閉式 UI になります。使い勝手は……今後に期待ということで……。
なお Works ページ側のサイドメニューも併せて改修し、デザインやコンポーネント的な処理をある程度共通化しています。
各種あしらいや内部的な処理などまだまだ差異があるので、引き続き統一化を進めていきたい。
サイドメニュー > タグ一覧
Notes ページでは、前述のサイドメニューへタグ一覧を設置しています。いわゆるタグクラウド。
() 内はそのタグが割り振られている記事件数です。
クリックするとタグごとにソートされたページの該当項目へジャンプします。あんまり UX がよろしくないので今後の改善ポイント。
ちなみに記事の見出しにも同じコンポーネントを配置しています。こちらはその記事に割り当てられているタグが表示されます。
サイドメニュー > 目次
Notes 配下の記事ごとのページでは目次が設置されています。
目次の生成はこちらのインクルードファイルを利用しています。
目次は記事内の見出しを読み出して自動生成されます。最高。
この目次と前述の固定表示により、ページの横断が各段に行いやすくなりました。中でも 便利スニペット集 のページはかなり使い勝手がよくなった☺️
ページャを設置
- (記事ページ) 投稿の末尾へページャを設置。
記事の末尾によくあるやつ。
実装そのものは難しくなかったが、Jekyll が提供しているページ変数 page.previous と page.next に格納される記事情報が想像と逆の順番だったのでちょっとややこしかったです。
- 変数 | Jekyll • シンプルで、ブログのような、静的サイト
- How do I reverse the ordering of previous and next posts? - Help - Jekyll Talk
例えばよくあるブログサービスだと「次の記事へ」ボタンは【過去の日付】の記事へ遷移することが多いと思うけれど、page.next は【未来の日付】の記事情報が格納されている。このため「次の記事へ」に page.next を当ててしまうと、(イメージでの) 前のページへ遷移してしまう……。
これに対して自分の実装上では 単純に逆にして当てはめています 。「Next (次の記事へ)」と表示されているリンク先は、実は page.previous が設定されている、という感じ。
記事の順番をコード内で制御すればもっとわかりやすくできるはず……その内改善しておきたい。
コードを手軽にコピー
- コードブロックの記述をクリップボードへコピーできる機能を追加。
Qiita などのサービスでよく見るアレ。KeM’s Clew にも実装しました。
↓お試し用
マウスホバーすると
右側へコピーボタンが表示されます。
実装は下記の情報を参考にしています。
こちらも 便利スニペット集 のページの使い勝手に大きく貢献しております！
Ubuntu 系フォントを導入
あしらい用および等幅フォントとして Ubuntu, Ubuntu Mono を利用開始。
今までのテキスト用フォントは Noto Sans Japanese のみでしたが、これに新しく Ubuntu 系のフォントを追加しました。
我らが Ubuntu の 公式フォントのようですね 。めちゃくちゃかわいい！
それぞれ次の場所で使用しています。
-
Ubuntu: サイトタイトル、タグなど
-
Ubuntu Mono: コードスパン / コードブロック 用
Code span// Code block #include <stdio.h> int main(void) { printf("Hello, World!\n"); }
初めて別種のフォントを織り交ぜることに挑戦してみたけど……だいぶ垢抜けたのでは！！？
RSS を設置
RSS を新規設置。
こんな拙作でもよければどうぞ🙇♂️🙇♂️
不要な機能を削除
- 次の機能をオミット。
- スムーススクロール
- Notes > カテゴリ別ページ
スムーススクロールは無い方がテキパキ動いて使い勝手良かったので削除。
カテゴリ別ページはその内復活するかも？
おわりに
以上となります！
当記事で挙げた他にも、サイト全体のデザイン・あしらいは微調整を続けています。内部処理的な面でも改善できるところはまだまだいっぱい……。
今後も手入れしていくぞー。