Implementing Partials, Pagination, and Font Awesome Icons into a Rails 5 Application
This is going to be a fast moving guide and we're going to implement some helpful features for our blog. In this lesson we'll walk through how to organize our code into additional partials, implement Font Awesome icons, and integrate Kaminari based pagination.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

This should be a fun and pretty fast moving guide. We are close to finishing up our blog and I want to knock as many things out in this guide as possible. I want to take a comprehensive look at everything and the layout and see how we can refactor it and use partials. I want to add some icon links here like the GitHub logo, Twitter or Facebook logo linking to those spots instead of these hard-coded links.

I want to implement the footer, and lastly I want to implement pagination. I'm not sure if we're going to be able to get through all of that in this one guide but we're going to try our best, as soon as that's done I think our blog will be ready for action.

Switch into sublime text and I'm going to open our blog.html.erb file. This is going to need a little bit of work, notice how we still have a few things such as the blog header which is our masthead and then our footer, this code doesn't really belong in the layout file. This needs to be in its own partial. Let's create both of those.

I'm going to say shared, new file and this is going to be _blog_masthead.html.erb and another one _blog_footer.html.erb .

We have to pull all of this out for the header and copy this, now paste it in and we have this properly indented. 

<div class="blog-header">
  <div class="container">
    <h1 class="blog-title">My Blog</h1>
    <p class="lead blog-description">An example blog template built with Bootstrap.</p>
    <%= link_to 'Write a New Blog', new_blog_path if logged_in?(:site_admin) %>
  </div>
</div>

Let's call the partial (in blog.html.erb) <%= render 'shared/blog_masthead' %>.

Now let's grab our footer and paste it into the blog_footer.html.erb.

Let's call the partial (in blog.html.erb) <%= render 'shared/blog_footer' %>.

<footer class="blog-footer">
  <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo
  <a/>,</p>
  <p>
    <a href="#">Back to top</a>
  </p>
</footer>

Hit refresh, you'll see that that is good to go.

Next, our _blog_sidebar.html.erb needs to get cleaned up. I want to pull out this entire sidebar module for archives, I don't think we need that.

large

For elsewhere, remember how we want to integrate these links. There is a very cool way to do that, I'm going to type in font awesome rails in rubygems.org and make sure we're picking out the right version. Copy this, switch back and open up our gemfile and paste it in.

Come into the terminal, runbundle Install. Now we're going to be able to use these cool icons. We need to bring in font awesome into any files that we want to use it in. Open up our blog.scss file, put @import "font-awesome"; inside of here.

We can actually calls these using helper methods. In the _blog_sidebar.html.erb file, update it to look like this

large

Also, update the blogs.scss file to include .social-links

medium

Hit refresh, now you can see our links. I think this gives a much more professional look and feel.

We've implemented font awesome, we have taken everything into a partial. Now let's clean up our footer.

Coming back to sublime open _blog_footer.html.erb and update it to this

large

We have these links, these are not functional. We're going to integrate the Kaminari gem, I will put a link to my written guide. Pagination is the feature on a site that allows you to have a large number of collection items broken into smaller sections and that you can click on links and go from page to page. To install the gem, get the up to date version from rubygems.orb and put it into your gemfile.

In the terminal, run bundle install .

In the blog_controller.rb, update the index action to this:

large

Let's open up our blog index page (index.html.erb) and update it to this:

large

This should now be working perfectly.

Now with that in place as you can tell that's pretty ugly but thankfully Kim Inari has some cool view helpers. In the terminal run rails generate kaminari:views github

Type rails s and we'll see if this is what we're looking for. Hit refresh, we have some better-looking icons.

  • git status
  • git add .
  • git commit -m "Implemented partials for blog, font awesome and pagination"
  • git push origin design

In the next guide we are going to start implementing our portfolio.

Resources