Ciang Brides 黃金城 dokuwiki:dev

開發 fieldset plugin

Anonymous (anonymous@undisclosed.example.com) — 2020-10-30T00:02:29+00:00

開發 fieldset plugin

覺得

像這樣的fieldset 蠻好用的

（應該要用一般瀏覽器常見的 style，legend 的文字在邊線左上角），而不是用各 DW tpl 自己的樣式），但當然不可能每次都打一堆 HTML 碼：

<html><fieldset><legend>像這樣的</legend></html>fieldset 蠻好用的
<html></fieldset></html>

考慮兩種解法：

做專屬的 syntax plugin
用 wrap div/span + CSS

plugin

因為不同的 DW tpl 各有不同的 fieldset、legend CSS，所以本來我想就不做 plugin 了，用下面的純 wrap+CSS 法就好。但後來又想，我也可以弄 plugin，但產生 div.fieldset 之類的啊。所以就再次來挑戰看看 syntax plugin 吧（雖然之前從來沒成功）。

試著用 plugin:ruby 來改
1. 開 repo
2. 其實語法有頭有尾 ∴也應該參考 wrap 才是 ← 想到就難，先休息好了

參考

devel:syntax_plugin_skeleton [DokuWiki]

CSS

一般瀏覽器常見的 legend style 到底是怎樣？

HTML Standard 這裡面的 CSS 似乎不是，至少在 BlueGriffon 裡套到 div.fieldset、div.legend 上的話還是無法呈現我要的效果
用 Waterfox 網頁開發者工具挖出 fieldset 及 legend 的「瀏覽器樣式」，再套到測試的網頁 CSS 裡，也無效

擬真：

html - Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag? - Stack Overflow 這位提出來的 CSS 效果還不錯

我在一般網頁實測過也還 okay，就是要多用一個 span 就是了

~~在 DW 中實測~~

.wrap_fieldset {
  border: 2px groove threedface;
  border-top: none;
  padding: 0.5em;
  margin: 1em 2px;
}
 
.wrap_fieldset>.wrap_legend {
  font: 1em normal;
  margin: -1em -0.5em 0;
}
 
.wrap_fieldset>.wrap_legend>p {
  float: left;
}
 
.wrap_fieldset>.wrap_legend:before {
  border-top: 2px groove threedface;
  content: ' ';
  float: left;
  margin: 0.5em 2px 0 -1px;
  width: 0.75em;
}
 
.wrap_fieldset>.wrap_legend:after {
  border-top: 2px groove threedface;
  content: ' ';
  display: block;
  height: 1.5em;
  left: 2px;
  margin: 0 1px 0 0;
  overflow: hidden;
  position: relative;
  top: 0.5em;
}

可以看到我把原作者的 span 改成了 p，因為 wrap plugin 本身就會產生 p，這樣少一道輸入。結果：

標題

內容

<div fieldset><div legend>標題</div>
內容
</div>

在主站勉強可以（內容的位置會往右縮排，不知何故）
在 mikio tpl 中，legend 的位置就跑掉了
↑
```
.wrap_fieldset>.wrap_legend>p {
  margin-top: 0;
  margin-bottom: 0;
}
```
↑加上這兩行的話可以解決 legend p 的高度，以及因為 float 而影響內容位置的問題這樣可用性就提高了～

參考

css style like fieldset legend - Google 搜尋

DokuWiki 的 l10n（本地化）

Anonymous (anonymous@undisclosed.example.com) — 2020-10-30T14:29:59+00:00

DokuWiki 的 l10n（本地化）

這頁放 dokuwiki:dev 下而非直轄 :dokuwiki，因為它並非 DW 本身面對終端使用者的一個功能，而是跟開發流程有關。

機制

DW 的 inc/lang，或是各 plugin/template 的 lang 資料夾裡，都放了可供本地化的字串。

方法

DW 的 localization/l10n（本地化）真的很簡單，上 https://translate.dokuwiki.org/（又稱 Translation/Localization Hub），選好要翻譯的語種、產品¹⁴⁾，然後就可以在網頁介面上，想翻譯哪一句就翻譯哪句，也可以打 filter 找出含有某字詞的句子來參考或翻譯。這樣對於一般人而言就比 Git 處理本地化字串檔親和多了。

翻好後記得填姓名、mail 信箱及真人驗證碼，再按 Submit，系統就會感謝你，並且會把你提供的個資附在翻譯字串上做成 Git PR，讓該產品的開發者可以審核、併入程式碼中，你的貢獻就會榜上有名。而且想做多少就做多少，翻一個字詞、一句也可以提交，輕鬆得很。

增加新語種也很容易，開個 Git PR，內含 inc/lang/<新語種代碼>/<所翻譯的檔案>（不用全翻，只要含有已翻譯的字串即可；未翻譯的會自動 fallback 用英文的），或也先開個 splitbrain/dokuwiki 專案的 issue 知會一下開發者群，他們看到 PR，merge 以後，這個新語種之後也會出現在 Hub 中，之後要用 Git 繼續翻譯，或用網頁介面都 okay。我 2020/10 月底開始弄閩南語的 localization 就是這樣。

