NKSSG
NakaKen Static Site Generator

defaultテーマの機能

😐

NKSSG には、デフォルトで有効になっている default テーマがあります。このテーマ独自の機能について説明していきます。

絵文字をアイキャッチ代わりに使う

テキストだけのサイトだと味気ないですが、すべてのページにアイキャッチ画像を用意するのもめんどうです。

default テーマでは、アイキャッチ画像のかわりに絵文字を使う機能があります。この発想は、次のサイトを参考にしています。

絵文字の設定の仕方は、フロントマターに次のように書くだけです。

---
emoji: 😐
---

フロントマターについては、次の記事を参考にしてください。

💁 タイトルなどを設定しよう

ここで使っている絵文字には、Twitter の絵文字 を使っています。実際に使う場合は、次のサイトから探すと見つけやすいです。

さらに、NKSSG の default テーマでは、アイキャッチ画像も絵文字も設定されていない場合、自動で絵文字が割り当てられるようになっています。特に設定しなくてもいいので楽ですね。

どのような絵文字が割り当てられるかは、テーマの設定ファイル内に一覧があります。/themes/default/default.yml の中の emoji のところに、一覧になっています。増やしたい場合、入れ替えたい場合は、ここの設定を変えましょう。

メモ

絵文字の個数が素数になるようにすると、ばらけて表示されるようになります。

この処理内容は、/themes/default/import/short-code.html 内に書いています。

カード型の内部リンク

次のようなカード型の内部リンクを使うことができます。

🔗 内部リンクを使おう

このカード型の内部リンクは、上のリンク先で紹介している「内部リンク管理プラグイン」を使うよりも、高速に処理されます。使い方は、記事の中で、次のように書くだけです。

{{ sc.get_card("file_id") }}

sc はショートコードの略です。file_id は、フロントマターで設定します。内部リンク管理プラグインとは異なり、「:」や「?」は使いません。

この処理内容は、/themes/default/import/short-code.html 内に書いています。

パス情報の表示

nkssg serve を実行しているとき、画面左下に、記事ファイルのパス情報が表示されます。これは build のときには表示されません。

このパス情報があれば、VSCode の場合、新しくターミナルを立ち上げ、code -r PATH をコピペして、対応する記事ファイルを開く、という使い方ができます。

URL がファイルパスと連動していない場合は、今見ているページを編集するためにどのファイルを開けばいいか、わかりづらいです。しかし、この機能があれば、どのファイルを編集すべきか、直ぐに特定できます。

この処理内容は、/themes/default/partials/entry/display-path.html 内に書いています。