If you have a blog with 100 posts, the default pagination on bizy looks very ugly.
This code can fix pagination for "post" element. Now it's much more concise
Guide:
Code CSS & JS:
<script>
var page_current = document.querySelector("#wtr-posts__pagination .brz-posts__pagination .page-numbers.current");
var current_li = page_current.closest('li');
var list_li = document.querySelectorAll("#wtr-posts__pagination .brz-posts__pagination li");
current_li.classList.add("current-li");
if (list_li.length < 7) {
for (let j = 0; j < list_li.length; j++) {
list_li[j].classList.add("show-li");
}
} else {
for (let i = 0; i < list_li.length; i++) {
if (i < 3 && list_li[i].className == "current-li") {
for (let j = 0; j < 7; j++) {
list_li[j].classList.add("show-li");
}
} else if (list_li.length - 4 < i && list_li[i].className == "current-li") {
for (let j = list_li.length - 7; j < list_li.length; j++) {
list_li[j].classList.add("show-li");
}
} else if (list_li[i].className == "current-li") {
for (let j = i - 3; j < i + 3; j++) {
list_li[j].classList.add("show-li");
}
}
}
}
</script>
<style>
/*---phan trang--*/
#wtr-posts__pagination ul.page-numbers li:not(.show-li) {
display: none;
}
#wtr-posts__pagination ul.page-numbers li:first-child, #wtr-posts__pagination ul.page-numbers li:last-child {
display: block;
}
#wtr-posts__pagination .brz-posts__pagination li:first-child a, #wtr-posts__pagination .brz-posts__pagination li:last-child a {
color: rgb(0, 0, 0, 0)!important;
}
#wtr-posts__pagination ul.page-numbers li:first-child a::after {
content: "《 first";
width: 60px;
position: absolute;
right: 0;
text-align: right;
color: #ff7a18!important;
}
#wtr-posts__pagination ul.page-numbers li:last-child a::after {
content: "last 》";
width: 60px;
position: absolute;
left: 0;
text-align: left;
color: #ff7a18!important;
}
</style>
How to use it
Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)
*Note: License Pro is required for the functions to work
Key word:
How to add pagination in the Blog Page for brizy cloud? Fix pagination in the Blog for brizy cloud
