如何在Hugo Academic主题的Markdown页面头部添加Google Chart

Got it, let's walk through how to add a Google Chart to the header section of your Hugo Academic publication page. Here's a step-by-step approach tailored to your setup:

1. Create a Custom Partial for Google Chart #

First, we'll build a reusable component to hold the Google Chart code. This keeps your templates clean and easy to update.

• In your Hugo site's layouts/partials directory, create a new file named google-chart-header.html.
• Paste the following code into it (you can tweak the chart type, data, and styling to match your needs):

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);
  
    function drawChart() {
      // Sample chart data - replace with your own
      var data = google.visualization.arrayToDataTable([
        ['Metric', 'Value', 'Benchmark'],
        ['Impact Score', 89, 75],
        ['Citation Count', 142, 100],
        ['Downloads', 317, 250]
      ]);
  
      var options = {
        chart: {
          title: 'Publication Performance Metrics',
          subtitle: 'Back to the Future (2010)',
        },
        bars: 'vertical',
        height: 300
      };
  
      var chart = new google.charts.Bar(document.getElementById('publication-chart'));
      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
  </script>
  <div id="publication-chart" style="width: 100%; margin: 1.5rem 0;"></div>
  

2. Insert the Partial into the Publication Header #

Next, we'll modify the Academic theme's publication template to load this chart in the header area.

• Since your page is a publication (marked by publication_types = ["2"]), copy the Academic theme's layouts/publication/single.html file into your site's matching directory (create the publication folder under layouts if it doesn't exist).
• Open the copied single.html file and locate the header section—look for elements like <div class="article-header"> or the area right after the title/authors block.
• Insert this line where you want the chart to appear:

  {{ partial "google-chart-header.html" . }}
  

  For example, you might place it between the publication details and the abstract for a clean flow.

3. (Optional) Add Dynamic Data via Front Matter #

If you want to pass unique chart data for each publication, you can extend your Front Matter:

+++
title = "Back to the Future"
date = "2010-09-01"
authors = ["Smith S."]
publication_types = ["2"]
publication = "*Nature*, vol. 28, no. 3, pp. 1-12"
publication_short = "*Nature*"
# Custom chart data for this publication
chart_data = [
  ["Metric", "Value"],
  ["Impact Score", 89],
  ["Citation Count", 142],
  ["Downloads", 317]
]
+++

Then update the google-chart-header.html partial to use this dynamic data:

<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable({{ .Params.chart_data | jsonify }});
    // ... rest of the chart code remains similar
  }
</script>

4. Test and Tweak #

Run hugo server locally, navigate to your publication page, and verify the chart loads correctly. If you run into issues:

• Check that your internet connection allows loading Google's chart library.
• Adjust the chart's height/width in the partial to fit your site's styling.
• Ensure the partial path is correct in the single.html template.

Let me know if you hit any snags with rendering or data passing—I can help refine the code further!

内容的提问来源于stack exchange，提问作者BEMR