Bug 回报：colorpanel 内叠加 collapse 会导致显示错误

Becods commented 2 years ago

对Bug的描述: colorpanel 内叠加 collapse 会导致显示错误

复现Bug的方法: markdown：

{% colorpanel info 面板框的标题 %}
{% collapse 折叠框的标题 open %}
被折叠的内容 1
被折叠的内容 2
...
{% endcollapse %}
{% endcolorpanel %}
***
测试文字测试文字
{% colorpanel danger 面板框的标题 %}
{% collapse 折叠框的标题 open %}
被折叠的内容 1
被折叠的内容 2
...
{% endcollapse %}
{% endcolorpanel %}

期望的行为: 修复，正常显示
相关的截图:
运行环境(如果该Bug的产生和环境有关，例如浏览器不兼容导致): 应该不需要
补充内容: 疑似collapse渲染成html后又被hexo使用markdown渲染引擎渲染

Becods commented 2 years ago

已自行解决，加了<span></span>占位神奇的bug 神奇的解决方法发现是原本要结束div的地方被引擎转义了 提示面板的引擎换成了html，肯定会出问题的 或者说，折中一下，增加一个专门用来嵌套的，目前只想到这么做

<pre><code>&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

// 折叠内容
hexo.extend.tag.register('collapse', function(args, content){
    content = hexo.render.renderSync({text: content, engine: 'markdown'});

    return `<div class="xControl${args[1] === 'open' ? ' active' : ''}">
    <div class="xHeading"><div class="xIcon"><i class="fa fa-plus"></i></div><span>${args[0]}</span></div>
    <div class="xContent${args[1] === 'open' ? ' pre-open' : ''}"><div class="inner">
        <span></span>${content}
    </div></div>
    </div>`;
}, {ends: true});

// 提示面板
hexo.extend.tag.register('colorpanel', function(args, content){
    content = hexo.render.renderSync({text: content, engine: 'markdown'});

    return `<div class="panel panel-${args[0]}">
    <div class="panel-title">${args[1]}</div>
    <div class="panel-body">
        ${content}
    </div>
    </div>`;
}, {ends: true});
hexo.extend.tag.register('colorpanel-html', function(args, content){
    content = hexo.render.renderSync({text: content, engine: 'html'});

    return `<div class="panel panel-${args[0]}">
    <div class="panel-title">${args[1]}</div>
    <div class="panel-body">
        ${content}
    </div>
    </div>`;
}, {ends: true});

Becods commented 2 years ago

反复测试后发现在引入代码块之后引擎渲染正常，主题版本https://github.com/Candinya/Kratos-Rebirth/commit/dce837fe3e40a9957dbd9c9b393b737dbbd3ff5e ，js层未作任何更改

{% colorpanel success 面板框的标题 %}
{% collapse 折叠框的标题 open %}
被折叠的内容 1
被折叠的内容 2

\```
\```
{% endcollapse %}
{% endcolorpanel %}

{% colorpanel success 面板框的标题 %}
{% collapse 折叠框的标题 open %}
被折叠的内容 1
被折叠的内容 2
{% endcollapse %}
{% endcolorpanel %}

Candinya commented 2 years ago

有趣的是这里似乎无法复现这个问题，能否请问一下您的 node 和 hexo 版本号呢

Becods commented 2 years ago

有趣的是这里似乎无法复现这个问题，能否请问一下您的 node 和 hexo 版本号呢

hexo: 5.4.0
hexo-cli: 4.3.0
os: win32 10.0.19043
node: 16.9.1
v8: 9.3.345.16-node.12
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.17.2
modules: 93
nghttp2: 1.42.0
napi: 8
llhttp: 6.0.2
openssl: 1.1.1l+quic
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

Candinya commented 2 years ago

不应该有问题…我的 package.json 中的版本是这些：

    "hexo": "^5.4.0",
    "hexo-deployer-git": "^3.0.0",
    "hexo-deployer-rss3": "^0.0.4",
    "hexo-filter-date-from-git": "^0.1.2",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-sitemap": "^2.1.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^4.0.0",
    "hexo-renderer-stylus": "^2.0.1",
    "hexo-server": "^2.0.0",
    "hexo-util": "^2.5.0",
    "highlight.js": "^11.1.0"

Becods commented 2 years ago

除了package.json和_config.yml是沿用之前，其他均为全新安装

    "hexo": "^5.0.0",
    "hexo-filter-flowchart": "^1.0.4",
    "hexo-filter-sequence": "^1.0.3",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-math": "^4.0.0",
    "hexo-neat": "^1.0.9",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-markdown-it-plus": "^1.0.4",
    "hexo-renderer-marked": "^4.0.0",
    "hexo-renderer-mathjax": "^0.6.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-landscape": "^0.0.3"

这个是套用了您的package.json后生成的页面