mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-18 22:10:41 -07:00
Deploying to gh-pages from @ harttle/liquidjs@e941378535 🚀
This commit is contained in:
harttle
@@ -38,7 +38,7 @@
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -48,7 +48,7 @@
|
||||
<a href="/zh-cn/" id="logo">LiquidJS</a>
|
||||
</h1>
|
||||
<nav id="main-nav">
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="main-nav-link">教程</a><a href="../tags/overview.html" class="main-nav-link">标签</a><a href="../filters/overview.html" class="main-nav-link">过滤器</a><a href="../playground.html" class="main-nav-link">演示</a><a href="../../api/classes/Liquid.html" class="main-nav-link">API</a>
|
||||
<div id="search-input-wrap">
|
||||
<i id="search-input-icon" class="icon-search"></i>
|
||||
<input type="search" id="search-input" placeholder="搜索...">
|
||||
@@ -94,19 +94,16 @@
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<p>为了让源代码缩进好看，我们会加很多空白字符比如把不会产生输出的标签也单独一行。LiquidJS 提供了空白字符控制机制，可以避免这些多余的空白字符输出到 HTML 中。</p>
|
||||
<h2 id="通过标记的方式" class="article-heading"><a href="#通过标记的方式" class="headerlink" title="通过标记的方式"></a>通过标记的方式<a class="article-anchor" href="#通过标记的方式" aria-hidden="true"></a></h2><p>默认所有标签和输出的行，都会在行尾产生一个换行（<code>\n</code>），如果有缩进的话还会产生很多前导空格。例如：</p>
|
||||
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> author <span class="token operator">=</span> <span class="token string">"harttle"</span> <span class="token delimiter punctuation">%}</span></span>
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> author <span class="token delimiter punctuation">}}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% author = "harttle" %}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>将会输出（注意前面的空行）：</p>
|
||||
<pre class="line-numbers language-none"><code class="language-none">
|
||||
harttle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>可以在标签和输出的标记里面加横线（<code>{{-`, `-}}`, `{%-</code>, <code>-%}</code>）来移除左侧/右侧的空白。例如：</p>
|
||||
<pre class="line-numbers language-liquid" data-language="liquid"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">assign</span> author <span class="token operator">=</span> <span class="token string">"harttle"</span> <span class="token delimiter punctuation">-%}</span></span>
|
||||
<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> author <span class="token delimiter punctuation">}}</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||||
<p>可以在标签和输出的标记里面加横线（<code>{{-</code>, <code>-}}</code>, <code>{%-</code>, <code>-%}</code>）来移除左侧/右侧的空白。例如：</p>
|
||||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% assign author = "harttle" -%}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>将会输出：</p>
|
||||
<pre class="line-numbers language-none"><code class="language-none">harttle<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>这个例子中 <code>-%}</code> 移除了 <code>assign</code> 标签右侧的空白。</p>
|
||||
<h2 id="通过选项" class="article-heading"><a href="#通过选项" class="headerlink" title="通过选项"></a>通过选项<a class="article-anchor" href="#通过选项" aria-hidden="true"></a></h2><p>此外 LiquidJS 还提供了一系列选项来帮助扫代码式地移除空白：</p>
|
||||
@@ -121,7 +118,7 @@ harttle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></s
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2024-08-16T15:41:05.842Z" itemprop="dateModified">上次更新：2024-08-16</time>
|
||||
<time class="article-footer-updated" datetime="2024-08-16T16:55:41.725Z" itemprop="dateModified">上次更新：2024-08-16</time>
|
||||
<a href="sync-and-async.html" class="article-footer-prev" title="同步和异步"><i class="icon-chevron-left"></i><span>上一页</span></a><a href="plugins.html" class="article-footer-next" title="插件"><span>下一页</span><i class="icon-chevron-right"></i></a>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -160,7 +157,7 @@ harttle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></s
|
||||
<nav id="mobile-nav">
|
||||
<div id="mobile-nav-inner">
|
||||
<ul id="mobile-nav-list">
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
<a href="intro-to-liquid.html" class="mobile-nav-link">教程</a><a href="../tags/overview.html" class="mobile-nav-link">标签</a><a href="../filters/overview.html" class="mobile-nav-link">过滤器</a><a href="../playground.html" class="mobile-nav-link">演示</a><a href="../../api/classes/Liquid.html" class="mobile-nav-link">API</a>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-sidebar-list">
|
||||
|
||||
Reference in New Issue
Block a user