Template:Section: Difference between revisions

From Elwiki
mNo edit summary
mNo edit summary
Line 1: Line 1:
<includeonly><table  cellspacing="0" cellpadding="0" style="width: 100%; padding: 0; margin: 0; font-size: 1em; line-height: 1.5em; word-break: break-all; border: 1px #000 solid; border-bottom: none; border-sapcing: 0;{{{StyleSec|}}}">
<includeonly><table  cellspacing="0" cellpadding="0" style="width: 100%; padding: 0; margin: 0; font-size: 1em; line-height: 1.5em; word-break: break-all; border: 1px #000 solid; border-bottom: none; border-sapcing: 0;{{{SectionSty|}}}">
   <tr style="font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-shadow: 1px 1px 1px black; height: 2em;{{{StyleTitle|}}}">{{#if:{{{Title|}}}|
   <tr style="font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-shadow: 1px 1px 1px black; height: 2em;{{{TitlesSty|}}}">{{#if:{{{title0|}}}|
     <td style="width:{{{Width|}}}; border-bottom: 1px #000 solid; background-color:{{{Color|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color|}}});{{{StyleT|}}}" {{{Attr|}}}>{{{Title|}}}</td>|}}{{#if:{{{Title1|}}}|
     <td style="width:{{#if:{{{width0|}}}|{{{width0}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color0|}}}|{{{color0}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color0|}}}|{{{color0}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty0|}}}" {{{attr0|}}}>{{{title0|}}}</td>|}}{{#if:{{{title1|}}}|
     <td style="width:{{{Width1|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color1|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color1|}}});{{{StyleT1|}}}">{{{Title1|}}}</td>|}}{{#if:{{{Title2|}}}|
     <td style="width:{{#if:{{{width1|}}}|{{{width1}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color1|}}}|{{{color1}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color1|}}}|{{{color1}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty1|}}}" {{{attr1|}}}>{{{title1|}}}</td>|}}{{#if:{{{title2|}}}|
    <td style="width:{{{Width2|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color2|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color2|}}});{{{StyleT2|}}}">{{{Title2|}}}</td>|}}{{#if:{{{Title3|}}}|
    <td style="width:{{#if:{{{width2|}}}|{{{width2}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color2|}}}|{{{color2}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color2|}}}|{{{color2}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty2|}}}" {{{attr2|}}}>{{{title2|}}}</td>|}}{{#if:{{{title3|}}}|
    <td style="width:{{{Width3|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color3|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color3|}}});{{{StyleT3|}}}">{{{Title3|}}}</td>|}}{{#if:{{{Title4|}}}|
    <td style="width:{{#if:{{{width3|}}}|{{{width3}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color3|}}}|{{{color3}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color3|}}}|{{{color3}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty3|}}}" {{{attr3|}}}>{{{title3|}}}</td>|}}{{#if:{{{title4|}}}|
    <td style="width:{{{Width4|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color4|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color4|}}});{{{StyleT4|}}}">{{{Title4|}}}</td>|}}{{#if:{{{Title5|}}}|
     <td style="width:{{#if:{{{width4|}}}|{{{width4}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color4|}}}|{{{color4}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color4|}}}|{{{color4}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty4|}}}" {{{attr4|}}}>{{{title4|}}}</td>|}}{{#if:{{{title5|}}}|
    <td style="width:{{{Width5|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color5|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color5|}}});{{{StyleT5|}}}">{{{Title5|}}}</td>|}}{{#if:{{{Title6|}}}|
    <td style="width:{{#if:{{{width5|}}}|{{{width5}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color5|}}}|{{{color5}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color5|}}}|{{{color5}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty5|}}}" {{{attr5|}}}>{{{title5|}}}</td>|}}{{#if:{{{title6|}}}|
     <td style="width:{{{Width6|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color6|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color6|}}});{{{StyleT6|}}}">{{{Title6|}}}</td>|}}{{#if:{{{Title7|}}}|
    <td style="width:{{#if:{{{width6|}}}|{{{width6}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color6|}}}|{{{color6}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color6|}}}|{{{color6}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty6|}}}" {{{attr6|}}}>{{{title6|}}}</td>|}}{{#if:{{{title7|}}}|
    <td style="width:{{{Width7|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color7|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color7|}}});{{{StyleT7|}}}">{{{Title7|}}}</td>|}}{{#if:{{{Title8|}}}|
     <td style="width:{{#if:{{{width7|}}}|{{{width7}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color7|}}}|{{{color7}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color7|}}}|{{{color7}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty7|}}}" {{{attr7|}}}>{{{title7|}}}</td>|}}{{#if:{{{title8|}}}|
    <td style="width:{{{Width8|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color8|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color8|}}});{{{StyleT8|}}}">{{{Title8|}}}</td>|}}{{#if:{{{Title9|}}}|
    <td style="width:{{#if:{{{width8|}}}|{{{width8}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color8|}}}|{{{color8}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color8|}}}|{{{color8}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty8|}}}" {{{attr8|}}}>{{{title8|}}}</td>|}}{{#if:{{{title9|}}}|
    <td style="width:{{{Width9|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color9|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color9|}}});{{{StyleT9|}}}">{{{Title9|}}}</td>|}}{{#if:{{{Title10|}}}|
    <td style="width:{{#if:{{{width9|}}}|{{{width9}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color9|}}}|{{{color9}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color9|}}}|{{{color9}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty9|}}}" {{{attr9|}}}>{{{title9|}}}</td>|}}{{#if:{{{title10|}}}|
    <td style="width:{{{Width10|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color10|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color10|}}});{{{StyleT10|}}}">{{{Title10|}}}</td>|}}{{#if:{{{Title11|}}}|
    <td style="width:{{#if:{{{width10|}}}|{{{width10}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color10|}}}|{{{color10}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color10|}}}|{{{color10}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty10|}}}" {{{attr10|}}}>{{{title10|}}}</td>|}}{{#if:{{{title11|}}}|
     <td style="width:{{{Width11|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color11|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color11|}}});{{{StyleT11|}}}">{{{Title11|}}}</td>|}}{{#if:{{{Title12|}}}|
    <td style="width:{{#if:{{{width11|}}}|{{{width11}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color11|}}}|{{{color11}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color11|}}}|{{{color11}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty11|}}}" {{{attr11|}}}>{{{title11|}}}</td>|}}{{#if:{{{title12|}}}|
    <td style="width:{{{Width12|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color12|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color12|}}});{{{StyleT12|}}}">{{{Title12|}}}</td>|}}{{#if:{{{Title13|}}}|
    <td style="width:{{#if:{{{width12|}}}|{{{width12}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color12|}}}|{{{color12}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color12|}}}|{{{color12}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty12|}}}" {{{attr12|}}}>{{{title12|}}}</td>|}}{{#if:{{{title13|}}}|
    <td style="width:{{{Width13|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color13|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color13|}}});{{{StyleT13|}}}">{{{Title13|}}}</td>|}}{{#if:{{{Title14|}}}|
    <td style="width:{{#if:{{{width13|}}}|{{{width13}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color13|}}}|{{{color13}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color13|}}}|{{{color13}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty13|}}}" {{{attr13|}}}>{{{title13|}}}</td>|}}{{#if:{{{title14|}}}|
    <td style="width:{{{Width14|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color14|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color14|}}});{{{StyleT14|}}}">{{{Title14|}}}</td>|}}{{#if:{{{Title15|}}}|
    <td style="width:{{#if:{{{width14|}}}|{{{width14}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color14|}}}|{{{color14}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color14|}}}|{{{color14}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty14|}}}" {{{attr14|}}}>{{{title14|}}}</td>|}}{{#if:{{{title15|}}}|
    <td style="width:{{{Width15|}}}; border-bottom: 1px #000 solid; border-left: 1px #000 solid; background-color:{{{Color15|}}}; background-image: linear-gradient(to bottom, #eee, {{{Color15|}}});{{{StyleT15|}}}">{{{Title15|}}}</td>|}}
    <td style="width:{{#if:{{{width15|}}}|{{{width15}}}|{{{width|}}}}}; border-bottom: 1px #000 solid; background-color:{{#if:{{{color15|}}}|{{{color15}}}|{{{color|}}}}}; background-image: linear-gradient(to bottom, #eee, {{#if:{{{color15|}}}|{{{color15}}}|{{{color|}}}}});{{{titlesty|}}};{{{titlesty15|}}}" {{{attr15|}}}>{{{title15|}}}</td>|}}
   </tr>
   </tr>
   <tr style="vertical-align: top;{{{StyleContent|}}}">{{#if:{{{Title|}}}|
   <tr style="vertical-align: top;{{{Styles|}}}">{{#if:{{{Title0|}}}|
     <td style="padding: 0.5em;{{{Style|}}}">{{{Content|}}}</td>|}}{{#if:{{{Title1|}}}|
     <td style="padding: 0.5em;{{{Style0|}}}">{{{Content0|}}}</td>|}}{{#if:{{{Title1|}}}|
     <td style="padding: 0.5em;{{{Style1|}}}">{{{Content1|}}}</td>|}}{{#if:{{{Title2|}}}|
     <td style="padding: 0.5em;{{{Style1|}}}">{{{Content1|}}}</td>|}}{{#if:{{{Title2|}}}|
     <td style="padding: 0.5em;{{{Style2|}}}">{{{Content2|}}}</td>|}}{{#if:{{{Title3|}}}|
     <td style="padding: 0.5em;{{{Style2|}}}">{{{Content2|}}}</td>|}}{{#if:{{{Title3|}}}|

Revision as of 13:49, 23 July 2014

Section模板

Section模板是由boxsnake编写的UI模板,旨在美化界面。

模板参数

  • 什么是模板参数?

模板参数可以看做是传入模板的变量,由模板接受后填入对应的代码位置,一般为参数名=参数值'或者或者参数值。如果用前者方式传入模板,模板通过变量名调用变量的值(比如a=2,那么模板调用a就会显示2),后者传入模板的话,模板根据传入值的序列用序列号调用(第一个序号为1,第二个为2,依次类推)。

  • 我如何传入模板参数?

{{模板名 | 参数1 | 参数名2=参数值2 }}

  • 模板参数使用“|”分割。

整体参数

StyleSec

  • 此参数用于为整个Section框架增加样式,样式写法兼容CSS语句。并且,此样式会覆盖之前已有的同名样式。

StyleTitle

  • 此参数用于为整个Section表头增加样式,样式写法兼容CSS语句。并且,此样式会覆盖之前已有的同名样式。

StyleContent

  • 此参数用于为整个Section内容区增加样式,样写法兼容CSS语句。并且,此样式会覆盖之前已有的同名样式。

个体参数

  • Section模板可以由多列组成,每个列在此维基页中称为“个体”。一个Section模板最多可以拥有16个个体(列)。
  • 只要有个体对应的标题参数存在且不为空值,个体就会在Section中显示。

Title

  • 标题参数(即显示在Section头部的文字),参数名依次为Title、Title1、Title2、...、Title15(最多16个)。

Content

  • 内容参数,参数名称为ContentContent15(规则同Title参数)。对应个体的内容。

Width

  • 宽度参数,参数名称为WidthWidth15(规则同Title参数)。指定对应个体的宽度,可以使用em,pt等,也可以使用百分比,不需要在末尾添加分号。如果不指定将由浏览器自动调整。

Color

  • 颜色参数,参数名称为ColorColor15(规则同Title参数)。指定对应个体标签部分的背景颜色。可以使用rgba函数,以#开头的颜色值,或者是CSS颜色值(如red,white等)。注意,颜色后不要添加分号。

StyleT

  • 标题附加样式,参数名称为StyleTStyleT15(T的意思为Title,规则同Title参数)。作用类似整体参数StyleSecStyleTitleStyleContent,给对应的个体标题附加样式。样式写法兼容CSS语句。并且,此样式会覆盖之前已有的同名样式,以及StyleSecStyleTitle中定义的相同样式。

Style

  • 内容附加样式,参数名称为StyleStyle15(规则同Title参数)。对应个体内容区域的附加样式,作用和StyleT类似。

Attr

  • 首元素附加属性。此参数设置首元素(也就是Title对应的个体),可以为其添加类似colspan和rowspan之类的属性。

其他注意事项和提示

  • 为了Section之间的接合,默认情况下,Section是没有底边的。如果需要请进行StyleSec调整。
  • 如果为Section设置了圆角,注意同时要调整标题和底部样式,否则对应区域可能会超出Section边框。
  • 标题底部的黑色线条为个体标题的样式(StyleT),而非标题的整体样式。
  • Title1对应个体开始,左侧有黑色边框,为了和之前的个体接合。如果需要跳过Title表示的个体,将其他个体作为首个个体,记得要将左侧边框去掉。
  • 标题参数存在但为空不会显示对应个体,所以如果需要空标题的个体,请在标题处使用空白对象或者不可见元素。
  • 对于某些内容,在等号之后输入会发生错误,需要在内容外加上<span style="display: none">{{</span><span style="display: none">}}</span>
  • 内容区域之间默认是没有黑线的,如果需要黑线请使用Style参数。
  • 由于个体宽度是由标题宽度决定的,所以当隐藏标题后,应该设置内容样式而不是使用Width参数。

示例

Content1

代码如下:

{{Section
| StyleTitle=background-color: red;
| StyleContent=background-color: lightblue;
| Title=Section
| Content=Content
| Color=black
| Width=20%
| Title1=Section1
| Content=Content1
}}