Harp 服务器产生大量空白（在 HTML 中）答案

【问题标题】：Harp server produces a lot of whitespace (in HTML)Harp 服务器产生大量空白（在 HTML 中）
【发布时间】：2016-03-30 16:06:41
【问题描述】：

我正在运行一个关于 Harp 的博客。一切都像魅力一样起作用，但有一件事我无法实现（也不理解）。整个项目使用EJS。问题在于生成的源代码 (HTML) 中有很多额外的空白。我已经尝试减少它，就像在菜单的情况下一样，但没有奏效。

我希望至少减少换行符。通常我使用这样的东西：

<li id="nav1" class="main-menu-li-current"><a class="menu-link-current" href="/">home</a></li><!--
    --><li id="nav2" class=""><a class="menu-link" href="/ebooks">ebooks</a></li><!--
    --><li id="nav3" class=""><a class="menu-link" href="/coding">coding</a></li><!--

但问题是部分由 EJS 动态服务，这不起作用，代码看起来很丑：

      <div class="categories"><!--




           --><span class="category"><a class="category-link" href="/ebooks">ebooks</a></span>

有什么办法可以解决吗？如果我使用缩小的 LESS，我也想使用缩小的（或至少看起来合理的）HTML！

示例代码：

      <div class="categories"><!--
      <% var categories = public.articles._data[slug].categories %>
      <% if (categories !== undefined) { %>
         <% for (var i = 0; i < categories.length; i++) { %>
           <% if (categories[i] !== "vim tips") { %>
             --><span class="category"><a class="category-link" href="/<%= categories[i]  %>"><%= categories[i] %></a></span>
            <% } else { %>
             --><span class="category"><a class="category-link" href="/vim">vim tips</a></span>
            <% } %>
          <% } %>
        <% } %>
      </div>

【问题讨论】：

嘿，您使用的是哪个版本的 Harp？如果您在 harpjs.com 上查看源代码，您会看到 Harp 默认会缩小 script、style 和 pre 标记之外的所有 HTML。
嘿，谢谢你的提问，我的版本是0.17.0。我还可以强调它是相同的，在动态查看的站点以及编译的站点中。
我刚刚意识到它改进了很多！当我删除每个空格（以及行尾）时。会不会是问题？我在无头 Ubuntu 服务器上使用 Vim。我猜那里的一切都是 UTF-8，行尾是 Unix。
一个愚蠢的想法 :) 我可以用 yield.replace(...) 删除空格，但这真的很丑陋。
仍然没有解决 :( 我的 Harp 实际版本是 0.20.1。

标签： html ejs removing-whitespace harp

【解决方案1】：

如果您觉得这是一个问题，可能值得在 EJS repository 上搜索有关此问题的现有问题。解决方案可能来自那个，而不是 Harp。也就是说，解决此问题的一种方法可能是在 EJS 中使用 JS cmets 而不是 HTML cmets，因此根本不编译 cmets：

<% /* %>
  <h1>Commented out portion of my template</h1>
<% */ %>

但是，我认为您拥有的 cmets 根本不是必需的。动态 EJS 不会输出任何您已将其注释掉的 HTML，因此最好的选择可能是完全删除它们：

<div class="categories">
  <% var categories = public.articles._data[slug].categories %>
  <% if (categories !== undefined) { %>
     <% for (var i = 0; i < categories.length; i++) { %>
       <span class="category"><a class="category-link" href="/<%= categories[i] === "vim tips" ? "vim" : categories[i] %>"><%= categories[i] %></a></span>
      <% } %>
    <% } %>
  <% } %>
</div>

希望对您有所帮助！

【讨论】：

谢谢，我认为使用-%> 会有所帮助，但不，它没有。没有反应。不幸的是，使用 cmets 也无济于事。

【解决方案2】：

解决了，问题是 EJS 会在有新行的地方添加新行——如果它们没有正确注释的话。当我将代码缩减为：

<div class="categories"><%
   var categories = public.articles._data[slug].categories
     if (categories !== undefined) {
        for (var i = 0; i < categories.length; i++) { %>
       <span class="category"><a class="category-link" href="/<%= categories[i] === "vim tips" ? "vim" : categories[i] %>"><%= categories[i] %></a></span>
      <% }
       }
     }
%></div>

……它有效。

在我看来，它的结构要少得多，但它确实有效。

【讨论】：