Merge pull request #524 from chengzhongxue/main

图库页面添加分页,版本更新为1.4.1
This commit is contained in:
困困鱼 2023-10-18 23:02:22 +08:00 committed by GitHub
commit da3be226c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 183 additions and 180 deletions

View File

@ -509,8 +509,6 @@ spec:
value: col2
- label: 三列
value: col3
- label: 四列
value: col4
- $formkit: select
name: postLocation
label: 封面位置
@ -933,29 +931,56 @@ spec:
label: 左侧
value: [ ]
children:
- $formkit: text
- $formkit: radio
name: option_social_data
label: 类型
value: icon
help: "icon图标选择icon图标svg代码或者图片(如果使用图片请输入完整img标签)选择自定义"
options:
- value: icon
label: icon图标
- value: custom
label: 自定义
- $formkit: textarea
name: icon
help: "icon图标svg代码图片(如果使用图片请输入完整img标签)"
label: 图标
validation: "required"
- $formkit: text
name: name
label: 名称
validation: "required"
- $formkit: text
name: url
label: 链接
validation: "required"
- $formkit: repeater
name: socialMediaRight
label: 右侧
value: [ ]
children:
- $formkit: text
- $formkit: radio
name: option_social_data
label: 类型
value: icon
options:
- value: icon
label: icon图标
- value: custom
label: 自定义
- $formkit: textarea
name: icon
help: "icon图标或svg代码或者图片(如果使用图片请输入完整img标签)"
label: 图标
validation: "required"
- $formkit: text
name: name
label: 名称
validation: "required"
- $formkit: text
name: url
label: 链接
validation: "required"
- $formkit: menuRadio
name: menu
label: 相关链接

View File

@ -53,7 +53,7 @@
</div>
</div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page('/archives',${archives},false)}"></div>
<div th:replace="~{modules/widgets/page :: page('/archives',${archives},false,'')}"></div>
</div>
<!-- sidebar -->
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div>

View File

@ -11,14 +11,18 @@
}
.back-home-button {
.page .back-home-button {
color: rgba(255, 255, 255, 0.7);
}
#nav #site-name {
.page #nav #site-name span {
color: var(--light-grey);
}
.nav-fixed #nav #site-name span{
color: var(--heo-fontcolor);
}
#nav .site-page {
color: rgba(255, 255, 255, 0.7);
}

View File

