模板:NumBlk/sandbox

模板文件[檢視] [編輯] [歷史] [清除快取]

此模板可用於編號數學公式與化學式。可和{{EquationRef}}同時使用，用於加入來源引用。

 警告：當此模板與前導冒號:、前導星號*或前導井字號#一起使用時，可能會導致lint錯誤（英文說明）。更多資訊，請參閱§ 透過參數|2=以外的方式做縮排、§ 無序清單和§ 有序清單。

參數

參數|1=、|2=和|3=是必須的。另外還有可選參數|Attr=、|RawN=、|Cl=、|LnSty=和|Border=。

• |1=：設定縮排。放置的冒號:越多，區塊縮排的層數就越多。若不需縮排，此參數應賦空值。
• |2=：內容。
• |3=：編號。
• |Attr=

  指定此模板最外層元素的屬性，可以指定多個屬性。此參數之預設值為style="margin-left: {{#expr:1.6 * 縮排的層數}}em;"，其中縮排的層數是根據|1=所推算出來，故此參數的預設值決定了模板的縮排。一旦設定了此參數，預設值將由使用者所給之值取代，因此需另外自行給予適當的設定以得到預期的縮排效果。因為class屬性已被此模板所使用，在此參數中直接指定class屬性可能會造問題。class屬性應透過|Cl=做設定。

• |RawN=

  賦予之值在除去字串首尾空白字元後若不是空字串則此參數生效，否則此參數失效。當此參數生效時，移除編號和括號的格式。

• |Cl=

  此參數之值會被加進模板最外層元素的class屬性裡，所以此參數需符合class屬性的語法，是一個以空格分隔的class列表。class屬性允許CSS通過class選擇器（class selector）來設定樣式。此模板所使用的模板樣式包含了以下classes：

  numblk

  主要作為識別{{NumBlk}}模板的用途，此class會被自動加進模板最外層元素的class屬性裡。

  numblk-raw-n

  當|RawN=生效時，此class會被自動加進模板最外層元素的class屬性裡。模板最外層元素的class屬性裡包含此class時，模版會被調整為|RawN=生效時其說明所描述的樣式。

  numblk-border

  當|Border=生效時，此class會被自動加進模板最外層元素的class屬性裡。模板最外層元素的class屬性裡包含此class時，模版會被調整為|Border=生效時其說明所描述的樣式。

• |LnSty=：設定線樣式。
• |Border=

  賦予之值在除去字串首尾空白字元後若不是空字串則此參數生效，否則此參數失效。當此參數生效時，將顯示邊框。

範例

