Adds support for tag-list (#734)

* Adds support for tag-list * Update _sass/_base.scss Co-authored-by: Maruan <[email protected]> * Made tags optional * Responsive deign for tag-list Co-authored-by: Maruan <[email protected]>
alshedivat · Jul 3, 2022 · 4a53a32 · 4a53a32
1 parent 9411786
commit 4a53a32
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/_config.yml b/_config.yml
@@ -203,6 +203,8 @@ jekyll-archives:
     tag: '/blog/tag/:name/'
     category: '/blog/category/:name/'
 
+display_tags: ['formatting', 'images', 'links', 'math', 'code'] # this tags will be dispalyed on the front page of your blog
+
 # -----------------------------------------------------------------------------
 # Jekyll Scholar
 # -----------------------------------------------------------------------------

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -318,13 +318,31 @@ footer.sticky-bottom {
   border-bottom: 1px solid var(--global-divider-color);
   text-align: center;
   padding-top: 2rem;
-  padding-bottom: 5rem;
+  padding-bottom: 3rem;
   h1 {
     color: var(--global-theme-color);
     font-size: 5rem;
   }
 }
 
+.tag-list {
+  border-bottom: 1px solid var(--global-divider-color);
+  text-align: center;
+  padding-top: 1rem;
+
+  ul {
+    justify-content: center;
+    display: flow-root;
+
+    p, li {
+      list-style: none;
+      display: inline-block;
+      padding: 1rem 0.5rem;
+      color: var(--global-text-color-light);
+    }
+  }
+}
+
 .post-list {
   margin: 0;
   margin-bottom: 40px;

diff --git a/blog/index.html b/blog/index.html
@@ -20,6 +20,20 @@ <h1>{{ site.blog_name }}</h1>
     <h2>{{ site.blog_description }}</h2>
   </div>
 
+  {% if site.display_tags %}
+  <div class="tag-list">
+    <ul class="list-group list-group-horizontal">
+      {% for tag in site.display_tags %}
+        <li>
+          <i class="fas fa-hashtag fa-sm"></i> <a href="{{ tag | prepend: '/blog/tag/' | relative_url }}">{{ tag }}</a>
+        </li>
+        {% unless forloop.last %}
+          <p>&bull;</p>
+        {% endunless %}
+      {% endfor %}
+    </ul>
+  </div>
+  {% endif %}
 
   <ul class="post-list">
     {% for post in paginator.posts %}