playground:pg1_media [Tainanese 台南與我]

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
===== 1-1 Layout:圖與影片====
  * [[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，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。))

==== Gallery ====
[[https://www.dokuwiki.org/plugin:gallery|plugin:gallery]]\\
  * Gallery相簿外掛有完整的相簿功能，可以自訂相簿的單張大小與分頁中的縮圖數量
    * 點進縮圖後，有lightbox的效果可以左右翻頁，按ESC可離開檢視，檢視尺寸也可以自訂
  * 相較slider plugin看似更優，但限制是單頁最好僅使用一次，因為cache或是其他原因，第二組載入時有時僅顯示分頁按鈕，按下按鈕後縮圖才顯示(可正常顯示)；相較slider也有其缺點，但slider可以多組併用而無cache相互影響的問題。
    * 結論與建議:同一頁想要展示多組相片時，可使用一組Gallery給數量多的相簿，Slider可多組適用數量少的相簿。ex.[[museum:tainan_art_museum|南美館]]

<code>
{{gallery> :whereis?icctainan_*&200x200&1280X720&~4&2&showtitle&lightbox }}
</code>
{{gallery> :whereis?icctainan_*&200x200&1280X720&~4&2&showtitle&lightbox }}
<WRAP clear/>
[<10>]
==== 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 500x>
<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/>


==== 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可下載
    * https://www.svgrepo.com/ Open-licensed SVG Vector and Icons
<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>
<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.972 511.972" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#A0D468;" d="M377.021,485.974c-1.719,0-3.453-0.422-5.016-1.25L54.725,315.685 c-2.078-1.109-3.734-2.875-4.703-5.03c-4.344-9.641-41.42-96.511-8.437-178.163c18.593-46.013,47.138-80.761,84.823-103.291 C158.828,9.827,196.905,0,239.558,0c38.639,0,80.277,8.562,117.229,24.107c34.529,14.53,62.747,34.295,77.401,54.216 c23.812,32.343,39.279,70.622,46.014,113.76c5.828,37.451,4.812,78.715-2.969,119.322c-14.812,77.386-52.825,146.898-94.572,172.944 C380.943,485.427,378.974,485.974,377.021,485.974z"></path> <path style="fill:#5D9CEC;" d="M476.156,171.177c-11.124-1.625-45.56-6.843-86.87-15.046 c-66.153-13.171-119.618-27.982-154.648-42.873c-3.25-1.374-6.984-1.062-9.953,0.859l-57.122,36.92 c-3.031,1.953-4.875,5.312-4.89,8.922c0,2.547-0.031,62.716,15.155,93.886c5.343,10.983,27.311,28.17,149.695,72.434 c64.466,23.312,128.104,43.545,133.119,45.123c6.952-18.969,12.607-39.201,16.592-59.997c7.781-40.607,8.797-81.871,2.969-119.322 C479.093,184.974,477.734,178.006,476.156,171.177z"></path> <circle style="fill:#656D78;" cx="213.826" cy="159.986" r="40.482"></circle> <g> <path style="fill:#434A54;" d="M213.826,108.853c-28.202,0-51.153,22.936-51.153,51.138c0,28.201,22.952,51.138,51.153,51.138 s51.138-22.937,51.138-51.138C264.965,131.789,242.028,108.853,213.826,108.853z M213.826,189.801 c-16.437,0-29.811-13.374-29.811-29.811s13.375-29.811,29.811-29.811s29.811,13.374,29.811,29.811S230.263,189.801,213.826,189.801 z"></path> <path style="fill:#434A54;" d="M221.373,167.538c-4.171,4.155-10.921,4.155-15.093,0c-4.156-4.172-4.156-10.922,0-15.094 c4.171-4.155,10.921-4.155,15.093,0C225.529,156.616,225.529,163.366,221.373,167.538z"></path> <path style="fill:#434A54;" d="M351.007,511.972c-1.688,0-3.405-0.406-4.999-1.25L37.523,346.356 c-5.203-2.766-7.171-9.219-4.406-14.421c2.766-5.203,9.234-7.172,14.421-4.406l308.5,164.366c5.202,2.766,7.171,9.218,4.39,14.421 C358.521,509.925,354.819,511.972,351.007,511.972z"></path> </g> <path style="opacity:0.2;fill:#FFFFFF;enable-background:new ;" d="M480.203,192.083c-6.734-43.138-22.201-81.417-46.014-113.76 c-14.654-19.921-42.872-39.686-77.401-54.216C319.837,8.561,278.198,0,239.559,0c-3.593,0-7.14,0.078-10.671,0.219 c35.545,1.405,72.997,9.765,106.557,23.889c34.529,14.53,62.746,34.295,77.418,54.216c23.795,32.343,39.279,70.622,46.014,113.76 c5.827,37.451,4.812,78.715-2.969,119.322c-14.297,74.636-50.154,141.93-90.137,169.991l6.234,3.328 c1.562,0.828,3.297,1.25,5.016,1.25c1.953,0,3.922-0.547,5.641-1.625c41.747-26.046,79.761-95.559,94.572-172.944 C485.015,270.798,486.031,229.534,480.203,192.083z"></path> </g></svg>
</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>
=== Map 台南市行政區 ===
{{imapmarkers>geog:tnmap_by_tncg.jpg|台南37區圖市政府製}}
[[https://www.tainan.com.tw/liuying/|CON1|柳營@330,162,399,204]]
[[https://www.tainan.com.tw/annan/|CON2|安南區@95,435,175,495]]
[[https://www.tainan.com.tw/zuozhen/|CON3|左鎮@391,459,444,495]]
[[https://www.tainan.com.tw/south/|CON4|南區@174,550,211,587]]
[[https://www.tainan.com.tw/anping/|CON5|安平區@121,523,172,557]]
[[https://www.tainan.com.tw/yongkang/|CON6|永康@230,472,283,508]]
[[https://www.tainan.com.tw/north/|CON7|北區@184,489,219,511]]
[[https://www.tainan.com.tw/centerwest/|CON8|中西區@177,514,219,536]]
[[https://www.tainan.com.tw/east/|CON9|東區@215,536,250,557]]
[[https://www.tainan.com.tw/rende/|CON10|仁德@266,616,213,581]]
[[https://www.tainan.com.tw/guiren/|CON11|歸仁@324,634,276,584]]
[[https://www.tainan.com.tw/guanmiao/|CON12|關廟@375,571,314,535]]
[[https://www.tainan.com.tw/longci/|CON13|龍崎@434,606,378,571]]
[[https://www.tainan.com.tw/xinhua/|CON14|新化@317,465,380,503]]
[[https://www.tainan.com.tw/qiqu/|CON15|七股@57,328,127,386]]
[[https://www.tainan.com.tw/jiali/|CON16|佳里@148,300,200,321]]
[[https://www.tainan.com.tw/xigang/|CON17|西港@165,351,220,377]]
[[https://www.tainan.com.tw/anding/|CON18|安定@199,391,252,418]]
[[https://www.tainan.com.tw/xinshi/|CON19|新市@274,404,338,441]]
[[https://www.tainan.com.tw/shanhua/|CON20|善化@279,334,337,365]]
[[https://www.tainan.com.tw/danei/|CON21|大內@377,340,430,373]]
[[https://www.tainan.com.tw/shanshang/|CON22|山上@363,398,420,426]]
[[https://www.tainan.com.tw/yujing/|CON24|玉井@449,364,509,409]]
[[https://www.tainan.com.tw/nanhua/|CON25|南化@548,382,599,413]]
[[https://www.tainan.com.tw/jiangjun/|CON26|將軍@86,252,138,281]]
[[https://www.tainan.com.tw/madou/|CON27|麻豆@216,280,269,308]]
[[https://www.tainan.com.tw/guantian/|CON28|官田@330,275,390,303]]
[[https://www.tainan.com.tw/nanxi/|CON29|楠西@504,288,566,322]]
[[https://www.tainan.com.tw/liujia/|CON30|六甲@390,236,449,261]]
[[https://www.tainan.com.tw/xiaying/|CON31|下營@242,228,296,256]]
[[https://www.tainan.com.tw/xuejia/|CON32|學甲@203,231,145,200]]
[[https://www.tainan.com.tw/beimen/|CON33|北門@106,138,159,166]]
[[https://www.tainan.com.tw/yanshui/|CON34|鹽水@214,149,269,176]]
[[https://www.tainan.com.tw/xinying/|CON35|新營@290,118,346,148]]

[[https://www.tainan.com.tw/dongshan/|CON37|東山@437,162,493,195]]
[[https://www.tainan.com.tw/houbi/|CON36|後壁@333,61,394,94]]
[[https://www.tainan.com.tw/baihe/|CON23|白河@453,81,515,122]]
{{cfg>}}
  {
    "marker-color": "red",
    "clicked-reference-css": { "font-weight": "bold", "color": "red" },
    "area-fillColor": "ff0000",
    "area-fillOpacity": 0.2
  }
{{<cfg}}
{{<imapmarkers}}

{{fa>map-pin}} {{imapmloc>CON31|CLICK!下營在哪裡}}
==== 其它====
  * 如何更名rename媒體櫃中的檔名
    * 靠後台如capable的檔案管理在data\media目錄下直接改檔名，缺點是內文的連結不會連動更正
    * 使用move plugin在管理選單中，可進行頁面page及媒體櫃media的修改，並連動內文的連結
[<10>]
網站工具

頁面工具
