Fixed some problems
parent
ec1d2c7923
commit
3a8d5fa6dc
|
@ -12,4 +12,6 @@ module.exports = hexo => {
|
||||||
require('hexo-component-inferno/lib/hexo/helper/cdn')(hexo);
|
require('hexo-component-inferno/lib/hexo/helper/cdn')(hexo);
|
||||||
require('hexo-component-inferno/lib/hexo/helper/page')(hexo);
|
require('hexo-component-inferno/lib/hexo/helper/page')(hexo);
|
||||||
require('hexo-component-inferno/lib/core/view').init(hexo);
|
require('hexo-component-inferno/lib/core/view').init(hexo);
|
||||||
|
require('./../scripts/tags/message')(hexo);
|
||||||
|
require('./../scripts/tags/tabs')(hexo);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,57 +1,59 @@
|
||||||
/**
|
/**
|
||||||
* Bulma Message Tag, see {@link https://bulma.io/documentation/components/message/}.
|
* 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,
|
* @param {string} color The color of this message, can not be set. Usable: dark, primary, link, info, success,
|
||||||
* warning, danger.
|
* warning, danger.
|
||||||
* @param {string} icon The icon of this message, can not be set.
|
* @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} 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
|
* @param {string} size The size of this message, can not be set. Usable: small, medium, large. The default
|
||||||
* size is between small and medium.
|
* size is between small and medium.
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
* {% message color:danger icon:info-circle 'title:Very danger!' size:small %}
|
* {% message color:danger icon:info-circle 'title:Very danger!' size:small %}
|
||||||
* **You are in danger.**
|
* **You are in danger.**
|
||||||
* {% endmessage %}
|
* {% endmessage %}
|
||||||
*/
|
*/
|
||||||
hexo.extend.tag.register('message', function(args, content) {
|
module.exports = function (hexo) {
|
||||||
var color = 'dark';
|
hexo.extend.tag.register('message', function(args, content) {
|
||||||
var icon = '';
|
let color = 'dark';
|
||||||
var title = '';
|
let icon = '';
|
||||||
var size = '';
|
let title = '';
|
||||||
var header = '';
|
let size = '';
|
||||||
args.forEach(element => {
|
let header = '';
|
||||||
var key = element.split(':')[0].trim();
|
args.forEach(element => {
|
||||||
var value = element.split(':')[1].trim();
|
const key = element.split(':')[0].trim();
|
||||||
if (value != null && value != undefined && value != '') {
|
const value = element.split(':')[1].trim();
|
||||||
switch (key) {
|
if (value !== null && value !== undefined && value !== '') {
|
||||||
case 'color':
|
switch (key) {
|
||||||
color = value;
|
case 'color':
|
||||||
break;
|
color = value;
|
||||||
case 'icon':
|
break;
|
||||||
icon = `<i class="fas fa-${value} mr-2"></i>`;
|
case 'icon':
|
||||||
break;
|
icon = `<i class="fas fa-${value} mr-2"></i>`;
|
||||||
case 'title':
|
break;
|
||||||
title = value;
|
case 'title':
|
||||||
break;
|
title = value;
|
||||||
case 'size':
|
break;
|
||||||
size = ` is-${value}`;
|
case 'size':
|
||||||
break;
|
size = ` is-${value}`;
|
||||||
}
|
break;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
if (icon != '' || title != '') {
|
});
|
||||||
header = `
|
if (icon !== '' || title !== '') {
|
||||||
<div class="message-header">
|
header = `
|
||||||
${hexo.render.renderSync({text: icon + title, engine: 'markdown'})}
|
<div class="message-header">
|
||||||
</div>
|
${hexo.render.renderSync({text: icon + title, engine: 'markdown'})}
|
||||||
`
|
</div>
|
||||||
}
|
`
|
||||||
return `
|
}
|
||||||
<article class="message is-${color}${size}">
|
return `
|
||||||
${header}
|
<article class="message is-${color}${size}">
|
||||||
<div class="message-body">
|
${header}
|
||||||
${hexo.render.renderSync({text: content, engine: 'md'})}
|
<div class="message-body">
|
||||||
</div>
|
${hexo.render.renderSync({text: content, engine: 'md'})}
|
||||||
</article>
|
</div>
|
||||||
`;
|
</article>
|
||||||
}, { ends: true });
|
`;
|
||||||
|
}, { ends: true });
|
||||||
|
}
|
|
@ -1,118 +1,118 @@
|
||||||
/**
|
/**
|
||||||
* Bulma Tabs Tag, see {@link https://bulma.io/documentation/components/tabs/}.
|
* Bulma Tabs Tag, see {@link https://bulma.io/documentation/components/tabs/}.
|
||||||
*
|
*
|
||||||
* The format of each item is: <!-- <active>item [id] [<icon>] '[title]' --> [content] <!-- enditem -->.
|
* 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.
|
* If each item's content is indented with four spaces or one tab, these indents will be ignored.
|
||||||
*
|
*
|
||||||
* @param {string} id The unique id of this tab, should match: /\w/.
|
* @param {string} id The unique id of this tab, should match: /\w/.
|
||||||
* @param {string} behavior The behavior of this tab, can not be set. Usable: centered, right, fullwidth. The
|
* @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.
|
* 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
|
* @param {string} size The size of this tab, can not be set. Usable: small, medium, large. The default
|
||||||
* size is between small and medium.
|
* size is between small and medium.
|
||||||
* @param {string} style The style of this tab, can not be set. Usable: boxed, toggle, toggle-rounded.
|
* @param {string} style The style of this tab, can not be set. Usable: boxed, toggle, toggle-rounded.
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
* {% tabs behavior:fullwidth size:small style:toggle-rounded %}
|
* {% tabs behavior:fullwidth size:small style:toggle-rounded %}
|
||||||
* <!-- item info info 'Info' -->This is info.<!-- enditem -->
|
* <!-- item info info 'Info' -->This is info.<!-- enditem -->
|
||||||
* <!-- activeitem hello 'Hello' -->This is hello.<!-- enditem -->
|
* <!-- activeitem hello 'Hello' -->This is hello.<!-- enditem -->
|
||||||
* {% endmessage %}
|
* {% endmessage %}
|
||||||
*/
|
*/
|
||||||
hexo.extend.tag.register('tabs', function(args, content) {
|
hexo.extend.tag.register('tabs', function(args, content) {
|
||||||
var id = '';
|
let id = '';
|
||||||
var behavior = '';
|
let behavior = '';
|
||||||
var size = '';
|
let size = '';
|
||||||
var style = '';
|
let style = '';
|
||||||
var contentEl = content;
|
let contentEl = content;
|
||||||
args.forEach(element => {
|
args.forEach(element => {
|
||||||
var key = element.split(':')[0].trim();
|
const key = element.split(':')[0].trim();
|
||||||
var value = element.split(':')[1].trim();
|
const value = element.split(':')[1].trim();
|
||||||
if (value != null && value != undefined && value != '') {
|
if (value !== null && value !== undefined && value !== '') {
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'id':
|
case 'id':
|
||||||
id = value;
|
id = value;
|
||||||
break;
|
break;
|
||||||
case 'behavior':
|
case 'behavior':
|
||||||
behavior = ` is-${value}`;
|
behavior = ` is-${value}`;
|
||||||
break;
|
break;
|
||||||
case 'size':
|
case 'size':
|
||||||
size = ` is-${value}`;
|
size = ` is-${value}`;
|
||||||
break;
|
break;
|
||||||
case 'style':
|
case 'style':
|
||||||
if (value == 'toggle-rounded') {
|
if (value === 'toggle-rounded') {
|
||||||
style = ' is-toggle is-toggle-rounded';
|
style = ' is-toggle is-toggle-rounded';
|
||||||
} else {
|
} else {
|
||||||
style = ` is-${value}`;
|
style = ` is-${value}`;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var blockRegExp = /<!--\s*(active)?item( \w+)( \w+)?( '.*?')\s*-->([\s\S]*?)<!--\s*enditem\s*-->/g;
|
const blockRegExp = /<!--\s*(active)?item( \w+)( \w+)?( '.*?')\s*-->([\s\S]*?)<!--\s*enditem\s*-->/g;
|
||||||
var match;
|
let match;
|
||||||
var tabsEl = '';
|
let tabsEl = '';
|
||||||
var contentEl = '';
|
let contentEl = '';
|
||||||
|
|
||||||
while((match = blockRegExp.exec(content)) !== null) {
|
while((match = blockRegExp.exec(content)) !== null) {
|
||||||
var active = '';
|
let active = '';
|
||||||
var hidden = ' is-hidden';
|
let hidden = ' is-hidden';
|
||||||
if (match[1] != undefined) {
|
let icon = '';
|
||||||
active = ' class="is-active"';
|
var contentString = match[5].replace(/^\n?|[ \n\t]*$/g, '');
|
||||||
hidden = '';
|
if (match[1] === 'active') {
|
||||||
}
|
active = ' class="is-active"';
|
||||||
var icon = '';
|
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>`;
|
}
|
||||||
var contentString = match[5].replace(/^\n?|[ \n\t]*$/g, '');
|
if (match[3] === 'active' && 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');
|
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 += `
|
tabsEl += `
|
||||||
<li id="${match[2].substring(1)}"${active}">
|
<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>
|
<a onclick="switchTab(this)">${hexo.render.renderSync({text: icon + match[4].substring(2, match[4].length - 1), engine: 'markdown'})}</a>
|
||||||
</li>
|
</li>
|
||||||
`;
|
`;
|
||||||
contentEl += `
|
contentEl += `
|
||||||
<div id="${match[2].substring(1)}" class="tab-content${hidden}">
|
<div id="${match[2].substring(1)}" class="tab-content${hidden}">
|
||||||
${hexo.render.renderSync({text: contentString, engine: 'markdown'})}
|
${hexo.render.renderSync({text: contentString, engine: 'markdown'})}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div>
|
<div>
|
||||||
<div class="tabs my-3${behavior}${size}${style}">
|
<div class="tabs my-3${behavior}${size}${style}">
|
||||||
<ul class="mx-0 my-0">
|
<ul class="mx-0 my-0">
|
||||||
${tabsEl}
|
${tabsEl}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
${contentEl}
|
${contentEl}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}, { ends: true });
|
}, { ends: true });
|
||||||
|
|
||||||
hexo.extend.injector.register(
|
hexo.extend.injector.register(
|
||||||
"head_end",
|
"head_end",
|
||||||
`
|
`
|
||||||
<script>
|
<script>
|
||||||
function switchTab(element) {
|
function switchTab(element) {
|
||||||
var id = element.parentElement.id;
|
const id = element.parentElement.id;
|
||||||
var tabElements = element.parentElement.parentElement.children;
|
const tabElements = element.parentElement.parentElement.children;
|
||||||
var contentElements = element.parentElement.parentElement.parentElement.parentElement.children[1].children;
|
const contentElements = element.parentElement.parentElement.parentElement.parentElement.children[1].children;
|
||||||
for (var i = 0; i < tabElements.length; i++) {
|
for (let i = 0; i < tabElements.length; i++) {
|
||||||
var $tab = tabElements[i];
|
const $tab = tabElements[i];
|
||||||
var $content = contentElements[i];
|
const $content = contentElements[i];
|
||||||
if ($tab.id == id) {
|
if ($tab.id === id) {
|
||||||
$tab.classList.add('is-active');
|
$tab.classList.add('is-active');
|
||||||
} else {
|
} else {
|
||||||
$tab.classList.remove('is-active');
|
$tab.classList.remove('is-active');
|
||||||
}
|
}
|
||||||
if ($content.id == id) {
|
if ($content.id === id) {
|
||||||
$content.classList.remove('is-hidden');
|
$content.classList.remove('is-hidden');
|
||||||
} else {
|
} else {
|
||||||
$content.classList.add('is-hidden');
|
$content.classList.add('is-hidden');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
`
|
`
|
||||||
);
|
);
|
Loading…
Reference in New Issue