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

一些煩惱

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

• 使用圖片輸出的話，感官上不夠和諧，尤爲在移動端環境下，圖片內容可能會被屢次轉碼、縮放以致於影響閱讀體驗。
• 使用文本輸出的話，在不一樣設備、編輯器下內容排版容易混亂。
• 某一天，你想修改一下內容或者結構時，一個字符一個字符的編輯簡直讓人抓狂。
• 使用文本輸出的另外一個毛病就是，不一樣設備、平臺的字號、字體、字符樣式都不同。也許你寫的時候以爲足夠有美感，在受衆的設備裏卻如同一坨翔。

解決方案

因爲但不限於上述種種緣由，本身寫了一個小腳本，能夠順利地實現目錄樹的生成。結果被輸出爲html片斷，經過附加CSS樣式，效果遠好於前幾種的方式。

腳本輸出的 html 長這樣：

<style>
  .parksben-is-just-one-single-doge {
    width: 90%;
    max-width: 640px;
    box-sizing: border-box;
    margin: 1em auto;
    padding: 2em;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
    font: 14px/18px Helvetica, Arial, "Microsoft Yahei", Verdana, sans-serif;
    --content-color: #fff;
  }

  .parksben-is-just-one-single-doge ul.tree {
    color: var(--content-color);
  }

  .parksben-is-just-one-single-doge ul.tree,
  .parksben-is-just-one-single-doge ul.tree ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .parksben-is-just-one-single-doge ul.tree ul {
    margin-left: 1em;
  }

  .parksben-is-just-one-single-doge ul.tree li {
    margin: 0;
    padding: 0 1em;
    line-height: 2em;
    font-weight: bold;
    position: relative;
  }

  .parksben-is-just-one-single-doge ul.tree li::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: var(--content-color);
    position: absolute;
    left: 0;
    top: 0;
  }

  .parksben-is-just-one-single-doge ul.tree li::after {
    content: '';
    display: block;
    width: 0.8em;
    height: 1px;
    background: var(--content-color);
    position: absolute;
    left: 0;
    top: 0.9em;
  }

  .parksben-is-just-one-single-doge ul.tree li:last-child::before {
    height: 1em;
    bottom: 1em;
  }
</style>
<div class="parksben-is-just-one-single-doge">
  <ul class="tree"><li>app.css</li><li>app.js</li><li>components<ul><li>Bar3d<ul><li>index.js</li><li>shaders<ul><li>index.js</li></ul></li><li>style.css</li><li>utils<ul><li>mesh.js</li><li>webgl.js</li></ul></li></ul></li><li>Button<ul><li>index.js</li><li>style.css</li></ul></li><li>DragImg<ul><li>index.js</li><li>style.css</li></ul></li><li>PlayStarBySvg<ul><li>index.js</li><li>style.css</li></ul></li><li>PlayStarInCanvas<ul><li>index.js</li><li>style.css</li></ul></li></ul></li><li>utils<ul><li>index.js</li></ul></li></ul>
</div>

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

源碼奉上

很簡單的東西，這裏直接直接獻上代碼吧。若是確實能給你們帶來一丟丟的效率，我就很欣慰了，或者你們有什麼更優雅而高效的東東，不妨留言給我安利安利。

/*
** 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 `<li>${str}</li>`;
  });

  return `<ul>${items.join('')}</ul>`;
}

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

const containerName = 'parksben-is-just-one-single-doge';
const htmlStr = `<style>
  .${containerName} {
    width: 90%;
    max-width: 640px;
    box-sizing: border-box;
    margin: 1em auto;
    padding: 2em;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
    font: 14px/18px Helvetica, Arial, "Microsoft Yahei", Verdana, sans-serif;
    --content-color: #fff;
  }

  .${containerName} ul.tree {
    color: var(--content-color);
  }

  .${containerName} ul.tree,
  .${containerName} ul.tree ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .${containerName} ul.tree ul {
    margin-left: 1em;
  }

  .${containerName} ul.tree li {
    margin: 0;
    padding: 0 1em;
    line-height: 2em;
    font-weight: bold;
    position: relative;
  }

  .${containerName} ul.tree li::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: var(--content-color);
    position: absolute;
    left: 0;
    top: 0;
  }

  .${containerName} ul.tree li::after {
    content: '';
    display: block;
    width: 0.8em;
    height: 1px;
    background: var(--content-color);
    position: absolute;
    left: 0;
    top: 0.9em;
  }

  .${containerName} ul.tree li:last-child::before {
    height: 1em;
    bottom: 1em;
  }
</style>
<div class="${containerName}">
  <ul class="tree">${treeStr.slice(4)}
</div>
`;

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

侷限性

這樣作解決了一部分問題，至少往本身的博客文章裏放問題不大。

但還有很大的侷限性，好比對於掘金、簡書、知乎這樣的第三方頁面，直接插 CSS 很難徹底覆蓋已有的樣式，工做也很繁瑣。

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

後續

最後再廢話一兩句，最近有不少東西感受能夠分享出來，好比下一篇文章我準備寫寫 webGL 的一些內容，或者地圖開發方面的內容。先在這裏挖個坑，好逼迫一下本身。

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