Backend Training: Show Page

🔖 : yaml Next, let's add a show page for the post.

Create file app/views/posts/show.slim and add..

# app/views/posts/show.slim
section.jumbotron[id='hero']
  .container
    .row.text-center
      .col-md-12
        h1= t('.title')

section[id='posts']
  .container
    .row
      .col-md-8
        .row
          .col-md-12
            ol.breadcrumb
              li= link_to t('posts.index.title'), posts_path
              li.active= @post.title
          .col-md-12
            = holder_tag '800x400', 'Sample Image', '', class: 'img-responsive'
            h2= @post.title
            p.text-muted
              = t('.published_date', date: @post.published_date)
              |  | 
              = t('.categories', categories: @post.category_list)
            article
              = @post.content
      .col-md-4
        = render 'aside'

Add translation

# config/locales/en.yml
en:
  .......

  posts:
    .......
    show:
      title: News
      published_date: 'Published on: %{date}'
      categories: 'Categories: %{categories}'

Here we see that both index and show page has the title News so we can extract title from the yml and change it to..

# config/locales/en.yml
en:
  .....

  posts:
    shared: &shared
      title: News
    index:
      <<: *shared
    aside:
      archives:
        title: Archives
        past: All Past News
      categories:
        title: Categories
        all: Uncategorised
    show:
      <<: *shared
      published_date: 'Published on: %{date}'
      categories: 'Categories: %{categories}'

Next, let's refined the app/views/posts/_post.slim to reflect the design, and add the links to the show page.

# app/views/posts/_post.slim
.col-sm-6.col-md-4
  .thumbnail
    = holder_tag '300x150', 'Sample Image', '', class: 'img-responsive'
    .caption
      h4= link_to post.title, post
      p.text-muted= post.category_list
      br/
      p= post.content
      br/
      p.text-muted= post.published_date

Refresh the browser Command ⌘+r, and you should see..

Click on any of the posts and go to the show page, and you should see...

Let's commit and move on...

$ git add -A
$ git commit -m 'Post show page'

↪️ Next Section: Decorator