@ -484,9 +484,23 @@ var heo = {
, o = document.getElementById("toPageText")
, n = parseInt(o.value);
if (!isNaN(n) && n > 0 && "0" !== ("" + n)[0] && n <= t) {
var a, l = window.location.href.replace(/\/page\/\d$/, "");
a = 1 === n ? l : l + (l.endsWith("/") ? "" : "/") + "page/" + n,
document.getElementById("toPageButton").href = a
var url = window.location.href;
var photosIndexOf = url.indexOf("?group") >= 0 ? url.indexOf("?group") : -1;
if (photosIndexOf >= 0) {//图库页面
var new_url = url.substr(0,photosIndexOf);
var group = url.substr(photosIndexOf)
var a, l = new_url.replace(/\/page\/\d$/, "");
a = 1 === n ? l : l + (l.endsWith("/") ? "" : "/") + "page/" + n,
document.getElementById("toPageButton").href = a + group
}else{
var a, l = url.replace(/\/page\/\d$/, "");
a = 1 === n ? l : l + (l.endsWith("/") ? "" : "/") + "page/" + n,
document.getElementById("toPageButton").href = a
}
//首页有第一屏就跳转指定位置
scrollToPost();
}
},
changeSayHelloText: function() {

View File

@ -5362,10 +5362,11 @@ html {
}
}
.nav-fixed #nav .back-home-button {
.nav-fixed #nav .back-home-button{
color: var(--heo-fontcolor);
}
.back-home-button:hover {
background: var(--heo-main);
color: var(--heo-white);
@ -6276,6 +6277,22 @@ a.deal_link:hover {
transform: scale(1.1)
}
a.custom_socials {
display: flex;
margin: 1rem 27px;
border-radius: 3rem;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
transition: 0.3s;
}
a.custom_socials:hover {
transform: scale(1.1)
}
img.footer_mini_logo {
width: 50px;
height: 50px;
@ -6440,8 +6457,8 @@ img.footer_mini_logo:hover {
}
#rightMenu .rightMenu-group .rightMenu-item:hover {
background-color: var(--heo-main);
color: var(--heo-white);
background-color: var(--heo-lighttext);
color: var(--heo-card-bg);
box-shadow: var(--heo-shadow-main);
}
@ -8818,6 +8835,7 @@ li {
}
.ai-btn-item:hover {
background: var(--heo-theme);
color: var(--heo-card-bg);
}
.ai-recommend {
display: -webkit-box;
@ -11482,7 +11500,7 @@ blockquote p {
/* 文章数字头 */
#article-container ol li:before,
#article-container ul li:before {
background: var(--heo-theme);
background: var(--heo-main);
cursor: default;
}

View File

@ -32,85 +32,8 @@
<!-- 跳转到分类页 -->
<a class="category-bar-more" href="/categories">更多</a>
</div>
<div class="recent-posts category_ui" id="recent-posts"
th:with='postItems=${posts.items},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
<!-- card需要添加在没有图片时使用随机图片 -->
<div class="recent-post-item" th:classappend="${theme.config.layout.post.cols} + ' ' +
${theme.config.layout.post.postLocation} + ' ' +
(${iStat.even} ? 'even' : 'odd') + ' ' +
(${post.spec.pinned} ? 'pinned-post-item' : '')"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'"
th:each="post,iStat : ${postItems}">
<div class="post_cover left_radius">
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
<img class="post_bg"
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}" th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? loadingImg : img}">
</a>
</div>
<div class="recent-post-info">
<div class="recent-post-info-top">
<div class="recent-post-info-top-tips">
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<span th:each="category : ${post.categories}"
th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}"
th:title="${category.spec.displayName}" class="original"></span>
</th:block>
<!-- <span class="lastestpost">最新</span>-->
<a class="unvisited-post" th:href="@{${post.status.permalink}}"
th:title="${post.spec.title}" data-pjax-state="">未读</a>
</div>
<a class="article-title" th:attr="title=${post.spec.title}"
th:href="@{${post.status.permalink}}" th:text="${post.spec.title}">
</a>
<div class="content" th:text="${post.status.excerpt}"></div>
</div>
<div class="article-meta-wrap">
<!-- tag -->
<th:block th:if="${not #lists.isEmpty(post.tags)}">
<span class="article-meta tags">
<a class="article-meta__tags" event.cancelbubble
onclick="window.event.cancelBubble=!0" th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}" th:title="${tag.spec.displayName}">
<span
class="tags-punctuation">[[${#strings.trim(tag.spec.displayName)}]]</span>
</a>
</span>
</th:block>
<!-- 创建时间 -->
<span class="post-meta-date"
th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<i class="far fa-calendar-alt"></i>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days > 30}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days <= 30 && days > 0}" th:text="${days}+天前"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days == 0}" th:text="最近"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
</span>
</div>
</div>
</div>
<!-- 分页 -->
<div
th:replace="~{modules/widgets/page :: page(${'/categories/'+category.spec.slug},${posts},false)}">
</div>
</div>
<!-- 文章 -->
<th:block th:replace="~{macro/post-list :: post-list(${'/categories/'+category.spec.slug})}" />
</div>
<!-- sidebar -->
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div>

View File

@ -77,6 +77,13 @@
width: 80% !important;
height: 80% !important;
}
.cf-article-author:hover {
color: var(--heo-card-bg)!important
}
#cf-more:hover{
background: var(--heo-lighttext)!important;
color: var(--heo-card-bg)!important
}
</style>
</div>

View File

