Rendering Hugo HTML webpages from json data.
你有一份csv結構化儲存的資料，想要做成表格展示在網頁上嗎？
想要使用單個json檔案，生成多篇文章嗎？
想要用程式化的方法，從yaml檔案生成多個頁面嗎？
想要製作key-value為主的網頁字串翻譯方式嗎？
那麼你可以使用Hugo的「Data功能！它可以讀取Hugo網站下的文字檔案，讀取內容並按照你的意思渲染網頁。
資料檔格式可以是json、yaml、toml或csv，我用json舉例。
1. Hugo的Data儲存位置#
關於資料檔儲存的位置，因為函數路徑的限制，所以只能放在網站根目錄下的data目錄。
Page Bundle的方式有點複雜。
例如我在網頁根目錄的data/放一個mydata.json，他的引用路徑就會變成site.Data.mydata
如果有多層目錄，就將其轉換成點，例如data/posts/mydata.json會變成site.Data.posts.mydata
data.json檔案內容是這樣的。我希望將其渲染成HTML表格。
//竇唯的歷年專輯，注意Hugo渲染json不允許註解
[
{
"name" : "黑夢",
"year": 1994,
"label": "魔岩唱片"
},
{
"name" : "豔陽天",
"year": 1995,
"label": "魔岩唱片"
},
{
"name" : "山河水",
"year": 1998,
"label": "魔岩唱片"
}
]
如果你不喜歡Hugo的i18n網頁處理模式的話，你還可以準備一個mydatatranslation.json檔案，用於翻譯網頁字串：
{
"name" : "唱片名稱",
"year": "年份",
"label": "唱片廠牌"
}
2. 撰寫讀取資料檔的shortcode#
讀取json不論是partial還是shorcode都能做到。
partial是內嵌在主題裡面的，跟著全域網頁一起跑，例如我之前做過的 Hugo天干地支紀年法
shortcode則是能在文章markdown隨時引用，那麼我這裡就用shortcode程式吧。
在網站根目錄
layouts/shortcodes/新增一個檔案addtable.html填入以下內容。我允許使用者在引用Shortcode時候傳變數進來，再按照引數內容變化。
{{ $targetfile := index .Params 0 }}
<!--讀取Shortcode傳入的變數1，指定給targetfile，再將完整檔案路徑指定給變數inputfile-->
{{ $inputlist := index site.Data $targetfile }}
<!--讀取Shortcode傳入的變數2，指定給showdescription-->
{{ $showlabel := index .Params 1 }}
<!--讀取翻譯檔案-->
{{ $translation := index site.Data.mydatatranslation }}
<!--If判斷式-->
{{ if eq $showlabel "showlabel" }}
<!--表格-->
<table>
<thead>
<tr>
<!--表格頂層，讀取mytranslationlist的鍵值，填入翻譯-->
{{ with $translation }}
<th> index .name </th>
<th> index .year </th>
<th> index. label </th>
</tr>
{{ end }}
</thead>
<tbody>
<!--因為表格最外層是陣列，要用range走訪-->
{{ range $inputfile }}
<tr>
<!--如果要讀取的鍵值有空格，就用這個方法讀取-->
<td>{{ index . "name" }}</td>
<td>{{ index .year }}</td>
<td>{{ index .label }}</td>
</tr>
{{ end }}
</tbody>
</table>
{{ else }}
<table>
<thead>
<tr>
<th> 名稱 </th>
<th> 年份 </th>
</tr>
</thead>
<tbody>
{{ range $inputfile }}
<tr>
<td>{{ index . "name" }}</td>
<td>{{ .year }}</td>
</tr>
{{ end }}
</tbody>
</table>
{{ end }}
目前我不知道怎麼讀取巢狀陣列:P
所以第一層以下的json都是物件式的鍵值。
3. 在文章中引用shortcode#
makrdown中引用的shorcode要這樣寫，引用addtabel.html，並傳入二個參數。
{{< addtable "mydata" "showdescription" . >}}