hexo-theme-butterfly/scripts/tag/hide.js
Jerry c1ac4a5e16 breaking changes: 升級 fontawesome 到 v6 #689
feat: snackbar 增加圓角
feat: 增加 flink 標籤外掛
fix: 修復點擊 toc 外圍,控制檯報錯的 bug
fix: Facebook Comments 無法使用 #787
fix: chat_btn 聊天按鈕翻譯缺失 #791
fix: local search 的 content 設爲 false, 搜索無法運行的 bug #764
fix: Mermaid 圖表渲染後元素高度過大 #773
fix: 文章頁分享按鈕另開一行時, 導航頁寬度沒有 100% 的 bug #765
improvement: 語義化 toggle 標籤外掛
improvement: darkmode 下 toc 背景顏色更改
2022-02-13 15:23:13 +08:00

71 lines
2.0 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'
function hideInline (args) {
args = args.join(' ').split(',')
const content = args[0]
const display = args[1] || 'Click'
const bg = args[2] || false
const color = args[3] || false
let group = 'style="'
if (bg) group += `background-color: ${bg};`
if (color) group += `color: ${color}`
group += '"'
return `<span class="hide-inline"><button type="button" class="hide-button" ${group}>${display}
</button><span class="hide-content">${content}</span></span>`
}
function hideBlock (args, content) {
args = args.join(' ').split(',')
const display = args[0] || 'Click'
const bg = args[1] || false
const color = args[2] || false
let group = 'style="'
if (bg) group += `background-color: ${bg};`
if (color) group += `color: ${color}`
group += '"'
return `<div class="hide-block"><button type="button" class="hide-button" ${group}>${display}
</button><div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
}
function hideToggle (args, content) {
args = args.join(' ').split(',')
const display = args[0]
const bg = args[1] || false
const color = args[2] || false
let group = 'style="'
let border = ''
if (bg) {
border = `style="border: 1px solid ${bg}"`
group += `background-color: ${bg};`
}
if (color) group += `color: ${color}`
group += '"'
return `<details class="toggle" ${border}><summary class="toggle-button" ${group}>${display}</summary><div class="toggle-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></details>`
}
hexo.extend.tag.register('hideInline', hideInline)
hexo.extend.tag.register('hideBlock', hideBlock, { ends: true })
hexo.extend.tag.register('hideToggle', hideToggle, { ends: true })