Adding multiple authors to the JB Twitter theme
How we did it
One of the most delightful aspects of creating this blog is learning how to use Jekyll Bootstrap. The default twitter theme for JB only supports only one author. In this post we describe how we made minimal changes to five files in order to add support for multiple authors.
In the snippets below, we have grayed out the parts of the files which have not been changed, in order to emphasize the parts which have been changed.
Step 1: Change the _config.yml file
We first reformatted the author section in the _config.yml to support
more than one author.
# Themes are encouraged to use these universal variables # so be sure to set them if your theme uses them. # title : Jekyll Bootstrap tagline: Site Tagline authors : author1: name : Name1 Lastname1 email : [email protected] github : username1 twitter : username1 feedburner : feedname1 copyright : true author2: name : Name2 Lastname2 email : [email protected] github : username2 twitter : username2 feedburner : feedname2 copyright : true guest: name : Name Lastname email : [email protected] github : username twitter : username feedburner : feedname copyright : false</code>
The copyright field for each author should be set to true in order for the author’s name to appear in the copyright footer (see Step 3) and false otherwise. Guest authors have copyright set to false.
Step 2: Change the Rakefile
We changed our Rakefile to add an author: field into the YAML Front
Matter of any newly generated post. This is accomplished with in just
three lines plus one comment.
# Usage: rake post title="A Title" [date="2012-02-09"][tags=[tag1,tag2]] [category="category] [author="author"]
desc "Begin a new post in #{CONFIG['posts']}"
task :post do
abort("rake aborted: '#{CONFIG['posts']}' directory not found.") unless FileTest.directory?(CONFIG['posts'])
title = ENV["title"] || "new-post"
author = ENV["author"] || ""
author = "#{author.gsub(/-/,' ')}" if !author.empty?
tags = ENV["tags"] || "[]"
category = ENV["category"] || ""
category = "\"#{category.gsub(/-/,' ')}\"" if !category.empty?
slug = title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
begin
date = (ENV['date'] ? Time.parse(ENV['date']) : Time.now).strftime('%Y-%m-%d')
rescue => e
puts "Error - date format must be YYYY-MM-DD, please check you typed it correctly!"
exit -1
end
filename = File.join(CONFIG['posts'], "#{date}-#{slug}.#{CONFIG['post_ext']}")
if File.exist?(filename)
abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
end
puts "Creating new post: #{filename}"
open(filename, 'w') do |post|
post.puts "---"
post.puts "layout: post"
post.puts "title: \"#{title.gsub(/-/,' ')}\""
post.puts "author: #{author}"
post.puts 'description: ""'
post.puts "category: #{category}
post.puts "tags: #{tags}"
post.puts "---"
post.puts ""
end
end # task :post
The lines that we added are in black. To create a new post using
rake, we now use the command rake post title="Hello World" author=author1.
Step 3: Modify the copyright
We changed the copyright footer throughout the entire blog to contain
both of our names. This step was the trickiest and involved
writing eleven lines of liquid-fu. We replaced the footer in
_include/themes/twitter/default.html with:
<footer>
<p>© {{ site.time | date: '%Y' }}
{% assign firstcopyright = false %}
{% for author in site.authors %}
{% if author[1].copyright %}
{% if firstcopyright == false %}
{% assign firstcopyright = true %}
{% else %}
and
{% endif %}
{{ author[1].name }}
{% endif %}
{% endfor %}
with help from <a href="http://jekyllbootstrap.com" target="_blank" title="The Definitive Jekyll Blogging Framework">Jekyll Bootstrap</a>
and <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a>
</p>
</footer>
The copyright footer now contains the name of all of the authors with
for whom copyright = true in the _config.yml file and looks
like this.
© 2014 Name1 Lastname1 and Name2 Lastname2 with help from Jekyll Bootstrap and Twitter Bootstrap
Step 4: Create a signature (optional)
Edit: An earlier version of this blog automatically appended a signature with the author name and date at the end of each article. We now sign and date our articles in the sidebar.
Every post should be signed and dated by its author at the end of the article.
We created a CSS signature class and append it to the end of
assets/themes/twitter/css/style.css. Ours is blatantly copied from the
mark-reid theme.
/* signature */
.signature {
margin-top: 3em;
position: relative;
}
.signature .author {
font-variant: small-caps;
font-style: normal;
color: black;
display: block;
margin-bottom: 1.5em;
}
.signature .date {
font-size: 87.5%;
line-height: 1.5em;
display: block;
font-variant: small-caps;
font-style: normal;
position: absolute;
right: 0;
top: 0;
}
.signature .location {
display: block;
font-size: 87.5%;
line-height: 1.5em;
position: absolute;
right: 0;
top: 1.5em;
}
Next we add a corresponding signature section to
_includes/themes/twitter/post.html immediately after the content section.
<<div class="row-fluid post-full">
<div class="span12">
<div class="content">
{{ content }}
</div>
{% assign author = site.authors[page.author] %}
<address class="signature">
<a class="author" href="{{ HOME_PATH }}">{{ author.name }}</a>
<span class="date">{{ page.date | date_to_long_string }}</span>
<span class="location">{{ page.location }}</span>
</address></span>
A signature is now automatically generated for all posts and and looks like this.
Name1 Lastname116 March 2014
Run jekyll with custom ports
If we are writing articles on our two computers at home and both want
to run jekyll at the same time, we avoid port collisions by
specifying different port numbers. For example: jekyll serve --port 4001.
Conclusion
The discussion above uses the twitter bootstrap theme but will carry over easily to other themes with minimal effort. Modifying the code to support multiple authors has proved instructive to learning the basics of liquid syntax and JB-based blogging.
blog comments powered by Disqus