dokuwiki:dev:nodetree

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
dokuwiki:dev:nodetree [2020/09/17 06:05]
ghsrobert [測試] 		dokuwiki:dev:nodetree [2020/09/17 06:31] (目前版本)
ghsrobert [NodeTree] 插多圖
行 2: 行 2:
 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 檔）]],/ 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 檔）]],/
  
-===== NodeTree ===== 
-/^20200916^/ 嘗試： 
-  - 以 [[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/#NodeTreeStyles|NodeTreeStyles]] 為底，另存為 conf/nodetree.css 
-    - 將各個 image 取代為 [[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/#NodeTreeImages|NodeTreeImages]] 
-    - <div> 
-^  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'' | 
-</div> 
-  - 在 userall.css 中，最前面加上<code css>@import "nodetree.css";</code> 
-  - ''plugin»wrap»noPrefix'' 裡加上 ''nodetree'' 
-  - 測試：<div nodetree> 
-  * 行嗎 
-  * 來棵樹 
-  * 吧 
-</div>↑效果沒出來 
-  - userall.css 改為： 
-    - <code css>@import "/dw/conf/nodetree.css";</code>→ ''403 Forbidden'' :( 
-    - <code css>@import "/conf/nodetree.css";</code>→ ''404 Not found'' :( 
-  - 放棄 ''@import''，改為直接把 CSS 內容放到 userall.css 中\\ → 效果出來了～但最後一項是錯的，原來還有一處是我忽略了，上面取代錯了，要改一下：<div> 
-^  NodeTree class  ^  備註  ^  取代為 DW 元素  ^ 
-| ''.nt-ti-last'' | 最後一枝 | ''.nodetree ul > li:last-of-type'' | 
-</div>→ 基本型成功！ 
-  - <div nodetree> 
-<div tp>樹根</div> 
-  * 行嗎 
-  * 來棵樹 
-  * 吧 
-</div>↑樹根成功！（只是位置有點怪） 
-  - <div nodetree> 
-<div tp>樹根</div> 
-  * 行嗎 
-    * 子目 
-    * 子目 
-  * 來棵樹 
-    * 子目 
-    * 子目 
-    * 子目 
-  * 吧 
-    * 子目 
-    * 子目 
-</div> 
-  - 解決樹根位置：<code css>div.tp p { 
-margin: 0; 
-}</code>（原本 p 都有一個 10px 的上下 margin ← 拿掉） 
-  - 之前的設計，下面有子目的話，還是都要弄 ''tp''，所以重弄一個：<div nodetree> 
-<div tp>樹根</div> 
-  * <div tp>行嗎</div> 
-    * 子目 
-    * 子目 
-  * <div tp>來棵樹</div> 
-    * 子目 
-    * 子目 
-    * 子目 
-  * <div tp>吧</div> 
-    * 子目 
-    * 子目 
-</div> 
 ===== ListTree ===== ===== ListTree =====
-或是移植 TiddlyWiki 5 的[[http://listtree.tiddlyspot.com/|這個 plugin]] 裡所含的 CSS？好像簡單得多。+或是先移植 TiddlyWiki 5 的[[http://listtree.tiddlyspot.com/|這個 plugin]] 裡所含的 CSS？好像簡單得多。
  
 ==== 測試 ==== ==== 測試 ====
行 152: 行 92:
   * 左上角多餘一小段直線，則要用 li:after 去設為零邊線   * 左上角多餘一小段直線，則要用 li:after 去設為零邊線
 </div>++ </div>++
 +
 +===== NodeTree =====
 +/^20200916^/ 嘗試：
 +  - 以 [[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/#NodeTreeStyles|NodeTreeStyles]] 為底，另存為 conf/nodetree.css
 +    - 將各個 image 取代為 [[https://gjrobert.github.io/TiddlyWikiClassic-NodeTreePlugin/#NodeTreeImages|NodeTreeImages]]
 +    - <div>
 +^  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'' |
 +</div>
 +  - 在 userall.css 中，最前面加上<code css>@import "nodetree.css";</code>
 +  - ''plugin»wrap»noPrefix'' 裡加上 ''nodetree''
 +  - 測試：<code><div nodetree>
 +  * 行嗎
 +  * 來棵樹
 +  * 吧
 +</div></code>↑效果沒出來，就還是一般的 bullet list 樣
 +  - userall.css 改為：
 +    - <code css>@import "/dw/conf/nodetree.css";</code>→ ''403 Forbidden'' :(
 +    - <code css>@import "/conf/nodetree.css";</code>→ ''404 Not found'' :(
 +  - 放棄 ''@import''，改為直接把 CSS 內容放到 userall.css 中\\ → 效果出來了～[{{http://mimg.tk/uploads/big/2ce9401e4471afe3b9db9a675a321d40.png|擷圖}}]但最後一項的線條是錯的，原來還有一處是我忽略了，上面取代錯了，要改一下：<div>
 +^  NodeTree class  ^  備註  ^  取代為 DW 元素  ^
 +| ''.nt-ti-last'' | 最後一枝 | ''.nodetree ul > li:last-of-type'' |
 +</div>→ 基本型成功！[{{http://mimg.tk/uploads/big/0eb394a4fa5142eea9b412eb5c05cea3.png}}]
 +  - <code><div nodetree>
 +<div tp>樹根</div>
 +  * 行嗎
 +  * 來棵樹
 +  * 吧
 +</div></code>[{{http://mimg.tk/uploads/big/9f07886c9a621eac23798ea8151a04cd.png}}]↑樹根成功！（只是位置有點怪）
 +  - 有樹根加子目<code><div nodetree>
 +<div tp>樹根</div>
 +  * 行嗎
 +    * 子目
 +    * 子目
 +  * 來棵樹
 +    * 子目
 +    * 子目
 +    * 子目
 +  * 吧
 +    * 子目
 +    * 子目
 +</div></code>會變這樣：[{{http://mimg.tk/uploads/big/5a74bb5ab613889b8063e4a25fa66c8e.png}}]
 +  - 解決樹根位置：<code css>div.tp p {
 +margin: 0;
 +}</code>（原本 p 都有一個 10px 的上下 margin ← 拿掉）
 +  - 之前的設計，下面有子目的話，還是都要弄 ''tp''，所以重弄一個：<code><div nodetree>
 +<div tp>樹根</div>
 +  * <div tp>行嗎</div>
 +    * 子目
 +    * 子目
 +  * <div tp>來棵樹</div>
 +    * 子目
 +    * 子目
 +    * 子目
 +  * <div tp>吧</div>
 +    * 子目
 +    * 子目
 +</div></code>[{{http://mimg.tk/uploads/big/d6cd80491fa29ed0387495f578f30df1.png|目前成果}}]先這樣，改天再來繼續研究調整<div>
 +----
 +</div>
  • 上一次變更: 2020/09/17 06:05
  • 由 ghsrobert