almost 4 years ago

系統:

Mac OS X Yosemite 10.10.1
Ruby 2.1.5
Rails 4.1.8

設定步驟如下

1. 使用 scaffold 新增

$ rails g scaffold Post user:belongs_to title:string permalink:string content:text
$ rake db:migrate

2. assets 設定

$ mv app/assets/stylesheets/posts.css.scss app/assets/stylesheets/_posts.css.scss

app/assets/stylesheets/application.css.scss

...
@import 'posts';
...

3. controller 設定

app/controllers/posts_controller.rb 中新增使用者登入驗證。

class PostsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create, :edit, :update, :destroy]
  before_action :set_post, only: [:show, :edit, :update, :destroy]
  ...
  def edit
    authenticate_owner!(@post)
  end

  def create
    @post = current_user.posts.build(post_params)
    @post.save
    respond_with(@post)
  end

  def update
    authenticate_owner!(@post)
    @post.update(post_params)
    respond_with(@post)
  end
  ...
  private
    ...
    def authenticate_owner!(post)
      redirect_to root_path if post.user != current_user
    end

4. model 設定

app/models/user.rb

  ...
  has_many :posts, dependent: :destroy
  ...

5. view 設定

使用 haml
$ mv app/views/posts/index.html.erb app/views/posts/index.html.haml
$ mv app/views/posts/new.html.erb app/views/posts/new.html.haml
$ mv app/views/posts/show.html.erb app/views/posts/show.html.haml
$ mv app/views/posts/edit.html.erb app/views/posts/edit.html.haml
$ mv app/views/posts/_form.html.erb app/views/posts/_form.html.haml
套用 bootstrap theme

app/views/posts/index.html.haml

.container
  .toolbar
    = html_button t(:new_post), icon: 'plus', 'data-toggle' => 'modal', 'data-target' => '#new_post_modal'
    = render 'new_post_modal', post: @post
  ul.posts-list.list-unstyled
    - @posts.each do |post|
      li.post.clearfix
        .post-timestamp.col-md-2
          = l post.created_at, format: :long
        .post-title.col-md-8= post.title
        .post-actions.col-md-2
          =' link_button t(:show_post), url: post, color: 'link', size: 'xs'
          - if post.editable_by? current_user
            .btn-group
              button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false"
                =' t :actions
                span.caret
              ul.dropdown-menu.dropdown-menu-right role="menu"
                li
                  = link_to edit_post_path(post)
                    =' fa_icon('edit fw')
                    = t :edit_post
                li
                  = link_to post, method: 'delete', data: {confirm: t(:are_you_sure)}
                    =' fa_icon('trash fw')
                    = t :delete_post

app/views/posts/new.html.haml

.container
  .page-header
    %h3
      = t :new_post
  = render partial: 'form', locals: { post: @post }

app/views/posts/edit.html.haml

.container
  .page-header
    %h3
      = t :edit_post
  = render partial: 'form', locals: { post: @post }

app/views/posts/_form.html.haml

= bootstrap_form_for post, layout: :horizontal, label_col: 'col-sm-2', control_col: 'col-sm-6' do |f|
  = f.text_field :title, placeholder: 'Post Title', autofocus: true
  = f.text_field :permalink, placeholder: 'Post Permalink'
  = f.text_area :content, control_col: 'col-sm-8', rows: '10'
  = f.form_group do
    = f.primary t(:submit)
    = link_to t(:cancel), posts_path, class: 'btn btn-default'

app/views/posts/show.html.haml

.container
  .page-header
    %h3
      = @post.title
      %small= @post.permalink
  .content
    = simple_format @post.content
  %p
    = @post.user.username
    = t :post_at
    = timeago @post.created_at
  .options
    = link_button t(:back), url: posts_path, color: 'warning'

timeago 設定請看 Use jQuery plugin - Timeago

5. locales 設定

config/locales/model.post.zh-TW.yml

zh-TW:
  posts: '文章'
  posts_manage: '文章管理'
  posts_list: '文章列表'
  show_post: '檢視文章'
  new_post: '新增文章'
  edit_post: '修改文章'
  delete_post: '刪除文章'
  post_at: '發表於'
  helpers:
    label:
      post:
        title: '標題'
        permalink: '靜態連結'
        content: '內容'

config/locales/base.zh-TW.yml

zh-TW:
  # form
  submit: '送出'
  create: '新增'
  update: '更新'
  cancel: '取消'
  back: '返回'

  #crud
  actions: '選項'
  are_you_sure: '確定執行此動作?'
← Use fancyBox 2 in Ruby on Rails 從 rvm 轉換到 rbenv →
 
comments powered by Disqus