【问题标题】:Display JSON data with criteria in Jekyll在 Jekyll 中显示带有条件的 JSON 数据
【发布时间】:2017-04-11 16:54:36
【问题描述】:

我有一个结构如下的 JSON 文件:

{
    "resources": [
        {
            "date": "Nov 7",
            "content": [
                {
                    "articleTitle":"The Distribution of Users’ Computer Skills: Worse Than You Think",
                    "articleUrl":"https://www.nngroup.com/articles/computer-skill-levels/?ref=boomkrak",
                    "articleAuthor": "Jakob Nielson",
                    "articleTag": "ux, web design"  
                },
                {
                    "articleTitle":"How to Use Animation to Improve UX",
                    "articleUrl":"https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.84b3m022s?ref=boomkrak",
                    "articleAuthor": "Nick Babich",
                    "articleTag": "ux, animation"
                }
            ]
        },
        {
            "date": "Nov 15",
            "content": [
                {
                    "articleTitle":" 7 Things Every Designer Needs to Know about Accessibility",
                    "articleUrl":"https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.5pgg5014x?ref=boomkrak",
                    "articleAuthor": "Jesse Hausler",
                    "articleTag": "ux, web design, accessibility"   
                },
                {
                    "articleTitle":"Get the most out of your research with storytelling",
                    "articleUrl":"https://blog.intercom.com/get-the-most-out-of-your-research-storytelling/?ref=boomkrak",
                    "articleAuthor": "Jillian Wells",
                    "articleTag": "design research, collaboration"
                }
            ]
        }
    ]
}

我想根据每个标签显示文章。比如我要显示ux的文章,那么所有带有ux标签的文章都应该显示出来。

有人知道在 Jekyll 中怎么做吗?

【问题讨论】:

    标签: json tags jekyll


    【解决方案1】:

    考虑到您的数据在 _datas/articles.json 中,您可以使用此包含文件 (_includes/listbyTag.html):

    {% assign tag = include.tag %}
    {% assign days = site.data.articles.resources %}
    {% assign list = ""| split: "/" %} {% comment %} creates an empty array {% endcomment %}
    
    {% for day in days %}
      {% for article in day.content %}
        {% if article.articleTag contains tag %}
          {% assign list = list | push: article %}
        {% endif %}
      {% endfor %}
    {% endfor %}
    
    {% if list.size != 0 %}
      <h3>Found {{ list.size }} posts for tag : {{ tag }}</h3>
      <ul>
        {% for post in list %}
          <li>{{ post.articleTitle }}</li>
        {% endfor %}
      </ul>
    {% endif %}
    

    现在您可以将它包含在任何地方:

    {% include listByTag.html tag="ux" %}
    

    或者对于标签页:

    ---
    tag: ux
    title: my title
    layout: default
    ---
    {% include listByTag.html tag=page.tag %}
    

    【讨论】:

    • 如何在链接上传递变量标签,使其可以是动态的?也许像在 php 上发送 GET/POST 方法之类的?
    • Jekyll 是静态的,所以没有服务器端逻辑。您将需要按标签创建页面。请参阅我编辑的答案。
    • 啊,我明白了。谢谢大卫!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-07
    • 2017-01-21
    • 2022-11-08
    • 1970-01-01
    • 1970-01-01
    • 2018-11-09
    相关资源
    最近更新 更多