This repository was archived by the owner on Feb 20, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - 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