Add static tagging system.

In the future, clicking on a tag should bring the user to a page showing all the posts with the same tags.
KryptonChicken · Feb 14, 2017 · 2966336 · 2966336
1 parent ccffa68
commit 2966336
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -12,20 +12,34 @@ <h1>{{ page.title }}</h1>
     on {{ page.date | date_to_string }}.
 </i>
 
+<hr />
+
 {{ content }}
 
+<ul class="tags">
+  {% for tag in page.tags %}
+    <li class="tag">
+      <i>{{ tag }}</i>
+    </li>
+  {% endfor %}
+</ul>
+
+<hr />
+
 {% if page.comments %}
-<div id="disqus_thread"></div>
-<script>
-(function() { // DON'T EDIT BELOW THIS LINE
-    var d = document, s = d.createElement('script');
-    s.src = '//kryptonchicken.disqus.com/embed.js';
-    s.setAttribute('data-timestamp', +new Date());
-    (d.head || d.body).appendChild(s);
-})();
-</script>
-<noscript>
-    Please enable JavaScript to view the 
-    <a href="https://disqus.com/?ref _noscript">comments powered by Disqus.</a>
-</noscript>
+  <div id="disqus_thread"></div>
+  <script>
+  (function() { // DON'T EDIT BELOW THIS LINE
+      var d = document, s = d.createElement('script');
+      s.src = '//kryptonchicken.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+  })();
+  </script>
+  <noscript>
+      Please enable JavaScript to view the
+      <a href="https://disqus.com/?ref _noscript">
+        comments powered by Disqus.
+      </a>
+  </noscript>
 {% endif %}
diff --git a/_posts/2017-02-12-hello-world.md b/_posts/2017-02-12-hello-world.md
@@ -1,10 +1,11 @@
 ---
 layout: post
 title: "Hello, World!"
-date: 2017-02-12 15:36
+date: 2017-02-12
 author: tommy_ip
+description: Why did we call ourselves the Krypton Chicken?
+tags: [general, KryptonChicken]
 comments: true
-description: "Why did we call ourselves the Krypton Chicken?"
 ---
 
 __*So why do we call ourselves "Krypton Chicken"?*__ We (the GCI 2016 winners) were

diff --git a/css/style.css b/css/style.css
@@ -14,3 +14,35 @@ a:hover {
 h1 {
     font-size: 2em;
 }
+
+.tags {
+    list-style: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+}
+
+.tags li {
+    float: left;
+}
+
+.tag {
+    background: #eee;
+    border-radius: 3px;
+    color: #606c71;
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 12px 0 12px;
+    position: relative;
+    margin: 0 10px 10px 0;
+    text-decoration: none;
+    -webkit-transition: color 0.5s;
+}
+
+/* Un-comment this when implementing a page with filtered blog posts.
+.tag:hover {
+    background-color: #E91E63;
+    color: white;
+}
+*/