Question

我已经开始使用以下主题创建一个Hugo网站：https://themes.gohugo.io/theme/academic/。我想添加一个Google Chart。

问题：如何将[google]图表作为[header]添加到由以下.md文件创建的页面中？

+++
title = "Back to the Future"
date = "2010-09-01"

authors = ["Smith S."]
publication_types = ["2"]

# Publication name and optional abbreviated version.
publication = "*Nature*, vol. 28, no. 3, pp. 1-12"
publication_short = "*Nature*"

# Abstract and optional shortened version.
abstract = "..."

# Featured image thumbnail (optional)
image_preview = ""

math = true
highlight = true

[header]
image = ""
caption = ""
+++

我想添加的Google图表：

    <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

          var data = new google.visualization.arrayToDataTable([
    ['date','z','test'],
    ['Q1-2001',1.69,1.66847553787712],
    ['Q2-2001',1.69,1.61360500808427],
    ['Q3-2001',1.42,1.49374423981914],
    ['Q4-2001',1.4,1.35653146853147],
          ]);

        var options = {
           title: 't',
           curveType: 'none',
           width: 1500,
           height: 800,
           vAxis: {title: 'y'},
           hAxis: {title: 'x'},
           seriesType: 'scatter',
           series: {
            1: {
              type: 'line'
            }
        }
    };

         var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);

      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Answer 1

只需将html添加到您想要的markdown文件中，即：

<div id="sequence"></div>

要将其添加为标题，在布局中，您必须在+++ # frontmatter +++ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['date','z','test'], ['Q1-2001',1.69,1.66847553787712], ['Q2-2001',1.69,1.61360500808427], ['Q3-2001',1.42,1.49374423981914], ['Q4-2001',1.4,1.35653146853147], ]); var options = { title: 't', curveType: 'none', width: 1500, height: 800, vAxis: {title: 'y'}, hAxis: {title: 'x'}, seriesType: 'scatter', series: { 1: { type: 'line' } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> <div id="chart_div"></div> your markdown content文件夹下添加部分文件，并在帖子前端指定要使用部分文件，然后将其包含在布局中，像：

layouts/partials/

将Google Chart添加到HUGO markdown（.md）文件

1 个答案: