我需要推動一個非常精確的主題。我有一個fetch從 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 個帖子，但我找不到正確的方法。如果社區的人可以指導我，我將非常感激。
問候和感謝。
<--更新-->
完整代碼如下
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}" >${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>uj5u.com熱心網友回復：
你只需要重寫包裝器
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>uj5u.com熱心網友回復：
試試這個：你需要增加頁面變數并呼叫函式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 回應后，我增加了變數值頁面。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/466200.html