MovableType 2018.10.12

拡張子を判別してアイコンを表示したり、別ウィンドウで開く方法

はじめに

ニュース一覧の表示でよくある、リンクの拡張子を判別して任意の表示をする方法です。

仕様

ニュース記事のリンクに、ファイルURL、サイトURL、記事詳細ページURLのいずれかを設定する。

ファイルURLとサイトURLに登録がある場合は、ファイルを優先します。

サイトURLにファイルURLが入力された場合は、ファイルの拡張子を表示する。

外部リンクアイコンは、ファイルへの遷移以外で表示する。

リンクごとに別ウィンドウで表示するかを設定する。

フィールド

名前：ファイル：PDFファイルなどをアップロードするアセットフィールド

名前：URL：URLを入力するテキストフィールド

名前：リンク設定：選択ありの場合は別ウィンドウで開く様にするチェックボックスフィールド

サンプルテンプレート

<mt:SetVarTemplate name="拡張子判定">
    <mt:if name="記事URL" like="pdf$">
        <mt:ignore>PDF</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-pdf" append="1">
    <mt:elseif name="記事URL" like="(xls|xlsx)$">
        <mt:ignore>MS Excel</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-xlsx" append="1">
    <mt:elseif name="記事URL" like="(doc|docx)$">
        <mt:ignore>MS Word</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-docx" append="1">
    <mt:elseif name="記事URL" like="(ppt|pptx)$">
        <mt:ignore>MS PowerPoint</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-pptx" append="1">
    <mt:else>
        <mt:if name="外部リンク">
            <mt:SetVar name="クラス名" value=" icon-blank" append="1">
        </mt:if>
    </mt:if>
</mt:SetVarTemplate>

<mt:Contents content_type="ニュースリリース">
    <mt:if name="__first__"><ul></mt:if>
        <mt:Setvar name="undef(クラス名)">
        <mt:Setvar name="undef(記事URL)">
        <mt:Setvar name="undef(外部リンク)">
        <mt:SetVar name="クラス名" value="item">

        <mt:ContentField content_field="リンク設定">
            <mt:SetVarBlock name="外部リンク"> target="_blank"</mt:SetVarBlock>
        </mt:ContentField>
        <mt:ContentField content_field="ファイル">
            <mt:AssetURL setvar="記事URL">
            <mt:Var name="拡張子判定">
        <mt:Else>
            <mt:ContentField content_field="URL">
                <mt:ContentFieldValue setvar="記事URL">
                <mt:Var name="拡張子判定">
            </mt:ContentField>
        </mt:ContentField>
        <mt:Unless name="記事URL">
            <mt:ContentPermaLink setvar="記事URL">
            <mt:Var name="拡張子判定">
        </mt:Unless>

        <li><a href="<mt:Var name="記事URL">" class="<mt:var name="クラス名">"<mt:var name="外部リンク">><mt:ContentLabel></a></li>
    <mt:if name="__last__"></ul></mt:if>
</mt:Contents>

解説

記事URLの値の末尾に指定の拡張子がある場合に、「クラス名」に値を設定し、

ない場合に、リンク設定に値がある場合は、「クラス名」に外部リンクの値を設定します。

<mt:SetVarTemplate name="拡張子判定">
    <mt:if name="記事URL" like="pdf$">
        <mt:ignore>PDF</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-pdf" append="1">
    <mt:elseif name="記事URL" like="(xls|xlsx)$">
        <mt:ignore>MS Excel</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-xlsx" append="1">
    <mt:elseif name="記事URL" like="(doc|docx)$">
        <mt:ignore>MS Word</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-docx" append="1">
    <mt:elseif name="記事URL" like="(ppt|pptx)$">
        <mt:ignore>MS PowerPoint</mt:ignore>
        <mt:SetVar name="クラス名" value=" icon-pptx" append="1">
    <mt:else>
        <mt:if name="外部リンク">
            <mt:SetVar name="クラス名" value=" icon-blank" append="1">
        </mt:if>
    </mt:if>
</mt:SetVarTemplate>

「undef」で「クラス名」と「記事URL」「外部リンク」を初期化し、「クラス名」にニュース一覧用のClassを設定します。

<mt:Contents content_type="ニュースリリース">
    <mt:if name="__first__"><ul></mt:if>
        <mt:Setvar name="undef(クラス名)">
        <mt:Setvar name="undef(記事URL)">
        <mt:Setvar name="undef(外部リンク)">
        <mt:SetVar name="クラス名" value="item">

リンク設定に値がある場合に、別ウィンドウで開くtargetを設定します。

        <mt:ContentField content_field="リンク設定">
            <mt:SetVarBlock name="外部リンク"> target="_blank"</mt:SetVarBlock>
        </mt:ContentField>

ファイルに登録されたファイルの拡張子から、アイコン表示用のClassを追加します。

ファイルに登録がない場合は、外部リンクの値を参照し、外部リンクに登録がない場合は、コンテンツの詳細ページのURLを「記事URL」に設定します。

        <mt:ContentField content_field="ファイル">
            <mt:AssetURL setvar="記事URL">
            <mt:Var name="拡張子判定">
        <mt:Else>
            <mt:ContentField content_field="URL">
                <mt:ContentFieldValue setvar="記事URL">
                <mt:Var name="拡張子判定">
            </mt:ContentField>
        </mt:ContentField>
        <mt:Unless name="記事URL">
            <mt:ContentPermaLink setvar="記事URL">
            <mt:Var name="拡張子判定">
        </mt:Unless>

上記処理のappendで連結されたClassの値「クラス名」と、外部リンク設定の値「外部リンク」を表示します。

        <li><a href="<mt:Var name="記事URL">" class="<mt:var name="クラス名">"<mt:var name="外部リンク">><mt:ContentLabel></a></li>
    <mt:if name="__last__"></ul></mt:if>
</mt:Contents>