编辑器模块开发完、使用并保存到文章中后，在文章中的显示应该由主题实现。
主题通过 读取文章接口 获取到文章数据，并根据block type来渲染不同的block。
然而对于插件而言，主题可能并没有内置这个block type，因此这里就存在渲染配合的问题。
关于主题的约定：
- 对于主题未知的block type，应直接渲染为 web-component，标签名称渲染为：<nv-block-${block type}>，中间的斜杠符号渲染为短横线
例1：有注册名称为 block-example 的块，对主题是未知的，主题应该在渲染时将它渲染为：
<nv-block-block-example></nv-block-block-example>
例2：有注册名称为 pandastudio/block-example 的块，对主题是未知的，主题应该在渲染时将它渲染为：
<nv-block-pandastudio-block-example></nv-block-pandastudio-block-example>
- block数据应在该Element元素中定义 “data” 属性，并将block data对象放置在Element的data属性中
- 在Block中，还可能存在嵌套block（innerBlocks）的情况，因此，主题应该提供一个名为 nv-block-nestedblocks 的 web-component 来处理这件事情。插件在使用时，将内嵌的innerBlocks Array设定到 nv-block-nestedblocks 的 blocks 属性中进行渲染
例如，下面的代码，要求主题应能渲染出段落内容。
var innerBlocksEl = document.createElement('nv-block-nestedblocks');
innerBlocksEl.blocks = [{
type: 'paragraph',
id: 'ABCDEFGHIJ',
data: {text: 'sample paragraph content'}
}]
document.body.append(innerBlocksEl)
基于以上约定，block可通过自定义web-component来实现在主题中的渲染。
在主题前台引入自定义web-component脚本和样式：
block-example/function.js
add_action('nv_head', (req,route) => {
nv_enqueue_script(`/pandastudio-sample-block-srcs/frontend-render.js`);
nv_enqueue_style(`/pandastudio-sample-block-srcs/frontend-style.css`);
})
编写自定义web-component
block-example/public_srcs/frontend-render.js
customElements.define('nv-block-block-example',class extends HTMLElement {
constructor() {
super();
setTimeout(()=>{
var block_data = this.data || {
title: "",
contents: {blocks:[]},
color: "",
align: "",
};
var wrapper = document.createElement("DIV");
wrapper.classList.add('block-example-wrapper')
if (block_data.color) {
wrapper.style.color = block_data.color
}
if (block_data.align) {
wrapper.style.textAlign = block_data.align
}
wrapper.innerHTML = `
富文本：<div>${block_data.title}</div>
嵌入的其它内容：`
var innerBlocks = document.createElement('nv-block-nestedblocks')
innerBlocks.blocks = block_data.contents.blocks
wrapper.append(innerBlocks)
this.append(wrapper)
})
}
})