亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

worldligang / 2183人閱讀

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

一些煩惱

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

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

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

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

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

解決方案

由于但不限于上述種種原因，自己寫了一個(gè)小腳本，可以順利地實(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 很難完全覆蓋已有的樣式，工作也很繁瑣。

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

    后續(xù)

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

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

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

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

    相關(guān)文章

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

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

      kyanag 評論0 收藏0

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

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

      pkwenda 評論0 收藏0

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

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

      Bmob 評論0 收藏0

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

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

      Raaabbit 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動(dòng)
    閱讀需要支付1元查看
    <