为WordPress REST API请求创建分页

Question

我需要一个非常精确的主题。我有一个提取函数，可以从WordPress博客中获取结果。

 function getTags() {

    let page = 1,
    tagURL = `https://css-tricks.com/wp-json/wp/v2/posts?_embed&per_page=4&tags=833&page=1`;
    console.log(tagURL)

    $loader.style.display = "block";
    fetch(tagURL)
    .then(response => response.json())
    .then(dataTag => {
        dataTag.map(dataTag => {

        // Content

    })
    .catch(err => {
        console.log(err);
        let message = err.statusText || "Es ist ein Fehler aufgetreten...";
        $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
        $loader.style.display = "none";
    });

 }

我需要创建一个分页，每页显示4个帖子，但是找不到正确的方法。 如果社区中的某人可以指导我，我将非常感激。

问候，谢谢。

＆lt; - 更新 - ＆gt;

完整的代码如下

const
    $posts = document.getElementById('posts'),
    $loader = document.querySelector('.loader'),
    $template = document.getElementById("post-template").content


    function getTags() {
    let tagURL = `https://w-api.cyberconcept.de/wp-json/wp/v2/posts?_embed&per_page=2&tags=35&page=1`;
    $loader.style.display = "block";
    fetch(tagURL)
        .then(response => response.json())
        .then(dataTag => {
            dataTag.forEach(dataTag => {

                /**
                 * At this point a custom URL is created for each post-card element.
                 * @type {Element}
                 */
                const postLink = $template.querySelectorAll('.post-link');
                let url = window.location.origin + window.location.pathname;
                url = url + "?post_id=" + dataTag.id;

                postLink[0].setAttribute('href', url);
                postLink[1].setAttribute('href', url);
                /**
                 * Posts tags loop and post Tag url
                 * @type {string}
                 */
                let tags = "";
                const TagsUrl = window.location.origin + window.location.pathname
                dataTag._embedded["wp:term"][1].forEach(
                    dataTag => {
                        url = TagsUrl + "?tag_id=" + dataTag.id;
                        tags += `<a href="${url}" class="tag is-background-gradientDark">${dataTag.name}</a>`
                    }
                );

                /*
                 * Post images
                 */
                $template.querySelector('.post-image').src = dataTag._embedded["wp:featuredmedia"] ? dataTag._embedded["wp:featuredmedia"][0].source_url : "";
                $template.querySelector('.post-image').alt = dataTag._embedded["wp:featuredmedia"] ? dataTag._embedded["wp:featuredmedia"][0].alt_tex : "";
                $template.querySelector('.post-image').title = dataTag._embedded["wp:featuredmedia"] ? dataTag._embedded["wp:featuredmedia"][0].title.rendered : "";

                /*
                 * Post title
                 */
                $template.querySelector(".post-title").innerHTML = dataTag.title.rendered;
                /*
                 *Post Excerpt
                 */

                $template.querySelector('.post-excerpt').innerHTML = dataTag.excerpt.rendered;
                /*
                 *Post  Tags
                 */
                const tag = $template.querySelector('.post-tags');
                if (dataTag._embedded["wp:term"][1].length === 0) {
                    tag.style.display = "none";

                } else {
                    tag.style.display = "flex";
                    tag.innerHTML = ` ${tags}`;

                }

                let $clone = document.importNode($template, true);
                $posts.appendChild($clone);


            });
            $loader.style.display = "none";
        })
        .catch(err => {
            console.log(err);
            let message = err.statusText || "Es ist ein Fehler aufgetreten...";
            $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
            $loader.style.display = "none";
        });

      }
      
      document.addEventListener("DOMContentLoaded", () => {
   
        getTags(1);
   
})

<section id="blog-Slider" class="blog head-slider"></section>
<div class="container">
    <section id="posts-section">
        <h1 class="headline black-font"></h1>
        <div id="posts" class="blog grid"></div>
        <div id="pageNumber"></div>
    </section>
    <section id="single" class="blog single"></section>
</div>
<div id="pagination"></div>
<div class="blog loading">
    <img style="width: fit-content;" class="loader"
         src="" alt="laden...">
</div>

<template id="post-template">
    <div class="post-card">
        <a class="post-link">
            <img class="post-image">
        </a>
        <div>
            <div class="post-tags"></div>
            <a class="post-link">
                <h3 class="post-title"></h3>
                <p class="post-excerpt standard black-font"></p>
            </a>
        </div>
    </div>

</template>

Answer 1

您只需要重写包装器

let totalPages = 0,
  pageNumber = document.querySelector('#pageNumber')
getTags(1)

function getTags(page) {
  let tagURL = `https://css-tricks.com/wp-json/wp/v2/posts?_embed&per_page=4&tags=833&page=${page}`;
  console.log(tagURL)

  //$loader.style.display = "block";
  fetch(tagURL)
    .then(async (response) => {
      let dataTag = await response.json() // get json

      totalPages = response.headers.get('x-wp-totalpages')
      if (!pageNumber.textContent) {
        createPage(); // create page number
      }

      // on response received, empty it
      document.querySelector('#content').innerHTML = '' 
      dataTag.forEach(data => { // not map
        document.querySelector('#content').innerHTML += `<li>${data.title.rendered}</<li>`
      })

    }).catch(err => {
      console.log(err);
      let message = err.statusText || "Es ist ein Fehler aufgetreten...";
      $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
      $loader.style.display = "none";
    });
}

function createPage() {
  for (var i = 0; i < totalPages; i++) {

    let li = document.createElement('li')
    li.textContent = i + 1
    li.onclick = function() {
      getTags(this.textContent)
    }
    pageNumber.appendChild(li)
  }
}

#pageNumber li{float: left;border: 1px solid #bbb;list-style: none;padding: 5px;cursor: pointer;}

<div id="content"></div>
<div id="pageNumber"></div>

Answer 2

尝试以下操作：
您需要增加页面变量并调用函数 getTags

function getTags(page) {


let tagURL = 'https://css-tricks.com/wp-json/wp/v2/posts?_embed&per_page=4&tags=833&page='+page;
console.log(tagURL);

$loader.style.display = "block";
fetch(tagURL)
.then(response => response.json())
.then(dataTag => {
    dataTag.map(dataTag => {

    // Content
 

 

})
.catch(err => {
    console.log(err);
    let message = err.statusText || "Es ist ein Fehler aufgetreten...";
    $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
    $loader.style.display = "none";
});

 }

我在ajax响应后逐渐增加了变量值 page 。