从 ExpressionEngine 模板中删除空格答案

【问题标题】：Remove White Space from ExpressionEngine Templates从 ExpressionEngine 模板中删除空格
【发布时间】：2012-08-14 10:39:32
【问题描述】：

我想知道是否有办法去除 EE 模板系统创建的额外空白并生成“更漂亮”的标记。

我喜欢让我的模板保持可读性。我经常在多年后重返工作岗位，不得不跟随其他开发人员的工作，或者作为团队的一员工作，当一切都井井有条并嵌套时，这会更容易。

问题是 EE 保留了所有的制表符和换行符，当你有很多条件等时，它会导致代码丑陋。例如，这个：

<div class="
    event {if event_all_day}all_day{/if} 
    {if event_multi_day}multi_day{/if} 
    {if event_first_day}first_day{/if} 
    {if event_last_day}last_day{/if} 
    {if all_day_event_index_difference > 0}index_difference_{all_day_event_index_difference}{/if}
">
    {if event_multi_day} 
        <a href="{path='calendar_main/event'}/{event_id}/">{event_title}</a>
    {if:else}
        <a href="{path='calendar_main/event'}/{if edited_occurrence}{event_parent_id}{if:else}{event_id}{/if}/" title="{event_title}">{event_title}</a>
    {/if}
</div>

渲染成这样：

<div class="
                                         event all_day 
                                         multi_day 


                                                                               ">

                                         <a href="http://www.downtownmuncie.org/calendar_main/event/1832/">Minnetrista Glass Show</a>
                                                                       </div>

围绕 EE 标记的每个制表符和换行符都被保留，所以我在 <div> 和 </div> 之间留下了一英里的空白。

就性能而言，这并不意味着什么。文件大小的增加可能存在争议，但可以忽略不计。在尝试使用 Firebug 浏览代码时，这也是一个障碍。

但最重要的是，它看起来很草率。

一个建议是相应地调整模板，如下所示：

<div class="event {if event_all_day}all_day {/if}{if event_multi_day}multi_day {/if}{if event_first_day}first_day {/if}{if event_last_day}last_day {/if}{if all_day_event_index_difference > 0} index_difference_{all_day_event_index_difference}{/if}">
    {if event_multi_day}<a href="{path='calendar_main/event'}/{event_id}/">{event_title}</a>{if:else}<a href="{path='calendar_main/event'}/{if edited_occurrence}{event_parent_id}{if:else}{event_id}{/if}/" title="{event_title}">{event_title}</a>{/if}
</div>

这并不是一个真正可行的解决方案。考虑到整洁的模板和整洁的代码之间的选择，我不得不选择前者。

有没有办法两者兼得？

【问题讨论】：

标签： html templates expressionengine

【解决方案1】：

假设您有 2.4.0 或更高版本，则在 EE 中有一个使用 template_post_parse 挂钩的 tidy_template 扩展。

https://github.com/sjelfull/sf.tidy_template.ee_addon

【讨论】：

【解决方案2】：

我不确定您是在寻找自动解决方案还是手动解决方案。我不知道有什么自动的，但我相信更棒的人可以提供帮助。我是手册的粉丝，所以在我的 EE 模板上使用“真正的”编辑器，在 FF 中使用 It's All Text 在这些文本区域和我的编辑器之间建立连接。那时，您可以在模板上施加您的理念所规定的任何空白规则。

【讨论】：

【解决方案3】：

AutoMin for EE by Jesse Bunch 具有 HTML 压缩功能。它不会像 HTMLTidy 那样美化您的缩进，但会删除所有空格以减小文件大小。

【讨论】：

【解决方案4】：

这是未经测试的，但在类似的情况下（老实说，不记得它是否是 EE）我已将空格放在服务器端代码中。因此：

<div class="event {if
    event_all_day}all_day {/if}{if
    event_multi_day}multi_day {/if}{if
    event_first_day}first_day {/if}{if
    event_last_day }last_day {/if}{if
    all_day_event_index_difference > 0}index_difference_{all_day_event_index_difference{/if}
">
    {if
        event_multi_day}<a href="{path='calendar_main/event'}/{event_id}/">{event_title}</a>
    {if:else
    }<a href="{path='calendar_main/event'}/{if edited_occurrence}{event_parent_id}{if:else
    }     {event_id}{/if}/" title="{event_title}">{event_title}</a>
    {/if}
</div>

【讨论】：