置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Tree chart/start

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳到导航 跳到搜索
Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]

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

本模板是 {{familytree}} 的升级版,提供了更多连接线样式和更加 flexible 的代码实现。

可以使用 familytree.js 辅助编辑。

示例

例如下列代码:

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

产生如下效果:

GrandmaGrandpa
MomDadAunt Daisy
My brother JoeMe!My little sister

参数

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

格子

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

Solid lines:
!
  ,
  v
  .
 
-
  )
  +
  (
 
`
  ^
  '
 
Dashed lines:
:
  F
  V
  7
 
~
  D
  %
  C
 
L
  A
  J
 
Dotted lines:
Q
  S
  M
  T
 
P
  H
  R
  G
 
Y
  W
  Z
 
Dashes hrzntl solid vrtcl:
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
Miscellaneous (grey background not available in, or changed from, familytree):
k3
T2
l3
b3
G2
X
K
l4
U

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

某一行框的外形可以由参数borderboxstyle控制,前一个以px为单位控制框边的宽度,后者可以为任意CSS语句,用来修饰框的外观。

某一个框的外形可以由参数border_×××boxstyle_×××控制,其中“×××”指的是这个框的名字。

例如下列代码:

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

产生如下效果:

Box 1Box 2
Box 3Box 4


{{Tree chart/start}}模板也接受一个可选的style参数来制定整个表格的格式。

移植自 {{familytree}}

参数基本相同。唯须留意以下符号变化:

Mixed tiles that have changed
Tile {{familytree}} {{tree chart}} Notes on parameters
{,3 c Change
},E d Change
# t Change
[ e Change
] f Change
t i Change
u j Change
b di Change
c fh Change
d ic Change
j he Change
n ye Change
p dj Change
q jc Change
r fy Change
Miscellaneous tiles
Tile {{familytree}} {{tree chart}} Notes on parameters
G G2 Change
K K Same
T T2 Change
U U Same
X X Same
k l4 Change
比如:“k”,在 {{Familytree}} 中的效果是
但是在 {{tree chart}} 中的效果是
(作为替代,在 {{tree chart}}) 中使用 “l4” 来生成

{{familytree}} 允许使用 |}} 结尾,而对于本模板 {{Tree chart}},需要移除多余的 |

使用 familytree.js 小工具,仅需修改每行的模板名,小工具就会自动适应更改。

教程

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

步骤一:首先在纸上把家族图画好,如下图:

妈妈爸爸
哥哥妹妹


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

  • 连接用的线条,例如
    每个占用1个方格子,若是较长的线则需要拼接。
  • 文字与边框,例如
            爸爸        
    注意的是文字连同边框一起占用3个方格子,这是固定且不能自行定义的。
  • 空格,即除以上两种之外的空白处,每个空格即为1个方格子大小的空白。

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

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

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


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

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

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

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

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

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

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


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

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

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

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