assets/

资源文件目录，存放 css 、javascript、图片、字体等文件，通过 asset_url 方法生成可访问的 URL。

示例

插入 css 文件

把网站样式文件存放在 assets/stylesheets/application.css

<!-- layout/theme.liquid 模版文件中插入样式文件 -->
{{ 'stylesheets/application.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}

渲染输出

<link data-turbo-track="reload" rel="stylesheet" href="/-/theme-assets/eyJ0aGVtZV9zY29wZSI6Indpa2kiLCJ0aGVtZV9uYW1lIjoid2lraSIsImFzc2V0X29pZCI6ImZha2Utb2lkIiwicGF0aCI6InN0eWxlc2hlZXRzL2FwcGxpY2F0aW9uLmNzcyJ9--5a42adbc96ee44004a4d9b53f8f39e34b68129df800cd750ee6dcb5e186809c2/stylesheets/application.css">

插入 javascript 文件

把 javascript 文件存放在 assets/javascripts/application.js

<!-- layout/theme.liquid 模版文件中插入 javascript 文件 -->
{{ 'javascripts/application.js' | asset_url | script_tag: defer: true, data-turbo-track: 'reload' }}

渲染输出

<script defer="defer" data-turbo-track="reload" src="/-/theme-assets/eyJ0aGVtZV9zY29wZSI6Indpa2kiLCJ0aGVtZV9uYW1lIjoid2lraSIsImFzc2V0X29pZCI6ImZha2Utb2lkIiwicGF0aCI6ImphdmFzY3JpcHRzL2FwcGxpY2F0aW9uLmpzIn0--7c8c7c887263884c9e78ee8adc10eb137e3cea43b37915afff934642560f835c/javascripts/application.js"></script>

显示图片

把图片存放assets/images/welcome.png

<!-- templates/index.liquid 模版文件中显示图片-->
<div>
  <img src="{{ 'images/welcome.png' | asset_url }}"
</div>

渲染输出

<!-- templates/index.liquid 模版文件中显示图片-->
<div>
  <img src="/-/theme-assets/eyJ0aGVtZV9zY29wZSI6Indpa2kiLCJ0aGVtZV9uYW1lIjoid2lraSIsImFzc2V0X29pZCI6ImZha2Utb2lkIiwicGF0aCI6ImphdmFzY3JpcHRzL2FwcGxpY2F0aW9uLmpzIn0--7c8c7c887263884c9e78ee8adc10eb137e3cea43b37915afff934642560f835c/images/welcome.png"
</div>