update:首页文章Ajax加载
This commit is contained in:
jiewenhuang
parent
25fba04c8c
commit
d2bc43f6d0
|
|
@ -100,16 +100,27 @@ spec:
|
|||
- group: home
|
||||
label: 首页
|
||||
formSchema:
|
||||
# - $formkit: select
|
||||
# name: enable_index_list_ajax
|
||||
# label: 异步加载文章列表
|
||||
# value: true
|
||||
# help: ""
|
||||
# options:
|
||||
# - value: true
|
||||
# label: 是
|
||||
# - value: false
|
||||
# label: 否
|
||||
- $formkit: radio
|
||||
name: enable_index_list_ajax
|
||||
label: 文章加载形式
|
||||
value: false
|
||||
help: ""
|
||||
options:
|
||||
- value: true
|
||||
label: 加载
|
||||
- value: false
|
||||
label: 分页
|
||||
- $formkit: radio
|
||||
name: enable_auto_ajax
|
||||
label: 是否开启自动加载
|
||||
value: false
|
||||
help: "开启后滑到底部自动加载文章(默认关闭)"
|
||||
options:
|
||||
- value: true
|
||||
label: 是
|
||||
- value: false
|
||||
label: 否
|
||||
|
||||
- $formkit: select
|
||||
name: enable_post_thumbnail
|
||||
label: 开启文章缩略图
|
||||
|
|
|
|||
|
|
@ -83,204 +83,302 @@ const homeContext = {
|
|||
// }
|
||||
// },
|
||||
/* 初始化首页列表 */
|
||||
initList() {
|
||||
if (!ThemeConfig.enable_index_list_ajax) return;
|
||||
const MapTypes = {
|
||||
1: "createTime",
|
||||
2: "visits",
|
||||
3: "updateTime",
|
||||
4: "likes",
|
||||
};
|
||||
const pageSize = ThemeConfig.post_index_page_size;
|
||||
const $el = $(".joe_index__list");
|
||||
const $headerHeight =
|
||||
ThemeConfig.enable_fixed_header || Joe.isMobile
|
||||
? $(".joe_header").height()
|
||||
: 0;
|
||||
const $navItems = $(".passage-list-tabs .item");
|
||||
const $navLine = $(".passage-list-tabs .line");
|
||||
const $domList = $el.find(".joe_list");
|
||||
const $domEmpty = $el.find(".joe_empty");
|
||||
const $domLoad = $(".joe_load");
|
||||
const $domLoading = $el.find(".joe_list__loading");
|
||||
$navLine.attr("style", `width:${$navItems.eq(0).width()}px;`);
|
||||
let queryData = {
|
||||
page: 0,
|
||||
size: pageSize,
|
||||
keyword: "",
|
||||
sort: "topPriority,createTime,desc", // 默认为置顶优先+创建时间+倒序
|
||||
};
|
||||
|
||||
// 初始化Dom
|
||||
const initDom = async (sort) => {
|
||||
$domList.html("").show();
|
||||
$domEmpty.addClass("hide");
|
||||
$domLoad.removeAttr("loading").html("查看更多").show();
|
||||
const activeItem = $(`.passage-list-tabs .item[data-type="${sort}"]`);
|
||||
const activeLine = $(".passage-list-tabs .line");
|
||||
activeItem.addClass("active").siblings().removeClass("active");
|
||||
activeLine.css({
|
||||
left: activeItem.position().left,
|
||||
width: activeItem.width(),
|
||||
});
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const getDate = async () => {
|
||||
$domLoad.attr("loading", true).html("加载中...");
|
||||
$domLoading.show();
|
||||
await Utils.sleep(200);
|
||||
|
||||
return new Promise((reslove, reject) => {
|
||||
Utils.request({
|
||||
url: "/api.console.halo.run/v1alpha1/posts",
|
||||
// initList() {
|
||||
// if (!ThemeConfig.enable_index_list_ajax) return;
|
||||
// const MapTypes = {
|
||||
// 1: "createTime",
|
||||
// 2: "visits",
|
||||
// 3: "updateTime",
|
||||
// 4: "likes",
|
||||
// };
|
||||
// const pageSize = ThemeConfig.post_index_page_size;
|
||||
// const $el = $(".joe_index__list");
|
||||
// const $headerHeight =
|
||||
// ThemeConfig.enable_fixed_header || Joe.isMobile
|
||||
// ? $(".joe_header").height()
|
||||
// : 0;
|
||||
// const $navItems = $(".passage-list-tabs .item");
|
||||
// const $navLine = $(".passage-list-tabs .line");
|
||||
// const $domList = $el.find(".joe_list");
|
||||
// const $domEmpty = $el.find(".joe_empty");
|
||||
// const $domLoad = $(".joe_load");
|
||||
// const $domLoading = $el.find(".joe_list__loading");
|
||||
// $navLine.attr("style", `width:${$navItems.eq(0).width()}px;`);
|
||||
// let queryData = {
|
||||
// page: 0,
|
||||
// size: pageSize,
|
||||
// keyword: "",
|
||||
// sort: "topPriority,createTime,desc", // 默认为置顶优先+创建时间+倒序
|
||||
// };
|
||||
//
|
||||
// // 初始化Dom
|
||||
// const initDom = async (sort) => {
|
||||
// $domList.html("").show();
|
||||
// $domEmpty.addClass("hide");
|
||||
// $domLoad.removeAttr("loading").html("查看更多").show();
|
||||
// const activeItem = $(`.passage-list-tabs .item[data-type="${sort}"]`);
|
||||
// const activeLine = $(".passage-list-tabs .line");
|
||||
// activeItem.addClass("active").siblings().removeClass("active");
|
||||
// activeLine.css({
|
||||
// left: activeItem.position().left,
|
||||
// width: activeItem.width(),
|
||||
// });
|
||||
// };
|
||||
//
|
||||
// // 获取数据
|
||||
// const getDate = async () => {
|
||||
// $domLoad.attr("loading", true).html("加载中...");
|
||||
// $domLoading.show();
|
||||
// await Utils.sleep(200);
|
||||
//
|
||||
// return new Promise((reslove, reject) => {
|
||||
// Utils.request({
|
||||
// url: "/api.console.halo.run/v1alpha1/posts",
|
||||
// method: "GET",
|
||||
// data: queryData,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// const resD = res.content;
|
||||
// if (resD.length === 0) {
|
||||
// $domLoad.hide();
|
||||
// if (queryData.page === 0) {
|
||||
// $domList.hide();
|
||||
// $domEmpty.removeClass("hide");
|
||||
// }
|
||||
// } else {
|
||||
// resD.forEach((itm, idx) =>
|
||||
// $domList.append(getListNode(itm, idx))
|
||||
// );
|
||||
// if (res.isLast) {
|
||||
// $domLoad.hide();
|
||||
// // return Qmsg.warning("没有更多内容了");
|
||||
// }
|
||||
// }
|
||||
// $domLoading.hide();
|
||||
// $domLoad.removeAttr("loading").html("查看更多");
|
||||
// reslove(resD.length ? resD.length - 1 : 0);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// if ($(".joe_list__item").length === 0) {
|
||||
// $domList.hide();
|
||||
// $domEmpty.removeClass("hide");
|
||||
// }
|
||||
// $domLoading.hide();
|
||||
// $domLoad.removeAttr("loading").html("查看更多");
|
||||
// reject(err);
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
//
|
||||
// // 渲染Dom节点
|
||||
// const getListNode = (post, index) => {
|
||||
// const thumbnail = homeContext.getThumbnail(post);
|
||||
// const link_behavior =
|
||||
// ThemeConfig.link_behavior !== "default"
|
||||
// ? ThemeConfig.link_behavior === "new"
|
||||
// ? "_blank"
|
||||
// : ""
|
||||
// : "_blank";
|
||||
//
|
||||
// return `<li class="joe_list__item default animated wow" data-wow-delay="0.${index}s">
|
||||
// ${
|
||||
// ThemeConfig.enable_post_thumbnail
|
||||
// ? `<a href="${post.fullPath}" class="thumbnail" title="${
|
||||
// post.title
|
||||
// }" target="${link_behavior}" rel="noopener noreferrer">
|
||||
// <img width="100%" height="100%" class="lazyload" src="${
|
||||
// ThemeConfig.lazyload_thumbnail
|
||||
// }" data-src="${thumbnail}" onerror="Joe.errorImg(this,${
|
||||
// ThemeConfig.fallback_thumbnail
|
||||
// })" alt="${post.title}">
|
||||
// <time datetime="${Utils.formatDate(
|
||||
// post.createTime
|
||||
// )}">${Utils.formatDate(post.createTime)}</time>
|
||||
// <i class="joe-font joe-icon-picture"></i>
|
||||
// </a>`
|
||||
// : ""
|
||||
// }
|
||||
// <div class="information">
|
||||
// <a href="${post.fullPath}" class="title" title="${
|
||||
// post.title
|
||||
// }" target="${link_behavior}" rel="noopener noreferrer">
|
||||
// ${
|
||||
// post.topped
|
||||
// ? "<span class=\"badge\" style=\"display: inline-block\">置顶</span>"
|
||||
// : ""
|
||||
// }${post.title}</a>
|
||||
// <a class="abstract" href="${
|
||||
// post.fullPath
|
||||
// }" title="文章摘要" target="${link_behavior}" rel="noopener noreferrer">${
|
||||
// post.summary
|
||||
// }</a>
|
||||
// <div class="meta">
|
||||
// <ul class="items">
|
||||
// <li>${Utils.formatDate(post.createTime)}</li>
|
||||
// <li><i class="joe-font joe-icon-eye"></i>${
|
||||
// post.visits || 0
|
||||
// }</li>
|
||||
// <li><i class="joe-font joe-icon-message"></i>${
|
||||
// post.commentCount || 0
|
||||
// }</li>
|
||||
// <li><i class="joe-font joe-icon-dianzan"></i>${
|
||||
// post.likes || 0
|
||||
// }</li>
|
||||
// </ul>
|
||||
// ${
|
||||
// post.categories.length > 0
|
||||
// ? `<ul class="categories">${post.categories.reduce(
|
||||
// (sum, pcate) => {
|
||||
// return (sum += `<li class="pcate">
|
||||
// <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z" fill="var(--minor)"></path><path d="M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z" fill="#ff6a18"></path></svg>
|
||||
// <a class="link" target="${link_behavior}" rel="noopener noreferrer" href="${pcate.fullPath}">${pcate.name}</a>
|
||||
// </li>`);
|
||||
// },
|
||||
// ""
|
||||
// )}</ul>`
|
||||
// : ""
|
||||
// }
|
||||
// </div>
|
||||
// </div>
|
||||
// </li>`;
|
||||
// };
|
||||
//
|
||||
// // 切换文章类型
|
||||
// $navItems.on("click", function (e) {
|
||||
// e.stopPropagation();
|
||||
// if (!ThemeConfig.enable_index_list_ajax) return;
|
||||
// const typeId = $(this).attr("data-type");
|
||||
// const typeName = MapTypes[typeId];
|
||||
// if (queryData.sort.includes(typeName)) return;
|
||||
// queryData = {
|
||||
// page: 0,
|
||||
// size: pageSize,
|
||||
// sort: `topPriority,${typeName},desc`,
|
||||
// };
|
||||
// initDom(typeId);
|
||||
// getDate();
|
||||
// });
|
||||
//
|
||||
// // 加载更多
|
||||
// $domLoad.on("click", async function (e) {
|
||||
// e.stopPropagation();
|
||||
// if ($(this).attr("loading")) return;
|
||||
// const lastItemTop = $domList.find(".joe_list__item:last").offset().top;
|
||||
// queryData.page++;
|
||||
// await getDate();
|
||||
//
|
||||
// // 向下滚动一段距离
|
||||
// await Utils.sleep(300);
|
||||
// const scrollTop = lastItemTop - $headerHeight;
|
||||
// $("html,body").animate(
|
||||
// {
|
||||
// scrollTop,
|
||||
// },
|
||||
// 500
|
||||
// );
|
||||
// });
|
||||
//
|
||||
// getDate();
|
||||
// },
|
||||
loadMoreArticles() {
|
||||
// 在页面加载完成后执行
|
||||
$(document).ready(() => {
|
||||
const $domLoadContainer = $(".joe_load_container");
|
||||
$domLoadContainer.on('click','.joe_load', async function () {
|
||||
const $domLoad = $(".joe_load");
|
||||
this.domNext = $domLoad.attr('data-next');
|
||||
// console.log(this.domNext)
|
||||
$domLoad.html("加载中...").attr("loading", "true");
|
||||
fetch(this.domNext, {
|
||||
method: "GET",
|
||||
data: queryData,
|
||||
})
|
||||
.then((res) => {
|
||||
const resD = res.content;
|
||||
if (resD.length === 0) {
|
||||
$domLoad.hide();
|
||||
if (queryData.page === 0) {
|
||||
$domList.hide();
|
||||
$domEmpty.removeClass("hide");
|
||||
}
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, "text/html");
|
||||
const postListElement = document.querySelector(".joe_list");
|
||||
// console.log(postListElement)
|
||||
const postListNewElements = doc.querySelectorAll(".joe_list .joe_list__item");
|
||||
// console.log(postListNewElements)
|
||||
|
||||
if (postListNewElements && postListNewElements.length > 0) {
|
||||
postListNewElements.forEach((element) => {
|
||||
postListElement.appendChild(element.cloneNode(true));
|
||||
});
|
||||
|
||||
}
|
||||
const $newDomLoad = $(doc).find(".joe_load");
|
||||
if ($newDomLoad.attr('data-next') !== '/') {
|
||||
$domLoadContainer.empty().append($newDomLoad);
|
||||
} else {
|
||||
resD.forEach((itm, idx) =>
|
||||
$domList.append(getListNode(itm, idx))
|
||||
);
|
||||
if (res.isLast) {
|
||||
$domLoad.hide();
|
||||
// return Qmsg.warning("没有更多内容了");
|
||||
}
|
||||
$domLoadContainer.remove();
|
||||
}
|
||||
$domLoading.hide();
|
||||
$domLoad.removeAttr("loading").html("查看更多");
|
||||
reslove(resD.length ? resD.length - 1 : 0);
|
||||
// 向下滚动一段距离
|
||||
const lastItemTop = postListElement.querySelector(".joe_list__item:last-child").offsetTop;
|
||||
const scrollTop = lastItemTop - window.innerHeight; // Adjust the value as needed
|
||||
window.scrollTo({
|
||||
top: scrollTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
if ($(".joe_list__item").length === 0) {
|
||||
$domList.hide();
|
||||
$domEmpty.removeClass("hide");
|
||||
}
|
||||
$domLoading.hide();
|
||||
$domLoad.removeAttr("loading").html("查看更多");
|
||||
reject(err);
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 渲染Dom节点
|
||||
const getListNode = (post, index) => {
|
||||
const thumbnail = homeContext.getThumbnail(post);
|
||||
const link_behavior =
|
||||
ThemeConfig.link_behavior !== "default"
|
||||
? ThemeConfig.link_behavior === "new"
|
||||
? "_blank"
|
||||
: ""
|
||||
: "_blank";
|
||||
|
||||
return `<li class="joe_list__item default animated wow" data-wow-delay="0.${index}s">
|
||||
${
|
||||
ThemeConfig.enable_post_thumbnail
|
||||
? `<a href="${post.fullPath}" class="thumbnail" title="${
|
||||
post.title
|
||||
}" target="${link_behavior}" rel="noopener noreferrer">
|
||||
<img width="100%" height="100%" class="lazyload" src="${
|
||||
ThemeConfig.lazyload_thumbnail
|
||||
}" data-src="${thumbnail}" onerror="Joe.errorImg(this,${
|
||||
ThemeConfig.fallback_thumbnail
|
||||
})" alt="${post.title}">
|
||||
<time datetime="${Utils.formatDate(
|
||||
post.createTime
|
||||
)}">${Utils.formatDate(post.createTime)}</time>
|
||||
<i class="joe-font joe-icon-picture"></i>
|
||||
</a>`
|
||||
: ""
|
||||
}
|
||||
<div class="information">
|
||||
<a href="${post.fullPath}" class="title" title="${
|
||||
post.title
|
||||
}" target="${link_behavior}" rel="noopener noreferrer">
|
||||
${
|
||||
post.topped
|
||||
? "<span class=\"badge\" style=\"display: inline-block\">置顶</span>"
|
||||
: ""
|
||||
}${post.title}</a>
|
||||
<a class="abstract" href="${
|
||||
post.fullPath
|
||||
}" title="文章摘要" target="${link_behavior}" rel="noopener noreferrer">${
|
||||
post.summary
|
||||
}</a>
|
||||
<div class="meta">
|
||||
<ul class="items">
|
||||
<li>${Utils.formatDate(post.createTime)}</li>
|
||||
<li><i class="joe-font joe-icon-eye"></i>${
|
||||
post.visits || 0
|
||||
}</li>
|
||||
<li><i class="joe-font joe-icon-message"></i>${
|
||||
post.commentCount || 0
|
||||
}</li>
|
||||
<li><i class="joe-font joe-icon-dianzan"></i>${
|
||||
post.likes || 0
|
||||
}</li>
|
||||
</ul>
|
||||
${
|
||||
post.categories.length > 0
|
||||
? `<ul class="categories">${post.categories.reduce(
|
||||
(sum, pcate) => {
|
||||
return (sum += `<li class="pcate">
|
||||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z" fill="var(--minor)"></path><path d="M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z" fill="#ff6a18"></path></svg>
|
||||
<a class="link" target="${link_behavior}" rel="noopener noreferrer" href="${pcate.fullPath}">${pcate.name}</a>
|
||||
</li>`);
|
||||
},
|
||||
""
|
||||
)}</ul>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</li>`;
|
||||
};
|
||||
|
||||
// 切换文章类型
|
||||
$navItems.on("click", function (e) {
|
||||
e.stopPropagation();
|
||||
if (!ThemeConfig.enable_index_list_ajax) return;
|
||||
const typeId = $(this).attr("data-type");
|
||||
const typeName = MapTypes[typeId];
|
||||
if (queryData.sort.includes(typeName)) return;
|
||||
queryData = {
|
||||
page: 0,
|
||||
size: pageSize,
|
||||
sort: `topPriority,${typeName},desc`,
|
||||
};
|
||||
initDom(typeId);
|
||||
getDate();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
$domLoad.on("click", async function (e) {
|
||||
e.stopPropagation();
|
||||
if ($(this).attr("loading")) return;
|
||||
const lastItemTop = $domList.find(".joe_list__item:last").offset().top;
|
||||
queryData.page++;
|
||||
await getDate();
|
||||
|
||||
// 向下滚动一段距离
|
||||
await Utils.sleep(300);
|
||||
const scrollTop = lastItemTop - $headerHeight;
|
||||
$("html,body").animate(
|
||||
{
|
||||
scrollTop,
|
||||
},
|
||||
500
|
||||
);
|
||||
});
|
||||
|
||||
getDate();
|
||||
},
|
||||
/* 激活列表特效 */
|
||||
// 加载更多文章的函数
|
||||
// loadMoreArticles() {
|
||||
// // 进行加载前的一些UI交互，例如显示加载指示器
|
||||
//
|
||||
// // 发送Ajax请求获取新的文章内容
|
||||
// fetch(this.domNext, {
|
||||
// method: "GET",
|
||||
// })
|
||||
// .then((response) => response.text())
|
||||
// .then((html) => {
|
||||
// const parser = new DOMParser();
|
||||
// const doc = parser.parseFromString(html, "text/html");
|
||||
// const postListElement = document.getElementById("main");
|
||||
// const postListNewElements = doc.querySelectorAll("#main .post");
|
||||
//
|
||||
// if (postListNewElements && postListNewElements.length > 0) {
|
||||
// postListNewElements.forEach((element) => {
|
||||
// postListElement.appendChild(element);
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error(error);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// // 加载完成后的一些UI交互，例如隐藏加载指示器
|
||||
// });
|
||||
// },
|
||||
|
||||
bigBannerGoto(){
|
||||
if (!ThemeConfig.enable_big_banner){
|
||||
return
|
||||
}
|
||||
const link = document.getElementById('evan-big-banner_goto');
|
||||
const target = document.querySelector('#indexPosition');
|
||||
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const targetPosition = target.getBoundingClientRect().top + window.scrollY;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 激活列表特效 */
|
||||
initListEffect() {
|
||||
if (!ThemeConfig.enable_index_list_effect) return;
|
||||
new WOW({
|
||||
|
|
@ -310,16 +408,3 @@ const homeContext = {
|
|||
// }
|
||||
// });
|
||||
})();
|
||||
const link = document.getElementById('evan-big-banner_goto');
|
||||
const target = document.querySelector('#indexPosition');
|
||||
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const targetPosition = target.getBoundingClientRect().top + window.scrollY;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,24 +1 @@
|
|||
const homeContext={initSwiper(){var e;0!==$(".joe_index__banner .swiper-container").length&&(e={direction:"horizontal",loop:"true",effect:"slide",keyboard:!1,speed:"500",mousewheel:!1,grabCursor:"true",allowTouchMove:"true",autoplay:{delay:"3500",disableOnInteraction:!1},observer:!0,navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},pagination:{el:".swiper-pagination"}},new Swiper(".swiper-container",e))},initList(){if(!ThemeConfig.enable_index_list_ajax)return;const i={1:"createTime",2:"visits",3:"updateTime",4:"likes"},a=ThemeConfig.post_index_page_size;var e=$(".joe_index__list");const t=ThemeConfig.enable_fixed_header||Joe.isMobile?$(".joe_header").height():0;var l=$(".passage-list-tabs .item"),o=$(".passage-list-tabs .line");const n=e.find(".joe_list"),s=e.find(".joe_empty"),r=$(".joe_load"),c=e.find(".joe_list__loading");o.attr("style",`width:${l.eq(0).width()}px;`);let d={page:0,size:a,keyword:"",sort:"topPriority,createTime,desc"};const h=async()=>(r.attr("loading",!0).html("加载中..."),c.show(),await Utils.sleep(200),new Promise((i,t)=>{Utils.request({url:"/api.console.halo.run/v1alpha1/posts",method:"GET",data:d}).then(e=>{var t=e.content;0===t.length?(r.hide(),0===d.page&&(n.hide(),s.removeClass("hide"))):(t.forEach((e,t)=>n.append(((e,t)=>{const i=homeContext.getThumbnail(e),a=ThemeConfig.link_behavior!=="default"?ThemeConfig.link_behavior==="new"?"_blank":"":"_blank";return`<li class="joe_list__item default animated wow" data-wow-delay="0.${t}s">
|
||||
${ThemeConfig.enable_post_thumbnail?`<a href="${e.fullPath}" class="thumbnail" title="${e.title}" target="${a}" rel="noopener noreferrer">
|
||||
<img width="100%" height="100%" class="lazyload" src="${ThemeConfig.lazyload_thumbnail}" data-src="${i}" onerror="Joe.errorImg(this,${ThemeConfig.fallback_thumbnail})" alt="${e.title}">
|
||||
<time datetime="${Utils.formatDate(e.createTime)}">${Utils.formatDate(e.createTime)}</time>
|
||||
<i class="joe-font joe-icon-picture"></i>
|
||||
</a>`:""}
|
||||
<div class="information">
|
||||
<a href="${e.fullPath}" class="title" title="${e.title}" target="${a}" rel="noopener noreferrer">
|
||||
${e.topped?'<span class="badge" style="display: inline-block">置顶</span>':""}${e.title}</a>
|
||||
<a class="abstract" href="${e.fullPath}" title="文章摘要" target="${a}" rel="noopener noreferrer">${e.summary}</a>
|
||||
<div class="meta">
|
||||
<ul class="items">
|
||||
<li>${Utils.formatDate(e.createTime)}</li>
|
||||
<li><i class="joe-font joe-icon-eye"></i>${e.visits||0}</li>
|
||||
<li><i class="joe-font joe-icon-message"></i>${e.commentCount||0}</li>
|
||||
<li><i class="joe-font joe-icon-dianzan"></i>${e.likes||0}</li>
|
||||
</ul>
|
||||
${e.categories.length>0?`<ul class="categories">${e.categories.reduce((e,t)=>{return e+=`<li class="pcate">
|
||||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z" fill="var(--minor)"></path><path d="M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z" fill="#ff6a18"></path></svg>
|
||||
<a class="link" target="${a}" rel="noopener noreferrer" href="${t.fullPath}">${t.name}</a>
|
||||
</li>`},"")}</ul>`:""}
|
||||
</div>
|
||||
</div>
|
||||
</li>`})(e,t))),e.isLast&&r.hide()),c.hide(),r.removeAttr("loading").html("查看更多"),i(t.length?t.length-1:0)}).catch(e=>{0===$(".joe_list__item").length&&(n.hide(),s.removeClass("hide")),c.hide(),r.removeAttr("loading").html("查看更多"),t(e)})}));l.on("click",function(e){var t;e.stopPropagation(),ThemeConfig.enable_index_list_ajax&&(e=$(this).attr("data-type"),t=i[e],d.sort.includes(t)||(d={page:0,size:a,sort:`topPriority,${t},desc`},(async e=>{n.html("").show(),s.addClass("hide"),r.removeAttr("loading").html("查看更多").show();var e=$(`.passage-list-tabs .item[data-type="${e}"]`),t=$(".passage-list-tabs .line");e.addClass("active").siblings().removeClass("active"),t.css({left:e.position().left,width:e.width()})})(e),h()))}),r.on("click",async function(e){e.stopPropagation(),$(this).attr("loading")||(e=n.find(".joe_list__item:last").offset().top,d.page++,await h(),await Utils.sleep(300),e=e-t,$("html,body").animate({scrollTop:e},500))}),h()},initListEffect(){ThemeConfig.enable_index_list_effect&&new WOW({boxClass:"wow",animateClass:ThemeConfig.index_list_effect_class||"fadeIn",offset:0,mobile:!0,live:!0,scrollContainer:null}).init()}},link=(!function(){const t=["getThumbnail","getDefaultThumbnail"];document.addEventListener("DOMContentLoaded",function(){Object.keys(homeContext).forEach(e=>!t.includes(e)&&homeContext[e]())})}(),document.getElementById("evan-big-banner_goto")),target=document.querySelector("#indexPosition");link.addEventListener("click",e=>{e.preventDefault();e=target.getBoundingClientRect().top+window.scrollY;window.scrollTo({top:e,behavior:"smooth"})});
|
||||
const homeContext={initSwiper(){var e;0!==$(".joe_index__banner .swiper-container").length&&(e={direction:"horizontal",loop:"true",effect:"slide",keyboard:!1,speed:"500",mousewheel:!1,grabCursor:"true",allowTouchMove:"true",autoplay:{delay:"3500",disableOnInteraction:!1},observer:!0,navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},pagination:{el:".swiper-pagination"}},new Swiper(".swiper-container",e))},loadMoreArticles(){$(document).ready(()=>{const n=$(".joe_load_container");n.on("click",".joe_load",async function(){var e=$(".joe_load");this.domNext=e.attr("data-next"),e.html("加载中...").attr("loading","true"),fetch(this.domNext,{method:"GET"}).then(e=>e.text()).then(e=>{e=(new DOMParser).parseFromString(e,"text/html");const t=document.querySelector(".joe_list");var o=e.querySelectorAll(".joe_list .joe_list__item"),o=(o&&0<o.length&&o.forEach(e=>{t.appendChild(e.cloneNode(!0))}),$(e).find(".joe_load")),e=("/"!==o.attr("data-next")?n.empty().append(o):n.remove(),t.querySelector(".joe_list__item:last-child").offsetTop),o=e-window.innerHeight;window.scrollTo({top:o,behavior:"smooth"})}).catch(e=>{console.error(e)}).finally(()=>{})})})},bigBannerGoto(){if(ThemeConfig.enable_big_banner){var e=document.getElementById("evan-big-banner_goto");const t=document.querySelector("#indexPosition");e.addEventListener("click",e=>{e.preventDefault();e=t.getBoundingClientRect().top+window.scrollY;window.scrollTo({top:e,behavior:"smooth"})})}},initListEffect(){ThemeConfig.enable_index_list_effect&&new WOW({boxClass:"wow",animateClass:ThemeConfig.index_list_effect_class||"fadeIn",offset:0,mobile:!0,live:!0,scrollContainer:null}).init()}};!function(){const t=["getThumbnail","getDefaultThumbnail"];document.addEventListener("DOMContentLoaded",function(){Object.keys(homeContext).forEach(e=>!t.includes(e)&&homeContext[e]())})}();
|
||||
|
|
@ -50,7 +50,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- pagination-->
|
||||
<th:block th:if="${!theme.config.home.enable_index_list_ajax}">
|
||||
<th:block th:replace="~{modules/common/pagination :: pagination}" />
|
||||
</th:block>
|
||||
<th:block th:if="${theme.config.home.enable_index_list_ajax}">
|
||||
<div class="joe_load_container"
|
||||
th:with="nextPage = ${posts.totalPages == posts.page?'':posts.nextUrl}">
|
||||
<div class="joe_load" th:data-next="@{${nextPage}}">查看更多 </div>
|
||||
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
<!-- aside-->
|
||||
<th:block th:if="${theme.config.aside.enable_aside}">
|
||||
|
|
|
|||
|
|
@ -127,5 +127,19 @@
|
|||
document.querySelector('#sortable').sortablejs()
|
||||
</script>
|
||||
</th:block>
|
||||
<script type="text/javascript" th:if="${theme.config.home.enable_auto_ajax} and ${theme.config.home.enable_index_list_ajax}">
|
||||
const ob = new IntersectionObserver(entries => {
|
||||
const domClick = document.querySelector('.joe_load')
|
||||
if (entries[0].isIntersecting){
|
||||
domClick.click()
|
||||
}
|
||||
|
||||
}, {
|
||||
threshold:1
|
||||
})
|
||||
const loading = document.querySelector('.joe_load_container')
|
||||
ob.observe(loading)
|
||||
|
||||
</script>
|
||||
</th:block>
|
||||
</html>
|
||||
Loading…
Reference in New Issue