A good blogging platform is one which allows easy customization. I’ve been using Octopress for more than 2 weeks and happy to tell that it’s one of those allows customization with out any pain. I want to share a tweak I added to my blog recently : It’s an author information section below every post. Let’s see how I built it and added to my blog.
What we’re going to achieve
See the above screenshot ? It’s a simple section containing the author image, description and a twitter follow button. I’ll explain how to build this and add to every post.
Octopress is basically based on Jekyll and liquid templating. Everything in the main view is broken-down to subviews called partials. These partials are nothing but re-usable html files which will be included in other views. So for creating our author information section, we also need to create a partial and include it in the post view.
Before start creating our author information view, let’s analyse the files and folders we’re interested in.
Open the octopress blog folder and get familiar with these:
This is the partial responsible for rendering the blog post entry. We need to make modifications in this view to show any changes in the post.
This folder contains custom partials –– usually from the 3rd party plugins and all. We’re going to add our view html file here only.
Octopress uses SCSS ( a CSS preprocessor ) for all of it’s styling and theming. This particular file will be processed at the end, hence any custom styles required for the blog are added in this file only.
All the image assets goes to this folder.
Time to create the view for the author information section. I’ve created a new file called “aboutauthor.html” (code is given below ) and placed in the
source/_includes/custom/ folder. It’s just the sample and you can create your own template.
The above code is self explanatory. One more extra effort is to add the author image –– which should go to the
source/images/ folder. I’ve used a jpeg image of dimension
To apply some CSS for our view, open the “_styles.scss” and add the following rules.
Update Post Template
Now we’ve the CSS and Markup ready for our author information view. We can add the “aboutauthor.html” view to any other view by using
include keyword. Let’s open the
source/_layouts/post.html partial and include our newly created view below the post content.
Here is the diff file for updated post.html :
Use below rake commands to preview the blog.
rake generate; rake preview
That’s it !! The author information section should be appearing below each blog post by now. Replace the “Lorum ipsum” with the words best describes you.
Thanks for reading, feedbacks are welcome. Enjoy blogging !!