[小清新] 一段 node 脚本生成风格优雅的 Directory Tree

栏目: CSS · 发布时间: 6年前

内容简介:如果你常常在博客中插入一些文件目录结构,不免会有碰到诸如此类的问题:由于但不限于上述种种原因,自己写了一个小脚本,可以顺利地实现目录树的生成。结果被输出为html片段,通过附加CSS样式,效果远好于前几种的方式。脚本输出的 html 长这样:
[小清新] 一段 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>
复制代码

显示的效果长这样(清新脱俗的黑白配、肥而不腻的字形,要多优雅有多风骚):

[小清新] 一段 node 脚本生成风格优雅的 Directory Tree

源码奉上

很简单的东西,这里直接直接献上代码吧。如果确实能给大家带来一丢丢的效率,我就很欣慰了,或者大家有什么更优雅而高效的东东,不妨留言给我安利安利。

/*
** 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 的一些内容,或者地图开发方面的内容。先在这里挖个坑,好逼迫一下自己。

好长一段时间没写文章了,加班、通宵什么的都不是借口,大好时光可不能就此荒废。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

GOOGLE HACKS

GOOGLE HACKS

Rael Dornfest、Tara Calishain / 卞军、谢伟华、朱炜 / 电子工业 / 2006-1 / 49.00元

GOOGLE HACKS巧妙使用网络搜索的技巧和工具(第二版)一起来看看 《GOOGLE HACKS》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码