mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-18 22:10:41 -07:00
Deploying to gh-pages from @ harttle/liquidjs@70fdb7af48 🚀
This commit is contained in:
harttle
@@ -36,8 +36,8 @@
|
||||
|
||||
<link rel="stylesheet" href="../../css/navy.css">
|
||||
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS">
|
||||
</head>
|
||||
<link rel="alternate" href="../../atom.xml" title="LiquidJS" type="application/atom+xml">
|
||||
<meta name="generator" content="Hexo 5.4.0"></head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs" id="github-link-wrap" class="main-nav-link"><i class="icon-github"></i>Github</a>
|
||||
<a id="mobile-nav-toggle">
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
<span class="mobile-nav-toggle-bar"></span>
|
||||
@@ -87,24 +87,24 @@
|
||||
<header class="article-header">
|
||||
<h1 class="article-title" itemprop="name">空白字符控制</h1>
|
||||
|
||||
<a href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/whitespace-control.md" target="_blank" rel="noopener external nofollow noreferrer" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs/edit/master/docs/source/zh-cn/tutorials/whitespace-control.md" class="article-edit-link" title="改进这篇文档"><i class="icon-pencil"></i></a>
|
||||
|
||||
</header>
|
||||
<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>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% author = "harttle" %}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{% author = "harttle" %}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>将会输出（注意前面的空行）：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><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>, <code>{%-</code>, <code>-%}</code>）来移除左侧/右侧的空白。例如：</p>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% assign author = "harttle" -%}</span><br><span class="line">{{ author }}</span><br></pre></td></tr></table></figure>
|
||||
<p>可以在标签和输出的标记里面加横线（<code>{{-`, `-}}`, `{%-</code>, <code>-%}</code>）来移除左侧/右侧的空白。例如：</p>
|
||||
<figure class="highlight plaintext"><table><tr><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>
|
||||
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">harttle</span><br></pre></td></tr></table></figure>
|
||||
|
||||
<p>这个例子中 <code>-%}</code> 移除了 <code>assign</code> 标签右侧的空白。</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><code>trimTagLeft</code></li>
|
||||
@@ -112,12 +112,12 @@
|
||||
<li><code>trimValueRight</code></li>
|
||||
<li><code>trimValueRight</code></li>
|
||||
</ul>
|
||||
<p><a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">LiquidJS</a> 默认 <strong>不会</strong> 移除任何空白字符，也就是说上面几个选项的默认值都为 <code>false</code>。这几个选项的详情请参考 <a href="../../api/interfaces/liquid_options_.liquidoptions.html">LiquidJS 选项</a>。</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>），如果你希望保留上下空行可以把 <a href="https://github.com/harttle/liquidjs" target="_blank" rel="noopener external nofollow noreferrer">greedy 选项</a> 关掉，这样遇到 <code>\n</code> 就会停止。为了和 <a href="https://github.com/Shopify/liquid" target="_blank" rel="noopener external nofollow noreferrer">shopify/liquid</a> 一致该选项默认是打开的。</p>
|
||||
<p><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">LiquidJS</a> 默认 <strong>不会</strong> 移除任何空白字符，也就是说上面几个选项的默认值都为 <code>false</code>。这几个选项的详情请参考 <a href="../../api/interfaces/liquid_options_.liquidoptions.html">LiquidJS 选项</a>。</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>），如果你希望保留上下空行可以把 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/harttle/liquidjs">greedy 选项</a> 关掉，这样遇到 <code>\n</code> 就会停止。为了和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/Shopify/liquid">shopify/liquid</a> 一致该选项默认是打开的。</p>
|
||||
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<time class="article-footer-updated" datetime="2021-09-26T12:45:03.359Z" itemprop="dateModified">上次更新：2021-09-26</time>
|
||||
<time class="article-footer-updated" datetime="2021-09-30T16:54:19.718Z" itemprop="dateModified">上次更新：2021-09-30</time>
|
||||
<a href="register-filters-tags.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>
|
||||
@@ -126,7 +126,7 @@
|
||||
<div id="article-toc-inner">
|
||||
<div id="article-toc-inner-list">
|
||||
<strong class="sidebar-title">目录</strong>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#通过标记的方式"><span class="toc-text">通过标记的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#通过选项"><span class="toc-text">通过选项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#贪婪模式"><span class="toc-text">贪婪模式</span></a></li></ol>
|
||||
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E6%A0%87%E8%AE%B0%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-text">通过标记的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E9%80%89%E9%A1%B9"><span class="toc-text">通过选项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B4%AA%E5%A9%AA%E6%A8%A1%E5%BC%8F"><span class="toc-text">贪婪模式</span></a></li></ol>
|
||||
</div>
|
||||
<a href="#" id="article-toc-top">回到顶部</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user