个人中心
gpt4 book ai didi

javascript - 如何为 Hexo 实现标签式代码块标签

转载 作者：搜寻专家 更新时间：2023-10-31 23:32:44 25 4
gpt4 key购买 nike

我正在尝试在 hexo 中创建选项卡式代码块(作为标记插件)，但我无法确定将我的 js 函数放在哪里。我以为我可以使用 the 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});

这确实有效。但是，标签的 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");
}

tab.js 和 testtag.js 都保存在 *\themes\bootstrap-blog\scripts* 文件夹中。

我看到了this answer我虽然可能会有所帮助，但我无法弄清楚什么是 View 。我在 Hexo 文档中找不到任何关于 View 的信息。

最佳答案

你的代码中有太多的错误，所以我更愿意给你一个完整的例子和解释。

这是我们需要的:

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

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

我们需要允许用户定义:

  • 名称或链接
  • 这个tab有多个codeblock，所以我们定义了一个标签来分隔和列出每个tab

语法如下:

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

还有一个例子:

{% 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 %}

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

  • 运行 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});
});

阅读注释以理解代码。

All you need to do is put your JavaScript files in the scripts folder and Hexo will load them during initialization.

风格化代码块

默认情况下，只显示第一个选项卡，其他选项卡隐藏，我们在此处的自定义标签源代码中做到了这一点:

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

所以你只需要更多的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();
  });  
});

您的问题是构建此自定义标签的机会，我将把它集成到我开发的下一个版本的 hexo 主题 ( Tranquilpeak) 中。

结果如下: result

实时查看 JSFiddle

关于javascript - 如何为 Hexo 实现标签式代码块标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35140300/

25 4 0
文章推荐： javascript - Node.js:记录忽略的错误
文章推荐： php - 用户在注册/认证之前将商品添加到购物车
文章推荐： php - 使用 jQuery 解析 PHP Json 对象。
文章推荐： php - 使用 preg_replace 截断字符串的最有效方法？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com