全栈工程师成长记

编程重新定义人生

忘掉你所知道的一切吧 第十五周周记

周一、写页面

技巧:修改页面内容显示宽度
在 bootstrap 中,如果想要全屏展示页面内容, 使用 .container-fluid class,居中显示使用.container class。

通常页面内容宽度在 960px 到 1280px 左右,如果导航栏使用 .container-fluid class ,则在浏览器显示宽度超过页面内容宽度(比如前面说的 1280px) 之后,导航栏的内容会被拉伸到和浏览器窗口同样的宽度,就会变得和页面内容不对齐,因此可以根据页面内容的样式改用 .container 或者重新给导航栏定义一个适合宽度的 class。

说到导航栏,如果给导航栏使用 .navbar-default class,默认的颜色是 #f8f8f8 ,把 #f8f8f8 换成自己想要的颜色值,就可以给导航栏“变脸”了,如果要把它变成透明色,改为 transparent即可 :

.navbar-default {
    background-color: transparent;
}

又,假设在网页的顶部设置了大面积的背景图,想要让导航栏和这个背景图融为一体,最简单的实现方法是将整个 navbar 的代码都移动(或者通过 renden 的方式)到这个背景图的 div 里即可。

周二、写页面

技巧:消除图片排列间距
症状:水平排列图片的时候,默认会出现一个空白间距,如果不想要这个间距的话,使用图片本身的 margin 是不行的,哪怕负数也不起作用。那该如何去除呢?


解法:假设将这些图片排在一个 div 里,设置一个 class,代码如下:

.no-spacing {
  letter-spacing: -8px;
}

然后在图片的父级 div 使用上面的 .no-spacing class 即可。

效果:

参考及延伸阅读:如何解决inline-block元素的空白间距

周三、写页面

技巧:将 CarrierWave 上传的图片按比例裁切

CarrierWave 配置文件默认的图片裁切方式是 resize_to_fit ,只需改为 resize_to_fill 即可将图片按照设定的比例裁剪,这样做虽然会导致部分图片内容被裁掉,但是可以保证图片不会变形。

app/uploaders/image_uploader.rb
  version :thumb do
    process :resize_to_fit => [200, 200]
    process :resize_to_fill => [200, 200]
  end

周四、完善用户资料功能

技巧:套用 layout

  • 针对单个 action:
app/controllers/groups_controller.rb
   def index
     @groups = Group.all
+    render layout: "you_layout"
   end
  • 针对单个 controller:
app/controllers/groups_controller.rb
class GroupsController < ApplicationController
 layout "you_layout"

   def index
     @groups = Group.all
   end
  • 针对一系列的 controller,在父级 controller 使用一次即可:
app/controllers/admin_controller.rb
  class AdminController < ApplicationController
    layout "you_layout"

因为子级 controller 会自动继承 class Admin::UsersController < AdminController

  • 针对 devise ,则需要修改 config/initializers/devise.rb
config/initializers/devise.rb
Devise.setup do |config|
略……
    Rails.application.config.to_prepare do
      Devise::SessionsController.layout "you_layout"
     Devise::RegistrationsController.layout  "you_layout" 
    end
end

周五、文案及细节调整

技巧:给不同的用户身份做不同的登录后重定向
之前有说过如何自定义 devise 的 redirect_to ,现在假设普通用户登录之后给他重定向到用户中心页面,而给管理员重定向到网站后台管理页面,只要在前面的基础上做一小小的判断即可:

app/controllers/registrations_controller.rb
  def after_sign_in_path_for(_user)
    if current_user.is_admin?
      admin_path #管理员路径
    else
      account_path #用户路径
    end
  end

周六、初学 Sketch

跟着一个 Sketch 教程实作,通过重复的小套路,只要两个小时就能做出一个和教程一样的营销邮件,实现了 Sketch 从新手到入门的跨越。

掌握了几个基本工具的使用:

  1. 矩形(调整背景色、边框、大小)
  2. 文本(换字体、大小、颜色)
  3. 分组(组合、排序、命名、重复使用)

同时还学会:

  1. 画布的建立、大小、背景色调整
  2. 参考线的建立、拖动与删除
  3. 建立可复用的符号
  4. 建立可复用的文本样式
  5. 文件的导出

忘掉你所知道的一切吧

“忘掉你所知道的一切吧”——出自《奇异博士》电影台词,这句话是莫度男爵对想要学习魔法却又傲慢的主角斯蒂芬医生说的,翻译成 xdite 老师的话就是“放下你的无效学习方式”,嗯,就是这样。