添加对 ChartJS 双模式的支持

1. 增加了 ChartJS 图表官方语法；
2. 新增了 ChartJS 的双模式（浅色/深色模式）显示功能；
3. 扩展了 ChartJS 的 config 语法，支持双模式配置。
4. 修复了 ChartJS 在双模式下默认样式的问题，简化用户配置图表过程。

_config.yml

@@ -924,6 +924,24 @@ mermaid:
     light: default
     dark: dark
 
+# chartjs
+# see https://www.chartjs.org/docs/latest/
+chartjs:
+  enable: true
+  # 下面的設置是正對 ChartJS 的預設樣式設置，非必要請勿修改，除非你理解他們是如何工作的
+  # 當然，樣式會以具體的 MD 語法設置優先，其次為該預設設置，最後為 ChartJS 本身的預設設置
+  color:  # 表格通用字體顏色
+    light: "rgba(0, 0, 0, 0.8)" # 淺色模式
+    dark: "rgba(255, 255, 255, 0.8)" # 深色模式
+  borderColor: # 表格通用邊框顏色
+    light: "rgba(0, 0, 0, 0.1)"
+    dark: "rgba(255, 255, 255, 0.2)"
+  scale:
+    ticks:
+      backdropColor:  # 針對雷達圖和極地圖的刻度標籤背景色
+        light: "transparent"
+        dark: "transparent"
+
 # Note - Bootstrap Callout
 note:
   # Note tag style values:

layout/includes/third-party/math/chartjs.pug

@@ -0,0 +1,79 @@
+script.
+    (() => {
+        const $chartjs = document.querySelectorAll('#article-container .chartjs-wrap')
+        if ($chartjs.length === 0) return
+
+        const applyThemeDefaultsConfig = (theme) => {
+            if (theme === 'dark-mode') {
+                Chart.defaults.color = "!{theme.chartjs.color.dark}"
+                Chart.defaults.borderColor = "!{theme.chartjs.borderColor.dark}"
+                Chart.defaults.scale.ticks.backdropColor = "!{theme.chartjs.scale.ticks.backdropColor.dark}"
+            } else {
+                Chart.defaults.color = "!{theme.chartjs.color.light}"
+                Chart.defaults.borderColor = "!{theme.chartjs.borderColor.light}"
+                Chart.defaults.scale.ticks.backdropColor = "!{theme.chartjs.scale.ticks.backdropColor.light}"
+            }
+        }
+
+        // 递归遍历 config 对象，自动根据当前主题选择双模式配色方案
+        const applyThemeConfig = (obj, theme) => {
+            if (typeof obj !== 'object' || obj === null) return
+            
+            Object.keys(obj).forEach(key => {
+                const value = obj[key]
+                // 如果属性是对象，并且有与主题相关的选项，进行应用
+                if (typeof value === 'object' && value !== null) {
+                    if (value[theme]) {
+                        obj[key] = value[theme] // 应用当前主题的值
+                    } else {
+                        // 递归处理子对象
+                        applyThemeConfig(value, theme)
+                    }
+                }
+            })
+        }
+
+        const runChartJS = () => {
+            window.loadChartJS = true
+
+            Array.from($chartjs).forEach((item, index) => {
+                const chartSrc = item.firstElementChild
+                const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // 使用自定义 ID 或默认 ID
+                const existingCanvas = document.getElementById(chartID)
+
+                // 如果已经存在 canvas，先将其移除，避免重复渲染
+                if (existingCanvas) {
+                    existingCanvas.remove()
+                }
+
+                const chartDefinition = chartSrc.textContent
+                const canvas = document.createElement('canvas')
+                canvas.id = chartID
+                chartSrc.insertAdjacentElement('afterend', canvas)
+
+                const ctx = document.getElementById(chartID).getContext('2d')
+
+                const config = JSON.parse(chartDefinition)
+
+                // 根据当前主题选择相应的配色方案
+                const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
+
+                // 设置默认样式（默认初始化）
+                applyThemeDefaultsConfig(theme)
+
+                // 自动遍历 config，应用双模式配色方案
+                applyThemeConfig(config, theme)
+
+                new Chart(ctx, config)
+            })
+        }
+
+        const loadChartJS = () => {
+            window.loadChartJS ? runChartJS() : btf.getScript('!{url_for(theme.asset.chartjs)}').then(runChartJS)
+        }
+
+        // 监听主题切换
+        btf.addGlobalFn('themeChange', runChartJS, 'chartjs')
+
+        window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
+    })()

layout/includes/third-party/math/index.pug

@@ -8,4 +8,7 @@ case theme.math.use
       include ./katex.pug
 
 if theme.mermaid.enable
-  include ./mermaid.pug
+  include ./mermaid.pug
+
+if theme.chartjs.enable
+  include ./chartjs.pug