Hexoで外部のデータを読み込みたい場合

サイトの右側に「人気の記事」という項目を作る際にHexoで外部のjsonを読み込みたかったので調べてみたら公式に回答が載っていた。

公式にはYAMLでの方法が載っているが、JSONの場合は下記のようにやる。

  • jsonデータ source/_data/sample.json
    1
    2
    3
    {
    "list": [ "A", "B", "C", "D" ]
    }
  • ウィジェットの場合 themes/XXXXX/layout/_widget/sample.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <%
    const list = site.data.sample.list;
    %>
    <div class="sample">
    <ul>
    <% list.forEach(function(item){ %>
    <li>
    <span>
    <%= item %>
    </span>
    </li>
    <% }) %>
    </ul>
    </div>
    もっと難しいと思っていたがかなりお手軽にできる。

以上。