Shopify的字体库Font引用代码、引入js、引入css

linlinlove2

已于 2024-05-23 13:49:58 修改

阅读量685

点赞数 5

文章标签： shopify二次开发 shopify模板开发 shopify外贸商城开发 shopify网站搭建 shopify网站运营 shopify网站开发问题处理 shopify模板修改

于 2023-12-13 16:28:13 首次发布

本文链接：https://blog.csdn.net/withkai44/article/details/134974469

版权

Shopify引入js文件
通过{{ 'notification.js' | asset_url | script_tag }}这样的方式引入，直接通过script传统引入可能不生效

[更新] 这是一个更好的方法，完全省略了 sytlesheet_tag 函数:

<link rel='stylesheet' media='screen and (device-aspect-ratio: 40/71)' href='{{ 'mobile.css' | asset_url }}' />

旧: 正常包含 Assets :

{{ 'mobile.css' | asset_url | stylesheet_tag }}

{{ 'swiper-bundle.min.js' | asset_url | script_tag }}

Shopify的字体库Font引用代码

{%- comment -%}Style 字体{%- endcomment -%}
{%- liquid
  style
    assign var_fonts = 'body-font,header-font' | split: ','
    assign font_handles = 'type_body_font,type_header_font' | split: ','
    assign weights = '100,200,300,400,500,600,700,900' | split: ','
    for font_handle in font_handles
      assign font = settings[font_handle]
      for weight in weights
        echo font | font_modify: 'weight', weight | font_face: s: 'swap'
      endfor
      echo ":root {--" | append: var_fonts[forloop.index0] | append: ":" | append: font.family | append: ';}'
    endfor
  endstyle
-%}