Adding dynamic page titles to your Rails web application can be a great way to give your page a more professional look. It is actually very easy to change the page title and I'm going to show you how. In this tutorial, I am going to assume that you know how to create a new rails app as well as the basics of using the terminal.
In this tutorial I am using Rails version 7.0.4 and Ruby version 2.7.4.
I've also added this to a Github repository in case you wanted to clone the code and follow along.
After making a new app and navigating into the folder there are several things we need do to do to before we show off our functionality. First we're going to create a scaffold which will generate our controller, model, and views. I've decided to name it Book and give our model a title, author, and pages attributes.
➜ books git:(main) ✗ rails g scaffold Book title author genre pages:integer
If you've done this correctly, you should see the following output in your terminal.
invoke active_record create db/migrate/20221128223152_create_books.rb create app/models/book.rb invoke test_unit create test/models/book_test.rb create test/fixtures/books.yml invoke resource_route route resources :books invoke scaffold_controller create app/controllers/books_controller.rb invoke erb create app/views/books create app/views/books/index.html.erb create app/views/books/edit.html.erb create app/views/books/show.html.erb create app/views/books/new.html.erb create app/views/books/_form.html.erb create app/views/books/_book.html.erb invoke resource_route invoke test_unit create test/controllers/books_controller_test.rb create test/system/books_test.rb invoke helper create app/helpers/books_helper.rb invoke test_unit invoke jbuilder create app/views/books/index.json.jbuilder create app/views/books/show.json.jbuilder create app/views/books/_book.json.jbuilder
Next you're going to want to run your pending migration to create the Books table.
➜ books git:(main) ✗ rails db:migrate == 20221128223152 CreateBooks: migrating ====================================== -- create_table(:books) -> 0.0026s == 20221128223152 CreateBooks: migrated (0.0026s) =============================
Once this is done, we're going to want to create some books for our views as well as change the index page for our website.
First go to your config > routes.rb file and make sure it looks like the routes.rb file below. This is going to tell Rails which route we should take when the URL ends in "/". In this case, our home page will render the app > views > books > index.html.erb file.
Secondly we can edit our db > seeds.rb file with a couple books to populate our page.
#routes.rb Rails.application.routes.draw do root "books#index" resources :books end #seeds.rb Book.create(title: "Fellowship of the Ring", author: "J.R.R. Tolkien", genre: "Fantasy/Adventure", pages: 423) Book.create(title: "Heir to the Empire", author: "Timothy Zahn", genre: "Science Fiction", pages: 528) Book.create(title: "Mistborn: The Final Empire", author: "Brandon Sanderson", genre: "Fantasy", pages: 672)
Now that we've got our routes setup, we can take a look at our views. We'll be looking at two files, app > views > books > index.html.erb and show.html.erb. I've modified the styling slightly and removed the delete, edit and new book links for simplicity. The code below is exactly what I have in each respective view.
<%# index.html.erb %> <p style="color: green"><%= notice %></p> <h2 style="text-align: center">All Books</h2> <div id="books" style="display: flex; flex-direction: column; align-items: center"> <% @books.each do |book| %> <div style="border-style: solid; width: 300px; text-align: center; margin-bottom: 5px"> <%= render book %> <p> <%= link_to "Show this book", book %> </p> </div> <% end %> </div> <%#= show.html.erb %> <p style="color: green"><%= notice %></p> <div style="display: flex; flex-direction: column; align-items: center"> <%= render @book %> <%= link_to "Back to books", books_path, style: "text-align: left" %> </div>
We also want to go to app > views > layouts > application.html.erb and replace the contents of our title tag with the following code. The yield keyword identifies a section where content from the view should be inserted. We can give it a symbol name and now the page title will display to whatever value :title is assigned.
<%= yield :title %>
Now we can go into our show.html.erb and add the following at the top of the file. content_for is how you specify which content is going to be rendered into which content area. In this case, we are assigning a value to :title.
<% content_for :title do %> <%= @book.title %> <% end %>
Now, depending on which "Show this book" you click, it will display the name of the book in the browser tab. You can also add this to index.html.erb or any other view where you want the page title to reflect the content on the page.
We can also simplify this by adding a helper method. I've added the following to app > helpers > books_helper.rb
module BooksHelper def title(title) content_for :title, title end end
Now we can replace our previous content_for code in show.html.erb.
<%= title @book.title %>
This will call the title helper method and achieve the same thing we had before. This allows us to reuse the same code over and over and reduce the amount of code that we need.
Using yield and content_for is a great way to have dynamic page titles. Depending on which view we are rendering, we can change what content is being rendered which is great for our page title. Now we can give unique page titles for all our views and give our website an added professional feel. If you have any questions about I'd be happy to try my and answer!