从一个简单的人物卡开始

TRPG Engine 是基于 XML 语言来描述一张人物卡模板的。XML 是一种标记语言。

首先我们试图建立一个最基本的人物卡, 如下:
简单人物卡

布局
预览

<?xml version="1.0" encoding="utf-8" ?>
<Template>
  <BaseInfo />
  <BaseAttr>
    <TextArea
      label="人物卡信息"
      name="data"
      :autosize="{ minRows: 4, maxRows: 8 }"
    />
  </BaseAttr>
</Template>

一个最基本的人物卡有三个最基本的内建字段: 头像(_avatar)，名称(_name)，描述(_desc)。

这三个字段会默认被显示在用户的预览上, 是不点开人物卡会显示的三个字段。对于每一张人物卡模板, 都应当内置这几个字段允许用户编辑。

令人值得高兴的是, TRPGEngine 已经帮你把这三个字段封装起来了。只需要使用一个 Tag 就能快速建立一个响应式的这三个字段的布局

<BaseInfo />

对于一个简单的人物卡来说。我们可以快速建立一个如下的布局:

<?xml version="1.0" encoding="utf-8" ?>
<Template>
  <BaseInfo />
  <BaseAttr>
    <TextArea
      label="人物卡信息"
      name="data"
      :autosize="{ minRows: 4, maxRows: 8 }"
    />
  </BaseAttr>
</Template>

接下来我会简单的解释一下这些布局代表了什么意思

<?xml version="1.0" encoding="utf-8" ?>

表示这是一个xml布局。版本号是1.0 编码方式是 utf-8

这是一个对这个布局的属性说明。如无必要直接复制即可

<Template>
  ........
</Template>

Template表示下面的东西是作为人物卡的布局。所有的实际上写的布局都应当在最外层包裹一个Template标签

关于布局相关的说明，请查看布局文档

<BaseAttr>

BaseAttr表示子标签被包裹在一个 8/12 布局的容器内。这个标签是为了方便与上面的BaseInfo标签内的组件对齐

<TextArea
  label="人物卡信息"
  name="data"
  :autosize="{ minRows: 4, maxRows: 8 }"
/>

TextArea表示一个文本框。他具有三条属性。

label 表示这个组件显示的标签内容
name 表示这个组件写入的数据名(注意: 对于每一个输入组件来说，name都是必须的)
autosize 表示这个组件接受一个对象，内容为最小显示 4 行最大显示 8 行。会根据内容大小自动伸缩。冒号开头表示他会解析输入的内容并将其计算

TRPG Engine 提供了很多内置的标签用于构建人物卡模板

同时还支持 HTML 标签。你可以在你的人物卡中插入任意的 HTML 元素，包括图片、音频、视频。。。但注意性能！你的每个无意义的布局都会为所有使用你人物卡模板的用户带来额外的负担!

本节中的一些概念: