固定ページのテンプレートマニュアル・ガイド

 ルートディレクトリー
└ templates
 -internals
 ---page
 ----- ├ default.html--------:今回の対象ファイル(基本ファイル)
 ----- └ company.html--------:特定のディレクトリー(.com/company)のテンプレートだが基本的に使用しない

以下が2021年11月20日時点の /templates/internals/page/default.html です。

現在ご覧になっているこのページ(https://www.s-contigo.website/coding/guide/freo/page-templates)が、固定ページです。/templates/internals/page/default.htmlが、/templates/page/coding/guide/freo/page-templates.htmlを読み込んでこのページが表示されています。

テンプレートファイルの中身

<!---->{include file='header.html'}
<!--{if $page.file and $page_file.width and $page_file.height}-->
<div class="page-header"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}" alt="{$page.title}"></div>
<!--{/if}-->
<nav class="breadcrumb fixbox">
    <ol>
        <li><a href="{$freo.core.http_file}">トップページ</a></li>
        <!--{foreach from=$plugin_page_topicpaths|smarty:nodefaults item='plugin_page_topicpath' name='plugin_page_topicpath'}-->
        <li><a href="{$freo.core.http_file}/{$plugin_page_topicpath.id}">{$plugin_page_topicpath.title}</a></li>
        <!--{/foreach}-->
        <li><a href="{$freo.core.http_file}/{$page.id}">{$page.title}</a></li>
    </ol>
</nav>
<main id="page" class="fixbox{if $page_associate.option.column == '目次付き'} column{/if}">
    <article>
        <h1>
            <!--{if $page_associate.option.h1}-->{$page_associate.option.h1}<!--{elseif $entry_associate.option.h1}-->{$entry_associate.option.h1}<!--{elseif $page.title}-->{$page.title}<!--{elseif $entry.title}-->{$entry.title}<!--{/if}-->
            <!--{if mb_strpos($page.id, 'coding/guide') === 0}--><span>マニュアル・ガイド</span>
            <!--{elseif mb_strpos($page.id, 'coding/order') === 0}--><span>作業手順・課題</span>
            <!--{/if}-->
        </h1>
        <!--{if $page_text.excerpt}-->
        {$page_text.excerpt|smarty:nodefaults}
        <!--{/if}-->
        
        <!--{if mb_strpos($page.id, 'regulation') === 0}-->
        {include file=page/regulation.html}
        <!--{elseif mb_strpos($page.id, 'area') === 0}-->
        {include file=page/area.html}
        <!--{elseif file_exists("templates/page/$include_file")}-->
        {assign var="include_file" value="`$page.id`.html"}
        {include file=page/$include_file}
        <!--{/if}-->
    </article>
    <!--{if $page_associate.option.aside == '2カラム'}-->
    {include file='utility.html'}
    <!--{/if}-->
</main>
<!--{if $freo.user.authority == 'root' or $freo.user.id == $page.user_id}-->
<ul class="edit-link">
    <li><a href="{$freo.core.http_url}admin/page_form?id={$page.id}" target="_blank"><img src="{$freo.core.http_url}images/icons/edit-regular.svg" alt="編集"></a></li>
</ul>
<!--{/if}-->
{include file='footer.html'}

解説

管理ページへのリンク

37行目あたりの記述は、同一PC、同一ブラウザーで管理画面にログインをしていると表示される該当ページの編集画面に直接リンクをする編集ボタンです。

<!--{if $freo.user.authority == 'root' or $freo.user.id == $page.user_id}-->
<ul class="edit-link">
    <li><a href="{$freo.core.http_url}admin/page_form?id={$page.id}" target="_blank"><img src="{$freo.core.http_url}images/icons/edit-regular.svg" alt="編集"></a></li>
</ul>
<!--{/if}-->

2カラム

既に設定してあるオプション(asideあり2カラム)で、2カラムにチェックをいれると、固定ページのレイアウト(PCサイト)が2カラムになります。当ページも2カラムのページです。

<!--{if $page_associate.option.aside == '2カラム'}-->
{include file='utility.html'}
<!--{/if}-->

以下は管理画面で、2カラムにチェックを入れたスクリーンショットです。

freoのオプションで2カラムを選択して固定ページを2カラムにする

テンプレートの切り替え

例えば、/templates/internals/page/gallery.html を用意しておくと、ページIDが gallery では default.html ではなく gallery.html が読み込まれます。また、IDが gallery/xxx や IDが gallery/xxx/yyy のような記事でも gallery.html が読み込まれます。IDが gallery/xxx の記事用にテンプレートを用意したい場合、templates/internals/page/gallery/xxx.html にファイルを配置します。ですが、弊社のサイト制作時はこのやり方ではなく、固定ページのテンプレートでは、条件分岐を記載することにより、固定ページの内容を読み込むことでページの表示内容を切り替えてください

実際の固定ページの内容を読み込み条件分岐の例

24行目あたりの記述は、固定ページの内容を切り替えたい際に使用する条件文です。必要に応じて適宜調整してください。

<!--{if mb_strpos($page.id, 'regulation') === 0}-->
{include file=page/regulation.html}
<!--{elseif mb_strpos($page.id, 'area') === 0}-->
{include file=page/area.html}
<!--{elseif file_exists("templates/page/$include_file")}-->
{assign var="include_file" value="`$page.id`.html"}
{include file=page/$include_file}
<!--{/if}-->

上記の記述の意味は以下の通りになります。

<!--条件文開始。もし、このページIDがregulationで始まるなら-->
固定ページの内容ファイル、page/regulation.html を読み込む
<!--もしくは、このページIDにareaを含むなら-->
固定ページの内容ファイル、page/area.html を読み込む
<!--もしくは、固定ページの内容ファイルが存在するなら-->
該当のページIDを変数に代入
該当の固定ページの内容ファイルを読み込む
<!--条件文終了-->