jekyll学习四(获取单个分类下的所有文章) 返回首页

发表于 2018-06-14 | 本文共 214 字

在学jekyll的过程中,碰到了一点小小困难,就是在不使用插件的情况下如何获取当前分类下的所有文章,网上查了些解决方案,终于在这篇文章中受到了启发,换种思考方式,可以用JavaScript的方式操作dom实现。这里需要使用到一个第三方js,jquery.query.js,可以在github上下载,接下来po代码:

var dataStr = '{ {% for cat in site.categories %}{% if cat[0] != site.categories.first[0] %},{% endif %}"{{ cat[0] }}":[{% for post in cat[1] %}{% if post != cat[1].first %},{% endif %}{"url":"{{post.url}}", "title":"{{post.title}}", "date":"{{post.date | date:"%d/%m/%Y"}}"}{% endfor %}]{% endfor %} }';
    var data = JSON.parse(dataStr);

    var categoryName = $.query.get("category");
    var catArr = data[categoryName];


    var ulel = '<ul class="arc-list list-unstyled"></ul>';
    var liel = '';
    for(var i in catArr) {
        liel += '<li>'+catArr[i].date+' <a href="'+catArr[i].url+'">'+catArr[i].title+'</a></li>';
    }

    $('.arc-lis').text('ulel');

    $('.sub-title').children('h2').text(categoryName);
    $('.content-page').html('<ul class="arc-list list-unstyled">'+liel+'</ul>');

首先我们构建了一个包含所有分类的对象,有三个值: ‘title’,’url’,’date’。然后用jquery.query.js来获取url等号后面的内容,比如在我的项目里,展示单个分类下的所有文章我用了category.html这个页面

<a href='/category.html?category=JavaScript'>JavaScript</a>

那么获取的值就是’JavaScript’,得到了这个当前分类名称从而就可以得到这个分类下的所有文章了,是一个数组,接下用js循环输出下html就可以得到结果了。
当然解决这个问题也可以使用插件的方式,感兴趣的可以自己研究下。


显示评论