MTで構築したサイトから不要な空行や空白を削除する方法

Posted on 2021-04-12

Movable Typeでサイトを構築する際、生成されたHTMLソースを見るとMTタグを記述した行が空行になっていたり、if文の分岐などを見やすくするためにテンプレートにインデントを付けていると行の頭に空白ができてしまいます。

そんな無駄な空行や空白を削除する方法を紹介します。

regex_replaceを使う

regex_replaceは正規表現を使ってMTタグの値を変換することができるモディファイアで、
以下のようにすることで行の頭にある半角スペース、タブ、改行を何もない状態に置き換えることができます。

regex_replace="/^[\ \t\r\n]+/mg",""

正規表現の意味は以下のとおりです。

正規表現	意味
/ /mg	複数行を対象に繰り返し
^	直後の文字が行の先頭にある場合
[ ]	括弧に含まれるいずれか
\半角スペース	半角スペース
\t	タブ
\r	改行。CR
\n	改行。LF
+	直前の文字が１回以上繰り返す場合

参考：https://murashun.jp/article/programming/regular-expression.html

使い方

regex_replaceは以下のように使用することができます。

ファンクションタグ

本文を出力する<mt:EntryBody>のようなファンクションタグには以下のように使います。

<mt:EntryBody regex_replace="/^[\ \t\r\n]+/mg","">

特定の囲んだ部分

削除したい特定の部分を<mt:For>で囲い、そこにregex_replaceを付与します。
以下のようにテンプレート上では見やすいようにインデントを付けていても生成されるHTMLソースには空白は付きません。

<mt:For regex_replace="/^[\ \t\r\n]+/mg","">
<mt:Entries>
　　<mt:EntriesHeader>
　　<ul>
　　</mt:EntriesHeader>
　　　　<li>
　　　　　　<a href="<mt:EntryPermalink>">
　　　　　　<div class="title"><mt:EntryTitle></div>
　　　　　　<p><mt:EntryBody></p>
　　　　　　</a>
　　　　</li>
　　<mt:EntriesFooter>
　　</ul>
　　</mt:EntriesFooter>
</mt:Entries>
</mt:For>

HTML全体を囲うこともできますが全ての改行が詰まってしまって逆に見づらくなるため、header、main、footerなど大きなかたまりごとには最低限分けて囲うのが良いと思います。

MTInclude

<mt:Include>にも使用できます。

<mt:Include module="モジュール名" regex_replace="/^[\ \t\r\n]+/mg","">

以上です。

regex_replaceを使ってソースを見やすく整えましょう。

おしまい。

Movable Type