Merge branch 'dev' of https://github.com/jerryc127/hexo-theme-butterfly into dev
Jerry
2 days ago
commit
3d7a033721
@ -0,0 +1,91 @@
|
||||
- const { fontColor, borderColor, scale_ticks_backdropColor } = theme.chartjs
|
||||
|
||||
script.
|
||||
(() => {
|
||||
const $chartjs = document.querySelectorAll('#article-container .chartjs-container')
|
||||
if ($chartjs.length === 0) return
|
||||
|
||||
const applyThemeDefaultsConfig = theme => {
|
||||
if (theme === 'dark-mode') {
|
||||
Chart.defaults.color = "!{fontColor.dark}"
|
||||
Chart.defaults.borderColor = "!{borderColor.dark}"
|
||||
Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.dark}"
|
||||
} else {
|
||||
Chart.defaults.color = "!{fontColor.light}"
|
||||
Chart.defaults.borderColor = "!{borderColor.light}"
|
||||
Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.light}"
|
||||
}
|
||||
}
|
||||
|
||||
// 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] // Apply the value for the current theme
|
||||
} else {
|
||||
// Recursively process child objects
|
||||
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) // Use custom ID or default ID
|
||||
const width = item.getAttribute('data-width')
|
||||
const existingCanvas = document.getElementById(chartID)
|
||||
|
||||
// If a canvas already exists, remove it to avoid rendering duplicates
|
||||
if (existingCanvas) {
|
||||
existingCanvas.parentNode.remove()
|
||||
}
|
||||
|
||||
const chartDefinition = chartSrc.textContent
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.id = chartID
|
||||
|
||||
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)
|
||||
|
||||
// Automatically traverse the config and apply dual-mode color schemes
|
||||
applyThemeConfig(config, theme)
|
||||
|
||||
new Chart(ctx, config)
|
||||
})
|
||||
}
|
||||
|
||||
const loadChartJS = () => {
|
||||
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)
|
||||
})()
|
||||
@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Butterfly
|
||||
* chartjs
|
||||
* https://www.chartjs.org/
|
||||
* {% chartjs [width, abreast, chartId] %}
|
||||
* <!-- chart -->
|
||||
* <!-- endchart -->
|
||||
* <!-- desc -->
|
||||
* <!-- enddesc -->
|
||||
* {% endchartjs %}
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
const { escapeHTML } = require('hexo-util')
|
||||
|
||||
const chartjs = (args, content) => {
|
||||
if (!content) return
|
||||
|
||||
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()
|
||||
|
||||
const [width = '', layout = false, chartId = ''] = selfConfig.split(',').map(s => s.trim())
|
||||
|
||||
const chartMatch = content.match(chartRegex)
|
||||
const descMatch = content.match(descRegex)
|
||||
|
||||
if (!chartMatch) {
|
||||
hexo.log.warn('chartjs tag: chart content is required!')
|
||||
return
|
||||
}
|
||||
|
||||
const chartConfig = chartMatch && chartMatch[1] ? chartMatch[1] : ''
|
||||
const descContent = descMatch && descMatch[1] ? descMatch[1] : ''
|
||||
|
||||
const renderedDesc = descContent ? hexo.render.renderSync({ text: descContent, engine: 'markdown' }).trim() : ''
|
||||
|
||||
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 })
|
||||
Loading…
Reference in New Issue