测试文章

function sayHello() {
    return 'Hello! World.';
}

echo sayHello();

<item :name="D32钢" @data=`{ "list" : [ {}, {} ] }`/>

语法

动机

wikitext语法实在是有太多大括号了，读起来太累了。
markdown写起来不错，但是没有数据插值和运算的能力，而且表达能力有限（除非内联html）。
jsx过于灵活了，而且由于js的部分，很难性能跑过node。
所以借鉴vue的语法设计这个模板语法。

插值

文本插值是最基本的能力，模板从上层获取msg的值并插入文本。跟wikitext一样 除了没有默认值以外。

<span>Message: {{ msg }}</span>

属性

':'被引入以区分是变量 还是字符串

<span :id="msg">Message</span>

渲染成

<span id="msg实际的值">Message</span>

<span id="msg">Message</span>

渲染成

<span id="msg">Message</span>

也支持 '单引号 和 `反引号
'@'被引入以标记后面的数据是一段内连的json

<item @data=`{ "name" : "D32钢" }`/>

class

<div
  class="static"
  :class="{ active: isActive, text-danger: hasError }"
>123</div>

在如果传入

{
    isActive: true, 
    hasError: false
 }

输出

 <div class="static active">123</div>

指令

条件渲染

v-if v-else v-else-if

<p v-if="seen">现在你看到我了</p>

如果seen是true
输出

<p>现在你看到我了</p>

如果是false 什么都不输出。
v-else 和 v-else-if 必须紧跟在v-if之后

循环渲染

v-for

<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

如果items传入 [{ message: 'Foo' }, { message: 'Bar' }]
输出

<ul id="array-rendering">
  <li>
    Foo
  </li>
  <li>
    Bar
  </li>
</ul>

模块化

需要像wikitext一样从外部获得数据，进行简单的运算然后在模板中插入的能力。这部分在文本编辑器之外，在ui上选择，并生成dsl。
和vue一样，需要在接受到参数之后，将其转化成数据之后才能在模板中插值。

数据

数据可以进行模板插值，支持json的所有类型，数字类型的字段默认按照十进制转换到字符串，布尔类型不支持查值。

参数

参数作为模板的输入，支持json的所有类型。

<item :name="D32钢" @data=`{ "list" : [ {}, {} ] }`/>

导入

需要显示指出当前模板中要用的模板（也许可以在文本编辑器用到的时候自动在外面添加），被使用的模板在这个阶段可以被重命名。

运算

大概参照ue4可视化脚本编辑器的感觉。