【前端扫盲】liquid模板语言

Tipriest_

于 2025-03-23 22:07:11 发布

阅读量418

点赞数 4

分类专栏：前端扫盲文章标签：前端 liquid 模板

本文链接：https://blog.youkuaiyun.com/titan__/article/details/146463165

版权

前端扫盲专栏收录该内容

10 篇文章

订阅专栏

Liquid 是一种模板语言，主要用于将动态数据嵌入到静态的 HTML 文件中，从而生成动态网页内容。它的核心作用是分离数据和展示逻辑，让开发者可以更高效地构建可维护的动态页面。以下是具体介绍：

1. 模板语言是什么？

模板语言允许你在静态文件中插入动态内容。例如，电商网站的商品名称、价格等数据通常存储在数据库中，通过模板语言可以将这些数据动态渲染到页面上，而无需手动修改 HTML。

2. Liquid 的核心特点

简单安全：
Liquid 的语法简单（类似自然语言），且默认限制直接执行复杂逻辑，适合非开发者（如设计师）使用。
例如：用 {{ product.price }} 输出商品价格，而不是直接操作数据库。

逻辑控制：
支持条件判断、循环、变量赋值等基础逻辑操作，例如：

{% if user.logged_in %}
  欢迎回来，{{ user.name }}！
{% else %}
  请登录。
{% endif %}

数据过滤：
通过 过滤器（Filters） 对数据进行格式化或转换，例如日期格式化、字符串处理等：
```
{{ "hello" | upcase }} 
{{ product.date | date: "%Y-%m-%d" }} 
```
服务端渲染：
Liquid 在服务端执行，生成的 HTML 直接发送给用户，用户无法修改模板逻辑。

3. Liquid 的典型应用场景

电商平台（如 Shopify）：
动态渲染商品列表、用户信息等。例如，Shopify 主题中大量使用 Liquid 实现商品展示、购物车逻辑。
静态网站生成器（如 Jekyll）：
将 Markdown 文件内容转换为 HTML，并插入导航栏、页脚等公共组件。
内容管理系统（CMS）：
管理动态内容，例如博客文章、用户评论等。

4. 与其他模板语言的区别

安全性：Liquid 限制直接访问底层代码（如数据库查询），而像 PHP 等语言可能允许更危险的操作。
语法简洁：比 JavaScript 模板引擎（如 Handlebars）更接近自然语言，适合非程序员使用。

5. 示例代码

<!-- 循环输出商品列表 -->
{% for product in products %}
  <div class="product">
    <h2>{{ product.name }}</h2>
    <p>价格：{{ product.price | money }}</p>
    {% if product.stock > 0 %}
      <button>加入购物车</button>
    {% else %}
      <p>已售罄</p>
    {% endif %}
  </div>
{% endfor %}