update

README.md

@@ -98,6 +98,7 @@ npm i hexo-theme-butterfly
 - [x] Busuanzi visitor counter
 - [x] Medium Zoom/Fancybox
 - [x] Mermaid
+- [x] Chart.js
 - [x] Justified Gallery
 - [x] Lazyload images
 - [x] Instantpage/Pangu/Snackbar notification toast/PWA......

README_CN.md

@@ -98,6 +98,7 @@ theme: butterfly
 - [x] 不蒜子訪問統計
 - [x] 兩種大圖模式（Medium Zoom/Fancybox）
 - [x] Mermaid 圖表顯示
+- [x] Chart.js 圖表顯示
 - [x] 照片牆
 - [x] 圖片懶加載
 - [x] Instantpage/Pangu/Snackbar彈窗/PWA......

_config.yml

@@ -602,7 +602,7 @@ facebook_comments:
   pageSize: 10
   # Choose: social / time / reverse_time
   order_by: social
-  lang: zh_TW
+  lang: en_US
 
 # Twikoo
 # https://github.com/imaegoo/twikoo
@@ -927,18 +927,19 @@ mermaid:
 # chartjs
 # see https://www.chartjs.org/docs/latest/
 chartjs:
-  enable: true
+  enable: false
-  # 下面的設置是正對 ChartJS 的預設樣式設置，非必要請勿修改，除非你理解他們是如何工作的
+  # Do not modify unless you understand how they work.
-  # 當然，樣式會以具體的 MD 語法設置優先，其次為該預設設置，最後為 ChartJS 本身的預設設置
+  # The default settings are only used when the MD syntax is not specified.
-  color:  # 表格通用字體顏色
+  # General font color for the chart
-    light: "rgba(0, 0, 0, 0.8)" # 淺色模式
+  fontColor:
-    dark: "rgba(255, 255, 255, 0.8)" # 深色模式
+    light: "rgba(0, 0, 0, 0.8)"
-  borderColor: # 表格通用邊框顏色
+    dark: "rgba(255, 255, 255, 0.8)"
+  # General border color for the chart
+  borderColor:
     light: "rgba(0, 0, 0, 0.1)"
     dark: "rgba(255, 255, 255, 0.2)"
-  scale:
+  # Background color for scale labels on radar and polar area charts
-    ticks:
+  scale_ticks_backdropColor:
-      backdropColor:  # 針對雷達圖和極地圖的刻度標籤背景色
     light: "transparent"
     dark: "transparent"
 
@@ -1068,6 +1069,7 @@ CDN:
     # canvas_fluttering_ribbon:
     # canvas_nest:
     # canvas_ribbon:
+    # chartjs:
     # click_heart:
     # clickShowText:
     # disqusjs:

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

