~~NOTOC~~
===== PG09 User Define CSS =====
  *展示本站使用到的Dokuwiki Plugin與經驗分享。
    * 為了使用者閱讀方便，版面簡潔與色彩或線條區分是必要的，但隨著資訊量增加(ex. tag)，便會思考與採用不同的資訊展現方式，由table到two column，使用wrap plugin的box與column，或用tabbox以在最小的版面空間，展現更多分類的資訊量。如果有朝一日這樣仍不足以在單一頁面容納的資訊量，那麼回到以namespace(目錄)與index(索引)等多頁方式來展現便是自然。
      * https://www.dokuwiki.org/plugin:wrap:extensions
      * https://www.dokuwiki.org/devel:css
        * 111.10.13 放入conf的userstyle.css並沒有如四種CSS順序生效，但發現safety可以產生同box相同不帶icon的效果。(有reload browser也手動清除了css的cache)
        * <wrap todo>112.9.11 可測試Wrap Plus Plugin看看</wrap>
        * <wrap info>112.10.9 在使用不同theme時發現 在default dokuwiki theme下效果就正常顯示了</wrap>
<nspages playground -h1 -textPages="索引 index" -ncol=2>
[<10>]
====for simple box====
wrap plugin中有note類別，只是配色就如同便利貼般顯眼。
<WRAP center round box 60%>
box
</WRAP>
<WRAP center round safety 60%>
safety
</WRAP>
<WRAP center round warning 60%>
warning
</WRAP>
<WRAP center round danger 60%>
danger
</WRAP>
<WRAP center round notice 60%>
notice
</WRAP>

----
同樣wrap plugin的box多了icon，配色則較柔和。
<WRAP center round box 60%>
bloc simple
</WRAP>

<WRAP center round info 60%>
bloc info
</WRAP>

<WRAP center round tip 60%>
bloc tip
</WRAP>

<WRAP center round important 60%>
bloc important
</WRAP>

<WRAP center round alert 60%>
bloc alert
</WRAP>

<WRAP center round help 60%>
bloc help
</WRAP>

<WRAP center round download 60%>
bloc download
</WRAP>

<WRAP center round todo 60%>
bloc todo
</WRAP>
====before::sandbox userstyle css works====
<WRAP group>
<WRAP half column>
<WRAP center round safety>
{{topic>安南區 -tour -ads &nodate &nouser &simplelist}}
</WRAP>
</WRAP>

<WRAP half column>
<WRAP center round safety>
{{topic>安南區 +tour &nodate &nouser &simplelist}}
</WRAP>
<WRAP center round safety>
{{topic>安南區 +ads &nodate &nouser &simplelist}}
</WRAP>
</WRAP>
</WRAP>

====After::sandbox userstyle css works====
<WRAP group>
<WRAP half column>
<WRAP center round download 60%>
{{topic>安南區 -tour -ads &nodate &nouser &simplelist}}
</WRAP>
</WRAP>

<WRAP half column>
<WRAP center round help 60%>
{{topic>安南區 +tour &nodate &nouser &simplelist}}
</WRAP>
<WRAP center round todo 60%>
{{topic>安南區 +ads &nodate &nouser &simplelist}}
</WRAP>
</WRAP>
</WRAP>

===tab cf. box for more categories===
<tabbox 相關主題>
{{topic>安南區 -tour -ads -biz &nodate&nouser&simplelist}}
<tabbox 旅遊資訊>
{{topic>安南區 +tour&nodate&nouser&simplelist}}
<tabbox House>
{{topic>安南區 +ads&nodate&nouser&simplelist}}
<tabbox Business>
{{topic>安南區 +biz&nodate&nouser&simplelist}}
</tabbox>
<WRAP clear/>

[<10>]