Your localized Chinese blog will look like this.

The repository can be found on Github. Feel free to raise an issue if there are any problems. More languages will be on the way!

What we’re showing is very similar to what Jimmy Tang has posted. However, we’re placing the related posts section at the bottom of each post instead of the sidebar. The reader will be able to find the related posts when he has finished reading. If the article is long, readers won’t be able to see the related posts section as it is hidden by the scrolling.

Installation of dependencies

Much of this information is available from Jimmy Tang’s post. I’ll only provide a summary.

First add the following line to your _config.yml.

1

lsi: true

Next we need to add the GSL ruby gem to help hasten the computation. Before that, you probably need to add the dependencies for the GSL gem.

GSL OS X fix

Run the following shell commands to install GSL on Mac OS X.

1
2

brew tap homebrew/versions
brew install gsl114

GSL Linux fix

Run the following shell commands to install GSL on Linux.

1
2
3
4
5
6
7

curl -O http://mirror.aarnet.edu.au/pub/gnu/gsl/gsl-1.14.tar.gz
tar xfz gsl-1.14.tar.gz
cd gsl-1.14
./configure
make clean
make
sudo make install

Installing the GSL ruby gem

Now, add the gem to your Gemfile.

1

gem 'gsl'

To install it, run this on your shell

1

bundle install

Finally we just need to run the generate command to generate the related posts.

1

rake generate

That is it! Your related posts should be ready.

Installation of related posts

I’ve created a related posts snippet here. Copy the code and add it as a new file at source/_includes/post/related_posts.html. This checks if the site has any related posts and adds 3 links. You may change the number of related posts to show by changing the limit.

1
2
3
4
5
6
7
8
9
10
11
12

{% if site.related_posts %}
  <h3>Related posts</h3>
  <ul class="posts">
  {% for post in site.related_posts limit:3 %}
    <li class="related">
      <a href="{{ root_url }}{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
  </ul>
{% endif %}

Next we need to add it to the footer of the article. We have included it by adding the location of the related posts snippet in source/_layouts/post.html. Below is the diff for the file.

1
2
3
4
5
6
7
8
9
10

--- a/source/_layouts/post.html
+++ b/source/_layouts/post.html
@@ -11,6 +11,7 @@ single: true
       {% include post/author.html %}
       {% include post/date.html %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}
       {% include post/categories.html %}
+      {% include post/related_posts.html %}
     </p>

Once added, we need to run generate to create the related posts section.

1

rake generate

And that concludes our post on adding a related post section to your Octopress blog.

First take a look at the examples by clicking on the link below.

Example modal with a text link

The link is visible while the modal is hidden. Clicking on the link reveals the modal. The code for the example is below.

1
2
3
4
5
6
7
8
9
10
11

<a href="#" data-reveal-id="text-link-modal">Example modal with a text link</a>

<div id="text-link-modal" class="reveal-modal">
  <h2>This is a modal.</h2>
  <p>
    Reveal makes these very easy to summon and dismiss. The close button is simple an anchor with a unicode
    character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will
    also dismiss it.
  </p>
  <a class="close-reveal-modal">×</a>
</div>

Here is another example using an image. Photo credits to publicenergy.

1
2
3
4
5

<a href="#" data-reveal-id="image-link-modal"><img src="http://farm3.staticflickr.com/2058/1846375599_cec42383dd_m.jpg"/ alt="Cow. Photo credits to publicenergy"></a>

<div id="image-link-modal" class="reveal-modal">
  <img src="http://farm3.staticflickr.com/2058/1846375599_cec42383dd_z.jpg" alt="Cow. Photo credits to publicenergy"/>
</div>

You may use the above examples on your blog posts.

Installation

To install the modal dialog, we need to modify 2 files.

First, find source/_includes/head.html from your blog and add these 2 lines to load jquery and foundation.

1
2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/javascripts/foundation.min.js"></script>

Foundation can be downloaded. Download the default package, unzip it. We only need foundation.min.js. Copy foundation.min.js to source/javascripts/.

Next we need to add the CSS styles for the modal. Add these lines to sass/custom/_styles.scss.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* CSS for jQuery Reveal Plugin Maintained for Foundation. foundation.zurb.com Free to use under the MIT license. http://www.opensource.org/licenses/mit-license.php */
/* Reveal Modals ---------------------- */
.reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0, 0, 0, 0.45); z-index: 40; display: none; top: 0; left: 0; }

.reveal-modal { background: white; visibility: hidden; display: none; top: 100px; left: 50%; margin-left: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
.reveal-modal .close-reveal-modal { font-size: 22px; font-size: 2.2rem; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); font-weight: bold; cursor: pointer; }
.reveal-modal.small { width: 30%; margin-left: -15%; }
.reveal-modal.medium { width: 40%; margin-left: -20%; }
.reveal-modal.large { width: 60%; margin-left: -30%; }
.reveal-modal.xlarge { width: 70%; margin-left: -35%; }
.reveal-modal.expand { width: 90%; margin-left: -45%; }
.reveal-modal .row { min-width: 0; margin-bottom: 10px; }
.reveal-modal > :first-child { margin-top: 0; }
.reveal-modal > :last-child { margin-bottom: 0; }

