0

我在 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>
4

2 回答 2

0

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

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

但是，我认为您的评论根本没有必要。动态 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>

希望这会有所帮助！

于 2016-03-12T23:36:19.280 回答
0

解决了，问题是 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>

… 有用。

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

于 2016-03-30T08:06:41.090 回答