shopify主题单页面的实现调用不同blog类似的文章且进行分页的多类型、多分页。
<style type="text/css">
.blogs-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
}
.blog-category {
background-color: #1a1a1a;
padding: 20px;
border-radius: 8px;
}
.blog-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.blog-item {
width: 24%;
background-color: #333;
padding: 10px;
border-radius: 6px;
}
.blog-item img {
width: 100%;
border-radius: 4px;
}
.pagination button {
margin: 5px;
padding: 8px 12px;
background-color: #555;
color: white;
border: none;
cursor: pointer;
}
.pagination button:hover {
background-color: #777;
}
.pagination ul {
display: flex;
list-style: none;
gap: 10px;
}
.pagination li a {
padding: 8px 12px;
background-color: #555;
color: white;
text-decoration: none;
border-radius: 4px;
}
.pagination li a:hover {
background-color: #777;
}
.pagination li.current a {
background-color: #000;
font-weight: bold;
}
</style>
<div class="blogs-wrapper">
<!-- Instagram分类 -->
<div class="blog-category" id="instagram">
<h2><img src="/path/to/instagram-icon.png" alt="Instagram" /> Instagram</h2>
<div class="blog-list" id="instagram-list"></div>
<div class="pagination cplist-feny" id="instagram-pagination"></div>
</div>
<!-- TikTok分类 -->
<div class="blog-category" id="tiktok">
<h2><img src="/path/to/tiktok-icon.png" alt="TikTok" /> TikTok</h2>
<div class="blog-list" id="tiktok-list"></div>
<div class="pagination cplist-feny" id="tiktok-pagination"></div>
</div>
<!-- linkedin分类 -->
<div class="blog-category" id="linkedin">
<h2><img src="/path/to/linkedin-icon.png" alt="linkedin" /> linkedin</h2>
<div class="blog-list" id="linkedin-list"></div>
<div class="pagination cplist-feny" id="linkedin-pagination"></div>
</div>
</div>
<script>
const blogsData = {
instagram: [
{% for article in blogs.instagram.articles %}
{
"title": "{{ article.title }}",
"url": "{{ article.url }}",
"image": "{{ article.image | img_url: 'medium' }}",
"date": "{{ article.published_at | date: '%Y-%m-%d' }}",
},
{% endfor %}
],
tiktok: [
{% for article in blogs.tiktok.articles %}
{
"title": "{{ article.title }}",
"url": "{{ article.url }}",
"image": "{{ article.image | img_url: 'medium' }}",
"date": "{{ article.published_at | date: '%Y-%m-%d' }}",
},
{% endfor %}
],
linkedin: [
{% for article in blogs.linkedin.articles %}
{
"title": "{{ article.title }}",
"url": "{{ article.url }}",
"image": "{{ article.image | img_url: 'medium' }}",
"date": "{{ article.published_at | date: '%Y-%m-%d' }}",
},
{% endfor %}
]
};
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const itemsPerPage = 4; // 每页显示的文章数量
function renderPagination(data, containerId, paginationId) {
const container = document.getElementById(containerId);
const pagination = document.getElementById(paginationId);
let currentPage = 1;
const totalPages = Math.ceil(data.length / itemsPerPage);
function displayPage(page) {
container.innerHTML = ''; // 清空内容
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const items = data.slice(start, end);
items.forEach(item => {
container.innerHTML += `
<div class="blog-item">
<img src="${item.image}" alt="${item.title}" />
<h3><a href="${item.url}">${item.title}</a></h3>
<p>${item.date}</p>
</div>
`;
});
}
function setupPagination() {
pagination.innerHTML = ''; // 清空分页按钮
if (totalPages > 1) {
const ul = document.createElement('ul');
// 上一页按钮
if (currentPage > 1) {
const prevLi = document.createElement('li');
prevLi.innerHTML = `<a href="#">❮</a>`;
prevLi.addEventListener('click', () => {
currentPage--;
displayPage(currentPage);
setupPagination();
});
ul.appendChild(prevLi);
}
// 页码按钮
for (let i = 1; i <= totalPages; i++) {
const pageLi = document.createElement('li');
if (i === currentPage) {
pageLi.classList.add('current');
pageLi.innerHTML = `<a>${i}</a>`;
} else {
pageLi.innerHTML = `<a href="#">${i}</a>`;
pageLi.addEventListener('click', () => {
currentPage = i;
displayPage(currentPage);
setupPagination();
});
}
ul.appendChild(pageLi);
}
// 下一页按钮
if (currentPage < totalPages) {
const nextLi = document.createElement('li');
nextLi.innerHTML = `<a href="#">❯</a>`;
nextLi.addEventListener('click', () => {
currentPage++;
displayPage(currentPage);
setupPagination();
});
ul.appendChild(nextLi);
}
pagination.appendChild(ul);
}
}
displayPage(currentPage); // 显示初始页
setupPagination(); // 设置分页按钮
}
// 初始化每个分类的分页
renderPagination(blogsData.instagram, 'instagram-list', 'instagram-pagination');
renderPagination(blogsData.tiktok, 'tiktok-list', 'tiktok-pagination');
renderPagination(blogsData.linkedin, 'linkedin-list', 'linkedin-pagination');
});
</script>
