如何实现URL为空时隐藏对应li标签？附社交链接展示代码

嘿，这事儿好办！你需要借助模板引擎的条件渲染功能，给每个<li>标签加上判断逻辑——只有当对应的社交链接变量（channel.facebook_page/channel.twitter_page）不为空时，才渲染该列表项。下面是几种常见模板引擎的实现示例：

1. Handlebars 模板 #

Handlebars 使用{{#if}}语法来做条件判断：

<ul class="list-inline">
  {{#if channel.facebook_page}}
    <li style="padding-right:20px;">
      <a href="https://{{channel.facebook_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On FaceBook">
        <i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i>
      </a>
    </li>
  {{/if}}
  {{#if channel.twitter_page}}
    <li>
      <a href="https://{{channel.twitter_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On Twitter">
        <i aria-hidden="true" class="fa fa-twitter fa-2x" style='color:#ee6f00'></i>
      </a>
    </li>
  {{/if}}
</ul>

2. Twig 模板（PHP 生态常用） #

Twig 使用{% if %}语法，还可以用is not empty明确判断非空：

<ul class="list-inline">
  {% if channel.facebook_page is not empty %}
    <li style="padding-right:20px;">
      <a href="https://{{ channel.facebook_page }}" rel="nofollow" target="_blank" title="{{ channel.channel_name }} On FaceBook">
        <i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i>
      </a>
    </li>
  {% endif %}
  {% if channel.twitter_page is not empty %}
    <li>
      <a href="https://{{ channel.twitter_page }}" rel="nofollow" target="_blank" title="{{ channel.channel_name }} On Twitter">
        <i aria-hidden="true" class="fa fa-twitter fa-2x" style='color:#ee6f00'></i>
      </a>
    </li>
  {% endif %}
</ul>

3. Jinja2 模板（Python 生态常用，如 Flask/Django） #

Jinja2 的条件判断语法简洁，直接判断变量是否存在即可：

<ul class="list-inline">
  {% if channel.facebook_page %}
    <li style="padding-right:20px;">
      <a href="https://{{ channel.facebook_page }}" rel="nofollow" target="_blank" title="{{ channel.channel_name }} On FaceBook">
        <i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i>
      </a>
    </li>
  {% endif %}
  {% if channel.twitter_page %}
    <li>
      <a href="https://{{ channel.twitter_page }}" rel="nofollow" target="_blank" title="{{ channel.channel_name }} On Twitter">
        <i aria-hidden="true" class="fa fa-twitter fa-2x" style='color:#ee6f00'></i>
      </a>
    </li>
  {% endif %}
</ul>

核心思路 #

不管用哪种模板引擎，核心都是只在社交链接变量有效（非空）时，才输出对应的列表项。这样当channel.facebook_page或channel.twitter_page为空时，对应的<li>标签不会被渲染到最终的HTML中，也就实现了隐藏效果。

内容的提问来源于stack exchange，提问作者Aiden Doyle