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>
との間に 1 マイルの空白ができ</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>
それは本当に実行可能な解決策ではありません。適切なテンプレートと適切なコードのどちらかを選択する場合、私は前者を使用する必要があります。
両方を持つ方法はありますか?
タイ