【freo】【freoTips】【プラグイン系TIPS】freoでちょっとかっこいいページネーション～ニュースプラグイン

同人イベントプラグインでのページネーションを変更します。

サンプル

（画像サンプルです）

こんな感じのデザインに変更してみます。

導入方法

1. [freo/templates/plugins/news/default.html]の72～86行目を以下のように変更します。
   

   <div id="page">
       <ul class="order">
           <li><!--{if $freo.query.page > 1}--><a href="{$freo.core.http_file}/news?page={$freo.query.page-1}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.category_id}&amp;category_id={$smarty.get.category_id|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">前のページ</a><!--{else}-->前のページ<!--{/if}--></li>
           <!--{section name='news_pages' loop=$plugin_news_page}-->
               <!--{if $smarty.section.news_pages.first and $plugin_news_page > 1}-->
               <li {if $smarty.section.news_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.news_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$smarty.section.news_pages.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$smarty.section.news_pages.iteration}</a><!--{else}-->{$smarty.section.news_pages.iteration}<!--{/if}--></li>
               <li class="blank">…</li>
               <!--{/if}-->
               <!--{if $smarty.section.news_pages.iteration < $plugin_news_page and $smarty.section.news_pages.iteration > 1 and ($smarty.section.news_pages.iteration == $freo.query.page-1 or $smarty.section.news_pages.iteration == $freo.query.page or $smarty.section.news_pages.iteration == $freo.query.page+1 or $smarty.section.news_pages.iteration == $freo.query.page+2 or $smarty.section.news_pages.iteration == $freo.query.page-2)}-->
               <li {if $smarty.section.news_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.news_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$smarty.section.news_pages.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$smarty.section.news_pages.iteration}</a><!--{else}-->{$smarty.section.news_pages.iteration}<!--{/if}--></li>
           <!--{/if}-->
               <!--{if $smarty.section.news_pages.last and $plugin_news_page > 1}-->
               <li class="blank">…</li>
               <li {if $smarty.section.news_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if} id="last"><!--{if $smarty.section.news_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$smarty.section.news_pages.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$smarty.section.news_pages.iteration}</a><!--{else}-->{$smarty.section.news_pages.iteration}<!--{/if}--></li>
               <!--{/if}-->
           <!--{/section}-->
           <li><!--{if $plugin_news_page > $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$freo.query.page+1}{if $smarty.get.category_id}&amp;category_id={$smarty.get.category_id|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">次のページ</a><!--{else}-->次のページ<!--{/if}--></li>
       </ul>
   </div>
   

2. [freo/templates/plugins/link/default.html]をアップデートします。

おまけのCSS

[freo/css/default.css]のページ移動部分を変更してみます。

/* ################################################################################ */
/*      0:ページ移動
*/
/* ################################################################################ */
/* ================================================================================ */
/*      0-1:ページ移動ブロック
*/
/* ================================================================================ */
div#page{clear:both;padding:50px 0 0;margin:0}
div#page h2 {display: none;}
/* ================================================================================ */
/*      0-1:ページ移動リスト
*/
/* ================================================================================ */
ul.order {margin: 20px 0;text-align:center;}
ul.order li {display: inline;list-style: none;margin-right: 10px;}
/* ================================================================================ */
/*      0-1:表示中ページクラス
*/
/* ================================================================================ */
ul.order li.current {border:1px solid #000000;color:#000000;padding:0 5px;}
/* ================================================================================ */
/*      0-1:ページリンククラス
*/
/* ================================================================================ */
ul.order li.no a{border:1px solid #000000;background-color:#000000;color:#000000;padding:0 5px;}
ul.order li.no a:link,ul.order li.no a:visited{color:#ffffff;}
ul.order li.no a:hover,ul.order li.no a:active{text-decoration:none;background-color:#666666}

上記のように変更すると、サンプルのようなデザインになります。