Merge pull request #1026 from xfqwdsj/master

Added message tag, tabs tag.
This commit is contained in:
Ruipeng Zhang 2022-01-30 10:04:25 -05:00 committed by GitHub
commit eb86ccfcff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 178 additions and 0 deletions

View File

@ -12,4 +12,6 @@ module.exports = hexo => {
require('hexo-component-inferno/lib/hexo/helper/cdn')(hexo);
require('hexo-component-inferno/lib/hexo/helper/page')(hexo);
require('hexo-component-inferno/lib/core/view').init(hexo);
require('./../scripts/tags/message')(hexo);
require('./../scripts/tags/tabs')(hexo);
};

60
scripts/tags/message.js Normal file
View File

@ -0,0 +1,60 @@
/**
* Bulma Message Tag, see {@link https://bulma.io/documentation/components/message/}.
*
* @param {string} color The color of this message, can not be set. Usable: dark, primary, link, info, success,
* warning, danger.
* @param {string} icon The icon of this message, can not be set.
* @param {string} title The header of this message, can not be set, supported Markdown.
* @param {string} size The size of this message, can not be set. Usable: small, medium, large. The default
* size is between small and medium.
*
* @example
* {% message color:danger icon:info-circle 'title:Very danger!' size:small %}
* **You are in danger.**
* {% endmessage %}
*/
module.exports = function(hexo) {
hexo.extend.tag.register('message', (args, content) => {
let icon = '';
let title = '';
let classes = '';
let header = '';
args.forEach(element => {
const key = element.split(':')[0].trim();
const value = element.split(':')[1].trim();
if (value !== null && value !== undefined && value !== '') {
switch (key) {
case 'color':
classes += ` is-${value}`;
break;
case 'icon':
icon = `<i class="fas fa-${value} mr-2"></i>`;
break;
case 'title':
title = value;
break;
case 'size':
classes += ` is-${value}`;
break;
}
}
});
if (icon !== '' || title !== '') {
header = `
<div class="message-header">
${hexo.render.renderSync({text: icon + title, engine: 'markdown'})}
</div>
`;
}
return `
<article class="message${classes}">
${header}
<div class="message-body">
${hexo.render.renderSync({text: content, engine: 'md'})}
</div>
</article>
`;
}, { ends: true });
};

116
scripts/tags/tabs.js Normal file
View File

@ -0,0 +1,116 @@
/**
* Bulma Tabs Tag, see {@link https://bulma.io/documentation/components/tabs/}.
*
* The format of each item is: <!-- <active>item [id] [<icon>] '[title]' --> [content] <!-- enditem -->.
* If each item's content is indented with four spaces or one tab, these indents will be ignored.
*
* @param {string} behavior The behavior of this tab, can not be set. Usable: centered, right, fullwidth. The
* default behavior is to display on the left.
* @param {string} size The size of this tab, can not be set. Usable: small, medium, large. The default
* size is between small and medium.
* @param {string} style The style of this tab, can not be set. Usable: boxed, toggle, toggle-rounded.
*
* @example
* {% tabs behavior:fullwidth size:small style:toggle-rounded %}
* <!-- item info info 'Info' -->This is info.<!-- enditem -->
* <!-- activeitem hello 'Hello' -->This is hello.<!-- enditem -->
* {% endmessage %}
*/
module.exports = function(hexo) {
hexo.extend.tag.register('tabs', (args, content) => {
let classes = '';
args.forEach(element => {
const key = element.split(':')[0].trim();
const value = element.split(':')[1].trim();
if (value !== null && value !== undefined && value !== '') {
switch (key) {
case 'behavior':
classes += ` is-${value}`;
break;
case 'size':
classes += ` is-${value}`;
break;
case 'style':
if (value === 'toggle-rounded') {
classes += ' is-toggle is-toggle-rounded';
} else {
classes += ` is-${value}`;
}
break;
}
}
});
const blockRegExp = /<!--\s*(active)?item( \w+)( \w+)?( '.*?')\s*-->([\s\S]*?)<!--\s*enditem\s*-->/g;
let match;
let tabsEl = '';
let contentEl = '';
while ((match = blockRegExp.exec(content)) !== null) {
let active = '';
let hidden = ' is-hidden';
let icon = '';
let contentString = match[5].replace(/^\n?|[ \n\t]*$/g, '');
if (match[1] === 'active') {
active = ' class="is-active"';
hidden = '';
}
if (match[3] !== undefined && match[3].substring(1) !== '') icon = `<span class="icon is-small"><i class="fas fa-${match[3].substring(1)}" aria-hidden="true"></i></span>`;
if (contentString.match(/^ {4}|^\t{1}/gm) !== null && contentString.match(/^ {4}|^\t{1}/gm).length === contentString.split('\n').length) contentString = contentString.replace(/^ {4}|^\t{1}/g, '').replace(/\n {4}|\n\t{1}/g, '\n');
tabsEl += `
<li id="${match[2].substring(1)}"${active}">
<a onclick="switchTab(this)">${hexo.render.renderSync({text: icon + match[4].substring(2, match[4].length - 1), engine: 'markdown'})}</a>
</li>
`;
contentEl += `
<div id="${match[2].substring(1)}" class="tab-content${hidden}">
${hexo.render.renderSync({text: contentString, engine: 'markdown'})}
</div>
`;
}
return `
<div>
<div class="tabs my-3${classes}">
<ul class="mx-0 my-0">
${tabsEl}
</ul>
</div>
<div>
${contentEl}
</div>
</div>
`;
}, { ends: true });
hexo.extend.injector.register(
'head_end',
`
<script>
function switchTab(element) {
const id = element.parentElement.id;
const tabElements = element.parentElement.parentElement.children;
const contentElements = element.parentElement.parentElement.parentElement.parentElement.children[1].children;
for (let i = 0; i < tabElements.length; i++) {
const $tab = tabElements[i];
const $content = contentElements[i];
if ($tab.id === id) {
$tab.classList.add('is-active');
} else {
$tab.classList.remove('is-active');
}
if ($content.id === id) {
$content.classList.remove('is-hidden');
} else {
$content.classList.add('is-hidden');
}
}
}
</script>
`
);
};