@ -0,0 +1,72 @@
<th:block th:fragment="post-list(_path)">
<div class="recent-posts" id="recent-posts"
th:with='postItems=${posts.items},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
<!-- card需要添加在没有图片时使用随机图片 -->
<div class="recent-post-item" th:classappend="${theme.config.layout.post.cols} + ' ' +
${theme.config.layout.post.postLocation} + ' ' +
(${iStat.even} ? 'even' : 'odd') + ' ' +
(${post.spec.pinned} ? 'pinned-post-item' : '')"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'" th:each="post,iStat : ${postItems}">
<div class="post_cover left_radius">
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
<img class="post_bg"
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}" th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? loadingImg : img}">
</a>
</div>
<div class="recent-post-info">
<div class="recent-post-info-top">
<div class="recent-post-info-top-tips">
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<span th:each="category : ${post.categories}" th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}" th:title="${category.spec.displayName}"
class="original"></span>
</th:block>
<a class="unvisited-post" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}"
data-pjax-state="">未读</a>
</div>
<a class="article-title" th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}"
th:text="${post.spec.title}">
</a>
<div class="content" th:text="${post.status.excerpt}"></div>
</div>
<div class="article-meta-wrap">
<!-- tag -->
<th:block th:if="${not #lists.isEmpty(post.tags)}">
<span class="article-meta tags">
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}"
th:title="${tag.spec.displayName}">
<span class="tags-punctuation">[[${#strings.trim(tag.spec.displayName)}]]</span>
</a>
</span>
</th:block>
<!-- 创建时间 -->
<span class="post-meta-date"
th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<i class="far fa-calendar-alt"></i>
<time style="display: inline;" th:datetime="${post.spec.publishTime}" th:if="${days > 30}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days <= 30 && days > 0}" th:text="${days}+天前"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}" th:if="${days == 0}"
th:text="最近" th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
</span>
</div>
</div>
</div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page(${_path},${posts},false,'')}"></div>
</div>
</th:block>

View File

@ -12,19 +12,24 @@
<!-- 社交链接,需要填入 href class title -->
<div id="footer_deal">
<th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaLeft}">
<a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
<a th:class="${socialMedia.option_social_data == 'custom' ? 'custom_socials' : 'deal_link'}" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
th:href="${socialMedia.url}" th:title="${socialMedia.name}">
<i th:class="${socialMedia.icon}"></i>
<i th:if="${socialMedia.option_social_data == 'icon' || #strings.isEmpty(socialMedia.option_social_data)}"
th:class="${socialMedia.icon}"></i>
<th:block th:if="${socialMedia.option_social_data == 'custom'}" th:utext="${socialMedia.icon}"></th:block>
</a>
</th:block>
<img th:if="${not #strings.isEmpty(theme.config.footer.social_media.centerImg)}" class="footer_mini_logo"
th:with="img = @{${theme.config.footer.social_media.centerImg}}" th:src="${isLazyload ? '' : img}"
th:data-lazy-src="${ isLazyload ? img : ''}" title="返回顶部" onclick="btf.scrollToDest(0, 500)">
<th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaRight}">
<a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
<a th:class="${socialMedia.option_social_data == 'custom' ? 'custom_socials' : 'deal_link'}" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
th:href="${socialMedia.url}" th:title="${socialMedia.name}">
<i th:class="${socialMedia.icon}"></i>
<i th:if="${socialMedia.option_social_data == 'icon' || #strings.isEmpty(socialMedia.option_social_data)}"
th:class="${socialMedia.icon}"></i>
<th:block th:if="${socialMedia.option_social_data == 'custom'}" th:utext="${socialMedia.icon}"></th:block>
</a>
</th:block>
</div>

View File

@ -104,7 +104,7 @@
</div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page('',${posts},true)}"></div>
<div th:replace="~{modules/widgets/page :: page('',${posts},true,'')}"></div>
</th:block>

View File

@ -6,8 +6,9 @@
@param path '/path/page/n' 中的 `/path` 需要保留 `/`
@param pageInfo Halo类型UrlContextListResult<ListedPostVo>
@param isIndex 是否主页
@param _param 参数
-->
<nav id="pagination" th:fragment="page(path,pageInfo,isIndex)">
<nav id="pagination" th:fragment="page(path,pageInfo,isIndex,_param)">
<div class="pagination" th:with="paths = ${isIndex ? path+'/' : path}">
<!-- 页码按钮 -->
@ -20,7 +21,7 @@
<span class="page-number current" th:if="${pageInfo.page} == ${index}" th:text="${pageInfo.page}"></span>
<a class="page-number" th:unless="${pageInfo.page == index}"
th:if="${index > 0 && index <= pageInfo.totalPages}"
th:href="${#strings.equals(index, '1') ? paths : path+'/page/'+index}"
th:href="${#strings.equals(index, '1') ? paths + _param : path+'/page/'+index + _param}"
th:text="${index}"
onclick="scrollToPost()"></a>
</th:block>
@ -28,11 +29,10 @@
<th:block th:if="${pageInfo.totalPages - pageInfo.page > 2}">
<span class="space" th:if="${pageInfo.totalPages - pageInfo.page != 3}"></span>
<a class="page-number"
th:href="${path+'/page/'+pageInfo.totalPages}"
th:href="${path+'/page/'+pageInfo.totalPages+_param}"
th:text="${pageInfo.totalPages}"
onclick="scrollToPost()"></a>
</th:block>
<!-- 翻页按钮 -->
<a class="extend prev" rel="prev"
th:if="${pageInfo.hasPrevious}"
@ -53,7 +53,7 @@
<input id="toPageText" maxlength="3" title="跳转到指定页面"
oninput="value=value.replace(/[^0-9]/g,'')"
onkeyup="if (this.value === '0') this.value = ''">
<a id="toPageButton" onclick="heo.toPage();scrollToPost();"><i class="haofont hao-icon-angles-right"></i>
<a id="toPageButton" onclick="heo.toPage();"><i class="haofont hao-icon-angles-right"></i>
</a>
</div>

