Personal code for article list at index page.themes/guoshuang/layout/index.js

<div id="garticleListDiv">
<i class="handler icon-th-list"> 目录</i>
<ul class="entry" id="garticleList">
  <% page.posts.each(function(item){ %>
    <li><a href="javascript:void(0);" class="anchor"><%= item.title%></a><a class="icon-external-link" href="<%- config.root %><%- item.path %>"></a></li>
    <% }); %>
</ul>
</div>

<script>
jQuery(function(){

    $('#garticleListDiv .handler').click(function(e){
        $('#garticleList').toggle();
        e.stopPropagation();
    })

    $('#garticleList').find('li a.anchor').click(function(){
        //console.log($(this).attr('data-index'))
        var oindex=$(this).parent().index();
        $('body').scrollTop($('article:eq('+oindex+')').offset().top)
    })

    $(document).click(function(e){
        $('#garticleList').hide();
    })

})
</script>

<style>
#garticleListDiv {position:relative;text-align: left;}
#garticleListDiv .handler {cursor: pointer;}
#garticleListDiv .handler:before {color:#aaa;}
#garticleList {position: absolute;background: #fff;border:solid 1px #ccc;z-index:2;left:0;padding:2px;box-shadow: 1px 2px 3px #999;display: none}
#garticleList ul,#garticleList li {list-style:none;margin: 0;padding: 0; }
#garticleList li {ling-height:25px;padding:0 5px;}
#garticleList li:hover {background: #eee;}
#garticleList .anchor {display: inline-block;margin-right: 0.5em;cursor: pointer;white-space: nowrap;}
#garticleList a {display: inline-block;font-size:12px;}
#garticleList .icon-external-link {color: #999;}
</style>