Refactor tags

This commit is contained in:
Mimi 2020-07-25 00:47:35 +08:00
parent c954bc29c9
commit b6c1aba4d5
5 changed files with 49 additions and 27 deletions

View File

@ -8,21 +8,20 @@
function postButton(args) {
args = args.join(' ').split(',');
const url = args[0];
let text = args[1] || '';
let icon = args[2] || '';
let title = args[3] || '';
const url = args[0];
const text = (args[1] || '').trim();
let icon = (args[2] || '').trim();
const title = (args[3] || '').trim();
if (!url) {
hexo.log.warn('URL can NOT be empty.');
}
if (icon.length > 0) {
if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
icon = `<i class="${icon}"></i>`;
}
text = text.trim();
icon = icon.trim();
icon = icon.startsWith('fa') ? icon : 'fa fa-' + icon;
title = title.trim();
return `<a class="btn" href="${url}"${title.length > 0 ? ` title="${title}"` : ''}>${icon.length > 0 ? `<i class="${icon}"></i>` : ''}${text}</a>`;
return `<a class="btn" href="${url}"${title.length > 0 ? ` title="${title}"` : ''}>${icon}${text}</a>`;
}
hexo.extend.tag.register('button', postButton, {ends: false});

View File

@ -11,7 +11,7 @@ function postLabel(args) {
const classes = args[0] || 'default';
const text = args[1] || '';
!text && hexo.log.warn('Label text must be defined!');
if (!text) hexo.log.warn('Label text must be defined!');
return `<mark class="label ${classes.trim()}">${text}</mark>`;
}

View File

@ -7,7 +7,23 @@
'use strict';
function postNote(args, content) {
return `<div class="note ${args.join(' ')}">${hexo.render.renderSync({text: content, engine: 'markdown'})}</div>`;
const keywords = ['default', 'primary', 'info', 'success', 'warning', 'danger', 'no-icon'];
const className = [];
const summary = [];
args.forEach((arg, index) => {
if (index > 2 || !keywords.includes(arg)) {
summary.push(arg);
} else {
className.push(arg);
}
});
content = hexo.render.renderSync({ text: content, engine: 'markdown' });
if (summary.length === 0) {
return `<div class="note ${args.join(' ')}">${content}</div>`;
}
return `<details class="note ${className.join(' ')}"><summary>${hexo.render.renderSync({ text: summary.join(' '), engine: 'markdown' })}</summary>
${content}
</details>`;
}
hexo.extend.tag.register('note', postNote, {ends: true});

View File

@ -19,7 +19,7 @@ function postTabs(args, content) {
let tabNav = '';
let tabContent = '';
!tabName && hexo.log.warn('Tabs block must have unique name!');
if (!tabName) hexo.log.warn('Tabs block must have unique name!');
while ((match = tabBlock.exec(content)) !== null) {
matches.push(match[1]);
@ -27,27 +27,25 @@ function postTabs(args, content) {
}
for (let i = 0; i < matches.length; i += 2) {
const tabParameters = matches[i].split('@');
let postContent = matches[i + 1];
let tabCaption = tabParameters[0] || '';
let tabIcon = tabParameters[1] || '';
let tabHref = '';
let [caption = '', icon = ''] = matches[i].split('@');
let postContent = matches[i + 1];
postContent = hexo.render.renderSync({text: postContent, engine: 'markdown'}).trim();
tabId++;
tabHref = (tabName + ' ' + tabId).toLowerCase().split(' ').join('-');
const abbr = tabName + ' ' + ++tabId;
const href = abbr.toLowerCase().split(' ').join('-');
((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId);
icon = icon.trim();
if (icon.length > 0) {
if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
icon = `<i class="${icon}"></i>`;
}
const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : '';
let icon = tabIcon.trim();
if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`);
caption = icon + caption.trim();
const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '';
tabNav += `<li class="tab${isActive}"><a href="#${tabHref}">${tabIcon + tabCaption.trim()}</a></li>`;
tabContent += `<div class="tab-pane${isActive}" id="${tabHref}">${postContent}</div>`;
tabNav += `<li class="tab${isActive}"><a href="#${href}">${caption || abbr}</a></li>`;
tabContent += `<div class="tab-pane${isActive}" id="${href}">${postContent}</div>`;
}
tabNav = `<ul class="nav-tabs">${tabNav}</ul>`;

View File

@ -23,6 +23,15 @@
border-left: 3px solid $gainsboro;
}
summary {
cursor: pointer;
outline: 0;
p {
display: inline;
}
}
h2, h3, h4, h5, h6 {
border-bottom: initial;
margin: 0;