编辑器代码模式 格式说明
一、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
- 按照正常css 编写,建议不要写覆盖样式,解析时会把后面写的样式覆盖前面,最终的样式会在对应的dom一对一生效,不会根据选择器优先级或 !important 而生效
js
- js是组件/区块级别的,不是以元素为单位
- 对应的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