LOL正规竞猜平台
Prev帖子 在下一篇文章
Shopify作为一个CMS
写的
贾斯汀•阿姆斯特朗
Web开发人员

Shopify始终是电子商务平台第一,content管理系统(CMS)第二. Shopify 方便店主管理产品, 变体, 集合, 标签, 并在用户友好的管理中传递模型, 同时把安全放在第一位. 并与数十个支付网关进行简单集成, 它已经成为大、小企业最受欢迎的电子商务平台之一. 但是Shopify是如何作为一个CMS的呢? 让我们来看看Shopify所做的两大改进.

部分和块

和许多其他流行的cms一样, the out-of-the-box Shopify page 编辑or is pretty barebones; title, content, 和基本的搜索引擎优化. 不像其他流行的cms, 在这些基本元素之外扩展页面content选项并不总是容易的. 确定, 您可以安装第三方元字段应用程序或浏览器扩展, 但这与用户友好性相距甚远,而且可能相当有限. 2016年底,Shopify推出 部分, 是什么让主题开发人员能够创建自定义的管理编辑界面,让商店所有者轻松添加, 编辑, 并重新排序自定义content. 更酷的是,所有更新在发布之前都可以实时预览.

章节是游戏改变者,但如果你需要可重复的content怎么办? Shopify有你覆盖 . block允许主题开发人员创建一组可以重复的字段,从而扩展了部分的功能. 这可能有用的一个例子是带有标题的页面部分, 一些副本, 以及具有每个图像标题的图像旋转木马. 主题开发人员无法知道有多少图像将在旋转木马和创建多个 image_picker Section中的字段很麻烦,不容易扩展. 让我们看看块如何轻松地实现这个场景.

我们首先在站点的“sections”目录中创建一个新文件. 我们叫它“旋转木马”.液体”

接下来,我们将设置我们的模式. 模式决定哪些字段将出现在您的管理中,并且应该始终位于文件的最底部. 样式使用相同的JSON格式 设置_schema.json 文件. 如果你不熟悉这个文件或Shopify主题设置,看一看 文档.

下面是整个模式,我将把它一点一点地分解:


{%模式%}
{
“名称”:“旋转木马”部分,
“预设”:(
{
“名称”:“旋转木马”部分,
“类别”:“主页content”
}
],
“设置”:[
{
“类型”:“文本”,
“id”:“标题”,
“标签”:“标题”
},
{
“类型”:“richtext”,
“id”:“文本”,
“标签”:“文本”
}
],
“块”:(
{
“类型”:“carousel-image”,
“名称”:“旋转木马”形象,
/ /“限制”:5
“设置”:[
{
“类型”:“image_picker”,
“id”:“形象”,
“标签”:“图像”
},
{
“类型”:“文本”,
“id”:“标题”,
“标签”:“标题”
}
]
}
]
}
{% endschema %}

 

首先我们打开 {%模式%} 标记并创建我们的Section.

 

{%模式%}
{
“名称”:“旋转木马”部分,
“预设”:(
{
“名称”:“旋转木马”部分,
“类别”:“主页content”
}
],

 

接下来,我们添加一些Section设置. 这是我们的静态标题和副本. 的 “类型” 设置规定了在管理中添加何种类型的字段. 的 ”id” 设置是呈现content时要引用的content. “标签” 是简单的标签,将出现在管理上面的字段.

 

“设置”:[
{
“类型”:“文本”,
“id”:“标题”,
“标签”:“标题”
},
{
“类型”:“richtext”,
“id”:“文本”,
“标签”:“文本”
}
],

 

最后,我们加上 并关闭 模式{% endschema %} 标签. 你可以有很多 在一个 Section 如您所愿,但对于本例,我们只需要一个. 的 “类型” 设置是必需的,但是值由您决定. 这个设置是用来区别于其他设置的 Section 如果你有一个以上. 的 “名称” 也取决于你. “设置” 遵循同样的规则 Section “设置”.

 

“块”:(
{
“类型”:“carousel-image”,
“名称”:“旋转木马”形象,
/ /“限制”:5
“设置”:[
{
“类型”:“image_picker”,
“id”:“形象”,
“标签”:“图像”
},
{
“类型”:“文本”,
“id”:“标题”,
“标签”:“标题”
}
]
}
]
}
{% endschema %}

 

还注意到 “限制” 设置在上面被注释掉了. 如果您想限制块可以重复的次数,这是很方便的. 要获得Section和块设置的完整列表,请查看 文档.

现在我们已经创建了模式,我们需要呈现将通过管理员输入到模式中的content. 我将把标记留给您,但这是如何呈现Section和块content.

节的content非常简单. 在同一个旋转木马上.在模式之上的液体文件,从 section.设置. 紧随其后的是 ”id”“设置” 你想在双花括号中显示和包装整个东西 {{ }}. 它应该看起来像这样:

 

{{节.设置.标题}}

 

由于块content是可重复的,所以我们将使用可信的 {%, %} 循环来呈现块content. 如果你的Section中只有一个块,那么你的循环可以像这样简单:

 

{%表示section中的块.块%}
{{块.设置.标题}}
{% endfor %}

 

如果你有一个以上 在一个 Section 只要用一个好的老' {% if %} 核对 “类型” 来确定何时何地显示具体 . 我总是这样做,不管有多少 以防我以后再加更多.

 

{%表示section中的块.块%}
{% if块.Type == "carousel-image" %}
{{块.设置.标题}}
{% endif %}
{% endfor %}

 

{%, %} 将循环的次数与块在admin Section中重复的次数相同.

要在你的Shopify网站上显示这个部分,只需添加 {% section 'carousel' %} 到任何页面模板文件. 在管理员中创建页面并选择添加了Section的页面模板之后, go to Online Store -> Customize. 在左上角有一个包含所有页面的下拉菜单. 选择您的页面. 最终的管理界面看起来像这样:

注意静态的“Title”和“Text”字段后面跟着可重复的“Carousel Image”.通过简单的点击“添加旋转木马图像”,你可以添加尽可能多的旋转木马图像,因为你喜欢.

节和块打开了一个自定义content的世界. 话虽这么说, 从content组织的角度来看,这可能有点令人困惑,因为标准的页面标题和content与自定义的部分是分开的. 另一个缺点是它们缺乏可重用性. 除了主页,每个独特的部分的content将是相同的所有页面. 但这只是为它们提供的灵活性付出的一个小代价.

嵌套的导航菜单

如果你在Shopify工作过一段时间,你就会知道在过去创建导航下拉菜单是一件非常痛苦的事情. 每个下拉菜单必须在自己单独的菜单中,并且必须与你希望它出现的导航项具有完全相同的名称. 这导致了非常混乱的导航管理部分,是一个头痛的主题开发人员.

幸运的是,随着Shopify嵌套导航菜单的出现,那些日子已经过去了. 新的嵌套菜单可以达到三层深,使创建和编辑您的网站的导航菜单更直观. 现在,你所有的顶级导航项和它们的下拉菜单都可以在一个菜单下.

通过简单的拖放, 导航项可以重新排序,并放置在第一和第二级项下,以创建嵌套导航.

这也极大地简化了主题开发人员的液态标记. 我们不再需要检查下拉菜单的标题是否与导航项的标题匹配. 这个简化的液体加价的例子直接来自Shopify 文档.

 



    {%表示链接列表中的链接.主菜单.链接%}

  • {{ link.title | escape }}
    {%如果链接.链接 !=空白%}