如何为Hexo实现选项卡式代码块标记

Question

如何为Hexo实现选项卡式代码块标记

我试图在hexo中创建选项卡式代码块(作为标签插件),但我无法弄清楚我的js函数放在哪里.我以为我可以使用js helper加载函数,但我不知道在哪里包含帮助器.我尝试并将其添加到标记插件中失败了.这是标签插件代码(保存为testtag.js):

hexo.extend.tag.register('testtag', function(args, content){
  var className =  args.join(' ');

  var result = '';
  result += "<\%- js('\\themes\\bootstrap-blog\\scripts\\tab.js') \%>"
  result += '<div class="tabs">';
  result += '<ul>';
  result += '<li class="li_tab1" onclick="tab(&apos;tab1&apos;)"><a>Tab 1</a></li>';
  result += '<li class="li_tab2" onclick="tab(&apos;tab2&apos;)"><a>Tab 2</a></li>';
  result += '</ul>';
  result += '<div class="contentarea">';
  result += '<div id="tab1">';
  result += '<p>' + content + '</p>';
  result += '</div>';
  result += '<div id="tab2" style="display: none;">'
  result += '<p>This is the text for tab 2.</p>'
  result += '</div>'
  result += '</div>'
  result += '</div>'

  return result;

}, {ends: true});

Run Code Online (Sandbox Code Playgroud)

哪个确实有效.但是,标签的onclick事件只会引发无法找到该tab功能的错误.请注意,result上面的第一行是我尝试使用帮助程序失败.

这是我的tab函数tab.js:

function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}

Run Code Online (Sandbox Code Playgroud)

无论tab.js和testtag.js作为保存在*\主题\自举博客\脚本*文件夹.

我看到了这个答案,虽然我可能会有所帮助,但我无法弄清楚视图是什么.我在Hexo文档中找不到任何关于视图的内容.

Answer 1

Lou*_*iro 7

您的代码中有太多错误,所以我更愿意给您一个完整的解释示例.

这是我们需要的:

用于构建此多个代码块的HTML结构的自定义标记
用于样式化代码块和代码着色的CSS文件
用于为代码块设置动画的JS脚本(标签)

自定义标签:`m_codeblock`(JS服务器端)

我们需要允许用户定义:

名称或链接
此选项卡中有多个代码块,因此我们定义了一个标记来分隔和列出每个选项卡

这是语法:

{% m_codeblock [name] [link] %}
    <!-- tab [lang] -->
        source_code
    <!-- endtab -->
{% endm_codeblock %}

Run Code Online (Sandbox Code Playgroud)

一个例子:

