スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

バックナンバーページ

 ルートディレクトリー
└ templates
 -internals
 ---entry
 ----- └ default.html--------:今回の対象ファイル

以下が2021年8月18日時点の /templates/internals/entry/default.html ファイルの記載内容です。テンプレートファイルは都度更新されるので、最新のものを利用するようにしてください。このファイルを編集する際は、構成を大幅に変更することなく、デザインの変更はスタイルシート(CSS)で行ってください。

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

<!--/templates/internals/entry/default.html-->
{include file='header.html'}
<nav class="breadcrumb fixbox">
    <ol>
        <li><a href="{$freo.core.http_file}">トップページ</a></li>
        <li><a href="{$freo.core.http_file}/entry">バックナンバー</a></li>
    </ol>
</nav>
<main class="fixbox">
    <article>
        <h1>バックナンバー</h1>
        <div class="top-03-container">
            <!--{foreach from=$entries|smarty:nodefaults item='entry' name='entry'}-->
            <section>
                <p class="img">
                    <a href="{$freo.core.http_url}view//{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">
                        <!--{if $entry_thumbnails[$entry.id]}-->
                        <img src="{$freo.core.http_url}files/entry_thumbnails/{$entry.id}/{$entry.file}" alt="{$entry.title}">
                        <!--{else}-->
                        <img src="{$freo.core.http_url}images/common/dum_03.png" alt="{$entry.title}">
                        <!--{/if}-->
                    </a>
                </p>
                <div>
                    <p class="time">{$entry.datetime|date_format:'%Y.%m.%d'}
                        <!--{foreach from=$entry_associates[$entry.id].category|smarty:nodefaults key='entry_category' item='entry_category' name='loop'}-->
                        <span>
                            <a href="{$freo.core.http_url}category/{$entry_category}">{$freo.refer.categories[$entry_category].name}</a>
                        </span>
                        <!--{/foreach}-->
                    </p>
                    <h2><a href="{$freo.core.http_url}view//{if $entry.code}{$entry.code}{else}{$entry.id}{/if}">{$entry.title}</a></h2>
                </div>
            </section>
            <!--{/foreach}-->
        </div>

        <div class="pager">
            <ul class="order">
                <li class="prev"><!--{if $freo.query.page > 1}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$freo.query.page-1}{if $smarty.get.word}&word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&user={$smarty.get.user}{/if}{if $smarty.get.tag}&tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&date={$smarty.get.date}{/if}">前のページ</a><!--{else}-->前のページ<!--{/if}--></li>
                <li class="next"><!--{if $entry_page > $freo.query.page}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$freo.query.page+1}{if $smarty.get.word}&word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&user={$smarty.get.user}{/if}{if $smarty.get.tag}&tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&date={$smarty.get.date}{/if}">次のページ</a><!--{else}-->次のページ<!--{/if}--></li>
            </ul>
            <!--{if $smarty.get.word or $smarty.get.user or $smarty.get.tag or $smarty.get.date or $smarty.get.category}-->
            <ul class="direct">
                <li>ページ</li>
                <!--{section name='loop' loop=$entry_page}-->
                <li><!--{if $smarty.section.loop.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$smarty.section.loop.iteration}{if $smarty.get.word}&word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&user={$smarty.get.user}{/if}{if $smarty.get.tag}&tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&date={$smarty.get.date}{/if}">{$smarty.section.loop.iteration}</a><!--{else}-->{$smarty.section.loop.iteration}<!--{/if}--></li>
                <!--{/section}-->
            </ul>
            <!--{/if}-->
        </div>
    </article>
</main>
{include file='footer.html'}

バックナンバーページ HTMLコーディングの際のポイント

事前にコーディングが完了しているトップページのHTMLを複製して、バックナンバーページを作成するのが一番効率がよく作れます。ファイル複製後に、トップページにのみ表示させたい情報を削除して、ニュース部分を残し、ページ送りのタグを追加してください。

ページ送りタグ

<div class="pager">
<ul class="order">
<li class="prev"><!--{if $freo.query.page > 1}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$freo.query.page-1}{if $smarty.get.word}&word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&user={$smarty.get.user}{/if}{if $smarty.get.tag}&tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&date={$smarty.get.date}{/if}">前のページ</a><!--{else}-->前のページ<!--{/if}--></li>
<li class="next"><!--{if $entry_page > $freo.query.page}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$freo.query.page+1}{if $smarty.get.word}&word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&user={$smarty.get.user}{/if}{if $smarty.get.tag}&tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&date={$smarty.get.date}{/if}">次のページ</a><!--{else}-->次のページ<!--{/if}--></li>
</ul>
<!--{if $smarty.get.word or $smarty.get.user or $smarty.get.tag or $smarty.get.date or $smarty.get.category}-->
<ul class="direct">
<!--{section name='loop' loop=$entry_page}-->
<li><!--{if $smarty.section.loop.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$smarty.section.loop.iteration}{if $smarty.get.word}&word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&user={$smarty.get.user}{/if}{if $smarty.get.tag}&tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&date={$smarty.get.date}{/if}">{$smarty.section.loop.iteration}</a><!--{else}-->{$smarty.section.loop.iteration}<!--{/if}--></li>
<!--{/section}-->
</ul>
<!--{/if}-->
</div>