使用博客 ID 和文章 ID 将来自 Shopify API 的文章数据添加到 DOM

Question

我正在尝试利用 Shopify 链接列表界面在主页上显示内容。不幸的是，您不能直接将博客文章添加到链接列表——只能通过它的 url。所以我不能使用液体来检索显示文章内容所需的信息。

另一种方法是用户可以指定常规网址。所以让他们想通过输入这样的网址来包含一篇文章：/blogs/news/18059703-article-title

我想解析那个 url，并使用 Shopify jquery api 来填写所需的信息。

我知道我可以用 Liquid 处理链接 url 以获取博客 ID 和文章 ID。然后我可以将它们作为属性注入到链接列表的输出中.....

{% for link in linklists.homepage.links %}
  {% if link.url contains 'blogs' %}
    {% capture partial_url %}{{ link.url | remove: '/blogs/' }}{% endcapture %}
    {% capture blog_title %}{{ partial_url | split: "/" | first }}{% endcapture %}
    {% capture blog_id %}{{ blogs[blog_title].id }}{% endcapture %}
    {% capture article_handle %}{{ partial_url | split: "/" | last }}{% endcapture %}
    {% capture article_id %}{{ article_handle | split: "-" | first }}{% endcapture %}

     <div class="panel" data-blog-id="{{ blog_id }}" data-article-id="{{ article_id }}">
      <a href="{{ link.url }}">   
       <div class="image">
        <img src="placeholderimage.jpg" />
       </div>
       <div class="text-wrap">
        <div class="text">
         <h2>ARTICLE TITLE</h2>
         <h3>ARTICLE AUTHOR</h3>
         <h4>ARTICLE PUBLISHED DATE</h4>
         <p>First 50 characters or so of the article</p>
        </div>
       </div>
      </a>
     </div>


  {% endif %}
{% endfor %}

鉴于我已经包含了 jquery api 脚本

{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

上面代码中访问和输出文章信息所需的jquery/code是什么？

最终，如何将指定文章的值作为变量访问以在jquery中使用以插入dom。

如果您能提供如何提取文章中找到的第一张图片 SRC 以用作图片，则可加分。

Answer 1

既然你已经有了博客标题，我会尝试这样的：

{% for link in linklists.homepage.links %}
  ...
  {% for article in blogs[blog_title].articles  %}
    {% if link.url == article.url %}
      <h2>{{ article.title }}</h2>
      <h3>{{ article.author }}</h3>
      <h4>{{ article.published_at }}</h4>
      ...
    {% endif %}
  {% endfor %}
  ...
{% endfor %}