【JA魔改秘笈】还卡在前端的坑吗?教你如何第一次做Landing Page就上手!!

前情提要:最近的JDStore大赛,很多同学都因为卡在前端而导致作品难产,因此我跟Anndo搜集了一些购物网站常用的板块,希望能帮大家解决首页Landing Page架设的问题,将更多时间拿来增加后端功能,或是继续美化页面

  • 6/5更新:增加商品详情页面,微调商品列表页面

Github:https://github.com/xbearx1987/jdstore-theme-simple
Demo:https://jdstore-theme-simple.herokuapp.com


GEM

bootstrap-sass (*Bootstrap 模版)
font-awesome-rails (*Fontawesome 图标)

HTML + SCSS + JS

app/assets/stylesheets/application.scss (*存放所有CSS代码)
app/assets/javascripts/application.js (*存放所有JS代码)
app/views/welcome/index.html.erb (*网站首页)
app/views/common/_navbar.html.erb (*网站导览)
app/views/common/_footer.html.erb (*网站页脚)
app/views/products/index.html.erb (*产品列表)
app/views/products/show.html.erb (*产品详情)

功能 / 板块

  • Navbar
  • Navbar 特效(*滚动页面调整Navbar背景颜色)
  • Footer
  • 首页-广告轮播
  • 首页-品牌故事
  • 首页-服务优势
  • 首页-商品分类
  • 首页-推荐商品
  • 首页-用户反馈
  • 首页-合作品牌
  • 首页-立即购买
  • 产品列表
  • 产品详情

可以看得出来,这边只使用了最少的GEM及页面,保证在引用板块时,不会出现问题,且容易修改


好啦!开始进入正题!

如何快速引用板块?

Step1. 找到想要引用的板块

Step2. 到app/views/welcome/index.html.erb里找到对应的HTML代码,并复制到你的index页面里

  • 每一个板块都是用<section></section>包住
  • 请记住这个板块的Class名称,此范例为show-box

Step3. 到app/assets/stylesheets/application.scss里找到对应的CSS代码,并复制到你的application.scss页面里

  • 可直接搜索CSS名称,此范例为show-box,里面会包含所有此<section>所用到的CSS

大功告成!!!

  • 只要再依据你的个人需求,调整颜色、大小、间隔等样式即可完成具有个人特色的页面啦
  • 记得将图片更换,并且使用对应的格式,也可以参考范例中的图片尺寸做裁切


※ 如果想要引用其他板块,或是navbar、footer的样式,可以直接到对应的文档里复制HTML,并在app/assets/stylesheets/application.scss里找到对应的CSS即可 ※

修改过程中遇到任何问题,都可以在Slack:xbearx1987、anndo-2找到我或Anndo,或在下方留言,我们会尽快回复

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus