【JA魔改秘笈】实用秘笈列表

这里收集了 Jimmy 王品睿 & Anndo 柯禹安 精心制作的各种教程,与经验及心得分享。希望能对正在学习编程、协作或Ruby on Rails的你有些许的帮助 :D

一、前端模版 / 视觉设计

提供清晰易懂的 HTML/CSS 代码、贴心注解,帮你轻松搞定门面 Landing Page 以及购物网站的两大主页。


二、功能实作

让 J&A 手把手带你实作前后端功能,让你的网站里外兼具。

前端
後端


三、实用汇整

内心深处对 Heroku 部署充满恐惧?上线后怎么生成数据?现在这个烦恼都不是烦恼了。


四、心得分享

分工分得好,协作没烦恼。从挑主题、功能,到协作分工,通通讲给你听。

【JA魔改秘笈】一首歌的时间教会你做社群分享功能

本篇文章将介绍如何在一首歌的时间内快速新增社群分享功能,包含Facebook、Twitter、Google+、微博、微信等(如果做不完肯定是你选的歌太短了!


让我们开始吧!

Part 1 - 新增GEM social-share-button

https://github.com/huacnlee/social-share-button

Gemfile
+ gem 'social-share-button'
  • $ bundle instal
  • $ rails s 重启服务器
  • $ rails g social_share_button:install


Part 2 - 导入CSS及Javascript

app/assets/stylesheets/application.scss
+ *= require social-share-button
app/assets/javascripts/application.js
+ //= require social-share-button
+ //= require social-share-button/wechat


Part 3 - 新增分享按钮(范例为products#show页面)

app/views/products/show.html.erb
+ <%= social_share_button_tag(@product.name, :allow_sites => %w(facebook twitter google_plus wechat weibo), :image => @product_images.first.image.main.url , desc: @product.description) %>

@product.name 设定分享标题
:allow_sites => %w(facebook twitter google_plus wechat weibo) 设定社群分享按钮,可自行调整(这个Gem共有17个社群网站分享功能)
:image => @product_images.first.image.main.url 设定分享图片
desc: @product.description 设定分享内容

大功告成!!

这样就完成了,是不是非常简单阿!?

※ 社群分享按钮基本上都是抓当前网址的信息,因此本机无法测试,请先确认分享按钮可正常弹出后,推上Heroku查看分享内容

※ 目前完成了最「基本」的分享功能,每个社群分享的效果、设定皆不相同,可依照需求自行调整,也可以参考github上的官方文档 social-share-button






Plus - 优化分享效果(选修)

做完上面社群分享功能,有些人可能会对分享的页面不太满意,这是因为在分享时很多资讯(标题、描述、图片等)会存放在<head></head>里,上面的Gem虽然可以快速实现功能,但部分的效果不够完整

因此我们可以另外设置,进一步优化分享效果(下面以Facebook、Google+为例子)

Part 1 - 新增GEM seo_helper

https://github.com/techbang/seo_helper

Gemfile
+ gem 'seo_helper'
  • $ bundle instal
  • $ rails s 重启服务器


Part 2 - 新增config/initializers/seo_helper.rb,加入基础设置

  • touch config/initializers/seo_helper.rb 新增Helper
config/initializers/seo_helper.rb
+ SeoHelper.configure do |config|
+  config.site_name = "J & A SELECT"
+ end
  • config.site_name = "J & A SELECT" 设置网站名称


Part 3 - 在Layout上方<head></head>中加入设置

app/views/layouts/application.html.erb
<head>
- <title>J & A SELECT</title>
+ <%= render_page_title_tag %>
+ <%= render_page_description_meta_tag %>
+ <%= render_page_image_link_tag %>
+ <meta property="og:title"       content="<%= page_title %>"/>
+ <meta property="og:description" content="<%= page_description %>"/>
+ <meta property="og:image"       content="<%= page_image %>"/>

 ...
</head>
  • <title>J & A SELECT</title> 删除原先页面标题设定
  • <%= render_page_title_tag %> 加入页面标题设定
  • <%= render_page_description_meta_tag %> 加入页面描述设定
  • <%= render_page_image_link_tag %> 加入页面图片设定
  • <meta property="og: ... /> 下方三行为Facebook的特殊设定


Part 4 - 在Controller设置内容(范例为show页面)

app/controllers/products_controller.rb
def show
    ...
  
+   set_page_title       @product.name
+   set_page_description @product.description
+   set_page_image       @product.image.thumb.url
end
  • set_page_title @product.name 设定页面标题
  • set_page_description @product.description 设定页面描述
  • set_page_image @product.image.thumb.url 设定页面图片

大功告成!!


※ 这样就完成了进一步的设置,如果你想深入研究,也可以参考github上的官方文档seo_helper

※ 眼尖的同学应该有发现,这个Gem是拿来设计网站SEO的,以后有SEO的相关需求也可以透过上述方法来实现




若有任何问题都可以在下方留言,或在Wechat、Slack上找到我,希望本篇文章对你有帮助 :D

【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,或在下方留言,我们会尽快回复

【JA魔改秘笈】好的策略就是成功的一半

虽然比赛还没结束,但先来分享一下为了这次JD-Store魔改大赛所做的事前准备与策略吧,希望对大家有所帮助。

有些人会问我,为什么我跟Anndo在比赛开始那一刻,就可以丢出一个完成度较高的参赛作品。

时间回到比赛开始前一周(5/10),在XDite老师直播前一天,我们就进行了三小时的线上Meeting,确定了本次参赛的策略,大致可以分成以下三部分。


一、主题

请找自己熟悉的主题,这会让你在写文案或找素材时不会产生太多阻碍(相信很多人都在这里跌过坑,将太多时间花在找资料上,而不是编程)我跟Anndo在讨论之前就先在石墨文档上,将自己有兴趣的主题罗列上去,并且加入一个重要条件,这个主题要能作出好看的网站!(我们都很注重颜值!)也就是主题延伸的风格是双方都喜欢的,这也能减少日后前端设计时,争论的时间。

❖ 因此,我的建议是主题最好是双方都熟悉,且风格明确、素材好获取 ❖


二、功能

确定主题后,我们便设定第一阶段的时间节点,也就是比赛开始前两天(5/20),并依照这Deadline排定Must Have、Should Have、Could Have及Nice to Have四种不同程度的功能。

一开始先头脑风暴,我们共列出了19个功能,这时候不用著急,依照时间限制去排序(设定时间限制非常重要,很多人无法判断轻重缓急,就是没有把时间列入评断标准)。

最后我们的Must Have只有标准的首页、产品、购物、订单功能,加上搜索、用户、品牌、分类等之前做过的功能。也就是我们只优先做自己熟悉的功能,而不是以作出酷炫的功能为前提。(因为我们分工明确,最后又多做了四个Should Have的功能)

❖ 因此,我的建议是功能以做过且熟悉,或者是教程上的功能优先实现,不要死嗑在前端或排版上 ❖


三、分工

目前比较少听到分工打架的状况,但我也来分享一下我们的分工情形。我们是将前后端分开做,我去做首页的设计及排版(包含navbar及footer),Anndo负责所有后端MVC的建立。

等到首页完成后,我便将之前所建立好的MVC毛胚屋去做页面调整(毛胚指的是先将页面功能及动作按钮放上,不需要管设计与排版),Anndo一样继续功能开发。基本上我们在协作过程中,不会两人同时修改同个功能,或彼此冲突的部分,这也是让效率提升的重要因素。

❖ 因此,我的建议是功能分工最好明确、不互相冲突,刚开始不用担心练不到前端或后端,可以中期再调整分工 ❖


本篇写得较无章法,只是想稍微分享下心得,还请各位见谅,如果想要了解更多细节,也可以联系我们

最后分享一些我们使用的工具,仅供参考:

石墨文档:线上文档协作工具,可多人同时修改,将讨论结果记录在文档上,方便日后沟通及检视

Tower:线上任务协作工具,将待办任务、进行中任务、已完成任务呈现在表单中,让项目进度更清晰

Zoom:线上会议工具,可共享屏幕,增加讨论效率

微信:这就不用介绍了吧...XD,用于日常沟通、即时反馈


最后的最后,XDite老师写的教程基本上具备了以上所有要点 商店创意大赛参赛手册,真的不知道如何下手,遵循此手册准没错!

如果有任何任务拆解、项目协作或其他的问题都可以在下方留言,一起讨论 :D

【JA魔改秘笈】十分钟搞定产品图片动态显示



让我们开始吧!

Part 1 - 设定图片排列的HTML

app/views/products/show.html.erb
<!-- 显示第一章商品图片 - 使用 main 尺寸大圖 -->
<div class="col-md-12">
    <%= image_tag(@product_images.first.image.main.url, class: 'main-image thumbnail') %>
</div>

<!-- 显示所有商品图片 - 使用 other 尺寸小圖 -->
<% @product_images.each_with_index do |p| %>
    <div class="col-md-2 col-sm-4 col-xs-6 image-box">
        <%= image_tag(p.image.other.url, class: 'list-image thumbnail') %>
    </div>
<% end %>

<%= image_tag(@product_images.first.image.main.url) %>指的是抓取第一张图片(.first.image),及调用main这尺寸的图片(.main.url)
<%= image_tag(p.image.other.url) %>指的是调用other这尺寸的图片(.other.url)
col-md-2 col-sm-4 col-xs-6这样设定可以在不同尺寸的屏幕中,将每一列的图片数量作调整,让网站更美观

❖ 调用不同的图片尺寸,是为了抓取不同比例的图片,也是为了加快读取页面的速度 ❖

Part 2 - 在CSS设定图片属性,及选定后的属性

app/assets/stylesheets/application.scss
.main-image {
  width: 100%;
  margin-bottom: 10px;
}

.list-image {
    width: 100%;
}

.list-image-active {
    box-shadow: 1.5px 1.5px 1.5px #666;
}

.list-image-active这个属性是为了图片选择后,会在图片外框加上阴影,方便辨别

Part 3 - 在Javascript设定图片的触发行为

app/assets/javascripts/application.js
$(document).on('mouseover', '.list-image', function () {
  var src_other = $(this).attr('src') //抓取小图图片路径
  var src_main = src_other.toString().replace("other", "main") //更改小图图片路径

  $('.main-image').attr('src', src_main) //变更大图图片路径

  $('.list-image').removeClass('list-image-active') //其他小图移除图片阴影
  $(this).addClass('list-image-active') //当前小图新增图片阴影
})

$(document).on('mouseover', '.list-image', function () {})指的是当鼠标移至CSS属性为list-image的物件时,所触发的行为
$(this).attr('src')指的是抓取当前物件(在这范例中也就是鼠标滑过的物件)中的src内容(在这指的是图片路径)
src_other.toString().replace("other", "main")指的是将刚刚抓取的路径,从.image.other.url改为.image.main.url
$('.main-image').attr('src', src_main)指的是将大图的图片路径,更改为刚刚抓取并变更过的大图路径

❖ 因此这段Javascript的意思就是,当鼠标移至小图时,会抓取小图的图片路径,并存入将此图的大图路径存入src_main,并将原先大图的路径更改掉,完成换图的动作;同时将小图新增list-image-active这个CSS属性,方便辨别。 ❖

大功告成!!


Tips

在Javascript有许多种抓取到物件的方法,例如('#main-image')是抓取ID为main-image的单一物件;('.main-image')是抓取CSS为main-image的所有物件。可以依造需求去设定及抓取物件,更多的用法这边就暂不介绍,等待各位自行挖掘。


这功能会稍微复杂一点,里面涉及到图片上传时的一些设定,不过只要调整下就能实现功能了!看完范例后,也可以依自己的喜好去调整不同的效果。

如果有任何问题都可以在下方留言哦 :D

【JA魔改秘笈】利用Javascript快速实现回到页面顶端功能

本篇文章将介绍如何用Javascript快速实现回到页面顶端(Go to top)功能


让我们开始吧!

Part 1 - 在页面中加入回到顶端按钮

app/views/welcome/index.html.erb
  <div class="goTop">
    <span class="fa fa-chevron-up"></span>
  </div>

记得要帮div设定ID,之后Javascript调用时会用到

Part 2 - 在CSS设定按钮属性

app/assets/stylesheets/application.scss
.goTop {
    height: 35px;
    width: 35px;
    top: 80%;
    right: 35px;
    position: fixed;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #666;

    span {
      color: #000;
      font-size: 20px;
            position: absolute;
      top: 7px;
      left: 8px;
    }
  }

  .goTop:hover {
    background-color: #f0f0f0;

    span{
      color: #eb5424;
    }
  }

.goTop:hover指的是当鼠标移至按钮时,按钮所产生的CSS变化

❖ 以上CSS只是我网站中按钮的属性,可自行修改 ❖

Part 3 - 在Javascript设定按钮的触发行为

app/assets/javascripts/application.js
$(window).scroll(function () {
  if ($(this).scrollTop() > 2500) {
    $(".goTop").fadeIn(100);
  } else {
    $(".goTop").fadeOut(200);
  }

    $(".goTop").click(
    function() {
      $('html,body').scrollTop(0);
    });
})

$(window).scroll(function () {})指的是当屏幕滚动时,所触发的功能
if ($(this).scrollTop() > 2500)指的是当屏幕滚动到2500px的高度时,所触发的行为(因为我只设定在首页触发按钮,并且希望使用者将内容看完时才触发行为,所以数值较大)
$(".goTop").fadeIn(100)指的是按钮淡入显示的时间,100为0.1秒
$(".goTop").fadeOut(200)指的是按钮淡出显示的时间,200为0.2秒
$(".goTop").click 指的是当点击按钮时,所触发的动作
$('html,body').animate({scrollTop: 0}, 700) 指的是将屏幕上移至高度为0的地方,700为上移速度

❖ 因此这段Javascript的意思就是,当屏幕向下滚动至2500px的高度时,将以0.1秒的速度淡入显示按钮;点击按钮后,将缓慢地将屏幕上移至高度为0的地方,并同时将按钮以0.2秒的速度淡出显示。 ❖

大功告成!!


实现这功能是不是很简单呢?大家可依造自己的需求调整速度及显示的位置。

如果有任何疑问可以在下方将问题留言哦 :D

【JA魔改秘笈】简单三步骤让navbar实现动态效果

本篇文章将介绍如何用三个步骤,实现navbar动态效果(会使用到Javascript哦)



让我们开始吧!

Part 1 - 设定navbar的ID

app/views/common/_navbar.html.erb
<div class="navbar navbar-default navbar-fixed-top" id="navbar" role="navigation">

  (中略)

</div>

设定ID的目的为等下调用Javascript时,可以透过ID找到navbar,並并进行操作。此处将navbar的ID设定为navbar,可自行随需求修改。

Part 2 - 在CSS设定navbar预设属性,及变动后的属性

app/assets/stylesheets/application.scss
.navbar-default {
  background: rgba(0,0,0,0.3);

  &.show_bgcolor {
    background-color: #02061A;
  }
}

background: rgba(0,0,0,0.3);指的是将navbar背景预设为rgb(0,0,0)(黑色)的背景颜色,0.3则为透明度(可设定的值为0~1,0为完全透明、1为不透明)
&.show_bgcolor设定的是待会Javascript调用时的设定,此范例将背景设定为深蓝色

Part 3 - 在Javascript设定navbar的触发行为

app/assets/javascripts/application.js
$(window).scroll(function () {
    if ($(this).scrollTop() > 125) {
        $('#navbar').addClass('show_bgcolor') 
    } else {
        $('#navbar').removeClass('show_bgcolor')
    }
})

$(window).scroll(function () {})指的是当屏幕滚动时,所触发的功能
if ($(this).scrollTop() > 125)指的是当屏幕滚动到125px的高度时,所触发的行为
$('#navbar').addClass('show_bgcolor') 指的是抓取ID为navbar的物件,并加入名为show_bgcolor的CSS属性(也就是Part1为什么要在HTML里面设定ID的原因,这样Javascript才能抓取到对应的物件)

❖ 因此这段Javascript的意思就是,当屏幕向下滚动至125px的高度时,navbar加入show_bgcolor这个CSS属性,将背景色设定为深蓝色;向上滚动到125px高度之上时,移除show_bgcolor这个CSS属性,将背景色改回半透明。 ❖

大功告成!!


实现这功能是不是很简单呢?如果有其他想做的效果也可以依此举一反三,调整CSS或JS来实现。

在Javascript中有许多的行为可以调用,.scroll只是其中一种,各位有兴趣都可以自行钻研,或是将疑问在下方留言 :D

让网站更好看!Bootstrap及素材网站分享!

最近发现很多人不知道怎么调整版面,导致网站卡在反覆修改,无法往下继续写功能的窘境。因此本文会介绍Bootstrap基本用法,及分享如何找到让网站更好看的素材,希望能解决大家的问题。


Bootstrap

Bootstrap为教程推荐的HTML+CSS+JavaScript框架,意思就是说,如果你没有打算实现特别酷炫的功能,基本上你想做的所有效果,都可以透过修改此框架的CSS或JS来实现,因此我建议大家花点时间去看官方文档,了解Bootstrap能做到什么事情,保证有所收获。

❖ Boostrap中文网,整个网站快速浏览,只需要不到两个小时的时间,你只要先知道「输入什么,能输出什么」就够了,之后有需要调用的功能,再回来查询网站该如何操作即可,不用想著把所有内容背下来 ❖


Bootstrap中文网 - 实例精选

http://v3.bootcss.com/getting-started/#examples-framework
这部分将Bootstrap最常见的用法都列出来,只要简单的点进去看一下效果就好,不用急著理解是怎么做到,之后的文档都会讲解,如果有看到喜欢的、想放在网站上的功能,可以先做个笔记备注起来


Bootstrap中文网 - 全局 CSS 样式

http://v3.bootcss.com/css
关于Bootstrap所有CSS样式的设置都在这里,只要快速看过,了解有什么样式可以透过修改CSS实现,不用全部记起来

❖ 不过以下三个部分,希望大家多花点时间去看,很多人都是跌在这些坑里 ❖

  • 栅格系统:非常重要!非常重要!非常重要!很多人排版问题都出于此,这部分介绍了行与列的关系,及各种运用,一定要看
  • 排版:常用的关于文字的设定,都在这里,不论是标题、内文、特殊用法,花点时间看准没错
  • 按钮:按钮是大家常做变化的部分,这里介绍了一些基本的用法,或许你想要的功能不需要透过修改CSS即可实现


Bootstrap中文网 - 组件

http://v3.bootcss.com/components
组件包含了字体图标、下拉菜单、按钮组、导航、警告框、弹出框等更多功能。有没有看到之前掉坑的部分阿?这部分也是先看过就好,知道哪些组件其实是透过Bootstrap实现,之后有需要再回来查询

❖ 以下几个部分,是最常见的问题,可以重点看一下 ❖

  • 下拉菜单:下拉选单的基本用法及变化
  • 按钮组:如何实现将按钮分组显示,整合在一起(这问题最近常被问到)
  • 导航条:上方导航条的基本设置(也是常见问题)
  • 缩略图:图片展示的进阶用法,Bootstrap内建就有了


Bootstrap中文网 - JavaScript 插件

http://v3.bootcss.com/javascript
Javascript是让网站页面更酷炫的东西,但前期建议大家先不用花太多时间去研究,Bootstrap内建的JS插件已经很够用了,可以先从了解、用好这些JS语法开始

❖ 这边教大家一个小技巧,以往我们调用Bootstrap的JS插件时,都是在application.js一个一个导入,实际上可以一次导入所有插件,需要时直接在页面上调用即可,作法如下 ❖

app/assets/javascripts/application.js
- //= require bootstrap/alert
- //= require bootstrap/dropdown
+ //= require bootstrap




Code School - Blasting Off with Bootstrap(修选:5.5hr)

Blasting Off with Bootstrap
如果上述文档看完,你还想是摸不著头绪,可以上Code School上学习Bootsrap的教程,会教你Bootstrap的基本用法,大约需要5.5个小时(这课程我没有上过,不过许多人都推荐,因此分享出来)

※ Bootstrap就介绍到这边,要学会更好的运用,绝对是不断地练习,但有基础知识也是很重要的,所以今天才推荐大家至少看完官方文档,再开始实战练习 ※


Google Chrome

Google Chrome - 开发者工具

这边额外介绍一个在调适CSS时非常实用的技能,看完之后你就会知道为什么这么多人都是使用Google Chrome来检查HTML页面

Step 1. 首先对页面点击右键,点击最下方的「检查」

Step 2. 这时候会出现开发者工具

可以看到左方区块显示的是页面的HTML,右侧则显示物件的CSS样式

Step 3. 点击工具左上角的箭头,并选到想要调适的物件上

点击会发现移到页面上时,页面会变成被框住的物件,并显示基本样式资讯

Step 4. 修改物件的CSS

选到物件后,会发现右方列出所有属于该物件的CSS样式,此时可以随意调整,你会发现页面上的物件会立即根据你调整的样式发生变化,甚至可以将CSS样式取消(调整样式前方的勾选选项)

Step 5. 将调适好的CSS,直接输入到项目中对应的CSS样式

※ 此工具在调整页面时十分好用,本意就是让你可以快速修改并即时显示 ※

上述只是介绍了最基本的用法,你甚至能找出为什么物件套用了你的属性,却没有变化,可能是因为被父属性覆盖了。

其馀进阶功能就不多做介绍,可以先将基本用法熟悉运用。


网站素材

Icon 图标

Icon的运用在网站中非常广泛,这里只介绍三个最常用的Icon素材网站,其实我觉得这三个网站就能满足90%对Icon的需求

Font Awesome:小型/纯色/基本样式的Icon在这都能找到,一般使用这个网站

http://fontawesome.io


Flaticon:这网站能满足你大部分的需求,建议买会员(USD$9.99/M),会节省你非常多找素材网站的时间

http://www.flaticon.com


Iconfont 阿里巴巴矢量圖库:国外素材网站常常找不到Wechat、微博等Icon,此时才会来这找

http://www.iconfont.cn




Color 配色

网站配色不知道怎么选?对色彩敏感度不佳?赶快试试以下几个网站吧!

Colordot:非常好用的网站,随著鼠标在画面上移动,会不断变更色彩,找到喜欢的颜色后,只要点击左键就会储存,并且可以储存多种颜色,来调整网站主要配色

https://color.hailpixel.com


BrandColor:列出常见国外企业品牌配色,不知道该怎么选择网站配色时,可以直接参考

https://brandcolors.net


Material:网页标准色网站,里面有基本配色,可以依造色调挑选

https://www.materialui.co/colors


Nippon Colors:好看的网站,内为各种日本传统色,点击喜欢的颜色后,背景色会自动调整,方便检视

http://nipponcolors.com/#shironezumi 日本传统色




Pohto 图片

图片素材网站太多了,以下只介绍常用的几个,StockSnap、Pexels、Picjumbo使用起来差不多,图片皆为免费使用;

StockSnap

https://stocksnap.io


Pexels

https://www.pexels.com


Picjumbo

https://picjumbo.com


Gratisography:风格强烈的图片网站

http://www.gratisography.com


Shutterstock:个人认为最好的付费图片素材网站,不过费用不便宜

http://www.shutterstock.com




Vector 矢量图

Freepik:其实网站里不止矢量图,还有图片及Icon,不过个人最常拿来搜索矢量图素材

http://www.freepik.com




Template 模版

Bootsnipp:基于Bootstrap的模版,内有许多制作精良的模版素材,都有HTML/CSS/Javascript可直接套用

http://bootsnipp.com


Codepen:非常酷炫的模版网站,也都有HTML/CSS/Javascript可直接套用

https://codepen.io





Bootstrap Theme(选修)

Bootwatch:一个基于Bootstrap的开源项目,上面有许多不同风格的主题,如果想要在原先的Bootstrap上做点变化,又不想套用复杂的模版,以下会教大家如何操作

http://bootswatch.com

Step 1. 先找到喜欢的主题 -> 点击主题名称下拉选单 -> 对bootstrap.css选项点击右键,选择另存连结

Step 2. 将bootstrap.css档案更名为bootstrap.scss

Step 3. 将bootstrap.scss 放到项目中的 app/assets/stylesheets 文件夹

大功告成!

❖ 如果想要变更主题,只要再次如法炮制即可 ❖

Simple_form进阶用法:优化栏位设置(包含Model设定)

本篇文章将介绍Simple_form的更多用法,关于栏位大家使用得非常多,因此如何调整f.input成了常见到的问题,以下会分享一些最常用的调整方法,让页面上的栏位更美观、更实用。(因为栏位限制与Model息息相关,文章中也会介绍Model中的设定)

❖ 本文使用新生大学全栈营job-listing教程内容为架构 ❖


让我们开始吧!

Part 1 - f.input常见用法介绍

我们以app/views/admin/jobs/new.html.erb做示范(为了示范日期格式,增加了created_at栏位)

app/views/admin/jobs/new.html.erb
<%= simple_form_for [:admin,@job] do |f| %>
    <div class="form-job">
      <%= f.input :title, label: false, error: '请输入职位名称', hint: '请输入完整职位名称', placeholder: '职位名称', required: true, autofocus: true, input_html: { class: "form-control"} %>
      <%= f.input :description, label: '职位介绍' %>
      <%= f.input :wage_lower_bound, as: :string %>
      <%= f.input :wage_upper_bound %>
      <%= f.input :contact_email, input_html: { maxlength: 16 } %>
      <%= f.input :created_at, label: '职位建立时间', start_year: 2010, end_year: Date.today.year %>
      <%= f.input :is_hidden, :label => false, as: :radio_buttons, collection:  [['显示', false], ['隐藏', true]] %>
    <div class="form-actions text-center">
      <%= f.submit "Submit", disable_with: "Submiting...", class: "btn btn-primary"%>
    </div>
  <% end %>

1、label:栏位上方文字,如果设定为false则隐藏文字
2-1、placeholder:栏位内文字
2-2、autofocus:设置为true,则进入该页面时,会自动focus在此栏位上(可以看到栏位外框变色,及栏位内出现游标)
3、hint:栏位下方文字
4-1、as: :radio_buttons:用单选按钮方式呈现(多选为as: :check_boxes)
4-2、collection:选项内容,用[]框住,如果要设置选项代表的值,可用['#name','#value'],例如[['显示', false], ['隐藏', true]]

5-1、start_year: 起始年份,可直接输入年份(栏位格式必须为date)
5-2、end_year: 结束年份,Date.today.year为限制到当前年份(栏位格式必须为date)
❖ 预设为当前年分正负五年 ❖

6-1、error:错误提示
6-2、required:设置为true,则此栏位必须得输入
7、as: :string,强制设定栏位为字串型态(原本integer栏位无法输入文字)
8-1、input_html:栏位CSS格式, { class: "#css样式"}
8-2、input_html:如果设置为input_html: { maxlength: 16 }则限制栏位最多只能输入16个字符

以上就是最常见的几种用法,有没有发现栏位限制、错误提示也可以直接在f.input里设置呢?但为了美观及统一管理,下面会介绍在Model里设置的方法

如果实在无法理解上面各种设定,最简单的方法就是复制一份到文档中,实际应用马上就会明白了!


Part 2 - 在Model设定栏位限制

❖ 在开始前请先把刚刚那行练习用的<%= f.input :created_at, label: '职位建立时间', start_year: 2010, end_year: Date.today.year %>删除,才不会影响到操作 ❖

app/models/job.rb
validates :title, presence: { message: "请填写职位名称" }
validates :description, presence: { message: "请填写职位描述" }
validates :wage_lower_bound, presence: { message: "请填写最低薪水" }
validates :wage_upper_bound, presence: { message: "请填写最高薪水" }
validates :wage_lower_bound, numericality: { less_than: :wage_upper_bound, message: "薪水下限不能高于薪水上限" }
validates :wage_upper_bound, numericality: { greater_than: 0, message: "最小薪水必须大于零" }
validates :contact_email, presence: { message: "请填写联系用的邮箱" }
validates_format_of :contact_email, :with => /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\Z/i , message: "请输入正确的邮箱格式"

1-1、presence:限制栏位必须输入

1-2、message:可直接将错误提示写在message里
例如presence: { message: "请填写职位名称" }

2-1、numericality:限制栏位内容必须为数字

2-2、less_than:栏位数值必须小于另一个栏位
例如less_than: :wage_upper_bound

2-3、greater_than:栏位数字必须大于设定

例如greater_than: 0

3、validates_format_of :contact_email, :with => /\A([^@\s]+)@((?:[-a-z0-9]+.)+[a-z]{2,})\Z/i
这段代码的意思为contact_email必须符合E-mail格式

至于为什么每个栏位要分开写呢?这部分是个人习惯,整体浏览起来对每个栏位的设定比较清楚,大家可以依造自己需求调整



关于Simple_form就介绍到这边

强烈建议大家先去看Simple_form的官方文档,https://github.com/plataformatec/simple_form,里面有非常详细的介绍,先快速扫过即可,不用去背里面的代码,日后需要调用时在回来查询。





有任何问题或建议都可以留言给我,或在微信、Slack上找到我 :D

没想到这篇文章比想像中还要难写阿!!!不是很好解释这些用法,还是建议大家实际运用,才会有深刻的体会,如有不足敬请见谅。 (´ー`)

Devise进阶用法:修改注册页面、新增栏位

本篇文章将介绍如何在Devise中,于注册时直接新增User的姓名及管理者权限

❖ 本文使用新生大学全栈营job-listing教程内容为架构 ❖


让我们开始吧!

Part 1 - 新增Devise相关页面,以便后续调整注册单页

Step 1. 确认当前页面

❖ 刚做完教程的同学们,没有意外的话,你的画面应该长得跟下图差不多 ❖

基础页面:

登录页面:

Step 2. 新增Devise相关Views页面

输入rails g devise:views,可以看到系统生成了许多与User相关的页面

❖ 刚安装完Devise的gem时,是没有相关的Views提供修改的 ❖

❖ 页面都放在app/views/devise里面 ❖


Part 2 - 新增User栏位

Step 1. 在User Model中新增姓名栏位

输入rails g migration add_name_to_user

Step 2. 在新增的magraion档案里加入以下代码并储存
add_column :users, :name, :string

Step 3. 执行db:migrate

输入rake db:migrate

※ 现在已经成功在User Model里新增name这个栏位,格式为string ※


Part 3 - 修改注册页面

Step 1. 新增姓名及管理者权限栏位
app/views/devise/registrations/new.html.erb
<%= f.input :name, required: true %>
<%= f.input :is_admin, as: :radio_buttons, collection:  [['一般用户', false], ['企业用户', true]], required: true %>

❖ 此时注册页面会跟下图一样 ❖


*Part 4. 实作新增功能

Step 1. 新增文件夹

输入mkdir app/controllers/users

Step 2. 新增文档

输入touch app/controllers/users/registrations_controller.rb

❖ 此文档为用来控制发生注册动作时的Controller ❖

*Step 3. 修改注册功能(将原先Devise的注册功能调整为我们想要的)
app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  before_filter :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:is_admin,:name])
  end
end

*Step 4. 修改routes代码(设定注册时,使用上面修改的Controller)
config/routes.rb
- devise_for :users
+ devise_for :users, :controllers => { :registrations => "users/registrations" }

※ 注册功能修改成功,注册时可同时新增姓名及管理者权限 ※


Part 5 - 调整navbar导览栏

Step 1. 修改欢迎文字,从邮箱改为姓名
app/views/common/_navbar.html.erb
- Hi!, <%= current_user.email %>
+ Hi!, <%= current_user.name %>

Step 2. 此时可以尝试注册新用户,输入姓名及选择企业用户(管理者权限)

Step3. 可以看到导航栏正常显示用户姓名,下单选单里也有Admin Panel功能

大功告成!!








Plus - 优化Devise设定(选修)

当然Devise里可以修改的地方远不止上方介绍那些

可以看到之前生成的文件夹里有很多档案,透过修改HTML&CSS,可以呈现出不同的样貌,先介绍三个最常用的,其他的可自行摸索
- app/views/devise/registrations/new.html.erb 注册页面
- app/views/devise/sessions/new.html.erb 登录页面
- app/views/devise/passwords/new.html.erb 忘记密码页面


几乎每个页面下方都有这行代码
<%= render "devise/shared/links" %>

这是什么意思呢?代表他们都调用了这文档
app/views/devise/shared/_links.html.erb

透过修改文档内link_to后方的文字,就可修改如下方所示位置的文字


如果你的网站是中文语系,当然会想把提示语也更改为中文,这时候可以到这里修改,config/locales/devise.en.yml

下方红框内的文字,就是有关登录的提示,例如登录成功、登出成功等
同理,如果你想修改其他关于帐户操作时的提示,可以依需求调整,这里就不多做介绍




最后,当然你也可以针对注册/登录页面的CSS做优化,让整个网站看起来更美观


Tips

如果你在使用Devise上遇到任何问题,建议你先上
https://github.com/plataformatec/devise查看官方文档,里面会有详细的介绍及应用。不要被里面的英文所吓到,通常你都可以用关键字查到想要了解的用法,或者快速地看一下整篇文档,通常在实作代码下方都会范例可以参考,如果有解决不了的问题再Google。

一点心得与大家分享。





有任何问题或建议都可以留言给我,或在微信、Slack上找到我 :D