This repository was archived by the owner on Feb 20, 2025. It is now read-only.
-
Couldn't load subscription status.
- Fork 2.1k
This repository was archived by the owner on Feb 20, 2025. It is now read-only.
关于组件cta使用中会删除掉container_cta_close的Token元素的问题 #312
Copy link
Copy link
Open
Description
单独使用cta组件测试 如下:
:::cta
**cta left**
{.cta-left}
---
- cta right 1。 {.cta-li-1}
- cta right 2。 {.cta-li-2}
{.cta-right}
:::输出:
<div class=" cta">
<div class="number cta-left">
<p><strong>cta left</strong></p>
</div>
<div class="benefit">
<ul class="cta-right">
<li class="cta-li-1">cta right 1。 </li>
<li class="cta-li-2">cta right 2。 </li>
</ul>
</div>预期输出:
<div class=" cta">
<div class="number cta-left">
<p><strong>cta left</strong></p>
</div>
<div class="benefit">
<ul class="cta-right">
<li class="cta-li-1">cta right 1。 </li>
<li class="cta-li-2">cta right 2。 </li>
</ul>
</div>
</div> 其实这个问题在cta组件单独使用时,是没有问题的,似乎是浏览器会自动补全缺失的div闭合标签,当我在使用嵌套的时候,这个问题就很致命。
嵌套使用column和cta组件测试 如下:
::::column {.vertical-align}
:::cta {.column-1}
**cta left**
{.cta-left}
---
- cta right 1。 {.cta-li-1}
- cta right 2。 {.cta-li-2}
{.cta-right}
:::
----
column 2 test
{.column-2}
::::
输出:
<div class="vertical-align grid">
<div class="column column-2">
<div class="column-1 cta">
<div class="number cta-left">
<p><strong>cta left</strong></p>
</div>
<div class="benefit">
<ul class="cta-right">
<li class="cta-li-1">cta right 1。 </li>
<li class="cta-li-2">cta right 2。 </li>
</ul>
</div>
<hr />
<p>column 2 test</p>
</div>
</div>预期输出:
<div class="vertical-align grid">
<div class="column">
<div class="column-1 cta">
<div class="number cta-left">
<p><strong>cta left</strong></p>
</div>
<div class="benefit">
<ul class="cta-right">
<li class="cta-li-1">cta right 1。 </li>
<li class="cta-li-2">cta right 2。 </li>
</ul>
</div>
</div>
</div>
<div class="column column-2">
<p>column 2 test</p>
</div>
</div> 经过分别测试了column和cta组件,发现问题出在cta组件的最后删除并插入Token元素时,会将父级容器的闭合节点container_cta_close的Token删除掉。
……
// 分组完成
const divNumber = getOpenToken('div', level - 1);
divNumber.attrPush(['class', 'number']);
tokens.splice(imgStart, imgEnd - imgStart + 1, divNumber, ...img, getCloseToken('div', level - 1));
const divToken = getOpenToken('div', level - 1);
divToken.attrPush(['class', 'benefit']);
80 > tokens.splice(ctxStart + 2, ctxEnd - ctxStart + 3, divToken, ...context, getCloseToken('div', level - 1));
return state;
…… 本次测试中context中存储的原始Token元素数量为15,ctxStart的值为8,ctxEnd的值为22,ctxStart + 2 的值为10,ctxEnd - ctxStart + 3的值为17,其中为什么删除开始位置是ctxStart + 2 ,是因为前面插入了divNumber的open和close两个Token元素,而删除数量ctxEnd - ctxStart + 3不太明白什么意思,按照个人理解删除数量应该是context中存储的元素数量,将ctxEnd - ctxStart + 3改为context.length可暂时修复,暂时未遇到其他可能因这个改动产生的其他BUG。
解决方法:
修改cta.js#L80代码
……
// 分组完成
const divNumber = getOpenToken('div', level - 1);
divNumber.attrPush(['class', 'number']);
tokens.splice(imgStart, imgEnd - imgStart + 1, divNumber, ...img, getCloseToken('div', level - 1));
const divToken = getOpenToken('div', level - 1);
divToken.attrPush(['class', 'benefit']);
80 > tokens.splice(ctxStart + 2, context.length, divToken, ...context, getCloseToken('div', level - 1));
return state;
……Metadata
Metadata
Assignees
Labels
No labels