{% m_codeblock stack overflow https://example.fr %}
    <!-- tab html -->
        <html>
            <body>
                <h1>Hey dan</h1>
            </body>
        </html>
    <!-- endtab -->
    <!-- tab css -->
        h1 {
            color:red;
        }
    <!-- endtab -->
{% endm_codeblock %}

Run Code Online (Sandbox Code Playgroud)

在博客文件夹(不是主题文件夹)中安装这些依赖项:

跑 npm install jsdom --save
跑 npm install jquery --save

以下是此自定义标记的源代码themes/theme_name/scripts/m_codeblock.js:

'use strict';

var util = require('hexo-util');
var highlight = util.highlight;
var stripIndent = require('strip-indent');
var rCaptionUrl = /(\S[\S\s]*)\s+(https?:\/\/)(\S+)/i;
var rCaption = /(\S[\S\s]*)/;
var rTab = /<!--\s*tab (\w*)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g;

// create a window with a document to use jQuery library
require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    var $ = require("jquery")(window);

    /**
     * Multi code block
     * @param args
     * @param content
     * @returns {string}
     */
    function multiCodeBlock(args, content) {
        var arg = args.join(' ');
        // get blog config
        var config = hexo.config.highlight || {};

        if (!config.enable) {
            return '<pre><code>' + content + '</code></pre>';
        }

        var html;
        var matches = [];
        var match;
        var caption = '';
        var codes = '';

        // extract languages and source codes
        while (match = rTab.exec(content)) {
            matches.push(match[1]);
            matches.push(match[2]);
        }
        // create tabs and tabs content
        for (var i = 0; i < matches.length; i += 2) {
            var lang = matches[i];
            var code = matches[i + 1];
            var $code;
            // trim code
            code = stripIndent(code).trim();
            // add tab
            // active the first tab
            if (i == 0) {
                caption += '<li class="tab active">' + lang + '</li>';
            }
            else {
                caption += '<li class="tab">' + lang + '</li>';
            }
            // highlight code
            code = highlight(code, {
                lang: lang,
                gutter: config.line_number,
                tab: config.tab_replace,
                autoDetect: config.auto_detect
            });
            // used to parse HTML code and ease DOM manipulation
            // display the first code block
            $code = $('<div>').append(code).find('>:first-child');
            if (i == 0) {
                $code.css('display', 'block');
            }
            else {
                $code.css('display', 'none');
            }

            codes += $code.prop('outerHTML');
        }
        // build caption
        caption = '<ul class="tabs">' + caption + '</ul>';
        // add caption title
        if (rCaptionUrl.test(arg)) {
            match = arg.match(rCaptionUrl);
            caption = '<a href="' + match[2] + match[3] + '">' + match[1] + '</a>' + caption;
        }
        else if (rCaption.test(arg)) {
            match = arg.match(rCaption);
            caption = '<span>' + match[1] + '</span>' + caption;
        }
        codes = '<div class="tabs-content">' + codes + '</div>';
        // wrap caption
        caption = '<figcaption>' + caption + '</figcaption>';
        html = '<figure class="highlight multi">' + caption + codes + '</figure>';
        return html;
    }

    /**
     * Multi code block tag
     *
     * Syntax:
     *   {% m_codeblock %}
     *   <!-- tab [lang] -->
     *       content
     *   <!-- endtab -->
     *   {% endm_codeblock %}
     * E.g:
     *   {% m_codeblock %}
     *   <!-- tab js -->
     *       var test = 'test';
     *   <!-- endtab -->
     *   <!-- tab css -->
     *       .btn {
     *           color: red;
     *       }
     *   <!-- endtab -->
     *   {% endm_codeblock %}
     */
    hexo.extend.tag.register('m_codeblock', multiCodeBlock, {ends: true});
});

Run Code Online (Sandbox Code Playgroud)

阅读评论以了解代码.

您需要做的就是将JavaScript文件放在scripts文件夹中,Hexo将在初始化期间加载它们.

样式化代码块

默认情况下,只显示第一个选项卡而隐藏其他选项卡,我们在此处的自定义标记源代码中执行此操作:

$code = $('<div>').append(code).find('>:first-child');
if (i == 0) {
  $code.css('display', 'block');
}
else {
  $code.css('display', 'none');
}

Run Code Online (Sandbox Code Playgroud)

所以你只需要更多的CSS来改善用户界面和代码着色.放入此文件theme/theme_name/assets/css/style.css并将其链接到布局.

动画代码块(JS客户端)

我们需要一些javascript来为选项卡设置动画.单击选项卡时,必须隐藏所有选项卡内容,并且仅显示右侧选项卡.将此脚本放入theme/theme_name/assets/js/script.js并将其链接到布局.

$(document).ready(function() {
  $('.highlight.multi').find('.tab').click(function() {
    var $codeblock = $(this).parent().parent().parent();
    var $tab = $(this);
    // remove `active` css class on all tabs
    $tab.siblings().removeClass('active');
    // add `active` css class on the clicked tab
    $tab.addClass('active');
    // hide all tab contents
    $codeblock.find('.highlight').hide();
    // show only the right one
    $codeblock.find('.highlight.' + $tab.text()).show();
  });  
});

Run Code Online (Sandbox Code Playgroud)

你的问题是建立这个自定义标签的机会,我将把它集成到我开发的下一个hexo主题版本(Tranquilpeak)中.

结果如下:

在JSFiddle上查看它

归档时间：	10 年前
查看次数：	985 次
最近记录：	9 年，8 月前

如何为Hexo实现选项卡式代码块标记

自定义标签:m_codeblock(JS服务器端)

样式化代码块

动画代码块(JS客户端)

自定义标签:`m_codeblock`(JS服务器端)