添加对 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

plugins.yml

@@ -134,6 +134,10 @@ mermaid:
   name: mermaid
   file: dist/mermaid.min.js
   version: 11.2.1
+chartjs:
+  name: chart.js
+  file: dist/chart.umd.min.js
+  version: 4.4.4
 meting_js:
   name: butterfly-extsrc
   file: metingjs/dist/Meting.min.js

scripts/events/merge_config.js

@@ -512,6 +512,25 @@ hexo.extend.filter.register('before_generate', () => {
         dark: 'dark'
       }
     },
+    chartjs: {
+      enable: false,
+      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: {
       style: 'flat',
       icons: true,

scripts/tag/chartjs.js

@@ -0,0 +1,39 @@
+/**
+ * Butterfly
+ * chartjs
+ * https://www.chartjs.org/
+ * Author: SeaYJ
+ */
+
+'use strict'
+
+const { escapeHTML } = require('hexo-util')
+
+const chartjs = (args, content) => {
+    const chartBlock = /<!--\s*chart\s*-->\n([\w\W\s\S]*?)<!--\s*endchart\s*-->/g
+    const descBlock = /<!--\s*desc\s*-->\n([\w\W\s\S]*?)<!--\s*enddesc\s*-->/g
+    const id = args[0]
+    const descMatches = []
+    let chartConfig
+    let descDOM = ''
+    let match
+
+    !content && hexo.log.warn('chartjs has no content!')
+
+    if ((match = chartBlock.exec(content)) !== null) {
+        chartConfig = match[1]
+    }
+
+    while ((match = descBlock.exec(content)) !== null) {
+        descMatches.push(match[1])
+    }
+
+    for (let i = 0; i < descMatches.length; i++) {
+        let descContent = hexo.render.renderSync({ text: descMatches[i], engine: 'markdown' }).trim()
+        descDOM += (descContent ? `<div class="chatjs-desc-${i}">${descContent}</div>` : '')
+    }
+
+    return `<div class="chartjs-wrap" data-chartjs-id="${id}"><pre class="chartjs-src" hidden>${escapeHTML(chartConfig)}</pre>${descDOM}</div>`
+}
+
+hexo.extend.tag.register('chartjs', chartjs, { ends: true })

source/css/_layout/third-party.styl

@@ -75,6 +75,10 @@ if hexo-config('mermaid.enable')
     pre > code.mermaid
       display: none
 
+.chartjs-wrap
+  margin: 0 0 20px
+  text-align: center
+
 .utterances,
 .fb-comments iframe
   width: 100% !important