@@ -1,32 +1,34 @@
+- const { fontColor, borderColor, scale_ticks_backdropColor } = theme.chartjs
+
 script.
   (() => {
-        const $chartjs = document.querySelectorAll('#article-container .chartjs-wrap')
+    const $chartjs = document.querySelectorAll('#article-container .chartjs-container')
     if ($chartjs.length === 0) return
 
-        const applyThemeDefaultsConfig = (theme) => {
+    const applyThemeDefaultsConfig = theme => {
       if (theme === 'dark-mode') {
-                Chart.defaults.color = "!{theme.chartjs.color.dark}"
+        Chart.defaults.color = "!{fontColor.dark}"
-                Chart.defaults.borderColor = "!{theme.chartjs.borderColor.dark}"
+        Chart.defaults.borderColor = "!{borderColor.dark}"
-                Chart.defaults.scale.ticks.backdropColor = "!{theme.chartjs.scale.ticks.backdropColor.dark}"
+        Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.dark}"
       } else {
-                Chart.defaults.color = "!{theme.chartjs.color.light}"
+        Chart.defaults.color = "!{fontColor.light}"
-                Chart.defaults.borderColor = "!{theme.chartjs.borderColor.light}"
+        Chart.defaults.borderColor = "!{borderColor.light}"
-                Chart.defaults.scale.ticks.backdropColor = "!{theme.chartjs.scale.ticks.backdropColor.light}"
+        Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.light}"
       }
     }
 
-        // 递归遍历 config 对象，自动根据当前主题选择双模式配色方案
+    // Recursively traverse the config object and automatically apply theme-specific color schemes
     const applyThemeConfig = (obj, theme) => {
       if (typeof obj !== 'object' || obj === null) return
       
       Object.keys(obj).forEach(key => {
         const value = obj[key]
-                // 如果属性是对象，并且有与主题相关的选项，进行应用
+        // If the property is an object and has theme-specific options, apply them
         if (typeof value === 'object' && value !== null) {
           if (value[theme]) {
-                        obj[key] = value[theme] // 应用当前主题的值
+            obj[key] = value[theme] // Apply the value for the current theme
           } else {
-                        // 递归处理子对象
+            // Recursively process child objects
             applyThemeConfig(value, theme)
           }
         }
@@ -38,30 +40,39 @@ script.
 
       Array.from($chartjs).forEach((item, index) => {
         const chartSrc = item.firstElementChild
-                const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // 使用自定义 ID 或默认 ID
+        const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
+        const width = item.getAttribute('data-width')
         const existingCanvas = document.getElementById(chartID)
 
-                // 如果已经存在 canvas，先将其移除，避免重复渲染
+        // If a canvas already exists, remove it to avoid rendering duplicates
         if (existingCanvas) {
-                    existingCanvas.remove()
+            existingCanvas.parentNode.remove()
         }
 
         const chartDefinition = chartSrc.textContent
         const canvas = document.createElement('canvas')
         canvas.id = chartID
-                chartSrc.insertAdjacentElement('afterend', canvas)
+
+        const div = document.createElement('div')
+        div.className = 'chartjs-wrap'
+
+        if (width) {
+          div.style.width = width
+        }
+
+        div.appendChild(canvas)
+        chartSrc.insertAdjacentElement('afterend', div)
 
         const ctx = document.getElementById(chartID).getContext('2d')
 
         const config = JSON.parse(chartDefinition)
 
-                // 根据当前主题选择相应的配色方案
         const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
 
-                // 设置默认样式（默认初始化）
+        // Set default styles (initial setup)
         applyThemeDefaultsConfig(theme)
 
-                // 自动遍历 config，应用双模式配色方案
+        // Automatically traverse the config and apply dual-mode color schemes
         applyThemeConfig(config, theme)
 
         new Chart(ctx, config)
@@ -72,8 +83,9 @@ script.
       window.loadChartJS ? runChartJS() : btf.getScript('!{url_for(theme.asset.chartjs)}').then(runChartJS)
     }
 
-        // 监听主题切换
+    // Listen for theme change events
     btf.addGlobalFn('themeChange', runChartJS, 'chartjs')
+    btf.addGlobalFn('encrypt', runChartJS, 'chartjs')
 
     window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
   })()

plugins.yml

@@ -42,6 +42,10 @@ canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
   version: 1.1.4
+chartjs:
+  name: chart.js
+  file: dist/chart.umd.min.js
+  version: 4.4.4
 clickShowText:
   name: butterfly-extsrc
   file: dist/click-show-text.min.js
@@ -134,10 +138,6 @@ 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

@@ -341,7 +341,7 @@ hexo.extend.filter.register('before_generate', () => {
       user_id: null,
       pageSize: 10,
       order_by: 'social',
-      lang: 'zh_TW'
+      lang: 'en_US'
     },
     twikoo: {
       envId: null,
@@ -514,21 +514,17 @@ hexo.extend.filter.register('before_generate', () => {
     },
     chartjs: {
       enable: false,
-      color: {
+      fontColor: {
-        light: "rgba(0, 0, 0, 0.8)",
+        light: 'rgba(0, 0, 0, 0.8)',
-        dark: "rgba(255, 255, 255, 0.8)"
+        dark: 'rgba(255, 255, 255, 0.8)'
       },
       borderColor: {
-        light: "rgba(0, 0, 0, 0.1)",
+        light: 'rgba(0, 0, 0, 0.1)',
-        dark: "rgba(255, 255, 255, 0.2)"
+        dark: 'rgba(255, 255, 255, 0.2)'
       },
-      scale: {
+      scale_ticks_backdropColor: {
-        ticks: {
+        light: 'transparent',
-          backdropColor: {
+        dark: 'transparent'
-            light: "transparent",
-            dark: "transparent"
-          }
-        }
       }
     },
     note: {

scripts/tag/chartjs.js

@@ -2,7 +2,12 @@
  * Butterfly
  * chartjs
  * https://www.chartjs.org/
- * Author: SeaYJ
+ * {% chartjs [width, abreast, chartId] %}
+ * <!-- chart -->
+ * <!-- endchart -->
+ * <!-- desc -->
+ * <!-- enddesc -->
+ * {% endchartjs %}
  */
 
 'use strict'
@@ -10,30 +15,35 @@
 const { escapeHTML } = require('hexo-util')
 
 const chartjs = (args, content) => {
-    const chartBlock = /<!--\s*chart\s*-->\n([\w\W\s\S]*?)<!--\s*endchart\s*-->/g
+  if (!content) return
-    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!')
+  const chartRegex = /<!--\s*chart\s*-->\n([\w\W\s\S]*?)<!--\s*endchart\s*-->/
+  const descRegex = /<!--\s*desc\s*-->\n([\w\W\s\S]*?)<!--\s*enddesc\s*-->/
+  const selfConfig = args.join(' ').trim()
 
-    if ((match = chartBlock.exec(content)) !== null) {
+  const [width = '', layout = false, chartId = ''] = selfConfig.split(',').map(s => s.trim())
-        chartConfig = match[1]
+
+  const chartMatch = content.match(chartRegex)
+  const descMatch = content.match(descRegex)
+
+  if (!chartMatch) {
+    hexo.log.warn('chartjs tag: chart content is required!')
+    return
   }
 
-    while ((match = descBlock.exec(content)) !== null) {
+  const chartConfig = chartMatch && chartMatch[1] ? chartMatch[1] : ''
-        descMatches.push(match[1])
+  const descContent = descMatch && descMatch[1] ? descMatch[1] : ''
-    }
 
-    for (let i = 0; i < descMatches.length; i++) {
+  const renderedDesc = descContent ? hexo.render.renderSync({ text: descContent, engine: 'markdown' }).trim() : ''
-        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>`
+  const descDOM = renderedDesc ? `<div class="chartjs-desc">${renderedDesc}</div>` : ''
+  const abreastClass = layout ? ' chartjs-abreast' : ''
+  const widthStyle = width ? `data-width="${width}%"` : ''
+
+  return `<div class="chartjs-container${abreastClass}" data-chartjs-id="${chartId}" ${widthStyle}>
+            <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,9 +75,31 @@ if hexo-config('mermaid.enable')
     pre > code.mermaid
       display: none
 
-.chartjs-wrap
+if hexo-config('chartjs.enable')
+  .chartjs-container
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
     margin: 0 0 20px
     text-align: center
+    gap: 20px
+
+    +maxWidth600()
+      .chartjs-wrap
+        width: 100% !important
+
+    &.chartjs-abreast
+      flex-direction: row
+
+      +maxWidth600()
+        flex-direction: column
+
+    .chartjs-wrap
+      width: -webkit-fill-available
+
+    canvas
+      display: inline-block !important
 
 .utterances,
 .fb-comments iframe