Merge pull request #74 from epwalsh/master

Add tag options

README.md

@@ -148,6 +148,8 @@ To set up a GitHub Project page, simply fork this repository into a branch calle
 
 I wrote [a blog post](http://deanattali.com/2015/03/12/beautiful-jekyll-how-to-build-a-site-in-minutes/) describing some more advanced features that I used in my website that are applicable to any Jekyll site.  It describes how I used a custom URL for my site (deanattali.com instead of daattali.github.io), how to add a Google-powered search into your site, and provides a few more details about having an RSS feed. 
 
+Additionally, if you choose to deploy Jekyll on your own server (such as a DigitalOcean server), you can tell Jekyll to automatically categorize your blog posts by tags. You just need to set `link-tags: true` in `_config.yml`. Jekyll will then generate a new page for each unique tag which lists all of the posts that belong to that tag.
+
 ### Featured users (success stories!)
 
 To my huge surprise, Beautiful Jekyll has been used in over 500 websites in its first 6 months alone! Here is a hand-picked selection of some websites that use Beautiful Jekyll.

_config.yml

@@ -97,6 +97,9 @@ defaults:
       layout: "page"
       show-avatar: true
 
+# Tags (not recommended if you are deploying via GitHub pages, see README.md)
+link-tags: false
+
 # Exclude these files from production site
 exclude:
   - Gemfile

_layouts/post.html

@@ -8,7 +8,19 @@ layout: base
   <div class="row">
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
       <article role="main" class="blog-post">
-	      {{ content }}
+        {% if page.tags.size > 0 %}
+        <div class="blog-tags">
+          Tags: 
+          {% if site.link-tags %}
+          {% for tag in page.tags %}
+            <a href="/tag/{{ tag }}">{{ tag }}</a>
+          {% endfor %}
+          {% else %}
+            {{ page.tags | join: ", " }}
+          {% endif %}
+        </div>
+        {% endif %}
+        {{ content }}
 	    </article>
 	  	  
       <ul class="pager blog-pager">

_layouts/tag_index.html

@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+<h2 class="post_title">{{page.title}}:</h2>
+
+<div class="posts-list">
+  {% for post in site.posts %}
+  {% for tag in post.tags %}
+  {% if tag == page.tag %}
+  <article class="post-preview">
+    <a href="{{ post.url | prepend: site.baseurl }}">
+      <h3 class="post-title">{{ post.title }}</h3>
+
+      {% if post.subtitle %}
+      <h4 class="post-subtitle">
+        {{ post.subtitle }}
+      </h4>
+      {% endif %}
+    </a>
+
+    <p class="post-meta">
+    Posted on {{ post.date | date: "%B %-d, %Y" }}
+    </p>
+
+    <div class="post-entry">
+      {{ post.content | strip_html | xml_escape | truncatewords: 50 }}
+      <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read&nbsp;More]</a>
+    </div>
+
+    <div class="blog-tags">
+      Tags: 
+      {% for tag in post.tags %}
+        <a href="/tag/{{ tag }}">{{ tag }}</a>
+      {% endfor %}
+    </div>
+  </article>
+  {% endif %}
+  {% endfor %}
+  {% endfor %}
+</div>

_plugins/_tag_gen.rb

@@ -0,0 +1,33 @@
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Posts Tagged &ldquo;'
+      tag_title_suffix = site.config['tag_title_suffix'] || '&rdquo;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}#{tag_title_suffix}"
+    end
+  end
+  class TagGenerator < Generator
+    safe true
+    def generate(site)
+      if site.layouts.key? 'tag_index'
+        dir = site.config['tag_dir'] || 'tag'
+        site.tags.keys.each do |tag|
+          write_tag_index(site, File.join(dir, tag), tag)
+        end
+      end
+    end
+    def write_tag_index(site, dir, tag)
+      index = TagIndex.new(site, site.source, dir, tag)
+      index.render(site.layouts, site.site_payload)
+      index.write(site.dest)
+      site.pages << index
+    end
+  end
+end

_posts/2015-01-04-first-post.md

@@ -1,6 +1,7 @@
 ---
 layout: post
 title: First post!
+tags: [random, exciting-stuff]
 ---
 
 This is my first post, how exciting!

_posts/2015-01-15-pirates.md

@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Pirates arrrr
+tags: [pirates, random]
 ---
 
 Piracy is typically an act of robbery or criminal violence at sea. The term can include acts committed on land, in the air, or in other major bodies of water or on a shore. It does not normally include crimes committed against persons traveling on the same vessel as the perpetrator (e.g. one passenger stealing from others on the same vessel). The term has been used throughout history to refer to raids across land borders by non-state agents.

_posts/2015-01-27-dear-diary.md

@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Dear diary
+tags: [random, diary, school]
 ---
 
 What is it with that Mary girl?  Dragging me to school every day. As if I had a choice.  What you don't hear in those nursery rhymes is that she starves me if I don't go to school with her; it's the only way I can stay alive!  I'm thinking about being adopted by Little Bo Peep, sure I may get lost, but anything is better than being with Mary and those little brats at school (shudder, shudder).

css/main.css

@@ -331,6 +331,32 @@ footer .theme-by {
   }
 }
 
+/* --- Tags --- */
+
+.blog-tags {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #999;
+  font-size: 15px;
+  padding-top: 5px;
+}
+
+.blog-tags a {
+  color: #008AFF;
+  text-decoration: none;
+  padding: 0px 5px;
+}
+
+.blog-tags a:hover {
+  -moz-border-radius-topleft: 2px;
+  -moz-border-radius-topright: 2px;
+  -moz-border-radius-bottomright: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  -webkit-border-radius: 2px 2px 2px 2px;
+  border-radius: 2px 2px 2px 2px;
+  color: #008AFF;
+  background-color: #CCC;
+}
+
 /* --- Post and page headers --- */
 
 .intro-header {

index.html

@@ -26,6 +26,19 @@ subtitle: This is where I will tell my friends way too much about me
 	  <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read&nbsp;More]</a>
     </div>
 
+    {% if post.tags.size > 0 %}
+    <div class="blog-tags">
+      Tags: 
+      {% if site.link-tags %}
+      {% for tag in post.tags %}
+      <a href="{{ site.baseurl }}/tag/{{ tag }}">{{ tag }}</a>
+      {% endfor %}
+      {% else %}
+        {{ post.tags | join: ", " }}
+      {% endif %}
+    </div>
+    {% endif %}
+
    </article>
   {% endfor %}
 </div>