===== 1-1 Layout:圖與影片====
展示本站使用到的[[https://www.dokuwiki.org/plugins|Dokuwiki Plugins]]((Dokuwiki主程式為了維護其完整性，透過外掛Plugins與[[https://www.dokuwiki.org/template|模板Templates]]兩大類作為拓展功能用的Extensions，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。))
<nspages playground -h1 -textPages="索引 index" -nCol=2>
[<10>]

==== Gallery ====
[[https://www.dokuwiki.org/plugin:gallery|plugin:gallery]]\\
應用:[[longci:spot01_longci_void_mountain#photos]] <wrap lo>拍好的相簿放置在該主題之下，讓讀主看主題時先看隨機的兩張相片，節省版面於主題頁，進入gallery則全版面展開所有相片。</wrap>
<code>
{{gallery>:temple?puji_*&lightbox}}
</code>
{{gallery>:temple?puji_*&lightbox}}

<code>
{{gallery> :whereis?icctainan_*&200x200&1280X720&~4&2&showtitle&lightbox }}
</code>
{{gallery> :whereis?icctainan_*&200x200&1280X720&~4&2&showtitle&lightbox }}
<WRAP clear/>

==== slider plugin ====
[[https://www.dokuwiki.org/plugin:slider|plugin:slider]]\\
[經驗分享]有時瀏覽器顯示不正常(未完整顯示)時，在前後文插入<<WRAP Clear>>(Wrap plugin)會有幫助，但非百分百。
<code>
<slider playground:mount_blade.jpg>
===== A Headline =====

And some other stuff
<slider playground:guiji-love.jpg>
2
<slider playground:mc-fight.jpg>
3
</slider>
</code>

<WRAP center round box 50%>
<slider playground:mount_blade.jpg>
=== A Headline ===

And some other stuff
<slider playground:guiji-love.jpg>
2
<slider playground:mc-fight.jpg>
3
</slider>
</WRAP>
<WRAP clear/>

<WRAP center box 360px>
<slider :east:bookshape_building.jpg>
城門旁書卷形建築為地球村英日語
<slider>

===東門城與東門圓環===
幾乎來台南一定會經過的地標，下仁德交流道連接東門路入進市區，車速很自然的慢了下來，透露著已經進到了舊府城的範圍🦋

矗立在圓環內的東(迎春)門古蹟，本地人卻顯少親近，一是入口只圓環內靠南邊有個缺(入)口可以進入，二來除了夜間的燈光照明外僅有農曆春天的迎春儀式。🐌

往前上東門路橋跨過鐵路，充滿綠意，是東門圓環。多繞一圈，可發現放大的楊英風雕塑"<wrap em>青年雙手‧人類希望</wrap>"。

<slider :east:east_citygate.jpg>
東門城迎春門
</slider>
</WRAP>
==== video share plugin ====

[[https://www.dokuwiki.org/plugin:vshare|plugin:vshare]]
{{youtube>MCcBA_Hg0EU?large}}
<WRAP clear/>

==== footer與divider ====
  * 橫條式的圖檔作為頁尾或較多不同內容的頁面內分隔
    * 作為頁尾(footer)或分隔線(divider)用，後來因頁尾使用了自動分頁(navi)，為簡化版面與避免焦點混淆，把原第一層與第二層的footer移除改做為長頁面的分隔線與分段用。
    * 目前因為台南內容多用NAVI(或section include)作為頁尾，以Simple故不放置footer
    * 使用www.tainan.com.tw根目錄的images:
      * [[https://www.tainan.com.tw/images/bg.htm|bg]] [[https://www.tainan.com.tw/images/br.htm|br]] [[https://www.tainan.com.tw/images/bullet/|bullet]] [[https://www.tainan.com.tw/images/kenski/|Kenski]] [[https://www.tainan.com.tw/images/medium.htm|M]] [[https://www.tainan.com.tw/images/pana.htm|Pana]] [[https://www.tainan.com.tw/images/small.htm|S]]
  * [[https://www.dokuwiki.org/plugin:footer|plugin:footer]] 透過創建__footer.txt與plugin可以讓namespace中所有頁面都套用該頁尾，可用於贊助商頁面或是如whereis等主題頁面，但目前尚未使用該plugin，僅spot@/biz@/design@/flower@透過include方式嵌入[[:edithtm#footers|edithtm]] 104.8.8

To avoid a certain page from the footer template (e.g. the start page) you can insert this special command
  ~~NOFOOTER~~
to the content of this page.
<code>
第一層的分頁使用footer
[[:domain:start|{{ https://tainan.com.tw/images/footer.gif?nolink |}}]]</code>
[[:domain:start|{{ https://tainan.com.tw/images/footer.gif?nolink |}}]]

<code>第二層的內容使用footer
[[:start|{{ https://www.tainan.com.tw/images/globe_footer.GIF?nolink }}]]</code>
[[:start|{{ https://www.tainan.com.tw/images/globe_footer.GIF?nolink }}]]

<code>divider
{{https://www.tainan.com.tw/images/wall.gif?nolink}}</code>
{{https://www.tainan.com.tw/images/wall.gif?nolink}}\\
{{https://www.tainan.com.tw/images/festival/xmas_top.gif?nolink|向台南人道聖誕節快樂}}\\
{{https://www.tainan.com.tw/images/br_train.gif}}
==== Wrap圖 cf. imagebox plugin====
<WRAP group>
<WRAP half column>
[[https://www.dokuwiki.org/plugin:wrap|plugin:wrap]]\\ 相較imgbox優點可以控制圖文框放置位置，外框以灰色區塊呈現；相對imgbox缺點內碼略多。
<code><WRAP BOX LEFT>{{:whatsnew:tulips.jpg?direct&200|}}\\ 德元埤荷蘭日</WRAP></code>
<WRAP BOX LEFT>{{:whatsnew:tulips.jpg?direct&200|}}\\ 德元埤荷蘭日</WRAP>
<WRAP clear/>
</WRAP>
[[https://www.dokuwiki.org/plugin:imagebox|plugin:imagebox]]\\ 相較wrap的多功能之一，單一plugin可以通用地用單一語法為圖片顯示註解文字(annotation)(預設的dokuwiki是滑鼠滑到圖片上時顯示註解文字)，也可點選放大圖片(另開視窗)。
<code>[{{:whatsnew:tulips.jpg?direct&200|德元埤荷蘭日1234567890}}]</code>
[{{:whatsnew:tulips.jpg?direct&200|德元埤荷蘭日1234567890}}]
<WRAP half column>

</WRAP>
</WRAP>

==== SVG圖檔 ====
  * 因為目前Dokuwiki系統預設並不支援(上傳後當成一般檔案)所以轉檔JPG/PNG後再使用是一種做法
    * 早期Kenski在biz用第一種作法，多一道轉檔的工
  * 另有人將SVG的XML碼貼入HTML標籤中顯示也是一種做法
    * https://fontawesome.com/ 免費與付費的Font Awesome字體，包含單一SVG或HTML可下載
<WRAP round box 200px>
<html><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M272 96c-78.6 0-145.1 51.5-167.7 122.5c33.6-17 71.5-26.5 111.7-26.5h88c8.8 0 16 7.2 16 16s-7.2 16-16 16H288 216s0 0 0 0c-16.6 0-32.7 1.9-48.3 5.4c-25.9 5.9-49.9 16.4-71.4 30.7c0 0 0 0 0 0C38.3 298.8 0 364.9 0 440v16c0 13.3 10.7 24 24 24s24-10.7 24-24V440c0-48.7 20.7-92.5 53.8-123.2C121.6 392.3 190.3 448 272 448l1 0c132.1-.7 239-130.9 239-291.4c0-42.6-7.5-83.1-21.1-119.6c-2.6-6.9-12.7-6.6-16.2-.1C455.9 72.1 418.7 96 376 96L272 96z"/></svg>
<img src="https://pic.sopili.net/pub/emoji/noto-emoji/png/128/emoji_u1f6f5.png" width=128 height=128>
</html>
</WRAP>
  * 安裝[[https://www.dokuwiki.org/plugin%3Asvgembed|svgEmbed Plugin]]後並不是原生支援(當成IMG)而會以(OBJECT或EMBED)顯示
    * 目前Kenski在tour的路標使用此法引用wikipedia的svg連結
==== Unicode Emoji表情符號====
  * Unicode的EMOJI 同於FB文章中常見的各種小圖符號
    * [[wp>Unicode]]除了對各國文字的支援外，並把常用的動物、植物、標誌、交通、表情等放入
      * [[https://fonts.google.com/|Google Fonts]]中有Noto Color Emoji字型(彩色/向量字型可以放大)
    * WEB輸入工具 //有分大類，如食物、動物...利用剪貼方式輸入//
      * https://tw.piliapp.com/emoji/in-blog/
      * https://emoji.julien-marcou.fr/
    * 安裝charpicker plugin替換掉不常用的希臘符號成EMOJI

^ ^ 0  ^ 1  ^ 2  ^ 3  ^ 4   ^ 5   ^ 6   ^ 7   ^ 8   ^ 9   ^ A   ^ B   ^ C   ^ D   ^ E   ^ F   ^
| U+1F3Dx  | 🏐  | 🏑  | 🏒  | 🏓  | 🏔️  | 🏕️  | 🏖️  | 🏗️  | 🏘️  | 🏙️  | 🏚️  | 🏛️  | 🏜️  | 🏝️  | 🏞️  | 🏟️  |

==== imagemap ====
Plugin:[[https://www.dokuwiki.org/plugin:imapmarkers|Imapmarker]]

  * HTML時代使用Imagemap可以框圖片的區塊並賦予連結資訊，但僅嵌入html後的圖片沒有隨圖片大小自動調整的功能，也就是說當縮小圖片後圖片中的連結相對位置都不正確。
  * 後來找到JQUERY有人寫外掛，但一直沒有成功用在Dokuwiki。後來再看一篇[[https://www.dokuwiki.org/faq:html|dokuwiki與html的FAQ]]寫道應該盡量用可用的外掛取代在dokuwiki中使用html，介紹到以imapmarker取代。
    * 經過測試hogfather是可相容的(原寫Unknown)，所以成功解決台南市37分區圖。感謝作者Kai Thöne及相關協作者。
    * **比imagemap多的**，語法可以產生文字連結，點擊會以圖標顯示圖片中的相對區塊。
<code>
{{imapmarkers>imapmarkers:1744_bowen_map_of_the_world.jpg|Bowen Map of the World, 1744}}
[[https://en.wikipedia.org/wiki/Asia|CON1|Asia @ 456,116,30]]
[[https://en.wikipedia.org/wiki/Africa|CON2|Africa @ 358,167,30]]
[[wp>Australia|CON3|Australia @ 166,134,30]]
{{cfg>}}
  {
    "marker" : "internal",
    "marker-color": "red",
    "clicked-reference-css": { "font-weight": "bold", "color": "red" },
    "area-fillColor": "ff0000",
    "area-fillOpacity": 0.2
  }
{{<cfg}}
{{<imapmarkers}}

{{imapmloc>CON1|Asia}} |
{{imapmloc>CON2|Africa}} |
{{imapmloc>CON3|North America}} |
</code>
==== 其它====
  * 如何更名rename媒體櫃中的檔名
    * 靠後台如capable的檔案管理在data\media目錄下直接改檔名，缺點是內文的連結不會連動更正
    * 使用move plugin在管理選單中，可進行頁面page及媒體櫃media的修改，並連動內文的連結
[<10>]