Files
hexo-theme-butterfly/scripts/tag/hide.js
Jerry 5ee24defc3 feat: 預設關閉 structured_data
feat: 升級一些項目依賴
feat: 重寫 README.md 和 README_CN.md,改進文檔結構和內容
feat: tags 標籤插件夜間模式調整
feat: 加按鈕懸停效果和動畫
fix: 修復右下角箭頭圖標位置沒有居中的 bug
feat: 增加右下角箭頭和滾動百分比的切換效果
improvement: 優化 tags 頁標籤雲顯示效果
improvement: 整合部分js到 init.js
improvement: 統一 CSS 變數使用,改進主題一致性
2025-08-19 14:49:39 +08:00

53 lines
1.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* Butterfly
* @example
* hideInline
* {% hideInline content,display,bg,color %}
* content不能包含當引號可用 '
* hideBlock
* {% hideBlock display,bg,color %}
* content
* {% endhideBlock %}
* hideToggle
* {% hideToggle display,bg,color %}
* content
* {% endhideToggle %}
*/
'use strict'
const parseArgs = args => args.join(' ').split(',')
const generateStyle = (bg, color) => {
let style = 'style="'
if (bg) style += `background-color: ${bg};`
if (color) style += `color: ${color}`
style += '"'
return style
}
const hideInline = args => {
const [content, display = 'Click', bg = false, color = false] = parseArgs(args)
const style = generateStyle(bg, color)
return `<span class="hide-inline"><button type="button" class="hide-button" ${style}>${display}</button><span class="hide-content">${content}</span></span>`
}
const hideBlock = (args, content) => {
const [display = 'Click', bg = false, color = false] = parseArgs(args)
const style = generateStyle(bg, color)
const renderedContent = hexo.render.renderSync({ text: content, engine: 'markdown' })
return `<div class="hide-block"><button type="button" class="hide-button" ${style}>${display}</button><div class="hide-content">${renderedContent}</div></div>`
}
const hideToggle = (args, content) => {
const [display, bg = false, color = false] = parseArgs(args)
const style = generateStyle(bg, color)
const border = bg ? `style="border: 1px solid ${bg}"` : ''
const renderedContent = hexo.render.renderSync({ text: content, engine: 'markdown' })
return `<details class="toggle" ${border}><summary class="toggle-button" ${style}>${display}</summary><div class="toggle-content">${renderedContent}</div></details>`
}
hexo.extend.tag.register('hideInline', hideInline)
hexo.extend.tag.register('hideBlock', hideBlock, { ends: true })
hexo.extend.tag.register('hideToggle', hideToggle, { ends: true })