View File

@ -337,7 +337,7 @@
width: 100%;
z-index: 1;
background: var(--heo-main);
color: #fff;
color: var(--heo-card-bg);
margin: 0;
display: flex;
align-items: center;

View File

@ -77,6 +77,10 @@
</div>
</section>
</div>
<!-- 分页 -->
<th:block th:with="param_group = ${not #strings.isEmpty(param.group) ? '?group='+param.group : ''}">
<div th:replace="~{modules/widgets/page :: page('/photos',${photos},false,${param_group})}"></div>
</th:block>
</th:block>
<div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}">
@ -103,7 +107,12 @@
</div>
</section>
</div>
<!-- 分页 -->
<th:block th:with="param_group = ${not #strings.isEmpty(param.group) ? '?group='+param.group : ''}">
<div th:replace="~{modules/widgets/page :: page('/photos',${photos},false,${param_group})}"></div>
</th:block>
</div>
<style>
.gallery-groups {
box-shadow: var(--heo-shadow-border);

View File

@ -26,82 +26,8 @@
<span class="tagsPageCount" th:text="${tagItem.status.visiblePostCount}"></span>
</a>
</div>
<div class="recent-posts" id="recent-posts"
th:with='postItems=${posts.items},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
<!-- card需要添加在没有图片时使用随机图片 -->
<div class="recent-post-item" th:classappend="${theme.config.layout.post.cols} + ' ' +
${theme.config.layout.post.postLocation} + ' ' +
(${iStat.even} ? 'even' : 'odd') + ' ' +
(${post.spec.pinned} ? 'pinned-post-item' : '')"
th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'"
th:each="post,iStat : ${postItems}">
<div class="post_cover left_radius">
<a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
<img class="post_bg"
th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}'
th:alt="${post.spec.title}" th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? loadingImg : img}">
</a>
</div>
<div class="recent-post-info">
<div class="recent-post-info-top">
<div class="recent-post-info-top-tips">
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<span th:each="category : ${post.categories}"
th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}"
th:title="${category.spec.displayName}" class="original"></span>
</th:block>
<!-- <span class="lastestpost">最新</span>-->
<a class="unvisited-post" th:href="@{${post.status.permalink}}"
th:title="${post.spec.title}" data-pjax-state="">未读</a>
</div>
<a class="article-title" th:attr="title=${post.spec.title}"
th:href="@{${post.status.permalink}}" th:text="${post.spec.title}">
</a>
<div class="content" th:text="${post.status.excerpt}"></div>
</div>
<div class="article-meta-wrap">
<!-- tag -->
<th:block th:if="${not #lists.isEmpty(post.tags)}">
<span class="article-meta tags">
<a class="article-meta__tags" event.cancelbubble
onclick="window.event.cancelBubble=!0" th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}" th:title="${tag.spec.displayName}">
<span
class="tags-punctuation">[[${#strings.trim(tag.spec.displayName)}]]</span>
</a>
</span>
</th:block>
<!-- 创建时间 -->
<span class="post-meta-date"
th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<i class="far fa-calendar-alt"></i>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days > 30}"
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days <= 30 && days > 0}" th:text="${days}+天前"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
<time style="display: inline;" th:datetime="${post.spec.publishTime}"
th:if="${days == 0}" th:text="最近"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
</time>
</span>
</div>
</div>
</div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page(${'/tags/'+tag.spec.slug},${posts},false)}"></div>
</div>
<!-- 文章 -->
<th:block th:replace="~{macro/post-list :: post-list(${'/tags/'+tag.spec.slug})}" />
</div>
<!-- sidebar -->
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.tagWidgets})}"></div>