diff --git a/settings.yaml b/settings.yaml index c4e92c2..fbadf98 100644 --- a/settings.yaml +++ b/settings.yaml @@ -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: 开启文章缩略图 diff --git a/templates/assets/js/index.js b/templates/assets/js/index.js index 009d6dd..94751eb 100644 --- a/templates/assets/js/index.js +++ b/templates/assets/js/index.js @@ -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 `
  • +// ${ +// ThemeConfig.enable_post_thumbnail +// ? ` +// ${post.title} +// +// +// ` +// : "" +// } +//
    +// +// ${ +// post.topped +// ? "置顶" +// : "" +// }${post.title} +// ${ +// post.summary +// } +//
    +//
      +//
    • ${Utils.formatDate(post.createTime)}
      • +//
    • ${ +// post.visits || 0 +// }
      • +//
    • ${ +// post.commentCount || 0 +// }
      • +//
    • ${ +// post.likes || 0 +// }
      • +//
    +// ${ +// post.categories.length > 0 +// ? `
      ${post.categories.reduce( +// (sum, pcate) => { +// return (sum += `
    • +// +// ${pcate.name} +//
      • `); +// }, +// "" +// )}
    ` +// : "" +// } +//
    +//
    +//
    • `; +// }; +// +// // 切换文章类型 +// $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 `
  • - ${ - ThemeConfig.enable_post_thumbnail - ? ` - ${post.title} - - - ` - : "" -} -
    - - ${ - post.topped - ? "置顶" - : "" -}${post.title} - ${ - post.summary -} -
    -
      -
    • ${Utils.formatDate(post.createTime)}
      • -
    • ${ - post.visits || 0 -}
      • -
    • ${ - post.commentCount || 0 -}
      • -
    • ${ - post.likes || 0 -}
      • -
    - ${ - post.categories.length > 0 - ? `
      ${post.categories.reduce( - (sum, pcate) => { - return (sum += `
    • - - ${pcate.name} -
      • `); - }, - "" - )}
    ` - : "" -} -
    -
    -
    • `; - }; - - // 切换文章类型 - $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' - }); -}); \ No newline at end of file diff --git a/templates/assets/js/min/index.min.js b/templates/assets/js/min/index.min.js index 4839099..cab42d1 100644 --- a/templates/assets/js/min/index.min.js +++ b/templates/assets/js/min/index.min.js @@ -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`
  • - ${ThemeConfig.enable_post_thumbnail?` - ${e.title} - - - `:""} -
    - - ${e.topped?'置顶':""}${e.title} - ${e.summary} -
    -
      -
    • ${Utils.formatDate(e.createTime)}
      • -
    • ${e.visits||0}
      • -
    • ${e.commentCount||0}
      • -
    • ${e.likes||0}
      • -
    - ${e.categories.length>0?`
      ${e.categories.reduce((e,t)=>{return e+=`
    • - - ${t.name} -
      • `},"")}
    `:""} -
    -
    -
    • `})(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"})}); \ No newline at end of file +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{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]())})}(); \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 2775ebb..23e627f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,7 +50,16 @@ + + + +
    +
    查看更多
    + +
    +     diff --git a/templates/modules/macro/tail.html b/templates/modules/macro/tail.html index 8f2c798..445afad 100644 --- a/templates/modules/macro/tail.html +++ b/templates/modules/macro/tail.html @@ -127,5 +127,19 @@ document.querySelector('#sortable').sortablejs() +     \ No newline at end of file