魔改大赛这样开始比较快

写在前面

魔改开始还差两天的时候,我正式开始,并决定先去研究一下论坛上与logdown上上一届排前几名的选手的前进轨迹,与心得文章,看能不能找出什么端倪。

完美主义病
其中发现提到次数最多的是,大多数人都多少有完美主义病,总是翻翻翻,看各种好看的网页,看各种好看的html模版,却就是迟迟不开始,这里有一个致命的影响,就是,这会导致你网站上线时间比较滞后,错过了前期比较好的曝光时间。

营销
营销这个词,出现的概率仅次于完美主义和曝光,大概的意思就是,你需要不断的去营销自己,但鉴于这是一个处于学习搭建网站的比赛,那其实,真正的点应该是,别人到你这来,是否可以学到东西,从而避免踩坑。

我上来的选择是先,把搜索功能,做出来,找到一片logdown,发现,并不复杂,跟着做就基本实现了

于是我开始,寻找各种美丽的模版,找找找着了一大堆

开始的时候浏览器跟我一样的有木有,有的点个赞,哈哈哈

通过之前的调查,大概就是这么几种起步的方式:

  • 一个是在youtbe上找一个rails相关的leadingpage,然后跟着做
  • 一种是找到真实的网站原样拷贝(如拷贝无印良品)
  • 一种是跟着w3c的template跟着做一个基本的,然后再慢慢改
  • 一种是下载bootstrap上的template然后慢慢进行更改
  • 一种是直接花钱买高品质的网站成品(如淘宝,或国外更多,没钱,更何况买的意义不大)
  • 一种是跟着教程里的一步一步的做,在教程的基础上进行更改就好了

我想说,准备魔改的第一天,我把这几种方法全部都尝试了一遍,不是说我时间多,闲的慌,想都试一试,
而是在这每一种方法里我都会各种吃屎,而且不是小屎,是各种大屎。

一、吃屎阶段(大家不用吃,看我吃就好)

Shit 1:

我选择从 Bootstrap官方模版开始,选择了这个风格的模版


于是,把模版下载下来,打开文件夹一看


这都是什么鬼?然后我就去找了几片技术博客,大概看了一下,需要把里面的js与css以及html内容拷贝到你自己的项目中去
折腾了半天,终于出了效果。
但接下来就傻眼了,我根本就不知道自己刚才干了什么....
我也不知道我接下来该,干什么....
于是,又继续浏览网页,浏览那些精美LandingPage,仿佛自己已经做出来了.....

Shit 2

我想到之前看到有个学姐通过原样复制无印良品作为开始,于是乎,我也开始尝试尝试
兴致勃勃的选中了一个漂亮的招聘网站,有件inspect,查看代码


可是,然后呢?然后该怎么做呢?于是呼,又跑去看了一下学姐的博客,
先右键查看源代码,然后把源代码全都复制到welcom/index.html.erb里去
然后再在网页上右键inspect,点上方的sources

把里面的css,js,image都拷贝到自己的项目里
一般拷贝到自己项目里,还涉及到需要把拷贝来的html代码里的图片地址代码做相应的更改(这个全栈的教程里有讲)
然后发现有些字体不行,有些效果没有显示出来...等等,各种莫名其妙的问题
花了老半天,终于折腾差不多了,又回到了同一个问题:
So what?What’s next?接下来该做什么?
回去翻一番html代码,又看着一大堆新加入的css,js,
甚至html里也有js,css,代码,这特么不应该写到assets里的js与css文件夹里的文件中去吗?什么情况?
整个人,于是又陷入一头雾水的情景中去…
于是,又打开浏览器,开始漫无目的的浏览....

Shit 3

这个时候,我想起来,还有一个学姐的做法是,从youtbe上找一个landingpage的视频,跟着做,于是,我就打开youtube,找了一个15分钟制作landingpage的视频,跟着做
做啊做啊做,做到一半就卡住了,那个视频是3年前的,有很多步骤我在操作的时候,会有不同的结果....
再次晕倒....
不过视频至少看完了,知道,其实播主,实际上就是从bootstrap template上移植一个到项目中来

于是,我就又找了一个博客,内容也是做的类似的事情,就跟着做,于是做完了

于是,我又陷入沉思....
同样的问题:接下来该怎么办....

Shit 4 5 6 7 ….

过程中我还尝试过跟着W3C的template做....
跟着其他学长的博客做....
跟着全栈课程做....
都是吃的同样的屎....

所有的Shit都是同样的问题:复制粘贴 -> 然后该怎么办?

二、如何快速起步魔改 解决方案

接下来,我说一下,我探索出来的魔改快速上手之路

大前提:之前的自学HTML自学CSS两份作业有认真做,这个很重要

(1)理解两个知识点:

魔改LandingPage的制作实际上就是在做:

做网页元素的排布
调节间距 margin padding
调节字体样式/大小/颜色 font-size font-family color
调节背景颜色/图片 background background-color
要不要换行
一行元素宽度占比多少

HTML,CSS,JS之间的关系就是:

HTML进行初步的布局,主要代码
CSS就是通过HTML里的class或id标签来对其样子进行更改(颜色,大小,背景,间距…)
JS就是通过一些触发条件来动态替换/改变CSS给HTML配置的值

(2)阅读ihower的一篇博文

你需要大概了解项目里assets文件到底在做什么:

去读这篇博文:ihower Assets Pipeline
带着目的去读,只需要知道,application.js 和 application.scss下面这两段代码在干嘛,后面的工作就会进行的很顺利了

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap/alert
//= require bootstrap/dropdown
//= require_tree .

