[feat] add simple apache echart presentation

https://github.com/jmooring/hugo-testing/tree/hugo-forum-topic-45500/layouts/_default
libremfg · Jul 16, 2024 · 2bcaf9c · 2bcaf9c
1 parent 557365c
commit 2bcaf9c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/layouts/_default/_markup/render-codeblock-echart.html b/layouts/_default/_markup/render-codeblock-echart.html
@@ -0,0 +1,21 @@
+
+{{ $id := printf "echart-%03d" .Ordinal }}
+{{ $width := or .Attributes.width "100%" }}
+{{ $height := or .Attributes.height "600px" }}
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
+<div id={{ $id }} style="width: {{ $width }};height: {{ $height }};"></div>
+
+<script type="text/javascript">
+  // Initialize the echarts instance based on the prepared dom
+  var chart = echarts.init(document.getElementById({{ $id }}));
+
+  // Specify the configuration items and data for the chart
+  {{ .Inner | safeJS }}
+
+  // Display the chart using the configuration items and data just specified.
+  chart.setOption(option);
+</script>
+
+
+{{ .Page.Store.Set "hasEchart" true }}
diff --git a/themes/hugo-docs/layouts/partials/header.html b/themes/hugo-docs/layouts/partials/header.html
@@ -195,6 +195,10 @@
 
     <!-- DocSearch -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
+
+  {{ if .Page.Store.Get "hasEchart" }}
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
+  {{ end }}
   </head>
 
   <body>