Headers and Footers in Hobo
It’s really easy to override the header and footer in hobo. There are two ways to do this. I use both in aura-site.
First, look at the pages definition in rapid_pages.dryml. Everything with a param attribute can be redefined.
Note the main-nav element. By default, Hobo will magically generate a menu for you, based on your project. On aura-site, we override this in application.dryml to build our menus the way the admin wants.
Now you can also redefine the page as a whole. We do this in the aura theme to add a bit of css and javascript to the head of the html.
The easiest way to make a header or footer is to use this second method. Just use a <header:> to replace the header or <append-header:> to add to the end of it. Same deal with footer, just use the <footer:>, <append-footer:>, <prepend-footer:>.
It took me awhile to figure out how Hobo’s theming engine works. It’s not hard to create and use a new theme if you know the caveats.
We’ll start by using hobo’s default theme, clean, as a template. Go into RAILS_ROOT/app/views/taglibs/themes. You will see a directory called clean. Inside this directory is a single file called clean.dryml. You’ll want to pick a name for your theme. For this example, my new theme will be called red. Create a new directory called red and copy clean/clean.dryml to red/red.dryml.
We do not need to make changes to red.dryml for it to work properly. This file is where you will define tags, cards, and forms specific to your theme. If you need to pull in some more javascript and css, this would be the place to do it.
Next, we need go to RAILS_ROOT/public/hobothemes. Again you will see a clean directory. Copy this directory to a new one, red. Go to stylesheets within the red directory. Rename clean.css to red.css. Now we have the media assets for our new theme all set up. So how do we use this new theme?
Open RAILS_ROOT/app/views/taglibs/application.dryml. You’ll see a tag early on called set-theme. Just change that to point to red.
<set-theme name="red"/>
If you are running your server, then restart now. Hobo will not load the new theme correctly otherwise. Now your blog its own theme!
Sometimes we may want to not publish our blog entries to the world. They might need a little work, which we plan on doing later. So our entries need two states: published and drafted. Hobo’s lifecycles make this not too much of a chore.
First, let’s open app/models/entry.rb and define our lifecycle. These lines can go right after where we’ve defined our relations.
lifecycle do
state :drafted, :default => true
state :published
transition :publish, {:drafted => :published}, :available_to => :user
transition :unpublish, {:published => :drafted}, :available_to => :user
end
We’ve defined our two states. Our entries will default to the drafted state. There are also two transitions. Transitions define how our entry can change states. A entry can become drafted only when it is in the published state. The opposite is also true. Only the user, or author in this case, can change states. Now let’s migrate!
$ script/generate hobo_migration
States are now engaged, but we cannot change between them. We need to add some buttons. Hobo provides the extremely helpful <transition-buttons/> tag to accomplish this. Open app/views/taglibs/application.dryml and add this tag to our entry-info tag like so.
<def tag="entry-info">
<div>
Posted on <view:created-at/>
</div>
<div>
Tags: <view:tags/>
</div>
<transition-buttons/>
</def>
You now have Publish and Unpublish buttons. The assortment of buttons depends on the transitions available to your current user. So we have our states and we can change between them. Now we just need to do something with those states. Let’s change the view permissions in app/models/entry.rb.
def view_permitted?(field)
acting_user.administrator? or state == 'published'
end
Now an entry is viewable if the user is an adminstrator or if the entry is in a published state.