エメラルドマウンテンの麓。

[blogger template customize]Elegant navigation for the archive page

This article is for blogger widget version 1 only.

You can test elegant archive navigation. /2016_08_28_archive.html

By year, monthly, daily, complete navigation has been realized.(2017/1/28 20:00)

  1. JS free!
  2. Use a BlogArchive widget for navigation.(BlogArchive widget limite is just 2.)
  3. Use lambda expression to get last index of loop.
    <b:with var='ylast' value='data:data.data count ( y => y.name != &quot;&quot; )'/>
  4. Only <b:eval> and <b:with> can touch list item directly.
  5. Need a space around the operator.
    <b:with var='_m' value='data:y.data[data:mi + 1]'/>

Elegant Archive Pager

<b:widget id='BlogArchive1' locked='true' type='BlogArchive' mobile='yes'>
    <b:includable id='main'>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
            <div class="Pager"><section role="navigation"><b:include name='navi'/></section></div>
        </b:if>
    </b:includable>

    <b:includable id='navi'>
        <b:with var='is_year' value='data:data count ( _y => _y.url == data:blog.url )'>
            <b:if cond='data:is_year != 0'>
                <b:include name='navi_year'/>
            <b:else />
                <b:loop values='data:data' var='y'>
                    <b:loop values='data:y.data' var='m'>
                        <b:if cond='data:m.url == data:blog.url'>
                            <b:include name='navi_month'/>
                        <b:else />
                            <b:with var='is_day' value='data:m.data count ( _d => _d.url == data:blog.url )'>
                                <b:if cond='data:is_day != 0'>
                                    <b:include name='navi_day'/>
                                </b:if>
                            </b:with>
                        </b:if>
                    </b:loop>
                </b:loop>
            </b:if>
        </b:with>
    </b:includable>
    
    <b:includable id='navi_year'>
        <b:loop values='data:data' var='y' index='yi'>
            <b:if cond='data:y.url == data:blog.url'>
                <b:with var='ylast' value='data:data count ( _y => _y.url != &quot;&quot; )'>
                    <b:if cond='data:ylast - 1 != data:yi'>
                        <b:with var='_y' value='data:data[data:yi + 1]'>
                            <link rel="next" expr:href='data:_y.url'/>
                            <a class="Pager-next" expr:href='data:_y.url' rel="tag" hidefocus="true">
                                <data:_y.name/>(<data:_y.post-count/>)
                            </a>,
                        </b:with>
                    </b:if>
                </b:with>
                
                <a class="Pager-top" href='#lB' hidefocus="true" alia-hidden="true">▲ トップ</a>

                <b:if cond='data:yi != 0'>
                    <b:with var='_y' value='data:data[data:yi - 1]'>
                        ,
                        <link rel="prev" expr:href='data:_y.url'/>
                        <a class="Pager-prev" expr:href='data:_y.url' rel="tag" hidefocus="true">
                            <data:_y.name/>(<data:_y.post-count/>)
                        </a>
                    </b:with>
                </b:if>
            </b:if>
        </b:loop>
    </b:includable>

    <b:includable id='navi_month'>
        <b:loop values='data:data' var='y' index='yi'>
            <b:loop values='data:y.data' var='m' index='mi'>
                <b:if cond='data:m.url == data:blog.url'>
                    <b:with var='mlast' value='data:y.data count ( _m => _m.url != &quot;&quot; )'>
                        <b:if cond='data:mlast - 1 != data:mi'>
                            <b:with var='_m' value='data:y.data[data:mi + 1]'>
                                <link rel="next" expr:href='data:_m.url'/>
                                <b:if cond='data:_m.post-count != 1'>
                                        <a class="Pager-next" expr:href='data:_m.url + &quot;#&quot; + data:_m.post-count' rel="tag" hidefocus="true">
                                            <data:y.name/>-<data:_m.name/>(<data:_m.post-count/>)
                                        </a>,
                                    <b:else/>
                                        <a class="Pager-next" expr:href='data:_m.url' rel="tag" hidefocus="true"><data:y.name/>-<data:_m.name/>(1)</a>,                     
                                </b:if>
                            </b:with>
                        <b:else/>
                            <b:with var='ylast' value='data:data count ( _y => _y.name != &quot;&quot; )'>
                                <b:if cond='data:ylast - 1 != data:yi'>
                                    <b:loop values='data:data' var='_y' index='_yi'>
                                        <b:if cond='data:yi + 1 == data:_yi'>
                                            <b:with var='_m' value='data:_y.data[0]'>
                                                <link rel="next" expr:href='data:_m.url'/>
                                                <b:if cond='data:_m.post-count != 1'>
                                                        <a class="Pager-next" expr:href='data:_m.url + &quot;#&quot; + data:_m.post-count' rel="tag" hidefocus="true">
                                                            <data:_y.name/>-<data:_m.name/>(<data:_m.post-count/>)
                                                        </a>,
                                                    <b:else/>
                                                        <a class="Pager-next" expr:href='data:_m.url' rel="tag" hidefocus="true"><data:_y.name/>-<data:_m.name/>(1)</a>,
                                                </b:if>
                                            </b:with>
                                        </b:if>
                                    </b:loop>
                                </b:if>
                            </b:with>
                        </b:if>
                    </b:with>
                    
                    <a class="Pager-top" href='#lB' hidefocus="true" alia-hidden="true">▲ トップ</a>

                    <b:if cond='data:mi == 0'>
                        <b:if cond='data:yi != 0'>
                            <b:loop values='data:data' var='_y' index='_yi'>
                                <b:if cond='(data:yi - 1) == data:_yi'>
                                    <b:with var='mlast' value='data:_y.data count ( _m => _m.url != &quot;&quot; )'>
                                        <b:with var='_m' value='data:_y.data[data:mlast - 1]'>
                                            ,
                                            <link rel="prev" expr:href='data:_m.url'/>
                                            <b:if cond='data:_m.post-count != 1'>
                                                    <a class="Pager-prev" expr:href='data:_m.url + &quot;#&quot; + data:_m.post-count' rel="tag" hidefocus="true">
                                                        <data:_y.name/>-<data:_m.name/>(<data:_m.post-count/>)
                                                    </a>
                                                <b:else/>
                                                    <a class="Pager-prev" expr:href='data:_m.url' rel="tag" hidefocus="true"><data:_y.name/>-<data:_m.name/>(1)</a>                     
                                            </b:if>
                                        </b:with>
                                    </b:with>
                                </b:if>
                            </b:loop>
                        </b:if>
                    <b:else/>
                        <b:with var='_m' value='data:y.data[data:mi - 1]'>
                            ,
                            <link rel="prev" expr:href='data:_m.url'/>
                            <b:if cond='data:_m.post-count != 1'>
                                    <a class="Pager-prev" expr:href='data:_m.url + &quot;#&quot; + data:_m.post-count' rel="tag" hidefocus="true">
                                        <data:y.name/>-<data:_m.name/>(<data:_m.post-count/>)
                                    </a>
                                <b:else/>
                                    <a class="Pager-prev" expr:href='data:_m.url' rel="tag" hidefocus="true"><data:y.name/>-<data:_m.name/>(1)</a>                     
                            </b:if>
                        </b:with>
                    </b:if>
                </b:if>
            </b:loop>
        </b:loop>
    </b:includable>

    <b:includable id='navi_day'>
        <b:loop values='data:data' var='y' index='yi'>
            <b:loop values='data:y.data' var='m' index='mi'>
                <b:loop values='data:m.data' var='d' index='di'>
                    <b:if cond='data:d.url == data:blog.url'>
                        <b:with var='dlast' value='data:m.data count ( _d => _d.url != &quot;&quot; )'>
                            <b:if cond='data:dlast - 1 != data:di'>
                                <b:with var='_d' value='data:m.data[data:di + 1]'>
                                    <link rel="next" expr:href='data:_d.url'/>
                                    <b:if cond='data:_d.post-count != 1'>
                                            <a class="Pager-next" expr:href='data:_d.url + &quot;#&quot; + data:_d.post-count' rel="tag" hidefocus="true">
                                                <data:y.name/>&#32;<data:_d.name/>(<data:_d.post-count/>)
                                            </a>,
                                        <b:else/>
                                            <a class="Pager-next" expr:href='data:_d.url' rel="tag" hidefocus="true"><data:y.name/>&#32;<data:_d.name/>(1)</a>,
                                    </b:if>
                                </b:with>
                            <b:else/>
                                <b:with var='mlast' value='data:y.data count ( _m => _m.name != &quot;&quot; )'>
                                    <b:if cond='data:mlast - 1 != data:mi'>
                                        <b:with var='_m' value='data:y.data[data:mi + 1]'>
                                            <b:with var='_d' value='data:_m.data[0]'>
                                                <link rel="next" expr:href='data:_d.url'/>
                                                <b:if cond='data:_d.post-count != 1'>
                                                        <a class="Pager-next" expr:href='data:_d.url + &quot;#&quot; + data:_d.post-count' rel="tag" hidefocus="true">
                                                            <data:y.name/>&#32;<data:_d.name/>(<data:_d.post-count/>)
                                                        </a>,
                                                    <b:else/>
                                                        <a class="Pager-next" expr:href='data:_d.url' rel="tag" hidefocus="true"><data:y.name/>&#32;<data:_d.name/>(1)</a>,
                                                </b:if>
                                            </b:with>
                                        </b:with>
                                    <b:else/>
                                        <b:with var='ylast' value='data:data count ( _y => _y.name != &quot;&quot; )'>
                                            <b:if cond='data:ylast - 1 != data:yi'>
                                                <b:with var='_y' value='data:data[data:yi + 1]'>
                                                    <b:with var='_m' value='data:_y.data[0]'>
                                                        <b:with var='_d' value='data:_m.data[0]'>
                                                            <link rel="next" expr:href='data:_d.url'/>
                                                            <b:if cond='data:_d.post-count != 1'>
                                                                    <a class="Pager-next" expr:href='data:_d.url + &quot;#&quot; + data:_d.post-count' rel="tag" hidefocus="true">
                                                                        <data:_y.name/>&#32;<data:_d.name/>(<data:_d.post-count/>)
                                                                    </a>,
                                                                <b:else/>
                                                                    <a class="Pager-next" expr:href='data:_d.url' rel="tag" hidefocus="true"><data:_y.name/>&#32;<data:_d.name/>(1)</a>,
                                                            </b:if>
                                                        </b:with>
                                                    </b:with>
                                                </b:with>
                                            </b:if>
                                        </b:with>
                                    </b:if>
                                </b:with>
                            </b:if>
                        </b:with>

                        <b:if cond='data:di != 0'>
                            <b:with var='_d' value='data:m.data[data:di - 1]'>
                                ,
                                <link rel="prev" expr:href='data:_d.url'/>
                                <b:if cond='data:_d.post-count != 1'>
                                    <a class="Pager-prev" expr:href='data:_d.url + &quot;#&quot; + data:_d.post-count' rel="tag" hidefocus="true">
                                        <data:y.name/>&#32;<data:_d.name/>(<data:_d.post-count/>)
                                    </a>
                                <b:else/>
                                    <a class="Pager-prev" expr:href='data:_d.url' rel="tag" hidefocus="true"><data:y.name/>&#32;<data:_d.name/>(1)</a>                     
                                </b:if>
                            </b:with>
                        <b:else/>
                            <b:if cond='data:mi != 0'>
                                <b:with var='_m' value='data:y.data[data:mi - 1]'>
                                    <b:with var='dlast' value='data:_m.data count ( _d => _d.url != &quot;&quot; )'>
                                        <b:with var='_d' value='data:_m.data[data:dlast - 1]'>
                                            ,
                                            <link rel="prev" expr:href='data:_d.url'/>
                                            <b:if cond='data:_d.post-count != 1'>
                                                <a class="Pager-prev" expr:href='data:_d.url + &quot;#&quot; + data:_d.post-count' rel="tag" hidefocus="true">
                                                    <data:y.name/>&#32;<data:_d.name/>(<data:_d.post-count/>)
                                                </a>
                                            <b:else/>
                                                <a class="Pager-prev" expr:href='data:_d.url' rel="tag" hidefocus="true"><data:y.name/>&#32;<data:_d.name/>(1)</a>                     
                                            </b:if>
                                        </b:with>
                                    </b:with>
                                </b:with>
                            <b:else/>
                                <b:if cond='data:yi != 0'>
                                    <b:with var='_y' value='data:data[data:yi - 1]'>
                                        <b:with var='mlast' value='data:_y.data count ( _m => _m.name != &quot;&quot; )'>
                                            <b:with var='_m' value='data:_y.data[data:mlast - 1]'>
                                                <b:with var='dlast' value='data:_m.data count ( _d => _d.url != &quot;&quot; )'>
                                                    <b:with var='_d' value='data:_m.data[data:dlast - 1]'>
                                                        ,
                                                        <link rel="prev" expr:href='data:_d.url'/>
                                                        <b:if cond='data:_d.post-count != 1'>
                                                                <a class="Pager-prev" expr:href='data:_d.url + &quot;#&quot; + data:_d.post-count' rel="tag" hidefocus="true">
                                                                    <data:_y.name/>&#32;<data:_d.name/>(<data:_d.post-count/>)
                                                                </a>
                                                            <b:else/>
                                                                <a class="Pager-prev" expr:href='data:_d.url' rel="tag" hidefocus="true"><data:_y.name/>&#32;<data:_d.name/>(1)</a>                  
                                                        </b:if>
                                                    </b:with>
                                                </b:with>
                                            </b:with>
                                        </b:with>
                                    </b:with>
                                </b:if>
                            </b:if>
                        </b:if>
                    </b:if>
                </b:loop>
            </b:loop>
        </b:loop>
    </b:includable>
</b:widget>
<b:widget id='BlogArchive1' locked='true' type='BlogArchive' mobile='yes'>
    <b:includable id='main'>
        <b:if cond='data:blog.pageType == "archive"'>
            <b:loop values='data:data' var='y' index='yi'>
                <b:loop values='data:y.data' var='m' index='mi'>
                    <b:if cond='data:m.url == data:blog.url'>
                        <b:with var='mlast' value='data:y.data count ( _m => _m.url != &quot;&quot; )'>
                            <b:if cond='data:mlast - 1 != data:mi'>
                                <b:with var='_m' value='data:y.data[data:mi + 1]'>
                                    <a expr:href='data:_m.url' hidefocus="true"><data:y.name/>-<data:_m.name/>(<data:_m.post-count/>)</a>
                                </b:with>
                            <b:else/>
                                <b:with var='ylast' value='data:data count ( _y => _y.name != &quot;&quot; )'>
                                    <b:if cond='data:ylast - 1 != data:yi'>
                                        <b:loop values='data:data' var='_y' index='_yi'>
                                            <b:if cond='data:yi + 1 == data:_yi'>
                                                <b:with var='_m' value='data:_y.data[0]'>
                                                    <a expr:href='data:_m.url' hidefocus="true"><data:_y.name/>-<data:_m.name/>(<data:_m.post-count/>)</a>
                                                </b:with>
                                            </b:if>
                                        </b:loop>
                                    </b:if>
                                </b:with>
                            </b:if>
                        </b:with>

                        <b:if cond='data:mi == 0'>
                            <b:if cond='data:yi != 0'>
                                <b:loop values='data:data' var='_y' index='_yi'>
                                    <b:if cond='(data:yi - 1) == data:_yi'>
                                        <b:with var='mlast' value='data:_y.data count ( _m => _m.url != &quot;&quot; )'>
                                            <b:with var='_m' value='data:_y.data[data:mlast - 1]'>
                                                <a expr:href='data:_m.url' hidefocus="true"><data:_y.name/>-<data:_m.name/>(<data:_m.post-count/>)</a>
                                            </b:with>
                                        </b:with>
                                    </b:if>
                                </b:loop>
                            </b:if>
                        <b:else/>
                            <b:with var='_m' value='data:y.data[data:mi - 1]'>
                                <a expr:href='data:_m.url' hidefocus="true"><data:y.name/>-<data:_m.name/>(<data:_m.post-count/>)</a>
                            </b:with>
                        </b:if>
                    </b:if>
                </b:loop>
            </b:loop>
        </b:if>
    </b:includable>
</b:widget>

Loop monster (T-T)...