In [ ]:

cd hexo

In [ ]:

git clone https://github.com/next-theme/hexo-theme-next themes/next

Cloning into 'themes/next'...
remote: Enumerating objects: 6276, done.
remote: Counting objects: 100% (187/187), done.
remote: Compressing objects: 100% (114/114), done.
remote: Total 6276 (delta 76), reused 156 (delta 68), pack-reused 6089
Receiving objects: 100% (6276/6276), 1.31 MiB | 949.00 KiB/s, done.
Resolving deltas: 100% (4051/4051), done.

Tabs

In [ ]:

mkdir -p themes/freemind/scripts/tags

In [ ]:

cat << EOF > themes/freemind/scripts/tags/index.js
/* global hexo */

'use strict';

const postTabs = require('./tabs')(hexo);

hexo.extend.tag.register('tabs', postTabs, true);
hexo.extend.tag.register('subtabs', postTabs, true);
hexo.extend.tag.register('subsubtabs', postTabs, true);
EOF

In [ ]:

touch themes/freemind/scripts/tags/tabs.js

In [ ]:

cat themes/freemind/scripts/tags/tabs.js

/**
 * tabs.js | https://theme-next.js.org/docs/tag-plugins/tabs
 */

'use strict';

module.exports = ctx => function(args, content = '') {
  const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g;

  args = args.join(' ').split(',');
  const tabName = args[0];
  const tabActive = Number(args[1]) || 0;

  let tabId = 0;
  let tabNav = '';
  let tabContent = '';

  if (!tabName) ctx.log.warn('Tabs block must have unique name!');
  const matches = content.matchAll(tabBlock);

  for (const match of matches) {
    let [caption = '', icon = ''] = match[1].split('@');
    let postContent = match[2];

    postContent = ctx.render.renderSync({ text: postContent, engine: 'markdown' }).trim();

    const abbr = tabName + ' ' + ++tabId;
    const href = abbr.toLowerCase().split(' ').join('-');

    icon = icon.trim();
    if (icon.length > 0) {
      if (!icon.startsWith('fa')) icon = 'fa fa-' + icon;
      icon = `<i class="${icon}"></i>`;
    }

    caption = icon + caption.trim();

    const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '';
    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>`;
  tabContent = `<div class="tab-content">${tabContent}</div>`;

  return `<div class="tabs" id="${tabName.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`;
};

Here is English.

这里是中文。

ここは日本語テキストです。

Add Tabs to My Blog

Comments