In this lesson, we're going to walk through how to customize the show page. There are a few changes that I want to make and obviously cleaning this part up putting that title in its own heading and then implementing a little bit better navigation are going to be some of those things. Additionally, we need to put this sidebar in its own partial and customize. We don't need archives or those kinds of things. You can put any links that you want in there but for right now I want to just make it nice and straightforward.

Let's perform a refactor, Go to shared and create a new file _blog_sidebar.html.erb now let's take out all of this sidebar content. Lets make a call to the partial now before I forget <%= render 'shared/blog_sidebar %>. Coming to the _blog_sidebar partial, I'll paste that in and now save it

Come back to the site, hit refresh and everything should be identical.

Update the show.html.erb file to this:

<div class="col-sm-8 blog-main">

  <h2><%= @blog.title %></h2>

  <%= link_to 'Edit', edit_blog_path(@blog) if logged_in?(:site_admin) %>

  <p>
    <%= @blog.body%>
  </p>

</div>

Hit refresh, you can see that that is working.

Let's move on to the editing blog. Open the edit.html.erb file and update it to this:

<div class="col-sm-8 blog-main">

  <h1>Editing Blog</h1>

  <%= render 'form', blog: @blog %>

  <%= link_to 'Show', @blog %>
  <%= link_to 'Back', blogs_path %>

</div>

Hit save and then refresh, that already is cleaning that up.

Now open the new.html.erb file and update it to this:

<div class="col-sm-8 blog-main">
  <h1>New Blog</h1>

  <%= render 'form', blog: @blog %>

  <%= link_to 'Back', blogs_path %>
</div>

Click save and refresh, you can see that this looks the exact same.

Let's take a look at _form.html.erb and update it to this:

Hit refresh and this is all working.

If I hit submit, it still gives us our little error messages. If I press on a new one, click edit, you can see that this has everything right here. One little thing you may notice is that this has our content but it starts off with a really small box and so that's not exactly what we're looking for. Let's go and let's take a look. I think we can pass in a custom set of rows to our text area. Let's see if this works, it looks like 15 is what I want. Hit save, you may notice that it didn't capture the fact that I put different paragraphs in there. That's because this is going to get rendered as plain text and no formatting is going to be available. Later on, I'll show you how you can integrate markdown and have a full markdown parser right here and that's going to make for much better-looking blog posts.

In the next guide, we're going to clean up our sidebar, add in our content links and then customize the footer.

• git status
• git add .
• git commit -m "Integrated styles for blog pages"
• git push origin design

Resources

• Source Code