html – 检查变量是否为液体中的字符串或数组的类型

前端之家收集整理的这篇文章主要介绍了html – 检查变量是否为液体中的字符串或数组的类型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Jekyll你可以使用 liquid template,我正在尝试编写包含网站中所有链接的导航.
sitemap:
  home: "/"
  demo:
    right: "/right"
    left: "/left"

我想要实现的是创建一个包含所有这些链接侧边栏.但某些链接属于一个部分.输出应如下

<nav>
  <ul>
    <li>
      <a href="/">home</a>
    </li>
  </ul>

  <ul>
    <li>demo</li>
    <li>
      <a href="/right">right</a>
    </li>
    <li>
      <a href="/left">left</a>
    </li
  </ul>
</nav>

并非所有部分都必须有标题.主链接是一个独立的链接.
演示链接都在演示部分.

在液体中,我可以通过这种方式遍历站点地图:

{% for nav in site.sitemap %}
<ul>
  <li>{{ nav[0] }}</li>
</ul>
{% endfor %}

通过这种方式,液体将打印回家和演示.

我需要的是检查值是字符串还是数组,以便打印数组或单个链接

有没有办法检查液体变量是字符串还是数组?
我以前在链接的文档中找不到它!

解决方法

Is there a way to check if the liquid variable is a string or an array?

简短回答:是的

要检查液体变量是字符串还是元素列表(数组或散列),请使用数组过滤器first:{%var.first%}检查它是否具有第一个后代,如下所示:

{% if var.first %}
  // var is not a string
{% else %}
 // var is a string
{% endif %}

说明:

过滤器首先返回数组的第一个元素,如果有一个哈希,则返回哈希值;如果变量为空,或者没有返回任何内容的元素列表,并且由于nil是流量为falsy value,它的工作方式与false相同.如果条件如上.

例如:

# var1 = "a"     // string
{% var1.first %} // return:   // nil -> falsy

# var2 = [a,b,c] // array
{% var2.first %} // return: a

# var3 = {k1: a,k2: b,k3: c} // hash
{% var1.first %} // return: k1a

# var4 = {k1,k2,k3: c} // hash,first element is a key without associated value
{% var1.first %} // return: k1

OP问题的解决方案:遍历站点地图

现在我们可以确定元素是否是字符串,我们可以这样做:

{% for nav in site.sitemap %}
<ul>
  <li>
     {{ nav[0] }} :
        {% if nav[1].first %}
        // loop through: nav[1]
        {% else %}
          {{ nav[1] }}
        {% endif %}        
  </li>
</ul>
{% endfor %}

但我发现将站点地图作为元素列表(a)更方便*,而不是单个大哈希(实际上是)(b)(参见YAML syntax)

1.编辑站点地图数据结构

所以我通过在每个元素之前添加“ – ”(短划线和空格)来修改它的结构:

- home: "/"
  - demo:
    - right: "/right"
    - left: "/left"

给我们一个:

{"home"=>"/"}{"demo"=>[{"right"=>"/right"},{"left"=>"/left"}]}

而不是b:

{"home"=>"/","demo"=>{"right"=>"/right","left"=>"/left"}}

附注:您可以将站点地图放在它自己的文件中:_data / sitmap.yml并通过site.data.sitemap访问它,而不是将其定义为_config.yml中的属性,以保持其清洁,从而看起来和上面完全一样.

2.创建站点地图模板

因为我们将递归地包含站点地图(对于每个有子节点的节点),我们将把这个模板放在_includes文件夹而不是_layouts

另请注意,Jekyll允许passing parameters to includes.但是有一个问题,param应该是字符串而不是数组或哈希.所以,我们必须从links数组中创建一个字符串.

开始了:

<ul>
  <!--                  links is a param -->
  {%for link in include.links %}

    <li>

      {% for part in link %}
        {{part[0]}} : <!-- part[0] : link name  -->

        {% if part[1].first %} <!-- the element has children -->

          <!-- concatenate jekyll array into a string -->
          {% assign _links = "" | split: "" %}
          {% for _link in part[1] %}
            {% assign _links = _links | push: _link %}
          {% endfor %}
          <!-- pass the string as a param to sitemap,then do the recursive dance -->
          {% include sitemap.html links = _links %}

        {% else %} <!-- no children -->

          {{part[1]}} <!-- part[1] : link url -->

        {% endif %}

      {% endfor%}

    </li>

  {%endfor%}

</ul>

3.使用模板:)

<!-- include and init the param with this ↓,or `site.sitemap` if it's defined in `_config.yml`,or ...  -->
{% include sitemap.html links= site.data.sitemap %}

4.输出

for:/ _ data /sitemap.yml:

- home : "/"
- about: "/about"
- archive:
  - left : "/left"
  - right: "/right"
  - other:
    - up: '/other/up'
    - down: '/other/down'

模板产生:

>主页:/
> about:/ about
>存档:

>左:/左
>右:/右
>其他:

> up:/ other / up
> down:/ other / down

所以你必须把每个链接的[0]和[1]部分放在< a>中.标签如:

<a href="{{part[1]}}"> {{part[0]}} </a>

猜你在找的HTML相关文章