模板:Treechart

模板文档  

这个文档嵌入自模板:Treechart/doc。

该模板及其文档来自多个wiki，经多方修订后，各个wiki的版本差异较大，届时需以应用该模板的各wiki的相关文档说明为准
——来自多个wiki

此模板使用类似ASCII艺术的句法生成简单系谱图。它用HTML表格和CSS在适当的位置生成文字框和线条以构成家族树，使用者在文本框内可以任意运用维基语法。

本站使用了萌娘百科的用户Greykid搬运的familytree.js 来辅助编辑，但仍然建议在使用该模板前先阅读该说明文档，以防止各类问题出现甚至频发。

这个模版生成一行由单元与连接线所生成的家族树，使用本模版必须结合Treechart/start和Treechart/end或Treechart/collstart和Treechart/collend一起使用。

示例

例如下列代码：

{{Treechart/start|align=center|summary=An example family tree}}
{{Treechart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{Treechart| | | | | | | |)|-|-|-|.| }}
{{Treechart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{Treechart| |,|-|-|-|+|-|-|-|.| | | }}
{{Treechart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{Treechart/end}}

产生如下效果：

Grandma

Grandpa

Mom

Dad

Aunt Daisy

My brother Joe

Me!

My little sister

可折叠示例

代码：

{{Treechart/collstart|An example family tree}}
{{Treechart/start|align=center}}
{{Treechart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{Treechart| | | | | | | |)|-|-|-|.| }}
{{Treechart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{Treechart| |,|-|-|-|+|-|-|-|.| | | }}
{{Treechart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{Treechart/end}}
{{Treechart/collend}}

生成效果：

展开An example family tree
Grandma Grandpa Mom Dad Aunt Daisy My brother Joe Me! My little sister

参数

模板接受至多99个未命名参数，每个参数代表一个“格子”或者一个“框”。

格子

格子内含有线状元素，用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子为一个格子宽、一个格子高（即colspan=1，rowspan=1）。每一个格子用简单的字符参数来描述，一个特别的例子是空格子，用一个空格来描述不含任何线条的格子。下面列出模板支持的格子类型：

实线:

!			,			v			.
-			)			+			(
			`			^			'

虚线:

:			F			V			7
~			D			%			C
			L			A			J

点线:

Q			S			M			T
P			H			R			G
			Y			W			Z

除了上述三类线，还有下列所展示的混合线：

横虚（线）纵实（线）：

fy		y		ye
f		t		e
fh		h		he

横实（线）纵虚（线）：

dj		j		jc
d		*		c
di		i		ic

横实（线）纵点（线）：

kr		r		rl
k		a		l
kq		q		ql

横虚（线）纵点（线）：

kr2		r2		rl2
k2		a2		l2
kq2		q2		ql2

横点（线）纵实（线）：

om		m		mp
o		b		p
on		n		np

横点（线）纵虚（线）：

om2		m2		mp2
o2		b2		p2
on2		n2		np2

在模块:Treechart/data中，还有一部分没被用到的格式表，但由于本wiki并未引入相关模板，故不在此列举。

框

框内可以填写任意的维基标记，框内的内容用附加命名变量的方法来加以描述。每一个框为三个格子宽、一个格子高（即colspan=3，rowspan=1），并且通常具有2px宽的黑边。附加的变量可以取用任何合法的名字，但是建议不要使用单字符的名字以免与“格子”冲突。 某一行框的情况由五个参数控制，下面列出各个参数的情况与控制方式：

表格中的xxx为示例名字，在实际使用中可以为英文或中文；另外，如果这些类别不指定格子，将作用于整行。

类别	控制方式	控制内容	注释
colspan	colspan_xxx	控制单个格子的跨列数	输入数字，但是不需求任何
rowspan	rowspan_xxx	控制单个格子的跨行数	输入数字，且以3的倍数为佳（“格子”或者“框”的高度为三格）
border	border_xxx	控制单个格子的框宽度	可输入数字，但是需注意boxstyle是否有写入相关数值， 否则会被覆盖
boxstyle	boxstyle_xxx	控制单个格子的外形	此处须使用css来修饰
boxclass	boxstyle_xxx		可以提前在页面中或者css页面写好后批量用， 且可与boxstyle中的css在不起冲突的情况下共用

例如下列代码：

{{Treechart/start}}
{{Treechart|boxstyle=background:#dfd;| |FOO |y|BAR| |FOO=Box 1|BAR=Box 2}}
{{Treechart| | |,|-|^|-|.| | }}
{{Treechart| |FOO| |BAR| |FOO=Box 3|border_FOO=0|boxstyle_FOO=background:#dfd;border:2px red solid;|BAR=Box 4}}
{{Treechart/end}}

产生如下效果：

Box 1

Box 2

Box 3

Box 4

在此，我们可以看见第一行由于是使用了不指定格子的参数boxstyle=background:#dfd;，故整行的格子背景皆为同一颜色。

而在第三行中，border_FOO=0被boxstyle_FOO=background:#dfd;border:2px red solid;，故出现了红框而非无框的情况。

{{Treechart/start}}模板也接受一个可选的style参数来制定整个表格的格式，还可以使用可选参数|align来设置对齐格式。

教程

此范例可能对于第一次使用者有所帮助，当读者掌握相应技巧后，并不需遵循此过程。

步骤一：首先在紙上把家族图画好，如图画：

妈妈

爸爸

哥哥

我

妹妹

步骤二：考虑将这个图放置在一个长方形中，图形由一个个小的方格子所组成，填满整个长方形（如同在拼图），每个方格子为以下3种元素之任一：

• 连接用的线条，例如每个占用1个方格子，若是较长的线则需要拼接。
• 文字与边框，例如

  爸爸

  注意的是文字连同边框一起占用3个方格子，这是固定且不能自行定义的。
• 空格，即除以上两种之外的空白处，每个空格即为1个方格子大小的空白。

按照这种方法，以上图形可以用3行11列个方格子来表示，具体分解如下（这一步为关键步骤，如出错会导致图形的偏差）：

空格	空格	妈妈				爸爸			空格	空格
空格										空格
哥哥			空格	我			空格	妹妹

这里特别提醒下对于空格数量的确认，你可能不能一下子看出第一行左侧有2个空格，但是当你整齐地将图形进行排列和划分后，即能发现应该补足的空格数量。

步骤三：换成对应的代码，每个方格子的代码之间使用竖线条 | 来进行分隔：

• 看到连接线，比如 就是竖线条之间加一个y（请查看参数）
• 看到文字和方框，那就在竖线条之间加入文字（注意文字的方框不需要单独的代码）
• 看到空格，就是竖线条之间为一个空格

以下是替换后的结果，与上列表格一一对应：

| | | 妈妈 |y| 爸爸 | | |
| |,|-|-|-|+|-|-|-|.| |
| 哥哥 | | 我  | | 妹妹 |

马上就要成功了，不过文字部分还要稍作处理，对于文字，你需要自行创造一个代码填入该文字应该占据的位置，然后在该行之后说明这种替代关系。

这里比如把妈妈用 “Mum”表示，爸爸用“Dad”表示（当然这是你自己定义的，用爹、粑粑、bb之类的表示均可，但最好使用三个字符，因为使用三个字符时，上下行对齐，容易检查）。在下面，“Mum”和“Dad” 两个代码已经替换了原有文字，而 “Mum=妈妈 | Dad=爸爸”则加在原有语句后面表示这种替代关系，注意，“Mum=妈妈”和“Dad=爸爸”之间是使用一条竖线 | 来进行分隔的，以此类推。

| | | Mum |y| Dad | | | Mum=妈妈 | Dad=爸爸

步骤四：按以下格式，即为完整的、可以使用的代码：

{{Treechart/start}}
{{Treechart| | | Mum |y| Dad | | |Mum=妈妈|Dad=爸爸}}
{{Treechart| |,|-|-|-|+|-|-|-|.| | }}
{{Treechart| Bro | |  I  | | Sis |Bro=哥哥|I=我|Sis=妹妹}}
{{Treechart/end}}

下面给出一个更大的家族图与代码，供参考，可以看到文字部分使用了一些维基语法：

奶奶

爷爷

妈妈

爸爸

叔叔

哥哥

我

妹妹

{{Treechart/start}}
{{Treechart| | | | 奶 |~|y|~| 爷 | | 奶=奶奶|爷=爷爷}}
{{Treechart| | | | | | | |)|-|-|-|.| }}
{{Treechart| | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Treechart| |,|-|-|-|+|-|-|-|.| | | }}
{{Treechart| 哥 | | 俺 | | 妹 | | | 哥=哥哥|俺='''我'''|妹=[[妹妹]]}}
{{Treechart/end}}