Liquid是由Shopify創建並使用Ruby編寫的模板語言。現在,它可以作為GitHub上的開源項目使用,並被許多不同的軟件項目和公司使用。 Liquid是所有Shopify主題的骨干,用於將動態內容加載到在線商店的頁面上。
什么是模板語言?
網站設計人員和開發人員可以使用模板語言來構建將多個頁面上相同的靜態內容與一個頁面之間變化的動態內容相結合的網頁。模板語言可以重新使用定義網頁布局的靜態元素,同時使用Shopify商店中的數據動態填充頁面。靜態元素用HTML編寫,動態元素用Liquid編寫。文件中的Liquid元素充當占位符:當文件中的代碼被編譯並發送到瀏覽器時,Liquid替換為安裝主題的Shopify商店中的數據。
Liquid語法
與傳統的編程語言一樣,Liquid具有語法,與變量交互以及包括輸出和邏輯之類的構造。由於其可讀性良好的語法,Liquid構造易於識別,並且可以通過兩組定界符與HTML進行區分:雙大括號定界符{{}}(表示輸出)和大括號百分比定界符{%%},表示邏輯和控制流程。
Liquid代碼具有三個主要功能:
- Objects
- Tags
- Filters
Objects對象
Liquid對象從Shopify管理員輸出數據。 在主題模板中,對象用雙花括號定界符{{}}包裹起來,如下所示:
{{ product.title }}
在上面的示例中,product是對象,而title是該對象的屬性。 每個對象都有一個關聯的屬性列表。 要了解有關product對象屬性的更多信息,請參見liquid產品參考。
可以在Shopify主題的產品模板中找到{{product.title}} Liquid對象。 當文件中的代碼被編譯並呈現在Shopify商店的產品頁面上時,Liquid對象的輸出將是產品的標題。 例如,在服裝店中,結果可能是:
Awesome T-Shirt
即使Shopify商店中的每個產品都使用相同的模板,模板中的Liquid對象也會根據您正在查看的產品頁面輸出不同的數據。
要了解有關可在主題模板中使用的不同Liquid對象的更多信息,請參見Liquid objects頁面。
Tags標簽
Liquid標簽用於創建邏輯和控制模板的流程。 呈現網頁時,大括號百分比定界符{%%}及其周圍的文本不會產生任何可見輸出。 這使您可以分配變量並創建條件或循環,而無需在頁面上顯示任何Liquid邏輯。
例如,您可以使用Liquid標簽根據產品是否可用來在產品頁面上顯示不同的內容:
{% if product.available %} <h2>Price: $99.99</h2> {% else %} <h2 class="sold-out">Sorry, this product is sold out.</h2> {% endif %}
如果有該產品,則輸出將是:
Price: $99.99
如果該產品不可用,則輸出將是:
Sorry, this product is sold out.
上面的例子中使用了if
和 else
的Liquid tags標簽,這是控制流標簽。
Liquid標簽分為以下幾種類型:
Filters篩選器
liquid過濾器用於修改數字,字符串,對象和變量的輸出。 它們放置在輸出標簽{{}}中,並用豎線字符|表示。
一個簡單的例子是大寫字符串過濾器:
{{ 'hello, world!' | capitalize }}
這個過濾器通過大寫修改字符串。 輸出將是:
Hello, world!
一個輸出可以使用多個過濾器,並且從左到右應用它們:
{{ 'hello, world!' | capitalize | remove: "world" }}
首先將字符串大寫,然后刪除單詞world。 輸出將是:
Hello, !
您可以使用Liquid過濾器進行多種有用的數據處理。 它們分為8種類型:
- Array filters
- Color filters
- HTML filters
- Math filters
- Money filters
- String filters
- URL filters
- Additional filters
訪問主題模板
您可以從Shopify管理員的“主題”部分訪問主題的Liquid文件:
-
編輯修改相應的文件
-
點擊保存 Save.
-
訪問前端頁面看看是否有Liquid 輸出.
其他資源
Liquid代碼示例
Shopify Liquid代碼示例是一個可搜索的代碼示例庫,它基於主題組件,可幫助您更快,更可靠地構建主題並牢記可訪問性。