pages/_pages/blog.md
Gürkan Soykan f0eb587573
Fix conditional rendering of tag and category section (#2678)
### Overview
This PR fixes an issue where unnecessary horizontal lines were displayed
when there were no tags or categories present. The tag and category
container is now conditionally rendered, ensuring it only appears when
there are tags or categories to display.

no tags meaning, in _config.yml
```
display_tags: []
display_categories: []
```

### Before and After
The difference is illustrated in the images below:
- **First Image (Fixed)**: Shows the correct behavior with no extra
lines when tags or categories are absent.
- **Second Image (Current)**: Demonstrates the issue with unwanted
horizontal lines appearing when no tags or categories are present.


![image](https://github.com/user-attachments/assets/08becad5-9a34-4b6c-8a69-25206d9097da)

![image](https://github.com/user-attachments/assets/e36390cc-3104-4aa2-a047-a7fa8289e664)

### Impact
This change improves the visual consistency and cleanliness of the theme
by preventing unnecessary elements from being rendered, particularly in
cases where there are no tags or categories defined.
2024-09-10 11:57:54 -03:00

6.2 KiB

layout permalink title nav nav_order pagination
default /blog/ blog true 1
enabled collection permalink per_page sort_field sort_reverse trail
true posts /page/:num/ 5 date true
before after
1 3

{% assign blog_name_size = site.blog_name | size %} {% assign blog_description_size = site.blog_description | size %}

{% if blog_name_size > 0 or blog_description_size > 0 %}

{{ site.blog_name }}

{{ site.blog_description }}

{% endif %}

{% if site.display_tags and site.display_tags.size > 0 or site.display_categories and site.display_categories.size > 0 %}

    {% for tag in site.display_tags %}
  • {{ tag }}
  • {% unless forloop.last %}

    {% endunless %} {% endfor %} {% if site.display_categories.size > 0 and site.display_tags.size > 0 %}

    {% endif %} {% for category in site.display_categories %}
  • {{ category }}
  • {% unless forloop.last %}

    {% endunless %} {% endfor %}
{% endif %}

{% assign featured_posts = site.posts | where: "featured", "true" %} {% if featured_posts.size > 0 %}

{% assign is_even = featured_posts.size | modulo: 2 %}
{% for post in featured_posts %}

{{ post.title }}

{{ post.description }}

                {% if post.external_source == blank %}
                  {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
                {% else %}
                  {% assign read_time = post.feed_content | strip_html | number_of_words | divided_by: 180 | plus: 1 %}
                {% endif %}
                {% assign year = post.date | date: "%Y" %}

                <p class="post-meta">
                  {{ read_time }} min read &nbsp; &middot; &nbsp;
                  <a href="{{ year | prepend: '/blog/' | prepend: site.baseurl}}">
                    <i class="fa-solid fa-calendar fa-sm"></i> {{ year }} </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
  {% endfor %}
  </div>
</div>
<hr>

{% endif %}

    {% if page.pagination.enabled %}
      {% assign postlist = paginator.posts %}
    {% else %}
      {% assign postlist = site.posts %}
    {% endif %}
    
    {% for post in postlist %}
    
    {% if post.external_source == blank %}
      {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
    {% else %}
      {% assign read_time = post.feed_content | strip_html | number_of_words | divided_by: 180 | plus: 1 %}
    {% endif %}
    {% assign year = post.date | date: "%Y" %}
    {% assign tags = post.tags | join: "" %}
    {% assign categories = post.categories | join: "" %}
    
    <li>
    

    {% if post.thumbnail %}

    {% endif %}

    {% if post.redirect == blank %} {{ post.title }} {% elsif post.redirect contains '://' %} {{ post.title }} {% else %} {{ post.title }} {% endif %}

    {{ post.description }}

    {{ read_time }} min read   ·   {{ post.date | date: '%B %d, %Y' }} {% if post.external_source %}   ·   {{ post.external_source }} {% endif %}

    {{ year }}

          {% if tags != "" %}
          &nbsp; &middot; &nbsp;
            {% for tag in post.tags %}
            <a href="{{ tag | slugify | prepend: '/blog/tag/' | prepend: site.baseurl}}">
              <i class="fa-solid fa-hashtag fa-sm"></i> {{ tag }}</a>
              {% unless forloop.last %}
                &nbsp;
              {% endunless %}
              {% endfor %}
          {% endif %}
    
          {% if categories != "" %}
          &nbsp; &middot; &nbsp;
            {% for category in post.categories %}
            <a href="{{ category | slugify | prepend: '/blog/category/' | prepend: site.baseurl}}">
              <i class="fa-solid fa-tag fa-sm"></i> {{ category }}</a>
              {% unless forloop.last %}
                &nbsp;
              {% endunless %}
              {% endfor %}
          {% endif %}
    </p>
    

    {% if post.thumbnail %}

    image
    {% endif %}
    {% endfor %}
    

{% if page.pagination.enabled %} {% include pagination.liquid %} {% endif %}