dokuwiki:dev:nodetree

這是本文件的舊版!


重現 NodeTree

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

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. 測試:
    • 行嗎
    • 來棵樹

    ↑效果沒出來

  5. userall.css 改為

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

  1. 直接把這裡面的 stylesheet 複製到 DW userstyle 中,變數都先取代為 2pxsilver
  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 Forum1)


1)
順帶一提:DW 的新 Flarum 論壇系統超好用的!Markdown 語法的清單語法還支援多行內容及行內 code block、圖片!讚啦!:D
輸入您的意見. 允許使用維基語法:
B R W R V
 
  • 上一次變更: 2020/09/16 20:49
  • ghsrobert