Octopress(Jekyll)の設定変数をJavaScriptから使う

Octopressの中で_config.ymlで設定した値を直接 JavaScriptの中で使えたら便利だと思うことが多々あったので 使う方法について。

• <script>タグを使って直接書く
• config_tagを使う
• jekyll-var-to-jsを使う

<script>タグを使って直接書く

サイドバーにランダム記事リストを作る とかでもやってることですが、 source/_includes以下にあるHTMLファイルに <script>タグを使って直接書いてしまえば、 その中でLiquidの{{~}}を使って変数を展開してあげることで直接書けます。

JavaScriptのコードがいたるところに散らばってしまいますが、 取り敢えず一番簡単で確実な方法です。

config_tagを使う

Octopressにはconfig_tagというタグを使えるようにするプラグインが入っています。

octopress/config_tag.rb

これを使って適当な所に

{% config_tag url %}

みたいに書いておくと、

<div class='url' data-value='http://yoursite.com'></div>

こんな感じで展開されるので、 jQueryを使うならこれを

console.log($('.url').data('value'))

とでもすればhttp://yoursite.comと値が取れます。

ここで使える変数は_config.ymlで指定するsiteに入っている変数です。 適当な値を使いたい場合は__config.ymlに設定を追加してから使えばOK。

また、クラス名が上のurlみたいなものだと簡単すぎて 他と被る可能性がありますが、 そのような場合には

<div class='octopress-site-url' data-value='https://rcmdnk.com'></div>

みたいにしておくと

<div class='octopress-site-url' data-value='http://yoursite.com'></div>

みたいにクラス名を変更することも出来ます。

また、もしdivタグで都合が悪いなら

<p class='octopress-site-url' data-value='https://rcmdnk.com'></p>

のようにすると、divの代わりに

<p class='octopress-site-url' data-value='http://yoursite.com'></p>

とpタグを使うようになります。

jekyll-var-to-jsを使う

上のconfig_tagだと、必要な変数を追加するために source/_includesの中などに直接変更を加えていかないといけないので 結構面倒です。

そこで、_config.ymlの中の設定だけで必要な変数を設定できるようにする プラグインを作ってみました。

中にあるplugins/jekyll-var-to-js.rbというファイルを Octopressのpluginsディレクトリに入れます。

後は、source/_includes/head.htmlのheadタグの先頭に

{% if page.jekyll_var %}{{page.jekyll_var}}{% endif %}

の一行を加えておきます。

後は_config.ymlの中の設定だけでOK。

Generatorプラグインなので、rake generateすると、 最初にsite及びpage(post)に関連する変数を jekyll_varというグローバル変数に入れるようなスクリプトを作って、 これをpage.jekyll_varに保存します。 なのでこれを他のJavaScriptなどより先に上の様に展開してあげます。

1
2
3
4
5
6
7
8
9

<script>
  jekyll_var = function(i,j){
    if(j!="page" && i in jekyll_var.site)return jekyll_var.site[i];
    else if(j!="site" && i in jekyll_var.page)return jekyll_var.page[i];
    else return null;
  };
  jekyll_var["site"]={url:"http://yoursite.com",title:"My Octopress Blog",author:"Your Name",};
  jekyll_var["page"]={title:"new post",url:"/blog/2015/02/15/new-post/",}
</script>

1
2

-  jekyll_var = function(i,j=null){
+  jekyll_var = function(i,j){

こんな感じのスクリプトが展開されます(実際には改行とか無しの状態)。

site関連のものはjekeyll_var["site"]へ、 page関連のものはjekeyll_var["page"]へ入れています。

補助関数として、 jekyll_var(arg)を呼ぶと、まずsite関連の物を探し、 無ければpageの物を、両方共無ければnullを返すものも用意しました。

もし、site、page両方にある値でpageの方を優先したい場合には

jekyll_var(arg, "page");

の様に第二引数に"page"を指定してください。

保存される値はもし_config.ymlで何も設定しなければ 全ての値が保存されます。

自分で決めたものだけ入れたい場合は

1
2
3
4
5
6
7
8

jekyll_var:
  include:
    - title
    - url
    - author
    - lang
  exclude:
    - lang

こんな感じでjaekyll_varのincludeまたはexcludeを指定してください。 includeが指定されてる場合は指定されたものだけを探します。 excludeが指定されてる場合には指定されたものは除かれます。 (上のは例なのでlangを両方で指定して意味ないことしてますが、 普通はどちらかだけの指定で。)

これを使えば、 サイドバーにランダム記事リストを作る でやったような物もsource/javascripts/の中に移せて、 JavaScriptをasyncで読み込むについて でやったみたいに全部asyncで読み込んでより速く出来るかも、といった所。