In this section we will see how to create the views for our freshly created theme for our blog !
Creating the Spina Views
We are going to create a blog similar to the one that I currently have. It’s done with the Butane theme for Jekyll created by Alex Carpenter with some adjustments that I have done (adding excerpts and covers).
This is what you should get at the end.
To achieve this you will need to create the following files:
Now that the views exist, you can actually go and create your pages in your Admin Panel and get your app to work. However your pages won’t show anything. Here I am just going to show you specific examples to show you how things work on Spina, for the rest I will invite you to download the sources attached to this article.
Listing the articles with ancestry
Everything you need to display is contained in the
@page variable. Also Spina is based on ancestry to handle your pages tree. You can use it like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 %section.c-archives %ul.c-archives__list - @page.children.each do |child| - if child == @page.children.first - this_year = child.created_at.strftime("%Y") %h2.c-archives__year= this_year - else - next_year = child.created_at.strftime("%Y") - if this_year != next_year %h2.c-archives__year= next_year %li.c-archives__item %h3= link_to child.title, child.materialized_path %p= child.created_at.strftime("%b %-d, %Y") .n-post-excerpt= child.content(:excerpt).try(:html_safe)
To get the full code for this theme you can go and download the sources here !
Bonus: Creating a breadcrumb
Here is another example of how you can manipulate your tree using ancestry in Spina
1 2 3 4 5 6 7 8 ol.breadcrumb li = link_to "Home", root_url - @page.ancestors.each do |ancestor| li = link_to ancestor.menu_title, ancestor.materialized_path li.active a = @page.menu_title
menu_title is your Navigation Title in your Advanced tab and the
materialized_path is in the Search Engine tab when creating / updating a page. The name of these variables can be found when looking into the source code of Spina.
That’s it folks ! Hope this small series will help you start your own project on Spina !