~~NOTOC~~
===== 1-2 Layout:WRAP =====
  * [[wiki:dokuwiki|DokuWiki]]與語法[[wiki:syntax|Syntax]]{{fa>flask&align=right}}
  * 展示本站使用到的[[https://www.dokuwiki.org/plugins|Dokuwiki Plugins]]((Dokuwiki主程式為了維護其完整性，透過外掛Plugins與[[https://www.dokuwiki.org/template|模板Templates]]兩大類作為拓展功能用的Extensions，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。))

==== Wrap ====
===自動分欄===
<WRAP col3>
[[https://www.dokuwiki.org/plugin:wrap|plugin:wrap]] 版面的相關功能，如多欄、文字框...這是一個必選必用的Plugin因為它涵蓋的功能眾多甚至包含其他單一Plugin<wrap lo>(例如#anchor#錨點，有單獨Plugin的Anchor與Bookmark，但若能概括其他plugin的功能，對使用plugin的設計者何樂不為呢??)</wrap>，建議詳看原始文件與demo頁。
</WRAP>
===自動按鈕===
與自動標籤(tab)相似，將連結以按鈕呈現(PS.經測試按鈕中文字無法換/多行)

<wrap button>[[https://demo.selfthinker.org/plugin:wrap#language_and_text_direction|Demo網頁]]</wrap>
<wrap button>[[http://mcloud-doc.lonxun.com/wiki/playground/wrap|另一個中文CN Demo]]</wrap>
===文字區塊===
原本dokuwiki會將首以兩個空白後文字視為文字區塊，CODE標籤相對會將文字自動換行。
<WRAP prewrap 250px>
<code>
Inside this code block the words will wrap to a new line although they are all in one line.
</code>
</WRAP>
===圖文區塊===
相當好用的可以將圖文以顏色與框線，自訂寬度或排列，也可以使用如tip/info等附帶圖示的區塊。
<WRAP left round info 250px>
<wrap lo>Learn about the special kinds of content on this site.</wrap> 
</WRAP>

<WRAP right box 300px>
<wrap info>wrap info</wrap>\\
<wrap tip>wrap tip</wrap>\\
<wrap help>help</wrap>\\
<wrap important>important</wrap>\\
<wrap todo>todo</wrap>\\
<wrap danger>danger</wrap> <wrap warning>warning</wrap> <wrap caution>caution</wrap> <wrap notice>notice</wrap> <wrap safety>safety</wrap>
</WRAP>

<WRAP left round tip 250px>
類似Q&A上下放在一起，用在whereis找台南.
</WRAP>
<WRAP clear />


 
<WRAP box bggreen fgblack 500px right :en>
//**__Outer green box floats right__**//

<WRAP 165px left>
Inner nested box floats left and is partly <wrap em hi>__em__phasized and __hi__ghlighted with nested <wrap bigger>__bigger__ text</wrap> inside</wrap>.
</WRAP>

Text inside outer right box, but beneath inner left box.

<WRAP clear></WRAP>

<WRAP round tip>
Round tip box underneath, after a ''clear''.
</WRAP>

</WRAP>

<WRAP clear />
=== anchor錨點 ===
  * 連結到較長頁面中的特定點，[[gallery:streetart#anchor|範例]] 連結到streetart頁的code插入點。
  * cf. dokuwiki預設標題會是anchor錨點
<code>
<wrap #anchor />
</code>
=== button連結按鈕 ===
針對wiki內部連結WRAP plugin可以轉成按鈕方式表現，更可以套用在整個<<WRAP>>區段的所有連結。適用的場合反倒是在版面中連結不多的時候，理由一是太長的連結會被換行切斷，理由二是按鈕化後的文字列高變高，可能會影響版面編排。
<code>
<WRAP button> [[:link|內部連結]] [[:link2|連結2]] </WRAP>
</code>
應用範例:
<tabbox 中西區Biz@Tainan>
<WRAP button>[[centerwest:biz|CenterWest:Biz]]</WRAP>
{{gallery>:centerwest:biz?&200x200&random&=2}}
</tabbox>
=== HTML5 CSS分段 ===
在頁面編輯的工具列中，WRAP工具歸在一個黃色盒子圖示，其中有個箭頭退除符號，作用是產生下面的功能碼，在HTML5 CSS中，可以協助(強制)分段(section)，有時候因為不同Plugin的使用使得版面出現不如預期的錯亂時，推薦使用看看，即便沒有作用也不會造成贅餘或混亂。
  * An uppercase WRAP (or alternatively <block> or <div>) creates a <wrap hi>div</wrap>
  * A lowercase wrap (or alternatively <inline> or <span>) creates a <wrap hi>span</wrap>

  <WRAP clear/>
=== User define CSS ===
針對default theme修改，所以同樣效果在writr theme無效，詳見[[playground:pg5_userdefine|etc. User Define CSS]]
<WRAP center round download></WRAP>
<WRAP center round help></WRAP>
<WRAP center round alert></WRAP>
<WRAP center round important></WRAP>
[<10>]