使用带有placeholder_svg_tag过滤器的产品的占位符图像_极简慕枫

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

虽然小猫的图像非常惊人，但它们并不一定在设计中传达有关图像目的的任何信息。幸运的是，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>

图像选项

您可以使用placeholder_svg_tag过滤器呈现几种类型的svg占位符插图，包括图像，集合，生活方式和产品。    

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

武汉网页设计

添加自定义类

为了更容易地使用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规范，使用描述内容性质的值，而不是描述内容所需表示的值 

占位符所有的东西