Merge branch 'dev' of https://github.com/jerryc127/hexo-theme-butterfly into dev
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