在之前hexo构建的博客里,有使用到图表,但是现在迁移到hugo之后,就没有相关的插件支持了.

所以自己动手丰衣足食.

在hugo中有支持一种特性叫做 Shortcodes.简单的来说就是一个可以传参的小模板.

创建Shortcodes

创建 ./layouts/Shortcodes/echarts.html文件

<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
    // 指定图表的配置项和数据
    var option = JSON.parse({{ .Inner }})
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

使用

在 Shortcodes 插入echarts的配置数据,这样你就可以再页面中看到一个完整的图表了

效果

微信公众号

本文链接：