application.scss

 *= require_tree .

 *= require_self

 *= require font-awesome

 *= require twitter/bootstrap

 */



@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

我的理解:

  • application.js里像//=require jquery这样的代码就是 在很多template的html代码中下面这样的代码
    <!-- jQuery -->
    <script src="vendor/jquery/jquery.js"></script>
    
    
    

    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>



    只不过,网上的template一般是放在html中,我们一般会以在application.js以//=require jquery这样的形式添加到项目中去。
    • application.scss也是同理
    • 同时还要注意ihower博文对require_tree的解释,这个也有助于你对模版的使用

    (3)正式开始

    1.起点

    其实,走了这么一遭以后,我最终发现最简洁明了的起点就是 Nic老师的直播中用的demo
    跟着Nic老师从Step1做到Step4,这里有一个最大的好处就是
    对页面的整体有一个非常清晰的划分

    总共就分四大块,navbar, head, content,foot
    而每一块的css代码也与之对应
    navbar 对应的是 navbar的css
    welcome/index第一段 对应的是 box的css
    后面三个section 对应的是 content的css
    foot 对应的是 foot的css

    注意这个思路非常重要,在后面的整个过程中,我们尽量不要像我之前的Shit1~Shit4一样,去快速的把整个模版搬过来
    因为,这有一个致命的缺点就是,在你啥也不知道的情况下,一下塞给你如此庞大的代码,你是难以把html与相应的css,js对应过气来的,这样在后面进行改动的过程就中就会跟我一样掉进一个大屎坑:不知道接下来该怎么改…

    所以,这个就是我选择Nic老师的直播Demo作为开始的原因,代码简单,清晰,且花一点时间,看一看四块对应的css代码,其实相当好懂,无非就是改颜色,大小,间距什么的。

    注意:
    Nic老师的直播Demo确实比教程里的好很多,但不代表不需要做教程,教程里的内容是告诉你,一些常见的自定义的方法,不过,在做完教程的内容后,我还是建议使用git,checkout回原点,单开一个分支,使用Nic老师的直播Demo作为魔改的开始。

    2.自定义

    接下来:
    就是自定义的节奏了,主要两种方式

    方式一:

    CodePen(不得不说陈慧娟学姐推荐的好)
    这个网站相当不错,你可以一个功能一个功能的找代码,
    比如你要自定义导航栏,你就搜索navbar,选择一个你喜欢的,点开后就是下面这样

    这里的巨大好处就是,一般情况下不会出现大段的代码,同时你也很明确的能知道,这一段HTML代码,与这一段CSS代码和JS代码是相关的,你要做的就是把HTML代码拷贝到你项目中导航栏的位置(如_navbar.html.erb),而CSS代码拷贝到application.css中去,JS代码拷贝到application.js中去
    这里要注意:

    1. 当你把这三段代码拷贝到项目文件中去的时候,
      • 应该分别打上同样的注释文字,这样将来查找和更改,会相当方便
      • 应该分别打上同样的注释文字,这样将来查找和更改,会相当方便
      • 应该分别打上同样的注释文字,这样将来查找和更改,会相当方便 (重要的事情说三遍)
    2. 当你从网站上拷贝了多个不同的功能后,会出现一种情况就是,因为每个功能的作者不同,其CSS的某些标签名会重名,从而导致一些冲突,如果发现某两个功能的代码冲突,记得查看一下,也许是重名造成的。
    方式二:

    在你熟悉了第一种以后,就可以开始尝试,从真实的网站上,抓一些功能下来了

    1. 当在inspect界面找到你想的代码块的时候,在其上点击鼠标右键,并选择红色框框的Edit as HTML可以得到类似下面这样的内容
      复制并粘贴到你自己的项目中去
    2. 注意上面的大图,右边都是css代码 首先你要注意紫色框框蓝色框框
      • 紫色框框下面对应的css代码就是最直接影响你复制的这段html代码排布的css代码,一般情况下,我们都住要关注,并拷贝这一部分的内容
      • 蓝色框框写的是inherited from xxx 代表它的样式还受到把其外侧(也就是把其包在里面)的其他标签元素配置的影响,可以适当的拷贝一些,开始的时候,如果弄不清楚,甚至可以展示忽略,有问题了再慢慢调

    注意:
    这里,我要强调的一点是,绝对不要大段的从上面拷贝代码
    一定要一个功能一个功能的来拷贝,目的是把html与其相应的css与js代码对应起来,并加上必要的注释
    这一点相当重要,目的就是减少你的认知负担,以免像我一样各种蒙圈

    你只要按着这个逻辑,一小段,一小段的进行功能或区域的叠加,一点一点的把Nic老师的内容替换掉,且依旧像Nic老师的Demo一样保持分块明确,就不会有什么大的问题,顶多就是吃一些小屎,琢磨琢磨就能解决,至少还能有点头绪。
    切记,不要贪多,想一口吃一个大胖子,屎一样的教训啊....

    总结一下

    避免完美主义 + 适当的营销 + 一个功能一功能的做,不要大段拷贝代码

    安利

    好了,该安利一下我自己的产品了,两天时间,做了一个首页,还是感觉相当满意的。
    动态navbar


    轮播

    内嵌视频

    点我->点我->点我->面向女程序员的招聘网站<-点我<-点我<-点我

    欢迎大家围观,吐槽,并提出宝贵意见,哈哈

    点我->点我->点我->面向女程序员的招聘网站<-点我<-点我<-点我