Add sidebar with similar posts to the post template.

kenhkelly · May 10, 2016 · 13e2c12 · 13e2c12
1 parent 121d943
commit 13e2c12
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 35 deletions.
diff --git a/_includes/post_sidebar.html b/_includes/post_sidebar.html
@@ -0,0 +1,21 @@
+<div class="post_sidebar">
+  {% assign headerShown = false %}
+  {% assign i = 0 %}
+  {% for post in site.posts %}
+    {% if page.date == post.date %}{% continue %}{% endif %}
+    {% for tag in post.tags %}
+      {% if page.tags contains tag %}
+        {% if headerShown == false %}
+        <h3 class="text-center">Similar Posts</h3>
+        {% assign headerShown = true %}
+        {% endif %}
+        <a href="{{ post.url }}">{{ post.title }}</a><br>
+        {% capture i %}{{ i | plus: 1 }}{% endcapture %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+    {% if i == "5" %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+</div>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,46 +4,50 @@
 
 <div class="page singlePostPage">
     <div class="container">
+        <div class="col-md-9">
+            {% if page.image %}
+            <p class="text-center">
+                <img src="{{ page.image }}" alt="">
+            </p>
+            {% endif %}
+
 
-        {% if page.image %}
-        <p class="text-center">
-            <img src="{{ page.image }}" alt="">
-        </p>
-        {% endif %}
-
+            <a class="post_heading" href="{{ post.url }}"><h1 class="text-center">{{ page.title }}</h1></a>
+            <div class="meta">
+                <span class="date">{{ page.date | date: "%B %-d, %Y" }}</span>
+            </div>
+
+            <div class="post_content">
+                {{ content }}
+                <div class="clearfix"></div>
+            </div>
 
-        <h1 class="text-center">{{ page.title }}</h1>
-        <div class="meta">
-            <span class="date">{{ page.date | date: "%B %-d, %Y" }}</span>
-        </div>
-
-        <div class="post_content">
-            {{ content }}
+            {% comment %}{% include signup_widget.html %}{% endcomment %}
             <div class="clearfix"></div>
-        </div>
 
-        {% comment %}{% include signup_widget.html %}{% endcomment %}
-        <div class="clearfix"></div>
+            <div class="comments">
+                {% if page.comments == true %}
+                <div id="disqus_thread"></div>
+                <script type="text/javascript">
+                    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+                    var disqus_shortname = 'kensramblings'; // required: replace example with your forum shortname
 
-        <div class="comments">
-            {% if page.comments == true %}
-            <div id="disqus_thread"></div>
-            <script type="text/javascript">
-                /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
-                var disqus_shortname = 'kensramblings'; // required: replace example with your forum shortname
-
-                /* * * DON'T EDIT BELOW THIS LINE * * */
-                (function() {
-                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-                    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-                })();
-            </script>
-            <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-            {% else %}
-            <p class="text-muted"><small>Comments are closed</small></p>
-            {% endif %}
-
+                    /* * * DON'T EDIT BELOW THIS LINE * * */
+                    (function() {
+                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+                        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+                    })();
+                </script>
+                <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+                {% else %}
+                <p class="text-muted"><small>Comments are closed</small></p>
+                {% endif %}
+
+            </div>
+        </div>
+        <div class="col-md-3">
+            {% include post_sidebar.html %}
         </div>
     </div>
 </div>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -474,6 +474,9 @@ body.home {
     }
 }
 .singlePostPage {
+    .post_heading {
+        text-decoration: none;
+    }
     .container {
         /*background: #fff;*/
         padding-top: 25px;
@@ -504,6 +507,12 @@ body.home {
     .comments {
         margin-top: 15px;
     }
+    .post_sidebar {
+        a {
+            margin: 5px 0;
+            display: inline-block;
+        }
+    }
 }
 .Blog, .singlePostPage {
     .tags {