這篇文章概述地提供前端開發人員製作客製內容頁面的 liquid（一個開放程式碼）工具和功能。
針對進階編輯客製的頁面：
點選左側選單的頁面。
在你想要編輯的頁面上點選編輯。
點選進階編輯器。
這使你能夠在 HTML 中建立像素完美的網路頁面。
以下是進階編輯視窗中可用的一些功能和命令：
在你的 CSS 面板中的內容被輸入之前，系統不會有預設的樣式表。這讓你可以完全控制你的網站樣式和內容。
每門課程都有自己的 HTML 頁面，這都是在建立或編輯課程，或學員從前台登入頁面時自動建立的。
對於變數和動態插入的學員資訊，你可以使用 Liquid 指令 - 有關這些指令的完整內容，請參考：https://help.shopify.com/en/themes/liquid
起始頁和最後一頁的參考資料：
當頁面、代碼或全域 javascript 或 CSS 的所有內容都呈現在頁面上時，它會被包在指令中，以便在後台系統中輕鬆識別。
指令是 start- 和 end- 然後是頁面網址後綴，如果是全域代碼，則是 -global ，如果是一般代碼，則是 -snippet。
例如：有網址後綴 hover-fade-in 的 Javascript 全域代碼，指令如下：
<script>
/* over-fade-in-global-snippet-start */
... content ...
/* over-fade-in-global-snippet-end */
</script>
而有網址後綴 button-styling 的標準 CSS 代碼，指令則是：
<style>
/* button-styling-snippet-start */
... content ...
/* button-styling-snippet-end */
</style>
內容頁面 home ：
<!-- home-start -->
... content ...
<!-- home-end -->
以下這些起始和結束的指令能讓你嘗試在排除排列的問題時，找到內容的位置。
Liquid ：
這些返回單一值，並且可被輸入指令到內容頁面中的任一個地方。
{{ enquiry_email }} 這將返回在你的組織設定中用於查詢的電子信箱下列出的電子信箱地址。
{{ support_email }} 這將返回在你的組織設定中用於支援的電子信箱下列出的電子信箱地址。
{{ support_phone }} 這將返回在你的組織設定中用於查詢的電話號碼下列出的電話號碼。
{{ system_email }} 返回格式為 support@your-domain 的電子信箱。
{{ student_email }} 返回當前已登入的學員的電子郵件。
{{ student_id }} 以 UUID 返回學員 ID。
集合：
這些返回一組你可以查詢的物件。
purchasable_courses 返回有「學員可以在線上註冊，並支付此課程的費用嗎？」的課程集合。勾選。
advertised_courses 返回也有「學員可以在首頁上或相關課程下看到這門課程嗎？」的 purchasable_courses 課程集合 。複選框已勾選。
free_courses 返回免費的 purchasable_courses 課程集合。
paid_courses 返回非免費的 purchasable_courses 課程集合。
published_articles 返回在系統中所有已發布文章的集合。
article_categories 返回系統中所有文章類別的集合，接著可以透過呼叫 for article in category.articles do 來瀏覽該集合中可觀看的文章。
使用集合
你可以使用如下所示的集合：
{% for course in paid_courses %}
<!-- Will render this HTML for every paid_course -->
<h1>{{ course.name }}</h1>
<a href="{{ course.sign_up_url }}">Sign Up Now!</a>
{% endfor %}你也可以透過傳遞限制指令來尋求前 3 門課程：
{% for course in paid_courses limit: 3 %}
<!-- Will render this for 3 paid_courses -->
<h1>{{ course.name }}</h1>
<a href="{{ course.sign_up_url }}">Sign Up Now!</a>
{% endfor %}
過濾器：
{{ library_item_id | library_id }}
部分呈現資料庫項目。
{{ course.id | enroll_button }}
呈現一個簡單的註冊按鈕和你設計的表單。
{{ course.id | promo_code }}
呈現一個簡單的促銷代碼按鈕和你設計的表單。
{{ course = course_id | find_course }}
返回一個課程物件，接著你可以對其呼叫以下函式：
立即購買按鈕：
您可以使用 Stripe Checkout 在你的網站上新增 “立即購買” 按鈕。首先進入你的 Stripe Payment 設定，並啟用 CLIENT-ONLY INTEGRATION，並確保你的 enlight 的域名包含在列表中。
然後在 Stripe 的「產品」中建立一項產品，增設價格並取得價格 ID。
接著在你的頁面上新增按鈕，你可以輸入以下內容：
{{ 'price_1IUliUBopgHamtau9PTcDGZl' | buy_button: 'Buy it Now', 'https://my-domain.com/success-page-url' }}
這將顯示一個有 “立即購買” 內文的按鈕，一旦你購買成功，按鈕會將買家導回 “https://my-domain.com/success-page-url”。
你也可以在 Stripe 中設定：當有人在購買商品時，系統要向你寄送電子郵件以便你可以追蹤該購買狀況。
建立課程後，你也可以使用：
{{ course.updated_at }}
上次更新課程的時間。
{{ course.name }}
在課程編輯頁面上設定的課程名稱。
{{ course.summary }}
在課程編輯頁面上設定的課程摘要。
{{ course.marketing_copy_html }}
在課程編輯頁面上設定的行銷文案。
{{ course.purchasable? }}
如果可以購買課程，則返回是或否。
{{ course.price_currency }}
課程的計價貨幣（在此時都會是美元計價）。
{{ course.price_symbol }}
貨幣符號，在此時都會是 $。
{{ course.price_dollars_and_cents }}
價格寫出來像 99.34 這樣。
{{ course.price_cents }}
以美分為單位的價格，例如：9934。
{{ course.outcome }}
在課程編輯頁面中設定的成果。
{{ course.free_for_members }}
如果你是我們平台的會員，請問這門課程是免費的嗎？（是/否）。
{{ course.free? }}
這個課程是免費提供的嗎？（是/否）。
{{ course.paid? }}
這是一門需要付費的課程嗎？（是/否）。
{{ course.instructor_name }}
在課程編輯頁面上設定的課程指導員全名。
{{ course.instructor_given_name }}
在課程編輯頁面上設定的課程指導員名字。
{{ course.instructor_family_name }}
在課程編輯頁面上設定的課程指導員姓氏。
{{ course.instructor_email }}
在課程編輯頁面上設定的課程指導員電子信箱。
{{ course.image_url }}
在課程編輯頁面上設定的分配給課程影像的 URL。
{{ course.points }}
這門課總計會有多少點數？將每一步的點數相加計算。
{{ course.id }}
課程的專屬 ID。
{{ course.sign_up_url }}
你可以提供給某人報名課程並查找更多資訊的 URL。