plugin、template 的話，要看開發者有沒有把作品註冊到 Hub 上（有註冊介面）。Hub 上有的就可以用 Hub 做，沒有的話通常就用 Git，不然就私炊自用也行。

我的參與

對象：有點族繁不及備載
詞庫：我開始參與後，打算針對我有參與的語言，維護 l10n glossary 資料庫。可預見首先會有的會是 zh-tw，及 nan(-tw)。

¹⁴⁾

DW 本身
各 plugin
各 template

重現 NodeTree

Anonymous (anonymous@undisclosed.example.com) — 2020-09-17T06:31:23+00:00

重現 NodeTree

2013 年我曾經發表了 TiddlyWiki 的 NodeTreePlugin_{（目前在 GitHub 上還找得到！）（另外我也重新上傳了 TiddlyWiki 檔）}

ListTree

或是先移植 TiddlyWiki 5 的這個 plugin 裡所含的 CSS？好像簡單得多。

測試

直接把這裡面的 stylesheet 複製到 DW userstyle 中，變數都先取代為 2px、silver

測試：

<div list-tree>
  * 是誰太勇敢
  * 說喜歡離別
    * 只要今天不要明天
    * 眼睜睜看著愛從指縫
  * 中溜走
    * 還說再見

  * 不夠時間好好來恨你
    * 終於明白恨人不容易
    * 不願愛得沒有答案結局
</div>

結果

是誰太勇敢
說喜歡離別
- 只要今天不要明天
- 眼睜睜看著愛從指縫
中溜走
- 還說再見

不夠時間好好來恨你
- 終於明白恨人不容易
- 不願愛得沒有答案結局

擷圖

↑初步成功，但有點小 bug，不知是否 DW 產生清單的 HTML 太複雜還是怎樣，下面這段 CSS 的效果：

/* top-level: Lines if multiple top elements. No lines if single top element. */
 
.list-tree > li:last-of-type:before { display:none; }
 
.list-tree > li:first-of-type:before { border-top: {{!!list-tree-thickness}} solid {{!!list-tree-color}}; }
 
.list-tree > li:before {
    border-left: {{!!list-tree-thickness}} solid {{!!list-tree-color}};
    height: 100%;}

竟然沒出來

純 HTML（不用 wrap plugin） + 英文測試（拿去論壇發問用）：
```
<html><div class="list-tree"></html>
  * Starry, starry night
  * Paint your palette blue and gray
    * Look out on a summer's day
    * With eyes that know the darkness in my soul
  * Shadows on the hills
    * Sketch the trees and daffodils
    * Catch the breeze and the winter chills
      * In colors on the snowy linen land
 
  * Now I understand
    * What you tried to say to me
      * And how you suffered for your sanity
      * And how you tried to set them free
    * They would not listen, they did not know how
    * Perhaps they'll listen now
<html></div></html>
```
結果：
- Starry, starry night
- Paint your palette blue and gray
  
  Look out on a summer's day
  
  With eyes that know the darkness in my soul
- Shadows on the hills
  
  Sketch the trees and daffodils
  
  Catch the breeze and the winter chills
  
  In colors on the snowy linen land
- Now I understand
  
  What you tried to say to me
  
  And how you suffered for your sanity
  
  And how you tried to set them free
  
  They would not listen, they did not know how
  
  Perhaps they'll listen now
擷圖

→ Need help with last mile to port a nice "ListTree" style - DokuWiki User Forum²⁴⁾

^20200916 耶呼！自己研究了一下，把最後一段 CSS 改成這樣：

/* top-level: Lines if multiple top elements. No lines if single top element. */
 
.list-tree > ul > li:last-of-type:before { display:none; }
 
.list-tree > ul > li:first-of-type:before { border-top: 2px solid silver; }
 
.list-tree > ul > li:before {
    border-left: 2px solid silver;
    height: 100%;
}
.list-tree > ul > li:after { border-left: 0; }

結果擷圖

↑就正常了！自己解決了！（原理）

原本 TW 的結構是 ul.list-tree > li = 最頂層
但 DW 的 HTML 結構則是 div.list-tree > ul > li ∴要插一層 ul
左上角多餘一小段直線，則要用 li:after 去設為零邊線

NodeTree

^20200916 嘗試：

以 NodeTreeStyles 為底，另存為 conf/nodetree.css

將各個 image 取代為 NodeTreeImages

NodeTree class	備註	取代為 DW 元素
`.nt-ti`	「tree item」樹枝	`.nodetree ul > li`
`.nt-ts`	「tree separator」枝與枝間的分隔	`.nodetree ol > li`
`.nt-tl`	「tree list」整個樹狀清單	`.nodetree ul`
`.nt-tp`	「tree parent？」樹狀清單的上層元素	`.nodetree div.tp`

在 userall.css 中，最前面加上
```
@import "nodetree.css";
```
plugin»wrap»noPrefix 裡加上 nodetree
測試：
```
<div nodetree>
  * 行嗎
  * 來棵樹
  * 吧
</div>
```
↑效果沒出來，就還是一般的 bullet list 樣

