背景

才发现好像没做博客必须的一个功能——归档，赶快补上吧 🙂

查询了 WordPress REST API 文档之后，发现每次请求的文章总数( 也就是 per_page 参数 )不可以超过 100，但是归档页面理应展示全部文章，于是需要在 function.php 增加以下钩子和函数拓宽这个限制

https://github.com/WP-API/WP-API/issues/2914

add_filter( 'rest_post_collection_params', 'my_prefix_change_post_per_page', 10, 1 );

function my_prefix_change_post_per_page( $params ) {
    if ( isset( $params['per_page'] ) ) {
        $count_posts = wp_count_posts();
        $params['per_page']['maximum'] = $count_posts->publish; //增加限制到当前文章总数
    }
    return $params;
}

 

代码

WordPress REST API 默认以 date (文章发布日期) 来排序文章输出，所以可以遍历全部文章，判断上下篇发布年份来按照年份归档文章

//获取文章列表
            axios.get('https://www.ouorz.com/wp-json/wp/v2/posts?per_page='+window.post_count) //默认以发布时间排序
             .then(response => {
                 this.posts = response.data
             })
             .then(() => {
                 var k = -1;
                 var i = 0;
                 for(i=0;i<(this.posts).length;i++){ //遍历所有文章
                     if( ((this.posts[i].date.split('T'))[0].split('-'))[0] !== this.last_year ){ //当前文章发布年与上一篇不同
                         this.posts_array[k += 1] = []; //初始化数组
                         this.posts_array[k]['posts'] = []; //初始化 posts 数组
                         this.posts_array[k]['year'] = parseInt(((this.posts[i].date.split('T'))[0].split('-'))[0]); //增加年份
                         this.posts_array[k]['posts'][(this.posts_array[k]['posts']).length] = this.posts[i]; //增加文章
                         this.last_year = ((this.posts[i].date.split('T'))[0].split('-'))[0]; //赋值当前文章发布年份
                     }else{ //发布年份与上一篇相同
                        this.posts_array[k]['posts'][(this.posts_array[k]['posts']).length] = this.posts[i]; //增加文章
                     }
                 }
                 this.loading = false;
            })

↑ JavaScript 代码

 

效果

https://www.ouorz.com/archive.html