リンク先の形式ごとに専用アイコンを表示したり、別タブで開く方法

はじめに

ニュース一覧でよくある仕様を簡単に実装できます。

制作をちょっぴり早く終わらせて、定時に帰りたいエンジニアにおすすめ。

仕様

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

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

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

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

リンクごとに別タブで表示するかを設定する。

フィールド

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

名前:URL: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>

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