电子商务和零售搜索营销

缩小使用 Liquid 变量构建的 Shopify CSS 的最简单方法

我们建立了一个 Shopify Plus 在实际主题文件中具有许多样式设置的客户端的站点。 虽然这对于轻松调整样式非常有利,但这意味着您没有静态级联样式表(的CSS) 文件,您可以轻松地 缩小 (减小尺寸)。 有时这被称为 CSS 压片压缩 你的 CSS。

什么是 CSS 缩小?

当您写入样式表时,您只需为特定的 HTML 元素定义一次样式,然后在任意数量的网页上反复使用它。 例如,如果我想为我的字体在我的网站上的外观设置一些细节,我可以按如下方式组织我的 CSS:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

在该样式表中,每个空格、换行符和制表符都占用空间。 如果我删除所有这些,如果 CSS 被缩小,我可以将该样式表的大小减少 40% 以上! 结果是这样的……

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS 缩小 如果您想加快网站速度,这是必须的,并且有许多在线工具可以帮助您有效地压缩 CSS 文件。 只需搜索 压缩 CSS 工具 or 缩小 CSS 工具 线上。

想象一下一个大的 CSS 文件,通过缩小它的 CSS 可以节省多少空间……通常至少占预算的 20%,甚至可以超过预算的 40%。 在您的网站中引用较小的 CSS 页面可以节省每个页面的加载时间,可以提高您网站的排名,提高您的参与度,并最终提高您的转化指标。

当然,缺点是压缩的 CSS 文件中只有一行,因此很难排除故障或更新它们。

Shopify CSS 液体

在 Shopify 模版中,您可以应用可以轻松更新的设置。 我们喜欢在测试和优化网站时这样做,这样我们就可以直观地自定义主题,而不是深入研究代码。 因此,我们的样式表是使用 Liquid(Shopify 的脚本语言)构建的,并且我们添加了变量来更新样式表。 它可能看起来像这样:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

虽然这很好用,但您不能简单地复制代码并使用在线工具来缩小它,因为他们的脚本不理解液体标签。 事实上,如果你尝试,你会完全破坏你的 CSS! 好消息是,因为它是用 Liquid 构建的……您实际上可以使用脚本来最小化输出!

Shopify 液体中的 CSS 缩小

Shopify 使您能够轻松编写变量脚本并修改输出。 在这种情况下,我们实际上可以将 CSS 包装到一个内容变量中,然后对其进行操作以删除所有制表符、换行符和空格! 我在

Shopify 社区蒂姆 (tairli) 它工作得很好!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

因此,对于我上面的示例,我的 theme.css.liquid 页面将如下所示:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

当我运行代码时,输​​出 CSS 如下,完美缩小:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

Douglas Karr

Douglas Karr 首席营销官是 开放洞察 和创始人 Martech Zone。 道格拉斯帮助了数十家成功的 MarTech 初创公司,协助进行了超过 5 亿美元的 MarTech 收购和投资尽职调查,并继续协助公司实施和自动化其销售和营销策略。 道格拉斯是国际公认的数字化转型和 MarTech 专家和演讲者。 道格拉斯还是一本傻瓜指南和一本商业领导力书籍的出版作者。

相关文章

返回顶部按钮
关闭

检测到Adblock

Martech Zone 我们能够免费为您提供这些内容,因为我们通过广告收入、联属链接和赞助从我们的网站中获利。 如果您在浏览我们的网站时删除广告拦截器,我们将不胜感激。