成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[小清新] 一段 node 腳本生成風(fēng)格優(yōu)雅的 Directory Tree

kyanag / 1584人閱讀

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

一些煩惱

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

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

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

某一天，你想修改一下內(nèi)容或者結(jié)構(gòu)時，一個字符一個字符的編輯簡直讓人抓狂。

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

解決方案

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

腳本輸出的 html 長這樣：




  
  • 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

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

源碼奉上

很簡單的東西，這里直接直接獻(xiàn)上代碼吧。如果確實(shí)能給大家?guī)硪粊G丟的效率，我就很欣慰了，或者大家有什么更優(yōu)雅而高效的東東，不妨留言給我安利安利。

/*
** File:  `makeTree.js`
** Usage: `node makeTree.js ./`
*/

const fs = require("fs");
const path = require("path");

function makeHtml(dir) {
  const items = fs.readdirSync(dir).map(file => {
    let str = file;

    const filePath = path.join(dir, file);
    if (fs.lstatSync(filePath).isDirectory()) {
      str += makeHtml(filePath);
    }

    return `
  • ${str}
    • `;
  });

  return `
      ${items.join("")}
    `;
}

const dirToShow = process.argv[2] || "./";
const treeStr = makeHtml(path.join(__dirname, dirToShow.trim()));

const containerName = "parksben-is-just-one-single-doge";
const htmlStr = `

    
  
      ${treeStr.slice(4)}

    
`;

fs.writeFileSync(path.join(__dirname, "tree.html"), htmlStr, "utf8");
console.log("==> Done: the directory tree is saved to ./tree.html");
    局限性

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

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

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

    后續(xù)

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

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

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53028.html

    相關(guān)文章

    • [小清新] 一段 node 腳本生成風(fēng)格優(yōu)雅的 Directory Tree

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

      worldligang 評論0 收藏0

    • 如何用node開發(fā)自己的cli工具

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

      pkwenda 評論0 收藏0

    • 如何用node開發(fā)自己的cli工具

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

      Bmob 評論0 收藏0

    • 如何用node開發(fā)自己的cli工具

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

      Raaabbit 評論0 收藏0

    發(fā)表評論

    0條評論

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