Template:Tree chart

50px 模板文档[查看] [编辑] [历史] [清除缓存]

此模板建基於{{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宽的黑边。附加的变量可以取用任何合法的名字,但是建议不要使用单字符的名字以免与“格子”冲突。

框的外型設定

框的外形可以由参数borderboxstyle控制,前一个以像素为单位控制框边的宽度,后者可以为任意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 1Box 2
Box 3Box 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 boxGreen boxBlue 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

另見

參見