Template:Tree chart/doc

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

用法

首先在紙上把家族圖畫好，如下圖：

奶奶

爷爷

妈妈

爸爸

長腿叔叔

哥哥

我

妹妹

選擇資料格最貼近左邊的一行，這裡選擇了「哥哥、我、妹妹」一行，按照排位寫以下代码：

{{chart | JOE | | ME  | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}

留意名字兩旁要留空格，豎線代表框線，框線間也應留空格，再定義名字。接着便可根據符號代表的線條直接加入代碼：

{{chart | |,|-|-|-|+|-|-|-|.| | | }}
{{chart | JOE | | ME  | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}

如此類推，便生成以下代碼：

{{chart/start}}
{{chart | | | | GRM |~|y|~| GRP | | GRM=奶奶|GRP=爷爷}}
{{chart | | | | | | | |)|-|-|-|.| }}
{{chart | | | MOM |y| DAD | |UNCLE| MOM=妈妈|DAD=爸爸|UNCLE=<s>長腿叔叔</s>}}
{{chart | |,|-|-|-|+|-|-|-|.| | | }}
{{chart | JOE | | ME  | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}
{{chart/end}}

参数

本模版中，每个参数代表一个“格子”或者一个“框”。

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

實體線

!			,			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

Solid hrzntl dashes vrtcl:

dj		j		jc
d		*		c
di		i		ic

Solid hrzntl dot vrtcl:

kr		r		rl
k		a		l
kq		q		ql

Dashed hrzntl dot vrtcl:

kr2		r2		rl2
k2		a2		l2
kq2		q2		ql2

Dots hrzntl solid vrtcl:

om		m		mp
o		b		p
on		n		np

Dots hrzntl dashes vrtcl:

om2		m2		mp2
o2		b2		p2
on2		n2		np2

雜項

		T2
G2		X		K		l4
		U

• 框内可以填写任意的维基标记，框内的内容用附加命名变量的方法来加以描述。每一个框为三个格子宽，并且通常具有2px宽的黑边。附加的变量可以取用任何合法的名字，但是建议不要使用单字符的名字以免与“格子”冲突。

框的外型設定

框的外形可以由参数border和boxstyle控制，前一个以像素为单位控制框边的宽度，后者可以为任意CSS语句，用来修饰框的外观。{{chart/start}}模版接受一个可选的style参数来制定整个表格的格式。例如下列代码：

{{chart/start}}
{{chart|border=0|boxstyle=background:#dfd;| | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart|border=0|boxstyle=background:#dfd;| | |,|-|^|-|.| | }}
{{chart|border=0|boxstyle=background:#dfd;| | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}

产生如下效果：

Box 1

Box 2

Box 3

Box 4

此外，也接受每個框有各自的外觀設定。例如下列代码：

{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~| GREEN |~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: #faa;
|boxstyle_ GREEN =background-color: #afa;
|boxstyle_BLUE =background-color: #aaf;
}}
{{chart/end}}

产生如下效果：

Clear box

Red box

Green box

Blue box

• 注意本例中的RED、GREEN和BLUE所有相關參數，如果原始定義框位的名字前後存在空格，那麼在定義其CSS風格時就必須在「boxstyle_」後補充原有的空格數，所以一般來說並不建議在定義框名字時留有任何不必要的空格。

移植自Familytree須知

本模板基本對應{{Familytree}}的大部分參數，但有一些小改動編者必須先讀，首先是在Familytree中你可以以「|}}」完結一行模板，但在Chart中請移除那個不必要的直桿「|」，另外有5個樹枝的參數定義改名及新增兩個混合型丁字樹枝：

標題	{{family tree}}	{{chart}}	備註
	{	c	Change
	}	d	Change
	#	t	Change
	[	e	Change
	]	f	Change
	b	di	Change
	c	fh	Change
	d	ic	Change
	j	he	Change
	n	ye	Change
	p	om2	Change
	q	mp2	Change
	r	kr2	Change

Miscellaneous tiles

Tile	{{family tree}}	{{chart}}	備註
	G	G2	Change
	K	K	Same
	T	T2	Change
	U	U	Same
	X	X	Same
	k	l4	Change

另見

• en:Template:Nerva–Antonine family tree, a large example.
• Template:Tree list
• Template:Ahnentafel

參見

• en:User:GregU/familytree.js：用來生成Chart系譜的Java工具。