Shopify中如何在单个MetaObject详情页获取对应对象的值？

核心思路 #

不需要创建多个页面，仅需1个专属模板 + 1个承载页面，通过URL参数传递项目标识，在模板中动态匹配对应MetaObject数据，即可复用模板展示所有项目的详情内容。

具体步骤 #

1. 创建详情页专属模板
   在主题的templates目录下新建页面模板，命名为page.project-details.liquid（命名规则：page.自定义标识.liquid，标识可自行定义）。

2. 创建承载详情的页面
   在Shopify后台「在线商店」→「页面」中新建一个页面（比如命名为“项目详情”），在页面设置的「模板」选项里，选择刚才创建的project-details模板。

3. 给列表页项目添加详情跳转链接
   在已有的项目列表页Liquid代码中，为每个项目添加跳转链接，将该项目的**handle（句柄）**作为URL参数传递：

   {% for project in metaobjects.projects %}
     <a href="{{ pages.项目详情.url }}?handle={{ project.handle }}">{{ project.title }}</a>
   {% endfor %}
   

   注意：pages.项目详情中的“项目详情”需与你刚创建的承载页面的handle一致。

4. 详情页模板获取单个项目数据
   在page.project-details.liquid中，先从URL参数提取项目handle，再通过metaobjects全局对象匹配获取对应MetaObject：

   {% comment %} 获取URL中的项目handle参数 {% endcomment %}
   {% assign target_handle = request.params.handle %}
   
   {% comment %} 从Projects MetaObject中匹配对应项目 {% endcomment %}
   {% assign current_project = metaobjects.projects | where: "handle", target_handle | first %}
   
   {% comment %} 处理项目不存在的异常情况 {% endcomment %}
   {% unless current_project %}
     <div class="project-not-found">
       <p>该项目不存在或已删除</p>
       <a href="{{ pages.项目列表.url }}">返回项目列表</a>
     </div>
   {% else %}
     {% comment %} 输出项目基础内容 {% endcomment %}
     <h1>{{ current_project.title }}</h1>
     <div class="project-desc">
       {{ current_project.description | escape }}
     </div>
     {% comment %} 输出自定义字段，示例：假设你定义了"项目封面"字段 {% endcomment %}
     {% if current_project.fields.project_cover.value %}
       <img src="{{ current_project.fields.project_cover.value | img_url: 'large' }}" alt="{{ current_project.title }}">
     {% endif %}
     {% comment %} 其他自定义字段可按此格式输出 {% endcomment %}
   {% endunless %}
   

   注意：metaobjects.projects中的projects是你创建的MetaObject的机器名称（不是后台显示的「Projects」，需在MetaObject设置页面查看，一般为小写加下划线格式）。

5. 测试验证
   点击列表页的项目链接，检查详情页是否正确加载对应项目内容；手动修改URL中的handle参数为不存在的值，确认异常提示正常显示。

内容的提问来源于stack exchange，提问作者MA-2016