あなたのコードには間違いが多すぎるので、説明付きで完全な例を示したいと思います。
必要なものは次のとおりです。
- この複数のコードブロックの HTML 構造を構築するためのカスタム タグ
- コード ブロックとコードの配色をスタイル化する CSS ファイル
- コードブロック (タブ) をアニメーション化する JS スクリプト
カスタムタグ : m_codeblock(JS サーバー側)
ユーザーが定義できるようにする必要があります。
- 名前またはリンク
- このタブには複数のコードブロックがあるため、各タブを区切ってリストするタグを定義しました
構文は次のとおりです。
{% 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});
});
コメントを読んでコードを理解してください。
JavaScript ファイルをscriptsフォルダーに入れるだけで、Hexo は初期化中にそれらをロードします。
コード ブロックのスタイルを設定する
デフォルトでは、最初のタブのみが表示され、他のタブは非表示になっています。カスタムタグのソースコードでそれを行いました:
$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 ) の次のリリースに統合する予定です。
結果は次のとおりです。
JSFiddleでライブをチェック