Question

我想知道是否有办法剥离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>

这不是一个真正可行的解决方案。鉴于整洁的模板和整洁的代码之间的选择，我必须与前者一起使用。

有没有办法让两者兼得？

TY

Answer 1

假设您有2.4.0或更新版本，那么在EE中使用tidy_template挂钩的template_post_parse扩展名。

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

Answer 2

我不确定您是否在寻找自动或手动解决方案。我不知道任何事情是自动的，但我确信有人会更有帮助。我是手册的粉丝，所以在我的EE模板上使用“真正的”编辑器，在FF中使用It's All Text来建立这些文本区域和编辑器之间的连接。此时，您可以在您的哲学所要求的模板上强加任何空格规则。

Answer 3

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

Answer 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>

从ExpressionEngine模板中删除空格

4 个答案: