【小清新】一个node脚本生成优雅的目录树
一些烦恼如果经常在博客中插入一些文件目录结构，难免会遇到这样的问题：如果用图片输出，感觉不够和谐，特别是在移动端环境下，图片内容可能会被多次转码缩放，影响阅读体验。如果使用文本输出，在不同的设备和编辑器下，内容布局很容易混淆。有一天，当你想修改内容或结构时，一个字符一个字符地编辑简直令人抓狂。使用文本输出的另一个缺点是不同的设备和平台具有不同的字体大小、字体和字符样式。可能你写的时候觉得它已经足够美了，但是在观众的设备里却像是飞来飞去的一段。解决方案由于但不限于上述原因，我自己写了一个小脚本，可以成功实现目录树的生成。结果以html片段的形式输出，效果比之前加css样式的方法好多了。脚本输出的html长这样：app.cssapp.js组件- Bar3d
- index.js
- 着色器
- style.css
- utils
/li> - 按钮
- DragImg
- PlayStarBySvg
- PlayStarInCanvas
utils
显示出来的效果是这样的（清新脱俗的黑白,fat不油腻的字形，优雅风骚）：源码提供了很简单的东西，这里直接上代码。如果真的能给你带来一点点效率，我很欣慰，或者你有更优雅高效的东西，不妨留言安利安利。/***文件：`makeTree.js`**用法：`nodemakeTree.js./`*/constfs=require('fs');constpath=require('path');functionmakeHtml(dir){constitems=fs.readdirSync(dir).map(file=>{letstr=file;constfilePath=path.join(dir,file);if(fs.lstatSync(filePath).isDirectory()){str+=makeHtml(filePath);}return`
${str}`;});返回`
`;}constdirToShow=process.argv[2]||'./';consttreeStr=makeHtml(path.join(__dirname,dirToShow.trim()));constcontainerName='parksben-is-just-one-single-doge';consthtmlStr=`
${treeStr.slice(4)} `;fs.writeFileSync(path.join(__dirname,'树.html'),htmlStr,'utf8');console.log('==>Done:目录树保存到./tree.html');Limitations这样解决了一部分问题，至少对我自己的博文来说问题不大，但是还是有很大的局限性。比如对于掘金、简书、知乎等第三方页面，直接插入CSS很难完全覆盖已有的样式，工作也很繁琐。我个人想到的另一种方式是将内容输出为svg，这样读者可以直接复制上面的文字，同时保证样式和内容的正确性。我打算下一步搞定这个，如果可行就把代码push。最后，后续再说废话。最近感觉有很多东西可以分享。比如下一篇我打算写一些关于webGL的内容，或者说地图开发的内容。先在这里挖个坑，好勉强自己。好久没写文章了。加班和熬夜都不是借口。好时光不能白白浪费。
