今天是2024年十二月23日 第52周 星期一

代人,时大变了。

我们生活在大地上,但我们的梦想超越天空。

模板:Tree chart

来自Akarin
(重定向自Template: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

另见

参见