【无标题】

编辑器代码模式 格式说明

一、HTML

1. data-component

用来标记元素类型 （code）
示例：(一个图片元素)

<div data-component="image" class="my-img">
    <img src="..." />
</div>

image，author-box， author-name， author-email， author-facebook， author-twitter， author-linkedIn， author-head， button， column-container， title， paragraph， date， video

不填的情况：

标签为 picture 会被解析成image :

<picture><img src="..." /></picture>

标签为 button 会被解析成button，button 标签内的内容会使用innerHtml获取被解析成data text 数据：

<button> 按钮 </button>

标签为h1-h6 标签被解析成title, 标签内容解析规则同button

<h1>这是个标题</h1>

标签为p 被解析为 paragraph, 标签内容解析规则同button

<p>这是个文本段落</p>

其他情况没填都会被解析成 column-container （栏目）

css

1. 按照正常css 编写，建议不要写覆盖样式，解析时会把后面写的样式覆盖前面，最终的样式会在对应的dom一对一生效，不会根据选择器优先级或 !important 而生效

js

1. js是组件/区块级别的，不是以元素为单位
2. 对应的js 写在 固定注释格式中间 // 区块选择器 start … // 区块选择器 end,

如：

<section class="index-article">
    <h1>这里是个组件</h1>
    <div> <!-- ... --></div> 
</section>

 // .index-article start
$('.index-article .switch-tag').each(function(index) {
    var width =  $(this).width() * index;
    var contentWidth = $('.switch-content').width() * index
    $(this).click(function() {
        $('.article-switch .switch-tag').removeClass('active').eq(index).addClass('active');
        $('.article-switch .switch-slider').css('transform', `translatex(${width}px)`)
        $('.swiper-wrapper').css('transform', `translate3d(-${contentWidth}px, 0px, 0px)`)
    })
})
// .index-article end