置顶公告:【置顶】关于临时开启评论区所有功能的公告(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}}