liquid模式有效，但在编辑器中修改时会删除该部分

Question

我是整个Shopify和liquid环境的新手。但是，我可以修改一个使用｛%schema%｝标记来显示控件的部分，以设置背景和文本框的最大宽度。

因此，我大胆地为自己创建了一个部分，在其中一个页面上添加一个小的FAQ块。

我已经阅读了我所能阅读的一切，以确保我没有忘记任何东西，我还检查了现有部分的代码，这些代码工作正常，我找不到这个问题的原因。

当我在主题编辑器中打开包含部分的页面时，我会正确加载并显示默认颜色。我还在左窗格中看到了修改器块，但是，只要我在编辑器中更改值，它就会使整个部分消失。

有人能帮我指出我做错了什么吗？

非常感谢

这是部分的全部代码

<style>

.faq{
max-width:900px;
width:80%;
}
.faq-container{
background-color:{{section.settings.container_background_color}};
display: flex;
justify-content:center;

}

</style>

<div class="faq-container">

<div class="faq" id="ndnappseasyfaqs-wrapper"></div>

</div>

{%schema%}
{
"name": "FAQ section",
"settings": [
{
"type": "color",
"id": "container_background_color",
"label": "Background color",
"default": "#a0cf67"
}
]

}
{% endschema %}

这是我尝试修改它之前的结果：修改前

这是我修改颜色后的结果：修改后

Answer 1

这可能是与JS中的预览更新有关的问题。您是否尝试保存更改并查看其是否有效？

Answer 2

根据与主题编辑器的集成，

当商家自定义部分时，这些部分的HTML会被动态添加、删除或直接重新呈现到现有DOM上，而无需重新加载整个页面。

页面加载时运行的JavaScript在部分被重新呈现或添加到页面时将不会再次运行。这会给任何需要重新运行的自定义脚本带来问题。

如果你在页面加载时运行一些js，那么在用户对部分进行更改后，它将不会再次运行。所以我想你必须手动运行js。只需将事件与事件侦听器绑定即可

document.addEventListener('shopify:section:load', function(event){
[your code...]
});