目錄表

重現 NodeTree

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

ListTree

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

測試

  1. 直接把這裡面的 stylesheet 複製到 DW userstyle 中，變數都先取代為 2px、silver
  2. 測試：
    <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%;}

    竟然沒出來

  3. 純 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 Forum24)

  4. 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 嘗試：

  1. 以 NodeTreeStyles 為底，另存為 conf/nodetree.css
    1. 將各個 image 取代為 NodeTreeImages
    2. 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
  2. 在 userall.css 中，最前面加上
    @import "nodetree.css";
  3. plugin»wrap»noPrefix 裡加上 nodetree
  4. 測試：
    <div nodetree>
  * 行嗎
  * 來棵樹
  * 吧
</div>

    ↑效果沒出來，就還是一般的 bullet list 樣

  5. userall.css 改為：
    1. @import "/dw/conf/nodetree.css";

      → 403 Forbidden :( 

    2. @import "/conf/nodetree.css";

      → 404 Not found :(

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

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

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

    → 基本型成功！ 

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

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

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

    會變這樣：

  9. 解決樹根位置：
    div.tp p {
margin: 0;
}

    （原本 p 都有一個 10px 的上下 margin ← 拿掉）

  10. 之前的設計，下面有子目的話，還是都要弄 tp，所以重弄一個：
    <div nodetree>
<div tp>樹根</div>
  * <div tp>行嗎</div>
    * 子目
    * 子目
  * <div tp>來棵樹</div>
    * 子目
    * 子目
    * 子目
  * <div tp>吧</div>
    * 子目
    * 子目
</div>
    目前成果

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

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