可生成HTML的公式
{{NumBlk|:|<math>y=ax+b</math>|Eq. 3}}	$y=ax+b$ Eq. 3
{{NumBlk|:|<math>ax^2+bx+c=0</math>|Eq. 3}}	$ax^{2}+bx+c=0$ Eq. 3
{{NumBlk|:|<math>\Psi(x_1,x_2)=U(x_1)V(x_2)</math>|1}}	$\Psi (x_{1},x_{2})=U(x_{1})V(x_{2})$ 1
{{NumBlk|:|Fe<sup>3+</sup> + H<sub>2</sub>O<sub>2</sub> → Fe<sup>2+</sup> + HOO<sup>•</sup> + H<sup>+</sup>|2}}	Fe3+ + H2O2 → Fe2+ + HOO• + H+ 2
{{NumBlk|:|<chem>H+ + CO3^2- -> HCO3^-</chem>|3}}	${\ce {H+ + CO3^2- -> HCO3^-}}$ 3
縮排
{{NumBlk||<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3.5}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ 3.5
{{NumBlk|:|<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|1}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ 1
{{NumBlk|::|<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|13.7}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ 13.7
{{NumBlk|:::|<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|1.2}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ 1.2
公式編號格式
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=3.5|RawN=.}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ 3.5
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<3.5>|RawN=.}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ <3.5>
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=[3.5]|RawN=.}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3='''[3.5]'''|RawN=.}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>|RawN=.}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<math>(3.5)</math>|RawN=.}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ $(3.5)\,$
線樣式
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''(3.5)'''</Big>|RawN=.|LnSty=1px dashed red}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ (3.5)
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''(3.5)'''</Big>|RawN=.|LnSty=3px dashed #0a7392}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ (3.5)
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>|RawN=.|LnSty=3px solid green}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>|RawN=.|LnSty=5px dotted blue}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>|RawN=.|LnSty=0px solid green}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>|RawN=.|LnSty=5px none green}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
{{NumBlk|1=:|2=<math>\mathbf{a}(t)=\frac{d}{dt}\mathbf{v}(t)</math>|3=<Big>'''[3.5]'''</Big>|RawN=.|LnSty=3px double #f4c300}}	$\mathbf {a} (t)={\frac {d}{dt}}\mathbf {v} (t)$ [3.5]
透過參數|2=以外的方式做縮排
以下的方程式 :<math>3x+2y-z=1</math> ::<math>2x-2y+4z=-2</math> :::<math>-2x+y-2z=0</math> 形成三個方程式的方程組。	以下的方程式 $3x+2y-z=1$ $2x-2y+4z=-2$ $-2x+y-2z=0$ 形成三個方程式的方程組。
以下的方程式 :{{NumBlk||<math>3x+2y-z=1</math>|1}} ::{{NumBlk||<math>2x-2y+4z=-2</math>|2}} :::{{NumBlk||<math>-2x+y-2z=0</math>|3}} 形成三個方程式的方程組。	結果未呈現，因為可能存在lint錯誤。 在wikitext語言中將前導冒號（定義的列表寫法）與{{NumBlk}}組合使用可能會出現問題。
以下的方程式 <dl><dd> {{NumBlk||<math>3x+2y-z=1</math>|1}} <dl><dd> {{NumBlk||<math>2x-2y+4z=-2</math>|2}} <dl><dd> {{NumBlk||<math>-2x+y-2z=0</math>|3}} </dd></dl> </dd></dl> </dd></dl> 形成三個方程式的方程組。	以下的方程式 $3x+2y-z=1$ 1 $2x-2y+4z=-2$ 2 $-2x+y-2z=0$ 3 形成三個方程式的方程組。
以下的方程式 <div style="margin-left: 1.6em;"> {{NumBlk||<math>3x+2y-z=1</math>|1}} <div style="margin-left: 1.6em;"> {{NumBlk||<math>2x-2y+4z=-2</math>|2}} <div style="margin-left: 1.6em;"> {{NumBlk||<math>-2x+y-2z=0</math>|3}} </div> </div> </div> 形成三個方程式的方程組。	以下的方程式 $3x+2y-z=1$ 1 $2x-2y+4z=-2$ 2 $-2x+y-2z=0$ 3 形成三個方程式的方程組。
以下的方程式 <div style="margin-left: calc(1.6em * 1);"> {{NumBlk||<math>3x+2y-z=1</math>|1}} </div> <div style="margin-left: calc(1.6em * 2);"> {{NumBlk||<math>2x-2y+4z=-2</math>|2}} </div> <div style="margin-left: calc(1.6em * 3);"> {{NumBlk||<math>-2x+y-2z=0</math>|3}} </div> 形成三個方程式的方程組。	以下的方程式 $3x+2y-z=1$ 1 $2x-2y+4z=-2$ 2 $-2x+y-2z=0$ 3 形成三個方程式的方程組。
無序清單
* <math>3x+2y-z=1</math> * <math>2x-2y+4z=-2</math> * <math>-2x+y-2z=0</math>	$3x+2y-z=1$ $2x-2y+4z=-2$ $-2x+y-2z=0$
* {{NumBlk||<math>3x+2y-z=1</math>|1}} * {{NumBlk||<math>2x-2y+4z=-2</math>|2}} * {{NumBlk||<math>-2x+y-2z=0</math>|3}}	結果未呈現，因為可能存在lint錯誤。 在wikitext語言中將前導星號（普通的列表寫法）與{{NumBlk}}組合使用可能會出現問題。
{{Bulleted list |1=<div style="display: inline-block; width: 100%; vertical-align: middle;">{{NumBlk||<math>3x+2y-z=1</math>|Eq. 1}}</div> |2=<div style="display: inline-block; width: 100%; vertical-align: middle;">{{NumBlk||<math>2x-2y+4z=-2</math>|Eq. 2}}</div> |3=<div style="display: inline-block; width: 100%; vertical-align: middle;">{{NumBlk||<math>-2x+y-2z=0</math>|Eq. 3}}</div> }}	$3x+2y-z=1$ Eq. 1 $2x-2y+4z=-2$ Eq. 2 $-2x+y-2z=0$ Eq. 3
{{Bulleted list |1=<div style="display: inline-table; width: 100%; vertical-align: middle;">{{NumBlk||<math>3x+2y-z=1</math>|Eq. 1}}</div> |2=<div style="display: inline-table; width: 100%; vertical-align: middle;">{{NumBlk||<math>2x-2y+4z=-2</math>|Eq. 2}}</div> |3=<div style="display: inline-table; width: 100%; vertical-align: middle;">{{NumBlk||<math>-2x+y-2z=0</math>|Eq. 3}}</div> }}	$3x+2y-z=1$ Eq. 1 $2x-2y+4z=-2$ Eq. 2 $-2x+y-2z=0$ Eq. 3
有序清單
# <math>3x+2y-z=1</math> # <math>2x-2y+4z=-2</math> # <math>-2x+y-2z=0</math>	$3x+2y-z=1$ $2x-2y+4z=-2$ $-2x+y-2z=0$
# {{NumBlk||<math>3x+2y-z=1</math>|1}} # {{NumBlk||<math>2x-2y+4z=-2</math>|2}} # {{NumBlk||<math>-2x+y-2z=0</math>|3}}	結果未呈現，因為可能存在lint錯誤。 在wikitext語言中將前導井字號（帶有數字的列表寫法）與{{NumBlk}}組合使用可能會出現問題。
{{Ordered list |1=<div style="display: inline-block; width: 100%; vertical-align: middle;">{{NumBlk||<math>3x+2y-z=1</math>|Eq. 1}}</div> |2=<div style="display: inline-block; width: 100%; vertical-align: middle;">{{NumBlk||<math>2x-2y+4z=-2</math>|Eq. 2}}</div> |3=<div style="display: inline-block; width: 100%; vertical-align: middle;">{{NumBlk||<math>-2x+y-2z=0</math>|Eq. 3}}</div> }}	$3x+2y-z=1$ Eq. 1 $2x-2y+4z=-2$ Eq. 2 $-2x+y-2z=0$ Eq. 3
{{Ordered list |1=<div style="display: inline-table; width: 100%; vertical-align: middle;">{{NumBlk||<math>3x+2y-z=1</math>|Eq. 1}}</div> |2=<div style="display: inline-table; width: 100%; vertical-align: middle;">{{NumBlk||<math>2x-2y+4z=-2</math>|Eq. 2}}</div> |3=<div style="display: inline-table; width: 100%; vertical-align: middle;">{{NumBlk||<math>-2x+y-2z=0</math>|Eq. 3}}</div> }}	$3x+2y-z=1$ Eq. 1 $2x-2y+4z=-2$ Eq. 2 $-2x+y-2z=0$ Eq. 3
邊框
<!-- 未指定 LnSty --> {{NumBlk|:|<math>y=ax+b</math>|Eq. 3|Border=1}}	$y=ax+b$ Eq. 3
<!-- 指定 LnSty --> {{NumBlk|:|<math>y=ax+b</math>|Eq. 3|LnSty=0.7em solid #e500e5|Border=1}}	$y=ax+b$ Eq. 3

Positioning relative to surrounding images

Numbered blocks should be able to be placed around images that take up space on the left or right side of the screen. To ensure numbered block has access to the entire line, consider using a {{clear}}-like template.

To illustrate, consider the example:

[[Image:Bnet_fan2.png|frame|right|Fig.1: Bayesian Network representation of Eq.(6)]]
[[Image:Bnet_fan2.png|frame|left|Fig.1: Bayesian Network representation of Eq.(6)]]
<br><br>A Bayesian network (or a belief network) is a probabilistic graphical model that represents a set of
variables and their probabilistic independencies. For example, a Bayesian network could represent the
probabilistic relationships between diseases and symptoms. Given symptoms, the network can be used to compute
the probabilities of the presence of various diseases.
{{NumBlk|1=:|2=<math>
P(a, b, \lambda) = P(a| \lambda) P(b | \lambda) P(\lambda)\,
</math>,|3='''Eq.(6)'''|RawN=.}}

Fig.1: Bayesian Network representation of Eq.(6)

Fig.1: Bayesian Network representation of Eq.(6)

A Bayesian network (or a belief network) is a probabilistic graphical model that represents a set of variables and their probabilistic independencies. For example, a Bayesian network could represent the probabilistic relationships between diseases and symptoms. Given symptoms, the network can be used to compute the probabilities of the presence of various diseases.

$P(a,b,\lambda )=P(a|\lambda )P(b|\lambda )P(\lambda )\,$,

Eq.(6)

If it is desirable for the numbered block to span the entire line, a {{clear}} should be placed before it.

[[Image:Bnet_fan2.png|frame|right|Fig.1: Bayesian Network representation of Eq.(6)]]
[[Image:Bnet_fan2.png|frame|left|Fig.1: Bayesian Network representation of Eq.(6)]]
<br><br>A Bayesian network (or a belief network) is a probabilistic graphical model that represents a set of
variables and their probabilistic independencies. For example, a Bayesian network could represent the
probabilistic relationships between diseases and symptoms. Given symptoms, the network can be used to compute
the probabilities of the presence of various diseases.
{{clear}}
{{NumBlk|1=:|2=<math>
P(a, b, \lambda) = P(a| \lambda) P(b | \lambda) P(\lambda)\,
</math>,|3='''Eq.(6)'''|RawN=.}}

Fig.1: Bayesian Network representation of Eq.(6)

Fig.1: Bayesian Network representation of Eq.(6)

A Bayesian network (or a belief network) is a probabilistic graphical model that represents a set of variables and their probabilistic independencies. For example, a Bayesian network could represent the probabilistic relationships between diseases and symptoms. Given symptoms, the network can be used to compute the probabilities of the presence of various diseases.

$P(a,b,\lambda )=P(a|\lambda )P(b|\lambda )P(\lambda )\,$,

Eq.(6)

Table caveat

Because {{NumBlk}} is implemented as a table, putting {{NumBlk}} within a table yields a nested table. Due to a bug in Mediawiki's handling of nested tables, {{NumBlk}} must be used carefully in this case. In particular, when indentation for the outer table is desired, use explicit <dl><dd> and </dd></dl> tags for indentation instead of a leading colon (:).

For example,

<dl><dd>
{|
|<math>(f * g)[n]\,</math>      
|{{NumBlk||<math>\stackrel{\mathrm{def}}{=}\sum_{m=-\infty}^{\infty} f[m]\cdot g[n - m]\,</math>|
3=<span style="color:darkred;">'''(Eq.1)'''</span>|RawN=.}}
|-
|
|<math>= \sum_{m=-\infty}^{\infty} f[n-m]\cdot g[m].\,</math>       ([[Convolution#Commutativity|commutativity]])
|}
</dd></dl>

produces

$(f*g)[n]\,$	${\stackrel {\mathrm {def} }{=}}\sum _{m=-\infty }^{\infty }f[m]\cdot g[n-m]\,$ (Eq.1)
	$=\sum _{m=-\infty }^{\infty }f[n-m]\cdot g[m].\,$       (commutativity)

which shows how the outer <dl><dd> and </dd></dl> tags give the same indentation as a single colon (:) preceding the table should.

For another example,

<dl><dd>
<dl><dd>
{|
|-
|The first parameter for indentation still works when used inside table.
{{NumBlk|::::|<math>ax^2+bx+c=0</math>|Level 4}}
{{NumBlk|:::|<math>ax^2+bx+c=0</math>|Level 3}}
{{NumBlk|::|<math>ax^2+bx+c=0</math>|Level 2}}
{{NumBlk|:|<math>ax^2+bx+c=0</math>|Level 1}}
{{NumBlk||<math>ax^2+bx+c=0</math>|Level 0}}
|-
|}
</dd></dl>
</dd></dl>

produces

The first parameter for indentation still works when used inside table. $ax^{2}+bx+c=0$ Level 4 $ax^{2}+bx+c=0$ Level 3 $ax^{2}+bx+c=0$ Level 2 $ax^{2}+bx+c=0$ Level 1 $ax^{2}+bx+c=0$ Level 0

which uses two sets of explicit tags to give the same indentation as two colons (::).

上述文件嵌入自Template:NumBlk/doc。 (編輯 | 歷史)
編者可以在本模板的沙盒 (編輯 | 差異)和測試樣例 (編輯)頁面進行實驗。
請在/doc子頁面中添加分類。 本模板的子頁面。