其实最近在琢磨一件小事，是俺们熊总交代的任务。
上周二或者周三的下午，熊总让我带U盘去他哪里一趟，copy48个文档，是24个建筑材料及设备知识的word和pdf文档各一份。给我的任务是将内容发布至员工论坛～并给我建议，可以按照邓总提到的转换成mht文件直接上传。天知道，我用mht上传就没成功过……原因可能和兼容性相关，这个……总之，从一开始我就没打算走这条路了。尤其是当我用WPS转换单个网页文件的时候后缀是.mhtml，感觉不会再爱了。
终于，我还是打算重走老路，按我以往的方法：创建个div，内嵌css语句，写好代码后直接copy进论坛里。这样既不会因为几百种材料和两倍于材料种类的图片进行手工上传及排版而手残，又可以自己设计下背景色啊，字体大小啊，图片位置啊啥的。感觉蛮不错的呢～
按照这个方法，几百种材料，我只要写一个模板出来，其他的直接照抄，填空就好啦～然而，现实是我在图片排版方面就遇到了坑。
代码是这样滴
效果是这样滴
我想要的效果是两张图片都左下角对齐，而不是默认的左上角。这个问题，我思考良久，跟同事们请教，也木有解决。其实按照同事给的建议“插入表格，表格里放图片”“设定图片尺寸”“再嵌套个小的div，里边放图片”等等……要不我觉得麻烦，要不就是--不会用⊙﹏⊙b汗……所以这个问题，至今没解决。不过鉴于图片本身尺寸不大，我就不再关心这个问题啦……
接下来遇到的是颜色滴问题，每种材料是一个小天地呀，我当然要好好经营啦～这个小天地分五块：标题、图片、名词解释、用途、代表公司。按我的想法是每一块都设置成不同的底色，这样好进行区分嘛……然而女菩萨觉得这太花了，乔二也觉得不靠谱。好吧，我不能代表用户的体验，这么花花绿绿的确实也不是很好……于是，更改方案：标题、图片使用一个底色，另外三块文字部分使用一个底色。不得不说，清爽了很多～
然后呢，是文字，文字离边框太近（贴着呢），不好看！这个解决起来还好说吧，设置内缩进啊啥的，因为分不清内缩进、外缩进，搞得调整这一项就花费了好久，伤心～然后呢，又想给每一个小区域最下边加一条虚线，好区分这是不同的材料种类啦～按照网上的教程整了半天，根本调整不出我想要的效果～烦死啦～当然，最终捣鼓出一条死难看的线，还是放弃吧。底色已经足够大家做识别了，再说还有标题呢。
最后，考虑到分类实在太多，共24大类、400余种材料设备等。我决定，给每个小类加上ID，就加在标题里，然后在每个大类的开头放一个小区域（姑且叫菜单吧），填写可以直接跳到指定的小类处的链接，然后在每种材料解释的结尾放入一个链接，跳到开头～太棒了，这样就可以跳来跳去，不用自己老翻页了，手都酸了好嘛～
菜单区域就整个放进一个ul，li标签里放a标签。然后，根据教学视频中学来的一招，把链接的底线去掉，li的显示方式设置为diplay:inline-block;然后给链接区域设置底色，给链接文字设置颜色，好看多了，颜色不好看再改嘛～反正就改几个字母嘛……
本来是想着在代表公司这一项的最后一行的右侧贴边框放置回到菜单的按钮。结果怎么设置都不行，紧接着最后一个字放也不是不可以，却并不好看。于是决定就加个div，放到div里好了，然后原本设计的两种底色又变了，给这个回到顶部链接加个背景色……
到这里，基本可以说设计已经完成了。但是……事情远远没有结束。使用word文档另存为.html文件的方式可以取出文档中的图片，可是这些个图片的重命名是个问题，因为他们的名字中文部分后边衔接的数字是不连续的，相差几十到几百，没有规律（当然，在文中出现的顺序倒是没错）。而且png格式占用存储空间比较大，尝试将32.5kb的png转化成jpg文件只有6kb（虽然清晰度有一点点降低），必须要进行格式转换！
先来解决格式的问题，系统的convert程序我玩不转，为了效率，百度之，搜了个“converseen”。这个软件还是灰常不错滴，GUI图形模式，简单易上手，很轻松就可以快速把图片转换成jpg格式啦。
再来解决重命名的问题，本来是打算用系统的rename来解决，奈何正则表达式学的实在渣，根本就下不去手啊！无奈还是找百度，根据度娘指示，我安装了一个叫“GPRename”的批量重命名工具。遇到的第一个问题是不会用，四种模式：改变大小写、插入删除、替换去掉、数字。经过我不懈的尝试，才整明白四种模式是单独工作的，每次只运行选中的那个。剩下的一个问题就是排序。GPRename的数字排序是按照相同位置（从文件名第一个字开始比较）的数字值大小来排序。而正确的排序是按照系统那种方式（按照整个数字字符串的大小来排序）。痛苦的事情来了，很多文件夹中都会有6、16、234、4333几种数字后缀。我得把6前边加上3个0,16前边加2个0,234前边加1个0。这样才能让软件正确识别文件的顺序。好让我可以按照自己想要的效果来重命名。
整个图片处理过程分三步：doc另存为html，取出所有图片；converseen转换格式；GPRename修改文件名。
下面才是要愁的，一个个填空文字要填>450*4次，图片要插入>450*2次。想一想，光这些个东西要整2000多次！如果没有更好的方法，会很惨的。不过，还好俺学习了《快乐的sublime编辑器》，知道这个工具很强大。探索解决方法的过程中无意看到一篇文章:http://blog.jobbole.com/82527/说的是16个作者常用的sublime快捷键，注释和反注释肯定有用。批量插入顺序数字更有用，这个是我要的～～alt+f3选中所有匹配项，这简直是帮了大忙了，以前我只知道用ctrl+d可以连续选中下一个下一个，可这也太累了。还有用标签包裹选中内容，都很有用。当然，还有暂时用不到的内容就先不管了，没这时间耗。
之前在视频中看到的使用emmet插件可以提高很多效率，虽然没有看文档，但是经过不断的尝试（很痛苦），我还是摸索了点结果出来～
ul.menu#0>(li>a)*
ul>(li.block>(.forum_block_img>(.subtitle#$)(.img1>img)(.img2>img))(.forum_block_trans)(.forum_block_usefor>span.add_b)(.forum_block_represent>span.add_b)(.top>a))*
这两段代码，直接在*后边加上数字然后点tab键，就可以瞬间生成下边的结果（以3示例）
是不是很好玩啊～
然后配合alt+f3选择全部匹配项这个功能，就可以很快把一个文档整好啦。前提是文档是标准的，然而，由pdf取下的文字（莫名其妙的WPS只能复制下第一行文字）排版是这个样的：
段落间插几行不一定的于是，目前最费力的就是给这些文字排版……排版成我要的格式
必须要是这个样子滴
虽然花费时间也不少，可是毕竟要比之前轻松多了，胜利就在眼前，大家提前看下效果吧～
小清新有木有～
其实吧，虽然历经艰险终于能给领导一个交代了，但可改进的地方太多了。但是呢，又限于个人水平有心无力。不说了，加油学习，做更好的自己～愿有朝一日能在前端做到想做什么效果就可以实现什么效果～
网友评论