如何三天内魔改出一个酷炫网站

2017-02-26 本文已影响327人戊辰壬辰

这几天陆续收到全栈营同学的微信，询问我的参赛作品是如何在短时间内实现诸多特效的。说实话，对于接触编程才两个月的我来说，被问到这样的问题真是一百头草泥马在心中狂奔。因为在我看来，我只不过是抱着勇于试错的心态玩了一次拼图游戏。至于这样的手法入不入流，就留给大家评说吧。

1 做好后端是前提

万丈高楼平地起，房子好不好就看地基稳不稳。

对于一个网站而言，后端就是整个网站的地基。所以，我用最快的速度根据教程先把购物网站后端的代码全部写好，确保符合设计之初的User Story。每一个角色的功能确保都能实现。并且debug好后确保可以顺利部署到heroku。这样才能保证接下去你有信心和余力去写前端代码。

2 前端是门脸，第一印象很重要

想摸着石头过河，首先得河里有石头。

作为主程，在写前端代码时，我需要做出一个决策。是"写"还是“抄”。

我和我的队友都是零基础，如果是靠一点一点写，我觉得挑战很大。学习不能用未知解释未知，因为作为小白，当时我甚至连CSS、Javacript的代码都看不懂。而且自认也没有设计的天赋，让我平地起高楼，做梦吧。

另一条路——抄。可是，问题又来了。从哪儿抄？怎么抄？又是两眼一抹黑。好在，春节时听笑来老师讲了一堂课，主旨大意就是——学编程，coding只占20%。更多需要的是学习的能力，不要做伸手党，遇到问题问Google。

于是，我花了4天的时间把w3school上关于HTML，CSS，JAVASCRIPT的教程撸了一遍。像小孩子看图识字一样，一段代码一段代码看。刚开始时的感觉，是那些代码认识我，我不认识它们，更多靠的是图形记忆。

其实做这一步工作，我目的很明确，就是让它们在我大脑里先形成短时记忆，看不懂也没关系。

3 选模版就是选一件符合你气质的衣服

突击完课程，就开始了海选模版的工作。看了很多大型网站的设计风格，看着都挺喜欢，用了Google浏览器为开发者设计的inspect功能。看完又懵逼了，简直就是天书。

后来听Xdite老师说市面上很多程序猿也都是靠抄代码成长起来的，在编程界，“抄”并不丢人。于是开始找一些素材网站，我和我的队友每人各挑3幅作品，最终敲定我选出的一副摄影题材的素材逼格较高，于是就是它了。

解压完，生成四个文件夹，分别是css，fonts，images，js，另外还有一个html文件。直觉告诉我此时我应该去双击那个html的文件。果然没有令我失望，打开网页那一刹那让我心中一阵狂喜，重要的是它是会动的，网页上那些按钮和绚烂的特效都是活的，这不正是我期盼已久的效果嘛。

不过，看看也就算了，现在它跟你没半毛钱关系。

既然它和其他文件打包在一起，这里面应该是藏着某着联系。说得更朴实一些，那些文件夹里的文件拼凑在一起最终的结果应该就是这个网页呈现的效果。

想着想着，不知为何我又开始兴奋起来了，突然想起《夺宝奇兵》、《古墓丽影》那些奇幻探险类电影。主人公不也是偶然得到了一张藏宝图或是一把神秘的钥匙，从而开始一段神奇之旅么。我现在的感觉就是这样。

4 物以类聚

既然这套模版的作者已经将文件分好类，说明它们是要放到不同的地方，实现不同的功能的。于是在购物网站的专案中找对应的文件夹，一句葛优的电影台词提醒了我：

奔驰的标总不能安在宝马头上吧。

于是，就把css文件夹中的所有文件全都拖进了stytlesheets的文件夹中，把所有js文件夹中的内容全都拖进了javascripts文件夹中。理由是在这两个文件夹内分别有最多的同一后缀名的文件，他们应该是一伙的。

嫁完大女儿javascripts和二女儿css，还剩下三姑娘fonts和四姑娘images这两个女儿和html这个儿子。于是在专案JDstore的下一级目录public文件夹中顺利找到同名文件夹fonts和images，继续许配给他们。

最后的剩男html怎么处理？好像有很多文件的后缀都是html结尾的。这个时候就不是直接拖动了，而要移花接木，把压缩包内的html代码复制黏贴到Atom中的某个html页面。一看内容比较丰富，适合做欢迎页，于是就将app/view/welcome下的index.html.erb中的内容“Hello World！”果断替换掉了。

此时，终于让每个文件都找到了各自的归属，我突然有种如释重负的感觉。就好像你拿着那把神秘的钥匙终于站在了宝库门口，只差最后一个开锁的动作，就能见证奇迹的诞生。

在终端输入完rails s，抓着鼠标的那只手谨慎地点击了一下刷新页面。天哪——果然让我失望了，什么都没有发生。欢迎页面奇丑无比，横七竖八的图片夹杂着一堆僵尸按钮，和那个原始的html文件相比，颜值不是差一两个等级。

不过，让我看到一点希望的是，总体看上去基本的骨架保持的完好，只是一只手长，一条腿短，或者有半边脸不会笑而已。怎么办？整容呗。

5 “整容”有捷径可循

请注意，如果你能耐心读到此处，以下说的这些文字，绝对是干货。

最看似不合理的地方往往蕴藏着转机。

debug一定要先搞定那些能让你立刻获得成就感的问题。而某个功能的“集体阵亡”这种事是最不合理的。

于是，就按图索骥地找原因呗。很快就发现那些html中引用的css的文件路径都来自同一父目录：css/，而我本地的文件路径明明是assets/，这么想逻辑是合理的，但需要验证我的猜想。于是就将其中一个css的路径改成了href="assets/bootstrap.min.css"，再次刷新页面，还是没啥变化。

这一次，我没有放弃，我相信我的判断是对的。于是，大胆地按下“command+F”开启查找替换功能，将所有文件引用路径是ccs开头的全部替换成assets，不仅把css的换掉了，连引用js文件的路径也一并替换掉。

再次刷新页面，天哪——奇迹还是没有发生。只不过，这一次一部分功能活过来了，一部分依然是僵尸状态。

这个时候，我的想法和刚才又有所不同了，毕竟用了同一种方法处理，有些功能实现了，有些没有，那应该去别处找答案了。