国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[小清新] 一段 node 腳本生成風格優雅的 Directory Tree

kyanag / 1564人閱讀

摘要：使用文本輸出的話，在不同設備編輯器下內容排版容易混亂。解決方案由于但不限于上述種種原因，自己寫了一個小腳本，可以順利地實現目錄樹的生成。結果被輸出為片段，通過附加樣式，效果遠好于前幾種的方式。這個我打算下一步弄下，可行的話再把代碼出來。

一些煩惱

如果你常常在博客中插入一些文件目錄結構，不免會有碰到諸如此類的問題：

使用圖片輸出的話，感官上不夠和諧，尤其在移動端環境下，圖片內容可能會被多次轉碼、縮放以至于影響閱讀體驗。

使用文本輸出的話，在不同設備、編輯器下內容排版容易混亂。

某一天，你想修改一下內容或者結構時，一個字符一個字符的編輯簡直讓人抓狂。

使用文本輸出的另一個毛病就是，不同設備、平臺的字號、字體、字符樣式都不一樣。也許你寫的時候覺得足夠有美感，在受眾的設備里卻如同一坨翔。

解決方案

由于但不限于上述種種原因，自己寫了一個小腳本，可以順利地實現目錄樹的生成。結果被輸出為html片段，通過附加CSS樣式，效果遠好于前幾種的方式。

腳本輸出的 html 長這樣：

</>復制代碼 
  3.   
    • app.css
    • app.js
    • components
      • Bar3d
        • index.js
        • shaders
          • index.js
        • style.css
        • utils
          • mesh.js
          • webgl.js
      • Button
        • index.js
        • style.css
      • DragImg
        • index.js
        • style.css
      • PlayStarBySvg
        • index.js
        • style.css
      • PlayStarInCanvas
        • index.js
        • style.css
    • utils
      • index.js

顯示的效果長這樣（清新脫俗的黑白配、肥而不膩的字形，要多優雅有多風騷）：

源碼奉上

很簡單的東西，這里直接直接獻上代碼吧。如果確實能給大家帶來一丟丟的效率，我就很欣慰了，或者大家有什么更優雅而高效的東東，不妨留言給我安利安利。

</>復制代碼 
  1. /*
  2. ** File:  `makeTree.js`
  3. ** Usage: `node makeTree.js ./`
  4. */
  5. const fs = require("fs");
  6. const path = require("path");
  7. function makeHtml(dir) {
  8.   const items = fs.readdirSync(dir).map(file => {
  9.     let str = file;
  10.     const filePath = path.join(dir, file);
  11.     if (fs.lstatSync(filePath).isDirectory()) {
  12.       str += makeHtml(filePath);
  13.     }
  14.     return `
  15. ${str}
    16. `;
  16.   });
  17.   return `
      ${items.join("")}
    `;
  18. }
  19. const dirToShow = process.argv[2] || "./";
  20. const treeStr = makeHtml(path.join(__dirname, dirToShow.trim()));
  21. const containerName = "parksben-is-just-one-single-doge";
  22. const htmlStr = `
  24.   
      ${treeStr.slice(4)}
  25. `;
  26. fs.writeFileSync(path.join(__dirname, "tree.html"), htmlStr, "utf8");
  27. console.log("==> Done: the directory tree is saved to ./tree.html");
局限性

這樣做解決了一部分問題，至少往自己的博客文章里放問題不大。

但還有很大的局限性，比如對于掘金、簡書、知乎這樣的第三方頁面，直接插 CSS 很難完全覆蓋已有的樣式，工作也很繁瑣。

個人想到的另一個辦法是把內容輸出成 svg，這樣，在保證樣式和內容正確性的同時，讀者也可以直接 copy 上面的文字。這個我打算下一步弄下，可行的話再把代碼 push 出來。

后續

最后再廢話一兩句，最近有很多東西感覺可以分享出來，比如下一篇文章我準備寫寫 webGL 的一些內容，或者地圖開發方面的內容。先在這里挖個坑，好逼迫一下自己。

好長一段時間沒寫文章了，加班、通宵什么的都不是借口，大好時光可不能就此荒廢。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53028.html

相關文章

  • [小清新] 一段 node 腳本生成風格優雅的 Directory Tree

    摘要：使用文本輸出的話，在不同設備編輯器下內容排版容易混亂。解決方案由于但不限于上述種種原因，自己寫了一個小腳本，可以順利地實現目錄樹的生成。結果被輸出為片段，通過附加樣式，效果遠好于前幾種的方式。這個我打算下一步弄下，可行的話再把代碼出來。 showImg(https://segmentfault.com/img/remote/1460000016585362?w=640&h=360); ...

    worldligang 評論0 收藏0

  • 如何用node開發自己的cli工具

    摘要：新建文件夾這是一個規范，可執行工具的老家。然后輸入接下來會以問答的形式向你了解你的用戶名密碼以及公開的郵箱，之后輸入注意發布的源別是淘寶源，否則哦然后看到進度條走，之后組件發布成功，可以到上搜索自己的包了。 如何用node開發自己的cli工具 靈感 寫這個工具的靈感以及場景源于youtube的一次閑聊 github 地址 blog首發 showImg(https://segment...

    pkwenda 評論0 收藏0

  • 如何用node開發自己的cli工具

    摘要：新建文件夾這是一個規范，可執行工具的老家。然后輸入接下來會以問答的形式向你了解你的用戶名密碼以及公開的郵箱，之后輸入注意發布的源別是淘寶源，否則哦然后看到進度條走，之后組件發布成功，可以到上搜索自己的包了。 如何用node開發自己的cli工具 靈感 寫這個工具的靈感以及場景源于youtube的一次閑聊 github 地址 blog首發 showImg(https://segment...

    Bmob 評論0 收藏0

  • 如何用node開發自己的cli工具

    摘要：新建文件夾這是一個規范，可執行工具的老家。然后輸入接下來會以問答的形式向你了解你的用戶名密碼以及公開的郵箱，之后輸入注意發布的源別是淘寶源，否則哦然后看到進度條走，之后組件發布成功，可以到上搜索自己的包了。 如何用node開發自己的cli工具 靈感 寫這個工具的靈感以及場景源于youtube的一次閑聊 github 地址 blog首發 showImg(https://segment...

    Raaabbit 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<