mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 04:10:40 -07:00
docs: better PWA, more responsive, better description
This commit is contained in:
Harttle
+3
-1
@@ -2,7 +2,9 @@ title: LiquidJS
|
||||
subtitle: "A simple, expressive and safe template engine."
|
||||
description: "LiquidJS is a simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript."
|
||||
author: Harttle
|
||||
language: en
|
||||
language:
|
||||
- en
|
||||
- zh-cn
|
||||
timezone: UTC
|
||||
|
||||
url: https://liquidjs.com
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Filters
|
||||
description: Description and demo for each Liquid filter
|
||||
---
|
||||
|
||||
LiquidJS implements business-logic independent filters that are typically implemented in [shopify/liquid][shopify/liquid]. This section contains the specification and demoes for all the filters implemented by LiquidJS.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"short_name": "LiquidJS",
|
||||
"name": "LiquidJS",
|
||||
"description": "A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon/apple-touch-icon-57x57.png",
|
||||
@@ -23,6 +24,33 @@
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"shortcuts" : [
|
||||
{
|
||||
"name": "Tutorials",
|
||||
"url": "/tutorials/intro-to-liquid.html",
|
||||
"description": "A set of articles describing how to use LiquidJS"
|
||||
},
|
||||
{
|
||||
"name": "Tags",
|
||||
"url": "/tags/overview.html",
|
||||
"description": "Description and demo for each Liquid tag"
|
||||
},
|
||||
{
|
||||
"name": "Filters",
|
||||
"url": "/filters/overview.html",
|
||||
"description": "Description and demo for each Liquid filter"
|
||||
},
|
||||
{
|
||||
"name": "Playground",
|
||||
"url": "/playground.html",
|
||||
"description": "An online code editor to try out and share Liquid templates"
|
||||
},
|
||||
{
|
||||
"name": "API",
|
||||
"url": "/api/classes/liquid_.liquid.html",
|
||||
"description": "TypeScript doc for LiquidJS classes and interfaces"
|
||||
}
|
||||
],
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"theme_color": "#0f83ce",
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
---
|
||||
layout: playground
|
||||
title: Playground
|
||||
description: An online code editor to try out and share Liquid templates
|
||||
---
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Tags
|
||||
description: Description and demo for each Liquid tag
|
||||
---
|
||||
|
||||
LiquidJS implements business-logic independent tags that are typically implemented in [shopify/liquid][shopify/liquid]. This section contains the specification and demoes for all the tags implemented by LiquidJS.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Contribution Guideline
|
||||
---
|
||||
|
||||
## Star on Github 👉 [][liquidjs]
|
||||
## 👉👉👉 Star LiquidJS [][liquidjs]
|
||||
|
||||
Starring LiquidJS is the most important and easiest way to support us: boost its rank and expose it to more people, which in turn makes it better.
|
||||
|
||||
@@ -26,13 +26,19 @@ npm test
|
||||
|
||||
## Financial Support
|
||||
|
||||
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].
|
||||
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, on LiquidJS [homepage](https://liquidjs.com/) and on [Github README][liquidjs].
|
||||
|
||||
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
|
||||
### Backers
|
||||
If you personally like LiquidJS and find it's useful to you, you can become a backer!
|
||||
|
||||
[](https://www.patreon.com/bePatron?u=32321060)
|
||||
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/backers.svg?avatarHeight=72"></object>
|
||||
|
||||
[oc]: https://opencollective.com/liquidjs/
|
||||
### Sponsors
|
||||
If LiquidJS is benefiting your business/company, please sponsor us to make it better!
|
||||
|
||||
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/sponsors.svg?avatarHeight=72"></object>
|
||||
|
||||
[oc]: https://opencollective.com/liquidjs/contribute/backer-ii-10666/checkout
|
||||
[pt]: https://www.patreon.com/harttle
|
||||
[shopify/liquid]: https://shopify.github.io/liquid/
|
||||
[caniuse-promises]: http://caniuse.com/#feat=promises
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: The Liquid Template Language
|
||||
describe: A short introduction to the Liquid template language and some simple demos.
|
||||
---
|
||||
|
||||
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].
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: 过滤器
|
||||
description: 每个 Liquid 过滤器的描述和示例
|
||||
---
|
||||
|
||||
LiquidJS 支持 Liquid 语法中具体业务无关的过滤器，基本上 [shopify/liquid 核心][shopify/liquid] 支持的 LiquidJS 都支持。这部分包含了所有 LiquidJS 支持的过滤器的文档和使用示例。
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"short_name": "LiquidJS",
|
||||
"name": "LiquidJS",
|
||||
"description": "LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon/apple-touch-icon-57x57.png",
|
||||
"type": "image/png",
|
||||
"sizes": "57x57"
|
||||
},
|
||||
{
|
||||
"src": "/icon/favicon-96x96.png",
|
||||
"type": "image/png",
|
||||
"sizes": "96x96"
|
||||
},
|
||||
{
|
||||
"src": "/icon/favicon-196x196.png",
|
||||
"type": "image/png",
|
||||
"sizes": "196x196"
|
||||
},
|
||||
{
|
||||
"src": "/icon/apple-touch-icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"shortcuts" : [
|
||||
{
|
||||
"name": "教程",
|
||||
"url": "/zh-cn/tutorials/intro-to-liquid.html",
|
||||
"description": "一系列描述如何使用 LiquidJS 的文章"
|
||||
},
|
||||
{
|
||||
"name": "标签",
|
||||
"url": "/zh-cn/tags/overview.html",
|
||||
"description": "每个 Liquid 标签的描述和示例"
|
||||
},
|
||||
{
|
||||
"name": "过滤器",
|
||||
"url": "/zh-cn/filters/overview.html",
|
||||
"description": "每个 Liquid 过滤器的描述和示例"
|
||||
},
|
||||
{
|
||||
"name": "演示",
|
||||
"url": "/zh-cn/playground.html",
|
||||
"description": "一个用来尝试和分享 Liquid 模板的在线编辑器"
|
||||
},
|
||||
{
|
||||
"name": "API",
|
||||
"url": "/zh-cn/api/classes/liquid_.liquid.html",
|
||||
"description": "LiquidJS 类和接口的 TypeScript 文档"
|
||||
}
|
||||
],
|
||||
"start_url": "/zh-cn",
|
||||
"display": "standalone",
|
||||
"theme_color": "#0f83ce",
|
||||
"background_color": "#0f83ce"
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
---
|
||||
layout: playground
|
||||
title: 演示
|
||||
description: 一个用来尝试和分享 Liquid 模板的在线编辑器
|
||||
---
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: 标签
|
||||
description: 每个 Liquid 标签的描述和示例
|
||||
---
|
||||
|
||||
LiquidJS 支持 Liquid 语法中具体业务无关的标签，包含 [shopify/liquid 核心][shopify/liquid] 里的所有标签。这部分包含了所有 LiquidJS 支持的标签的文档和使用示例。
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 贡献指南
|
||||
---
|
||||
|
||||
## Star on Github 👉 [][liquidjs]
|
||||
## Star LiquidJS 👉👉👉 [][liquidjs]
|
||||
|
||||
Star 是支持 LiquidJS 最重要的方式，也是最简单的方式：通过提升排名来让更多人了解 LiquidJS，让它得到更好的改进。
|
||||
|
||||
@@ -24,13 +24,19 @@ npm test
|
||||
|
||||
**向后兼容**：请考虑向后（之前的旧的版本）兼容。LiquidJS 被用于很多层的软件，包括底层库、编译器、站点生成器、 Web 服务器。对多数最终用户来说，驱动或请求整个系统做一次主版本升级是很难办到的。
|
||||
|
||||
## 成为赞助者！
|
||||
## 资金支持
|
||||
|
||||
LiquidJS 是开源和免费的。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里，[LiquidJS 首页](https://liquidjs.com/)和 [Github README][liquidjs]。
|
||||
LiquidJS 是开源和免费的，但支持 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里，[LiquidJS 首页](https://liquidjs.com/)和 [Github README][liquidjs]。
|
||||
|
||||
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
|
||||
### 支持者
|
||||
如果你喜欢 LiquidJS，希望支持我们，你可以成为 Open Collective Backer！
|
||||
|
||||
[](https://www.patreon.com/bePatron?u=32321060)
|
||||
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/backers.svg?avatarHeight=72"></object>
|
||||
|
||||
### 赞助商
|
||||
如果你的公司/业务在使用 LiquidJS，请考虑赞助我们！让 LiquidJS 变得更好，以及保持开放和免费！
|
||||
|
||||
<object type="image/svg+xml" data="https://opencollective.com/liquidjs/sponsors.svg?avatarHeight=72"></object>
|
||||
|
||||
[oc]: https://opencollective.com/liquidjs/
|
||||
[pt]: https://www.patreon.com/harttle
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Liquid 模板语言
|
||||
description: Liquid 模板语言的介绍，和一些示例代码
|
||||
---
|
||||
|
||||
LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。这个项目的目的是为 JavaScript 社区提供一个 Liquid 模板引擎的实现。Liquid 最初用 Ruby 实现并用于 Github Pages, Jekyll 和 Shopify，参考 [和 Shopify/liquid 的区别][diff]。
|
||||
|
||||
+2
-1
@@ -3,8 +3,9 @@
|
||||
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ config.title }}</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{{ page.description | default(config.description) }}">
|
||||
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="manifest" href="{% if page.lang != "en" %}/{{page.lang}}{% endif %}/manifest.json">
|
||||
<!-- Canonical links -->
|
||||
<link rel="canonical" href="{{ url }}">
|
||||
<!-- Alternative links -->
|
||||
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
<div id="playground" role="main">
|
||||
<div class="wrapper">
|
||||
<h1 class="inner">{{__('playground.title')}}</h1>
|
||||
<div class="row inner">
|
||||
<div class="loader" role=status aria-busy=true></div>
|
||||
<div id="editors" class="row inner hide" aria-hide=true>
|
||||
<div class="col">
|
||||
<div id="editorEl">{{ raw('partial/demo.liquid') }}</div>
|
||||
<div id="dataEl">{}</div>
|
||||
|
||||
@@ -58,6 +58,7 @@ logo-size = 36px
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
line-height: logo-size
|
||||
white-space: nowrap
|
||||
opacity: 0.7
|
||||
transition: opacity 0.2s, color 0.2s
|
||||
display: inline-block
|
||||
|
||||
@@ -19,6 +19,7 @@ pre, code
|
||||
font-family: font-mono
|
||||
color: var(--highlight-foreground)
|
||||
background: var(--highlight-background)
|
||||
white-space: pre-wrap
|
||||
|
||||
code
|
||||
padding: 0 5px
|
||||
|
||||
@@ -30,3 +30,18 @@
|
||||
margin-top: 2vh
|
||||
#previewEl
|
||||
height: 70vh
|
||||
.hide
|
||||
display: none
|
||||
.loader
|
||||
width: 75px
|
||||
height: 75px
|
||||
margin: 150px auto 200px
|
||||
border-top: 5px solid #292929
|
||||
border-right: 5px solid #efefef
|
||||
border-bottom: 5px solid #efefef
|
||||
border-left: 5px solid #efefef
|
||||
border-radius: 100px
|
||||
animation: spin 1s infinite linear
|
||||
@keyframes spin
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
+1
-1
@@ -40,7 +40,7 @@ font-size = 15px
|
||||
line-height = 1.6em
|
||||
|
||||
// Layout
|
||||
max-width = 1200px
|
||||
max-width = 1800px
|
||||
gutter-width = 20px
|
||||
sidebar-width = 220px
|
||||
mobile-nav-width = 260px
|
||||
|
||||
Vendored
+12
-1
@@ -76,9 +76,20 @@
|
||||
editor.on('change', update);
|
||||
dataEditor.on('change', update);
|
||||
update();
|
||||
ready();
|
||||
|
||||
function ready() {
|
||||
const loader = document.querySelector('.loader');
|
||||
loader.classList.add('hide');
|
||||
loader.setAttribute('aria-busy', false);
|
||||
|
||||
const editors = document.querySelector('#editors');
|
||||
editors.classList.remove('hide');
|
||||
editors.setAttribute('aria-hide', false);
|
||||
}
|
||||
|
||||
function createEditor(id, lang) {
|
||||
var editor = ace.edit(id);
|
||||
const editor = ace.edit(id);
|
||||
editor.setTheme('ace/theme/tomorrow_night');
|
||||
editor.getSession().setMode('ace/mode/' + lang);
|
||||
editor.getSession().setOptions({
|
||||
|
||||
Reference in New Issue
Block a user