重現 NodeTree

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

或是先移植 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 去設為零邊線

^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

→ 基本型成功！

<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>