差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
前次修改
playground:pg1_wrap [2023/06/19 02:06]
 playground:pg1_wrap [2025/04/18 03:45] (目前版本)
kenski
行 1: 行 1:
 +~~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>]