hugo Shortcodes: 可以传参的小模板
创建 ./layouts/Shortcodes/ec_kline.html文件
<div id="ec_kline{{ .Get `kline_id` }}" style="height: 600px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var jf = "/" + {{ .Page.Dir }}.replace(/\\/g, "/") + {{ .Get `jsonFile` }};
$.getJSON(jf, "", function (data) {
var dom = document.getElementById("ec_kline{{ .Get `kline_id` }}");
var myChart = echarts.init(dom);
var option;
option = data;
if (option && typeof option === 'object') {
myChart.setOption(option);
setTimeout(function () {
window.onresize = function () {
myChart.resize();
}
}, 200)
}
});
</script>
test.json 文件：
{
"xAxis": {
"data": ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"]
},
"yAxis": {},
"series": [{
"type": "k",
"data": [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42]
]
}]
}
markdown 文件中使用(注意去掉<>两侧的空格),需要提供 div 的 id 和 json 文件的名字：
{{ < ec_kline kline_id="test1" jsonFile="test.json" > }}
{{ < ec_kline kline_id="test2" jsonFile="test.json" > }}
效果：
{{< ec_kline kline_id="test1" jsonFile="test.json" >}}
{{< ec_kline kline_id="test2" jsonFile="test.json" >}}
参考
正文完
