模板:Tree chart

維基教科書,自由的教學讀本
文檔圖示 模板文檔[檢視] [編輯] [歷史] [清除快取]

此模板建基於{{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}}

參數[編輯]

模版接受至多100個未命名參數,每個參數代表一個「格子」或者一個「框」。

  • 格子內含有線狀元素,用來生成橫縱線條以及各種拐角以連接各個「框」。每一個格子用簡單的字符參數來描述,一個特別的例子是空格子,用一個空格來描述不含任何線條的格子。下面列出模版支持的格子類型:
實體線
!
  ,
  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

另見[編輯]

參見[編輯]