diff --git a/README.md b/README.md index 1b1511e6d..55987346a 100644 --- a/README.md +++ b/README.md @@ -15,12 +15,25 @@ A simple, expressive and safe [Shopify][shopify/liquid] / Github Pages compatibl

logo

+## What's it like? + +Basically there're two types of Liquid syntax: tags enclosed by `{% %}` and outputs enclosed by `{{ }}`. A Liquid template looks like: + +```liquid +{% if username %} + {{ username | append: ", welcome to LiquidJS!" | capitalize }} +{% endif %} +``` + +[A live demo](https://liquidjs.com/playground.html) is also available and here's a [quick tutorial](https://liquidjs.com/tutorials/intro-to-liquid.html) for Liquid syntax. + + ## Installation Install from npm in Node.js: ```bash -npm install --save liquidjs +npm install liquidjs ``` Or use the UMD bundle from jsDelivr: diff --git a/docs/source/_data/menu.yml b/docs/source/_data/menu.yml index 456e63797..d3caab19c 100644 --- a/docs/source/_data/menu.yml +++ b/docs/source/_data/menu.yml @@ -1,4 +1,4 @@ -tutorials: /tutorials/setup.html +tutorials: /tutorials/intro-to-liquid.html tags: /tags/overview.html filters: /filters/overview.html playground: /playground.html diff --git a/docs/source/tutorials/contribution-guidelines.md b/docs/source/tutorials/contribution-guidelines.md index 4d730acc5..3d362a739 100644 --- a/docs/source/tutorials/contribution-guidelines.md +++ b/docs/source/tutorials/contribution-guidelines.md @@ -26,7 +26,7 @@ npm test ## Financial Support -LiquidJS is Open Source and Free and **without** capitalists support and **without** any ADs. To help it live and thrive, consider contribute on [Open Collective][oc] or [Patreon][pt]. To acknowledge your contribution, your name and avatar will be listed here and on [Github README][liquidjs]. +LiquidJS is Open Source and Free. To help it live and thrive, please consider contribute on [Open Collective][oc] or [Patreon][pt]. To acknowledge your contribution, your name and avatar will be listed here, [homepage](https://liquidjs.com/) for LiquidJS and on [Github README][liquidjs]. diff --git a/docs/source/tutorials/intro-to-liquid.md b/docs/source/tutorials/intro-to-liquid.md index 3d52aef63..82c9e9874 100644 --- a/docs/source/tutorials/intro-to-liquid.md +++ b/docs/source/tutorials/intro-to-liquid.md @@ -1,5 +1,5 @@ --- -title: Introduction to Liquid Template Language +title: The Liquid Template Language --- LiquidJS is a simple, expressive and safe [Shopify][shopify/liquid] / Github Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by Github Pages, Jekyll and Shopify, see [Differences with Shopify/liquid][diff]. @@ -9,6 +9,10 @@ LiquidJS syntax is relatively simple. There're 2 types of markups in LiquidJS: - **Tags**. A tag consists of a tag name and optional arguments wrapped between `{%raw%}{%{%endraw%}` and `%}`. - **Outputs**. An output consists of a value and a list of filters, which is optional, wrapped between `{%raw%}{{{%endraw%}` and `}}`. +{% note info Live Demo %} +Before going into the details, here's a live demo to play around: . +{% endnote %} + ## Outputs **Outputs** are used to output variables, which can be transformed by filters, into HTML. The following template will insert the value of `username` into the input's value: diff --git a/docs/source/zh-cn/tutorials/contribution-guidelines.md b/docs/source/zh-cn/tutorials/contribution-guidelines.md index 474e506ab..cdafa8af8 100644 --- a/docs/source/zh-cn/tutorials/contribution-guidelines.md +++ b/docs/source/zh-cn/tutorials/contribution-guidelines.md @@ -26,7 +26,7 @@ npm test ## 成为赞助者！ -LiquidJS 是开源的、免费的，并且 **没有** 商业支持，也 **没有** 任何广告。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里和 [Github README][liquidjs]。 +LiquidJS 是开源和免费的。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里，[LiquidJS 首页](https://liquidjs.com/)和 [Github README][liquidjs]。 diff --git a/docs/source/zh-cn/tutorials/intro-to-liquid.md b/docs/source/zh-cn/tutorials/intro-to-liquid.md index 025a97582..bb03dca17 100644 --- a/docs/source/zh-cn/tutorials/intro-to-liquid.md +++ b/docs/source/zh-cn/tutorials/intro-to-liquid.md @@ -1,5 +1,5 @@ --- -title: Liquid 模板语言简介 +title: Liquid 模板语言 --- LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。这个项目的目的是为 JavaScript 社区提供一个 Liquid 模板引擎的实现。Liquid 最初用 Ruby 实现并用于 Github Pages, Jekyll 和 Shopify，参考 [和 Shopify/liquid 的区别][diff]。 @@ -9,6 +9,10 @@ LiquidJS 语法相对简单。LiquidJS 中有两种标记： - **标签**。标签由标签名和参数构成，由 `{%raw%}{%{%endraw%}` 和 `%}` 包裹。 - **输出**。输出由一个值和一组可选的过滤器构成，由 `{%raw%}{{{%endraw%}` 和 `}}` 包裹。 +{% note info 在线示例 %} +在进一步了解细节之前，这里有一个在线示例：。 +{% endnote %} + ## 输出 **输出** 用于转换和输出变量到 HTMl。下面的模板将会把 `username` 的值插入到 input 的 `value`： diff --git a/docs/themes/navy/layout/partial/all-contributors.swig b/docs/themes/navy/layout/partial/all-contributors.swig index 2b7af66f7..a4de297a3 100644 --- a/docs/themes/navy/layout/partial/all-contributors.swig +++ b/docs/themes/navy/layout/partial/all-contributors.swig @@ -51,6 +51,7 @@ +