Merge pull request #74 from epwalsh/master

Add tag options
This commit is contained in:
Dean Attali 2016-07-27 16:21:18 -07:00 committed by GitHub
commit 901f99e7a8
10 changed files with 137 additions and 4 deletions

View File

@ -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.

View File

@ -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

View File

@ -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">

41
_layouts/tag_index.html Normal file
View File

@ -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>

33
_plugins/_tag_gen.rb Normal file
View File

@ -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

View File

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

View File

@ -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.
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.

View File

@ -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).
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).

View File

@ -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 {

View File

@ -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>