差異處

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


前次修改
—playground:pg1_wrap [2025/08/22 03:00] (目前版本) – 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 col2>
 +[[https://www.dokuwiki.org/plugin:wrap|plugin:wrap]] 版面的相關功能，如多欄、文字框...這是一個必選必用的Plugin因為它涵蓋的功能眾多甚至包含其他單一Plugin<wrap lo>(例如#anchor#錨點，有單獨Plugin的Anchor與Bookmark，但若能概括其他plugin的功能，對使用plugin的設計者何樂不為呢??)，建議詳看原始文件與demo頁。
 +
 +<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>
 +</wrap>
 +</WRAP>
 +==手動分欄==
 +<WRAP group>
 +<WRAP half column>
 +  * 虎山森林步道(右圖)  仁德區...[[https://hiking.biji.co/index.php?q=trail&act=gpx_detail&id=899|健行筆記GPX地圖]]
 +  * [[baihe:fun08|小南海]]自然生態公園環湖步道 六甲區
 +  * 漁光島步道 安平區
 +  * [[zuozhen:fun50_highland_sunrise|虎形山]]公園 龍崎區
 +</WRAP>
 +
 +<WRAP half column>
 +<slider :whereis:tigermt_1.jpg>
 +<slider :whereis:tigermt_2.jpg>
 +<slider :whereis:tigermt_3.jpg>
 +<slider :whereis:tigermt_leaves.jpg>
 +</slider>
 +</WRAP>
 +</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>>區段的所有連結。適用的場合反倒是在版面中連結不多的時候，理由一是太長的連結會被換行切斷，理由二是按鈕化後的文字列高變高，可能會影響版面編排。
 +  * 與自動標籤(tab)相似，將連結以按鈕呈現(PS.經測試按鈕中文字無法換/多行)
 +<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>]