Jekyllでプラグインを使わないでスラッグのようなことをする

Table of Contents

こんにちは、殿内(@tonoccho)です

Jekyllで静的サイトを作っていて気づいたことに「スラッグがない」というのがあります。というか「こういう事できないの?」と思って探していたらスラッグというキーワードにあたったのでスラッグと言っていますが厳密には違うかもしれません。

調べてみたところ「できない」とか「スラッグをするためのプラグインを作った」というのは見たんですが「プラグインとかなしでスラッグをする方法」がどうにも見つからなかったので試行錯誤してみました。今回はそのやり方を書いてみます。

URLに日本語を入れたくないけど日本語を使いたい

JekyllではポストのURLは以下のように決まります。

[サイトのURL]/[カテゴリー]/日付/云々カンヌン

で、この日付以降は基本ファイル名に従うのでいいんですが、カテゴリーを日本語にしちゃうとURLも日本語になるという問題があります。というか日本語にしたくないなー全部英語表示にしたいなーと思っていました。

で、この辺がWORDPRESSではスラッグと呼ばれる機能なんだそうです。

ようはURLを任意のものにするということのようです。例えば「カテゴリー静的サイトの部分はstatic-site」にしよう、みたいな感じですね。

このサイトのURLは全部英語だけどカテゴリーには日本語が入っている

このサイトではURLにカテゴリーが入っていますが、下のパンくずには日本語のカテゴリー名が入っています。これをどうしているかという話です。

いちいちエントリーに書いているわけではないんです。

_dataにdictionary.ymlを置く

基本的には_dataディレクトリを活用します。ここに置かれたymlファイルは「site.data.ファイル名」でアクセスできるので、例えば「site.data.dictionary[category]とすることで任意のカテゴリーの辞書データを取ることができます。実際にはファイル名は_で始まる必要がありますから

_data/_hoge.ymlというファイルはsite.data.hogeでアクセスできると書いたほうがわかりやすいかもしれません。

では実際にどうやっているかを書いていきます。

まずは辞書ファイルを作る(結構大変)

辞書ファイルというのはようは「変換元の単語」と「変換先の単語」が登録されたファイルです。注意したいのは変換元の単語は複数かけないという点です。

例えば「knowledge」という単語を用途に応じて「知識」としたり「ナレッジ」としたりするのはできないかファイルを分けるなど多少作り込みが必要になるでしょう。例えばこんな感じのファイルを作ります。ファイル名は_data/_dictionary.ymlです。

buddhism            : {u: false, t: 仏教}
daikon-radish       : {u: false, t: 大根}
english-study       : {u: true , t: 英語学習}
environment         : {u: false, t: 環境}
event               : {u: false, t: イベント}
feijoa              : {u: false, t: フィジョア}

ここで一番左の単語が「変換元の単語」になります。:から先は好きな属性を書けばいいでしょう。自分の場合は「カテゴリーのページがあるか」をuにして(falseの場合はない)、tが変換後の単語になります。

カテゴリーの数が多いような場合はちょっと大変かもしれません。

辞書エントリーを取得して表示する

では次に辞書を使った変換をお見せします。これは実際にパンくずを表示している部分なのですが、3行目のassignで実際に辞書のエントリーを取得しています。その後これを利用しているわけですね。


  <li class="breadcrumb-item">
    
	<span class="icon-category"></span>
      
        <a href="/categories/tech/index.html">
          技術
        </a>
      
  </li>

  <li class="breadcrumb-item">
    
	<span class="icon-category"></span>
      
	    静的サイト
    
  </li>

  <li class="breadcrumb-item">
    
	<span class="icon-category"></span>
      
	    Jekyll
    
  </li>

思ったより簡単だった

そういうわけで思ったより簡単でしたし、ちょっとしたデータベース的な用途にも使えそうです。

技術の最新記事

静的サイトの最新記事

Jekyllの最新記事