====== 重現 NodeTree ======
2013 年我曾經[[https://groups.google.com/g/tiddlywiki/c/MrueYHk2j7U?pli=1|發表]]了 TiddlyWiki 的 NodeTreePlugin/,[[https://github.com/tobibeer/TiddlyWikiPlugins/commits/master/mods/NodeTreePlugin.js|（目前在 GitHub 上還找得到！）]][[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/|（另外我也重新上傳了 TiddlyWiki 檔）]],/
===== ListTree =====
或是先移植 TiddlyWiki 5 的[[http://listtree.tiddlyspot.com/|這個 plugin]] 裡所含的 CSS？好像簡單得多。
==== 測試 ====
- 直接把[[http://listtree.tiddlyspot.com/#%24%3A%2Fplugins%2FTWaddle%2FListTree%2FStylesheet|這裡面的 stylesheet]] 複製到 DW userstyle 中，變數都先取代為 ''2px''、''silver''
- 測試：
* 是誰太勇敢
* 說喜歡離別
* 只要今天不要明天
* 眼睜睜看著愛從指縫
* 中溜走
* 還說再見
* 不夠時間好好來恨你
* 終於明白恨人不容易
* 不願愛得沒有答案結局
++結果|
* 是誰太勇敢
* 說喜歡離別
* 只要今天不要明天
* 眼睜睜看著愛從指縫
* 中溜走
* 還說再見
* 不夠時間好好來恨你
* 終於明白恨人不容易
* 不願愛得沒有答案結局
++[{{http://mimg.tk/uploads/big/c3f34a4bd5d2b52edd6b16dc326cceaf.png|擷圖}}]↑初步成功，但有點小 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） + 英文測試（拿去論壇發問用）：
* 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
++結果：|
* 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
++[{{http://mimg.tk/uploads/big/b471e421cc20baa95450a40d00b8d2fc.png|擷圖}}]→ [[https://forum.dokuwiki.org/d/18271-need-help-with-last-mile-to-port-a-nice-listtree-style|Need help with last mile to port a nice "ListTree" style - DokuWiki User Forum]]((順帶一提：DW 的新 Flarum 論壇系統超好用的！Markdown 語法的清單語法還支援多行內容及行內 code block、圖片！讚啦！:D))
- /^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; }
[{{http://mimg.tk/uploads/big/8f235d6459b9d6285d012028bffd0708.png|結果擷圖}}]↑就正常了！自己解決了！++（原理）|
* 原本 TW 的結構是 ''ul.list-tree > li'' = 最頂層\\ 但 DW 的 HTML 結構則是 ''div.list-tree > ul > li'' ∴要插一層 ul
* 左上角多餘一小段直線，則要用 li:after 去設為零邊線
++
===== NodeTree =====
/^20200916^/ 嘗試：
- 以 [[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/#NodeTreeStyles|NodeTreeStyles]] 為底，另存為 conf/nodetree.css
- 將各個 image 取代為 [[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/#NodeTreeImages|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？FIXME」樹狀清單的上層元素 | ''.nodetree div.tp'' |
- 在 userall.css 中，最前面加上@import "nodetree.css";
- ''plugin»wrap»noPrefix'' 裡加上 ''nodetree''
- 測試：
* 行嗎
* 來棵樹
* 吧
@import "/dw/conf/nodetree.css";→ ''403 Forbidden'' :(
- @import "/conf/nodetree.css";→ ''404 Not found'' :(
- 放棄 ''@import''，改為直接把 CSS 內容放到 userall.css 中\\ → 效果出來了～[{{http://mimg.tk/uploads/big/2ce9401e4471afe3b9db9a675a321d40.png|擷圖}}]但最後一項的線條是錯的，原來還有一處是我忽略了，上面取代錯了，要改一下：
^ NodeTree class ^ 備註 ^ 取代為 DW 元素 ^
| ''.nt-ti-last'' | 最後一枝 | ''.nodetree ul > li:last-of-type'' |
→ 基本型成功！[{{http://mimg.tk/uploads/big/0eb394a4fa5142eea9b412eb5c05cea3.png}}]
-
樹根
* 行嗎
* 子目
* 子目
* 來棵樹
* 子目
* 子目
* 子目
* 吧
* 子目
* 子目
div.tp p {
margin: 0;
}（原本 p 都有一個 10px 的上下 margin ← 拿掉）
- 之前的設計，下面有子目的話，還是都要弄 ''tp''，所以重弄一個：
樹根
*
行嗎
* 子目
* 子目
*
來棵樹
* 子目
* 子目
* 子目
*
吧
* 子目
* 子目
----