网站制作通过placeholder_svg_tag过滤器为产品使用占位符图像

当开始构建主题或原型时，许多开发人员使用某种形式的占位符文本或图像。这通常是因为我们希望并且需要我们的网站感觉真实，真实，并且与最终产品类似。最好的方法是使用真实内容，但是当您无法访问真实内容时 – 因为这通常是客户端给您的最后一件事 – 下一个最佳选择是使用占位符文本和图像。我们经常转向lorem ipsum文本或其文本的许多变体等解决方案，以及像placeholder.com或{placekitten}这样的解决方案。

虽然小猫images的图像非常惊人，但它们并不一定在设计中传达任何有关图像目的的信息。幸运的是，Shopify为您的占位符需求提供了内置解决方案，尤其是在构建Liquid模板和主题样式时。这就是所谓的placeholder_svg_tag过滤器，它占用一个占位符名称并输出一个占位符SVG插图。

为什么占位符图像有用？

如前所述，在开发网站时，您可能并不总是有实际内容用于建设阶段。它总是最好使用真正的内容，如果你拥有了它，但如果这是不可能的，另一种是使用占位符。在这些情况下，我们仍然需要构建一些东西，并且通常我们已经很好地了解了需要在主题设计中进行布局的图片尺寸。

占位符可以帮助我们更好地理解和解释随着浏览器或设备的变化，图像及其布局将如何移动，形状，大小和回流。

当给予一些背景时，它们也有助于传达关于预期内容的意义。例如，显示单个产品与多个产品的占位符图像向商家传达了此图像可能在未来的用途以及替换方式。

使用placeholder_svg_tag过滤器

使用Shopify的占位符SVG非常简单，因为包含它们对于placeholder_svg_tag过滤器来说非常轻松。

只需包含占位符名称，然后是placeholder_svg_tag过滤器：

{{ 'product-1' | placeholder_svg_tag }}

输出只是一个内联SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5">...path content...</svg>

图像选项

有几种类型的svg占位符插图，您可以使用placeholder_svg_tag滤镜进行渲染，包括图像，收藏，生活方式和产品。   

您可以在下面的图表中看到每个占位符名称的预览，以及它们呈现的预览：

占位符名称	预习
image
collection-1
collection-2
collection-3
collection-4
collection-5
collection-6
lifestyle-1
lifestyle-2
product-1
product-2
product-3
product-4
product-5
product-6

您可能还喜欢： 如何使用带有液体的数学滤波器。

添加一个自定义类

为了更容易地使用CSS，您可以通过将类参数传递给placeholder_svg_tag过滤器来向svg添加一个或多个自定义类：

{{ 'product-1' | placeholder_svg_tag: 'my-custom-class' }}

要向SVG添加多个类，只需在类参数内添加一个空格即可：

{{ 'product-1' | placeholder_svg_tag: 'my-custom-class my-custom-class--two' }}

关于类名的要记住的事情：类似于向HTML元素添加CSS类，如果在类名之间使用空格，则Web浏览器将它们呈现为单独的类。

• 根据W3C规范，您永远不应该使用数字或破折号启动类名
• 类名只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A0以及更高，加上连字符-和下划线_
• 最佳做法是使用 lowercase-separated-with-dashes
• 类名是区分大小写的，所以最好避免随机大写字母
• 根据W3C规范，使用描述内容性质的值，而不是描述内容所需表示的值

占位符所有的东西🖼！

总而言之，使用placeholder_svg_tag过滤器就像知道占位符名称以及您想要输出该图像的位置一样简单。占位符图像可帮助开发人员和设计人员测试其工作并提供上下文 当网站的最终内容不可用时，这尤其有用 – 占位符图像可以传达要在特定位置显示的图像类型，以及它应如何在浏览器中布局，调整大小和流动。