userall.css 改為：

```
@import "/dw/conf/nodetree.css";
```
→ 403 Forbidden
```
@import "/conf/nodetree.css";
```
→ 404 Not found

放棄 @import，改為直接把 CSS 內容放到 userall.css 中
→ 效果出來了～
擷圖

但最後一項的線條是錯的，原來還有一處是我忽略了，上面取代錯了，要改一下：

NodeTree class 備註取代為 DW 元素

.nt-ti-last 最後一枝 .nodetree ul > li:last-of-type

→ 基本型成功！

NodeTree class	備註	取代為 DW 元素
`.nt-ti-last`	最後一枝	`.nodetree ul > li:last-of-type`

<div nodetree>
<div tp>樹根</div>
  * 行嗎
  * 來棵樹
  * 吧
</div>

↑樹根成功！（只是位置有點怪）

有樹根加子目

<div nodetree>
<div tp>樹根</div>
  * 行嗎
    * 子目
    * 子目
  * 來棵樹
    * 子目
    * 子目
    * 子目
  * 吧
    * 子目
    * 子目
</div>

會變這樣：

解決樹根位置：
```
div.tp p {
margin: 0;
}
```
（原本 p 都有一個 10px 的上下 margin ← 拿掉）

之前的設計，下面有子目的話，還是都要弄 tp，所以重弄一個：

<div nodetree>
<div tp>樹根</div>
  * <div tp>行嗎</div>
    * 子目
    * 子目
  * <div tp>來棵樹</div>
    * 子目
    * 子目
    * 子目
  * <div tp>吧</div>
    * 子目
    * 子目
</div>

目前成果

先這樣，改天再來繼續研究調整

²⁴⁾

順帶一提：DW 的新 Flarum 論壇系統超好用的！Markdown 語法的清單語法還支援多行內容及行內 code block、圖片！讚啦！

開發 DokuWiki plugin

Anonymous (anonymous@undisclosed.example.com) — 2020-03-23T21:20:22+00:00

開發 DokuWiki plugin

做法

我目前是這樣弄：

【撰寫、修改】專案主資料夾放在 Dropbox/projects 下，命名通常是 dokuwiki-plugin-xxx
【安裝、測試】↑把上面主資料夾下的檔案壓縮後，用 DW「手動安裝」該 zip 檔後餵給 dw/lib/plugins
- 【壓縮】用 macOS 內建的 zip 指令
```
$ zip -r FileName.zip DirName
```
  而不要用 Finder 的壓縮功能
【Git】repo 直接用 Dropbox 裡的這個專案資料夾，再用 GitHub Desktop 同步上網

自行開發 DokuWiki template

Anonymous (anonymous@undisclosed.example.com) — 2017-09-29T13:42:31+00:00

自行開發 DokuWiki template

鑑於 DokuWiki template 仍然不是很多，很好看或很完美的不多，功能或元件上有時缺這個少那個
而且支援 Bootstrap 元件的也不多
不知道自己開發會不會很難……

研究

全部自行開發
- devel:templates [DokuWiki] devel:templates [DokuWiki]
移植 WordPress theme
- devel:wp_to_dw_template [DokuWiki] devel:wp_to_dw_template [DokuWiki]
支援 Bootstrap
- 如果用這個來改？template:starterbootstrap [DokuWiki] template:starterbootstrap [DokuWiki]
  
  ↑好像有點舊，問題多半未修
- Twitter Bootstrap 3 based template - DokuWiki User Forum

文字轉換器

Anonymous (anonymous@undisclosed.example.com) — 2020-10-13T11:22:19+00:00

文字轉換器

類似維基百科華文版的 MediaWiki 轉換器，可用於：

Taigi123 的不同方音切換

參考

MediaWiki：

Automatic conversion between simplified and traditional Chinese - Meta Automatic conversion between simplified and traditional Chinese - Meta

較簡單的 wrap 語法

Anonymous (anonymous@undisclosed.example.com) — 2020-10-29T12:26:03+00:00

較簡單的 wrap 語法

DW 透過 plugin:wrap 可以產生強大的 div、span。但語法方面，我懷念 TiddlyWiki 的 {{class{span}}} 和

{{class{
div}}}

。

看了一下 wrap 的 /syntax，原來是 6 支 PHP 在定義 3 套 div 及 span 的語法。看來也許可以先試著把我比較用不到的 <inline> 跟 <block> 改掉。

fork 了 plugin

spaninline.php 這兩行：

    protected $entry_pattern   = '<inline\b.*?>(?=.*?</inline>)';
    protected $exit_pattern    = '</inline>';

看來可以直接改；但

    protected $special_pattern = '<inline\b[^>\r\n]*?/>';

呢？$special_pattern 的用途是？

喔，看來是處理單個 <span/>、<div/> label，那這應該也要改

先規劃使用 {[class[content]} 這樣的語法，改了 spaninline.php，然後 archive 起來丟給我的臺文測試站 dw-nan。但結果只有出現 <span>...</span>，class 無效我對那些 regex 及 span.php 裡的設計並不瞭解……可能需要向作者們求助，或直接建議他們幫忙做了