@media print { .reveal-modal { border: solid 1px #000; background: white !important; } }

And that is it!

We assume you already have a photo. If not, there are inexpensive stock photos, or you can find images from flickr. Sometimes there are some rare finds on flickr. Do remember to use only creative commons licensed images.

Using the New York theme as the base

The New York theme already has CSS styles to use a background image. We are going to work from the code base. Install the New York theme. Once you have installed, take a look at the source/images directory. You should see an image called base.jpg. Take a look at that. It should be the New York skyline image.

All you need to do is to replace base.jpg with your own.

1

rake generate

Run the generate commands to see the end result. Once you are happy with your background image, deploy it.

1

rake deploy

Installation

Installation instructions are available on the Github page. The plugin is covered in tests, documented in tomdoc, and works. Feel free to try it.

How it works

The popularity of each post is calculated by its Google page rank. Page rank is an authoritative source of page popularity. How did we get the page rank information? There are many browser plugins that shows you the page rank. There is no official Google API to query for page rank. What they did is to make use of the unofficial api from Google toolbar to make queries. For the popularity posts plugin, we make use of the PageRankr gem to query for page rank information.

The popularity posts section is generated with the site. You don’t have to generate it separately. It is a static page. As your Octopress blog is a static site, we thought the best way is to generate a static page. Page rank is only updated every 3 months. Your popular posts won’t change from hour to hour. A static page is sufficient.

The plugin comes with a caching mechanism. As it make page rank queries, the returned result is stored in a file. When your Octopress blog is generated the next time, the plugin gets the page rank result directly from the cache. This makes site generation a lot faster. Caches are made to expire in 1 month.

Diving into the source code

How did we generate the page? Let us do a brief code walkthrough. Those interested in Jekyll plugin development will find this useful. Do refer to the source to understand the context.

As you already know, Octopress builds on Jekyll. Jekyll has 2 classes: Post and Site. They represent the blog post and the blog site respectively. First, we added a page_rank method to Post. The page_rank method returns the page rank of the post. It also performs caching.

Hooking it up

Next, we try to hook on to the site generation process. In the Site class, there is the read method. In the original Jekyll implementation, it reads the blog posts and stores them in references. We wrote a method that sorts your blog posts by page rank, and set it to a popular_posts reference. We then make use of the alias_method to hook it to the original read method so that it gets executed. Now information on popular posts is stored.

Next we need to generate the HTML. Jekyll makes use of the Liquid templating language to generate the HTML. In essence, Liquid takes a template, and replace Liquid markup with values that are passed to it. Similarly, we need to pass in the popular_posts value to our template. Again we make use of alias_method to hook it to the site_payload method in the original implementation. The site_payload method prepares the values for passing into the Liquid templates.

Octopress currently runs plugins defined in the plugins folder. To install, we need to copy the plugin to the plugins folder.

So that is how it works. To develop plugins, it helps to understand Jekyll code. Please contact me should there be problems with the plugin or if there are any questions related to this post.

An email subscription form is one of the most common features you see on blogs. Yet it is not present by default on Octopress. Besides RSS feeds, your blog should provide an option for readers to subscribe by email. Having a way to reach your readers is never a bad thing. It is going to look just like the email subscription section you see on this blog(hint: on the right). Luckily, it is simple enough that you can create one in 5 minutes.

Creating a mailing list on MailChimp

We are going to use MailChimp to create a mailing list for your blog readers. We want to create the mailing list and grab the embedded subcription form. If you already know how to do this, skip this section.

After you have created a mailing list, go to the list of mailing lists. There should be an options icon on the right. View the options and select the forms link.

You should be led to the create form page. Find the Share it tab and click it.

You should see the Share it tab. Click on the Create HTML Code For A Small Subscribe Form button.

Select the Naked Form option.

And you should be greeted with the embedded form. Copy the code into your text editor.

Creating the email subscribe section

We are going to add a new aside section on your Octopress config. I am assuming the new subscribe section is located at custom/asides/subscribe.html.

1

default_asides: [custom/asides/about.html, custom/asides/subscribe.html, asides/recent_posts.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

On your subscribe section, add the following code. It should be very similar to the code you copied from MailChimp.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<section>
  <h1>Subscribe</h1>
  <!-- Begin MailChimp Signup Form -->
  <div id="mc_embed_signup">
    <form action="http://url-to-your-mailing-list" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="mc-field-group">
  <label for="mce-EMAIL">
    Enter your email to receive updates
  </label>
  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="you@email.com">
      </div>
      <div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <div class="clear">
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
    </form>
  </div>
  <!--End mc_embed_signup-->
</section>

Remember to replace the form’s action attribute with your own mailing list’s url.

Styling the email subscribe section

Next we want to style the fields. Octopress provides a styles.scss file for your custom CSS styles. We are going to make use of that to style your email subscription form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

#mc_embed_signup {

    // label
    .mc-field-group > label {
  margin-top: 8px;
  display: block;
    }

    // textfield
    input.email {
  width: 100%; height: 24px; margin-top: 8px; font-size: 14px;
    }

    // subscribe button
    input#mc-embedded-subscribe {
  background-color: #5DA423;
  border: 1px solid #396516;
  width: auto;
  background: #2BA6CB;
  border: 1px solid #1E728C;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin: 8px 0 0 0;
  outline: none;
  padding: 10px 20px 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
    }
}

Copy the above styles to sass/custom/_styles.scss. And your are done!

1
2

rake generate
rake deploy

Remember to run generate. If everything looks ok, deploy and watch that mailing list grow.