模板:Familytree/doc:修订间差异

来自图琴维基
跳到导航 跳到搜索
无编辑摘要
无编辑摘要
 
(未显示同一用户的4个中间版本)
第1行: 第1行:
此模板完全基于中文维基上的模板[https://zh.wikipedia.org/wiki/Template:Family_tree]。该模板使用类似[[ASCII艺术]]的句法生成简单系谱图。它用HTML表格和CSS在适当的位置生成文字框和线条以构成家族树,使用者在文本框内可以任意运用维基语法。
此模板完全基于中文维基上的模板[https://zh.wikipedia.org/wiki/Template:Family_tree]。该模板使用类似ASCII艺术的句法生成简单系谱图。它用HTML表格和CSS在适当的位置生成文字框和线条以构成家族树,使用者在文本框内可以任意运用维基语法。


==参数==
==参数==
第5行: 第5行:


*'''格子'''内含有线状元素,用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子用简单的字符参数来描述,一个特别的例子是'''空格子''',用一个空格来描述不含任何线条的格子。下面列出模板支持的格子类型:
*'''格子'''内含有线状元素,用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子用简单的字符参数来描述,一个特别的例子是'''空格子''',用一个空格来描述不含任何线条的格子。下面列出模板支持的格子类型:
{| style="float: left; margin-left: 1em;"
{| style="float: left; margin-left: 1em;"
|+ '''实体线'''
|+ '''实体线'''
第60行: 第59行:


框的外形可以由参数'''border'''和'''boxstyle'''控制,前一个以[[像素]]为单位控制框边的宽度,后者可以为任意[[CSS]]语句,用来修饰框的外观。例如下列代码:
框的外形可以由参数'''border'''和'''boxstyle'''控制,前一个以[[像素]]为单位控制框边的宽度,后者可以为任意[[CSS]]语句,用来修饰框的外观。例如下列代码:
<pre><nowiki>
<pre><nowiki>
{{Familytree/start}}
{{Familytree/start}}
第75行: 第73行:
{{Familytree|border=0|boxstyle=background:#dfd;| | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{Familytree|border=0|boxstyle=background:#dfd;| | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{Familytree/end}}
{{Familytree/end}}
值得注意的是,[[template:Familytree/start]]可以接受其他一些用于调整系谱图整体性质的参数,详情请见template:Familytree/start的文档。


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


步骤一:首先在紙上把家族圖畫好,如下圖:
'''步骤一''':首先在纸上把家族图画好,如下图:
{{Familytree/start}}
{{Familytree/start}}
{{Familytree | | | Mum |y| Dad |Mum=妈妈|Dad=爸爸}}
{{Familytree | | | Mum |y| Dad |Mum=妈妈|Dad=爸爸}}
第86行: 第86行:
{{Familytree/end}}
{{Familytree/end}}


 
'''步骤二''':考虑将这个图放置在一个长方形中,图形由一个个小的方格子所组成,填满整个长方形(如同在[[拼图]]),每个方格子为以下3种元素之任一:
步骤二:考虑将这个图放置在一个长方形中,图形由一个个小的方格子所组成,填满整个长方形(如同在[[拼图]]),每个方格子为以下3种元素之任一:
*连接用的线条,例如{{Familytree/start}}{{Familytree|y}}{{Familytree/end}}每个占用1个方格子,若是较长的线则需要拼接。
*连接用的线条,例如{{Familytree/start}}{{Familytree|y}}{{Familytree/end}}每个占用1个方格子,若是较长的线则需要拼接。
*文字与边框,例如{{Familytree/start}}{{Familytree | bb | bb=&nbsp; &nbsp; &nbsp; &nbsp; 爸爸 &nbsp; &nbsp; &nbsp; &nbsp; }}{{Familytree/end}}注意的是文字连同边框一起占用3个方格子,这是固定且不能自行定义的。
*文字与边框,例如{{Familytree/start}}{{Familytree | bb | bb=&nbsp; &nbsp; &nbsp; &nbsp; 爸爸 &nbsp; &nbsp; &nbsp; &nbsp; }}{{Familytree/end}}注意的是文字连同边框一起占用3个方格子,这是固定且不能自行定义的。
第93行: 第92行:


按照这种方法,以上图形可以用3行11列个方格子来表示,具体分解如下(这一步为关键步骤,如出错会导致图形的偏差):
按照这种方法,以上图形可以用3行11列个方格子来表示,具体分解如下(这一步为关键步骤,如出错会导致图形的偏差):
 
{| class="wikitable" style="text-align:center;margin:auto"
{| class="wikitable" style="text-align:center"
|-
|-
| 空格 || 空格 || colspan="3" |妈妈|| {{Familytree/start}}{{Familytree|y}}{{Familytree/end}} || colspan="3" |爸爸|| 空格 || 空格
|空格  
|空格  
| colspan="3" |妈妈
|{{Familytree/start}}{{Familytree|y}}{{Familytree/end}}  
| colspan="3" |爸爸
|空格  
|空格
|-
|-
| 空格 || {{Familytree/start}}{{Familytree|,}}{{Familytree/end}} || {{Familytree/start}}{{Familytree|-}}{{Familytree/end}} |{{Familytree/start}}{{Familytree|-}}{{Familytree/end}} |{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}|| {{Familytree/start}}{{Familytree|+}}{{Familytree/end}} || {{Familytree/start}}{{Familytree|-}}{{Familytree/end}} |{{Familytree/start}}{{Familytree|-}}{{Familytree/end}} |{{Familytree/start}}{{Familytree|-}}{{Familytree/end}} |{{Familytree/start}}{{Familytree|.}}{{Familytree/end}} || 空格
|空格  
|{{Familytree/start}}{{Familytree|,}}{{Familytree/end}}  
|{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}
|{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}
|{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}
|{{Familytree/start}}{{Familytree|+}}{{Familytree/end}}
|{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}  
|{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}  
|{{Familytree/start}}{{Familytree|-}}{{Familytree/end}}
|{{Familytree/start}}{{Familytree|.}}{{Familytree/end}}
| 空格
|-
|-
| colspan="3" |哥哥|| 空格 || colspan="3" |我|| 空格 || colspan="3" |妹妹
| colspan="3" |哥哥
|空格  
| colspan="3" |我
|空格  
|colspan="3" |妹妹
|}
|}
这里特别提醒下对于空格数量的确认,你可能不能一下子看出第一行左侧有2个空格,但是当你整齐地将图形进行排列和划分后,即能发现应该补足的空格数量。
这里特别提醒下对于空格数量的确认,你可能不能一下子看出第一行左侧有2个空格,但是当你整齐地将图形进行排列和划分后,即能发现应该补足的空格数量。


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


* 看到连接线,比如 {{Familytree/start}}{{Familytree|y}}{{Familytree/end}} 就是竖线条之间加一个y(请查看参数)
* 看到连接线,比如 {{Familytree/start}}{{Familytree|y}}{{Familytree/end}} 就是竖线条之间加一个y(请查看参数)
第112行: 第129行:


以下是替换后的结果,与上列表格一一对应:
以下是替换后的结果,与上列表格一一对应:
<pre><nowiki>
<pre><nowiki>
| | | 妈妈 |y| 爸爸 | | |
| | | 妈妈 |y| 爸爸 | | |
第122行: 第138行:


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


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


下面给出一个更大的家族图与代码,供参考,可以看到文字部分使用了一些维基语法:
下面给出一个更大的家族图与代码,供参考,可以看到文字部分使用了一些维基语法:
{{Familytree/start}}
{{Familytree/start}}
{{Familytree | | | | 奶 |~|y|~| 爷 | | 奶=奶奶|爷=爷爷}}
{{Familytree | | | | 奶 |~|y|~| 爷 | | 奶=奶奶|爷=爷爷}}
第144行: 第157行:
{{Familytree | | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Familytree | | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Familytree | |,|-|-|-|+|-|-|-|.| | | }}
{{Familytree | |,|-|-|-|+|-|-|-|.| | | }}
{{Familytree | 哥 | | 俺 | | 妹 | | | 哥=哥哥|俺='''我'''|妹=[[妹妹]]}}
{{Familytree | 哥 | | 俺 | | 妹 | | | 哥=哥哥|俺='''我'''|妹=妹妹}}
{{Familytree/end}}
{{Familytree/end}}


第153行: 第166行:
{{Familytree | | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Familytree | | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Familytree | |,|-|-|-|+|-|-|-|.| | | }}
{{Familytree | |,|-|-|-|+|-|-|-|.| | | }}
{{Familytree | 哥 | | 俺  | | 妹 | | | 哥=哥哥|俺='''我'''|妹=[[妹妹]]}}
{{Familytree | 哥 | | 俺  | | 妹 | | | 哥=哥哥|俺='''我'''|妹=妹妹}}
{{Familytree/end}}
{{Familytree/end}}
</nowiki></pre>
</nowiki></pre>

2024年3月8日 (五) 08:46的最新版本

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

参数

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

  • 格子内含有线状元素,用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子用简单的字符参数来描述,一个特别的例子是空格子,用一个空格来描述不含任何线条的格子。下面列出模板支持的格子类型:
实体线
,
 
 
 
 
.
 
 
 
`
 
 
 
'
 
 
 
^
 
 
 
v
 
 
 
(
 
 
 
)
 
 
 
-
 
 
!
 
 
+
 
 
 
 
 
虚线
F
 
 
 
 
7
 
 
 
L
 
 
 
J
 
 
 
A
 
 
 
V
 
 
 
C
 
 
 
D
 
 
 
~
 
 
:
 
 
%
 
 
 
 
混合型
*
 
 
 
 
}
 
 
 
{
 
 
 
#
 
 
 
 
y
 
 
 
h
 
 
 
]
 
 
 
[
 
 
 


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

框的外形可以由参数borderboxstyle控制,前一个以像素为单位控制框边的宽度,后者可以为任意CSS语句,用来修饰框的外观。例如下列代码:

{{Familytree/start}}
{{Familytree|border=0|boxstyle=background:#dfd;| | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{Familytree|border=0|boxstyle=background:#dfd;| | |,|-|^|-|.| | }}
{{Familytree|border=0|boxstyle=background:#dfd;| | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{Familytree/end}}

产生如下效果:

 
Box 1
 
Box 2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Box 3
 
Box 4
 

值得注意的是,template:Familytree/start可以接受其他一些用于调整系谱图整体性质的参数,详情请见template:Familytree/start的文档。

使用范例

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

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

 
 
妈妈
 
爸爸
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
哥哥
 
 
妹妹

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

  • 连接用的线条,例如
 
 
 

每个占用1个方格子,若是较长的线则需要拼接。

  • 文字与边框,例如
        爸爸        

注意的是文字连同边框一起占用3个方格子,这是固定且不能自行定义的。

  • 空格,即除以上两种之外的空白处,每个空格即为1个方格子大小的空白。

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

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

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

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

  • 看到连接线,比如
 
 
 

就是竖线条之间加一个y(请查看参数)

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

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

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

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

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

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

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

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

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

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