优化标签，分类，首页 文章布局
This commit is contained in:
1152958806@qq.com
parent
b965de6cdf
commit
dec8cbfe0d
|
|
@ -85,6 +85,23 @@ var heo = {
|
|||
}
|
||||
},
|
||||
|
||||
categoriesBarActive: function() {
|
||||
document.querySelector("#category-bar") && $(".category-bar-item").removeClass("select");
|
||||
var e = window.location.pathname;
|
||||
if ("/" == (e = decodeURIComponent(e)))
|
||||
document.querySelector("#category-bar") && document.getElementById("category-bar-home").classList.add("select");
|
||||
else {
|
||||
if (/\/categories\/.*?/.test(e)) {
|
||||
var t = e.split("/")[2];
|
||||
if (document.querySelector("#category-bar")) {
|
||||
var o = document.getElementById(t);
|
||||
o && (o.classList.add("select"),
|
||||
o.style.order = "-1")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 页脚友链
|
||||
addFriendLinksInFooter: function () {
|
||||
var footerRandomFriendsBtn = document.getElementById("footer-random-friends-btn");
|
||||
|
|
@ -462,9 +479,15 @@ var heo = {
|
|||
$htmlDom.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
|
||||
},
|
||||
toPage: function() {
|
||||
var e, t = document.querySelectorAll(".page-number"), o = parseInt(t[t.length - 1].innerHTML), n = document.getElementById("toPageText"), a = parseInt(n.value);
|
||||
!isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= o && (e = 1 === a ? "/" : "/page/" + a,
|
||||
document.getElementById("toPageButton").href = e)
|
||||
var e = document.querySelectorAll(".page-number")
|
||||
, t = parseInt(e[e.length - 1].innerHTML)
|
||||
, 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
|
||||
}
|
||||
},
|
||||
changeSayHelloText: function() {
|
||||
const greetings = GLOBAL_CONFIG.helloText.length == 0 ? ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"] : GLOBAL_CONFIG.helloText
|
||||
|
|
|
|||
|
|
@ -590,6 +590,7 @@ function initBlog() {
|
|||
heo.initIndexEssay(),
|
||||
heo.reflashEssayWaterFall(),
|
||||
heo.darkModeStatus(),
|
||||
heo.categoriesBarActive(),
|
||||
heo.initThemeColor(),
|
||||
heo.topCategoriesBarScroll(),
|
||||
//隐藏加载动画
|
||||
|
|
|
|||
|
|
@ -1599,10 +1599,6 @@ blockquote footer cite::before {
|
|||
color: rgb(255, 87, 34);
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item {
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
|
|
@ -1630,14 +1626,6 @@ blockquote footer cite::before {
|
|||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item .left_radius {
|
||||
border-radius: 5px 0px 0px 8px;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item .right_radius {
|
||||
border-radius: 5px 0px 0px 8px;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item.ads-wrap {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
|
|
@ -1657,6 +1645,12 @@ blockquote footer cite::before {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
#recent-posts>.recent-post-item.col1.alternate .left_radius, #recent-posts>.recent-post-item.col1.alternate .right_radius {
|
||||
width:75%;
|
||||
display: flex;
|
||||
height: 220px
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item .post_cover img.post_bg:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
|
@ -8372,17 +8366,16 @@ a.categoryButton:hover {
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
#category-bar {
|
||||
border-radius: 0;
|
||||
border-radius:0;
|
||||
background: var(--heo-background);
|
||||
margin-bottom: 0rem;
|
||||
margin-bottom: 0;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
z-index: 1;
|
||||
padding: 0rem 1rem 0rem 16px;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
margin-top: 0;
|
||||
align-items: center;
|
||||
align-items: center
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -8400,6 +8393,7 @@ a.categoryButton:hover {
|
|||
display: flex;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 4px
|
||||
}
|
||||
|
||||
.category-in-bar-tips {
|
||||
|
|
@ -8409,7 +8403,11 @@ a.categoryButton:hover {
|
|||
.category-bar-items {
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.category-in-bar .category-in-bar-tips {
|
||||
|
|
@ -8427,14 +8425,17 @@ a.categoryButton:hover {
|
|||
|
||||
.category-bar-item a {
|
||||
padding: 0.1rem 0.5rem;
|
||||
margin: 0 4px;
|
||||
font-weight: bold;
|
||||
margin-right: 6px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.category-bar-item:hover a {
|
||||
background: var(--heo-theme);
|
||||
color: var(--heo-white);
|
||||
color: var(--heo-card-bg);
|
||||
}
|
||||
|
||||
.category-bar-item.select a {
|
||||
|
|
@ -8684,10 +8685,6 @@ li {
|
|||
|
||||
@media screen and (min-width: 1300px) {
|
||||
|
||||
#recent-posts .recent-post-item.pinned-post-item .recent-post-info-top {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.recent-post-item .recent-post-info .recent-post-info-top .article-title {
|
||||
font-size: 20px;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
@ -9086,26 +9083,10 @@ ins.adsbygoogle {
|
|||
box-shadow: var(--heo-shadow-main);
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item .right_radius {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
#recent-posts > .recent-post-item .right_radius {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#recent-posts .recent-post-item:hover {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border:var(--style-border-always);
|
||||
box-shadow: none
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -9114,20 +9095,15 @@ ins.adsbygoogle {
|
|||
|
||||
#recent-posts > .recent-post-item .right_radius,
|
||||
#recent-posts > .recent-post-item .left_radius {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 12px;
|
||||
width: 75%;
|
||||
width:75%;
|
||||
display: flex;
|
||||
height: 200px;
|
||||
height: 220px
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
|
||||
transform: scale(1.03);
|
||||
transition: 0.3s ease-in-out;
|
||||
filter: brightness(0.85);
|
||||
border-radius: 12px 0 0 12px;
|
||||
transition: .3s ease-in-out;
|
||||
filter: brightness(.85)
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
|
||||
|
|
@ -9138,8 +9114,9 @@ ins.adsbygoogle {
|
|||
min-width: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transition: 0.3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
min-height: 100%;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:hover > .recent-post-info {
|
||||
|
|
@ -9152,23 +9129,32 @@ ins.adsbygoogle {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
#recent-posts>.recent-post-item .left_radius,#recent-posts>.recent-post-item .right_radius {
|
||||
height:170px
|
||||
}
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
|
||||
transform: scale(1.03);
|
||||
transition: 0.3s ease-in-out;
|
||||
filter: brightness(0.85);
|
||||
border-radius: 12px 0 0 12px;
|
||||
transform: scale(1);
|
||||
transition: 0s ease-in-out;
|
||||
filter: brightness(1)
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
#recent-posts>.recent-post-item:hover .post_cover img.post_bg {
|
||||
transform:scale(1.03);
|
||||
transition: .3s ease-in-out;
|
||||
filter: brightness(.85)
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
|
||||
#recent-posts > .recent-post-item .right_radius,
|
||||
#recent-posts > .recent-post-item .left_radius {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width:100%;
|
||||
display: flex
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -9404,12 +9390,14 @@ span.recent-post-top-text {
|
|||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:not(:first-child) {
|
||||
margin-top: 0.5rem;
|
||||
#recent-posts > .recent-post-item {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 1rem;
|
||||
animation: slide-in .6s .4s backwards;
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
/* 图片在左侧 */
|
||||
|
|
@ -9437,40 +9425,45 @@ span.recent-post-top-text {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:not(:first-child) {
|
||||
/*width: calc(50% - 0.5rem);*/
|
||||
#recent-posts > .recent-post-item {
|
||||
width: calc(50% - 0.5rem);
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: var(--heo-shadow-border);
|
||||
clip-path: inset(0 0 0 0 round 12px);
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:not(:first-child):active {
|
||||
transform: scale(0.97);
|
||||
#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 1rem;
|
||||
animation: slide-in .6s .4s backwards;
|
||||
will-change: transform;
|
||||
width: calc(100% / 2 - .5rem);
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .75rem;
|
||||
box-shadow: var(--heo-shadow-border)
|
||||
}
|
||||
|
||||
/* 设置分列 */
|
||||
/* 1 列：左右排列 */
|
||||
#recent-posts > .recent-post-item.col1 {
|
||||
#recent-posts > .recent-post-item.col1,#category #recent-posts .recent-post-item.col1,#tag #recent-posts .recent-post-item.col1 {
|
||||
width: calc(100% - .5rem);
|
||||
|
||||
}
|
||||
|
||||
/* 2 列 */
|
||||
#recent-posts > .recent-post-item.col2 {
|
||||
#recent-posts > .recent-post-item.col2,#category #recent-posts .recent-post-item.col2,#tag #recent-posts .recent-post-item.col2 {
|
||||
width: calc(100% / 2 - .5rem);
|
||||
}
|
||||
|
||||
/* 3 列 */
|
||||
#recent-posts > .recent-post-item.col3 {
|
||||
#recent-posts > .recent-post-item.col3,#category #recent-posts .recent-post-item.col3,#tag #recent-posts .recent-post-item.col3 {
|
||||
width: calc(100% / 3 - .5rem);
|
||||
}
|
||||
|
||||
/* 4 列 */
|
||||
#recent-posts > .recent-post-item.col4 {
|
||||
width: calc(100% / 4 - .5rem);
|
||||
}
|
||||
|
||||
#category-bar {
|
||||
margin-bottom: .75rem;
|
||||
box-shadow: var(--heo-shadow-border);
|
||||
|
|
@ -9488,9 +9481,13 @@ span.recent-post-top-text {
|
|||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
-webkit-user-select: none
|
||||
}
|
||||
}
|
||||
|
||||
#recent-posts {
|
||||
position: relative
|
||||
}
|
||||
|
||||
/* 主页卡片手机端美化 */
|
||||
@media screen and (max-width: 768px) {
|
||||
|
|
@ -9498,15 +9495,23 @@ span.recent-post-top-text {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item:not(:first-child) {
|
||||
margin: 1.5rem 1rem;
|
||||
#recent-posts>.recent-post-item {
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 12px;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: .5rem;
|
||||
border: var(--style-border-always);
|
||||
box-shadow: var(--heo-shadow-border);
|
||||
display: block;
|
||||
position: relative;
|
||||
clip-path: inset(0 0 0 0 round 12px);
|
||||
clip-path: inset(0 0 0 0 round 12px)
|
||||
}
|
||||
|
||||
#recent-posts {
|
||||
padding: 0 1rem
|
||||
}
|
||||
|
||||
#category #recent-posts,#tag #recent-posts {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
#recent-posts .recent-post-item .post_cover {
|
||||
|
|
@ -9521,6 +9526,14 @@ span.recent-post-top-text {
|
|||
padding: 0.5rem 20px;
|
||||
}
|
||||
|
||||
a.article-meta__categories {
|
||||
left: 12px!important;
|
||||
top: 12px!important;
|
||||
border-radius: 4px!important;
|
||||
padding: 2px 9px!important;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
#bbTimeList {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
|
@ -9552,7 +9565,9 @@ span.recent-post-top-text {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
#rightside {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* 背景 */
|
||||
#web_bg {
|
||||
|
|
@ -9575,43 +9590,14 @@ span.recent-post-top-text {
|
|||
transform: scale(1);
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item > .recent-post-info > .article-title,
|
||||
#recent-posts > .recent-post-item > .recent-post-info > .content,
|
||||
#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
|
||||
padding: 0 20px !important;
|
||||
#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap,
|
||||
#recent-posts>.recent-post-item>.recent-post-info>.article-title,
|
||||
#recent-posts>.recent-post-item>.recent-post-info>.content {
|
||||
padding: 0 20px!important
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 主页文章封面左侧显示 */
|
||||
/* #recent-posts>.recent-post-item .right_radius{
|
||||
order: 0;
|
||||
border-radius: 8px 0 0 8px;
|
||||
} */
|
||||
|
||||
/* 主页文章卡片尺寸变化 */
|
||||
/* #recent-posts > div:nth-child(1){
|
||||
height: 22em;
|
||||
}
|
||||
#recent-posts > div:nth-child(1) > div.recent-post-info > div.content{
|
||||
height: 120px;
|
||||
margin-top: 20px!important;
|
||||
}
|
||||
#recent-posts > div:nth-child(4){
|
||||
height: 22em;
|
||||
}
|
||||
#recent-posts > div:nth-child(4) > div.recent-post-info > div.content{
|
||||
height: 120px;
|
||||
margin-top: 20px!important;
|
||||
}
|
||||
#recent-posts > div:nth-child(8){
|
||||
height: 22em;
|
||||
}
|
||||
#recent-posts > div:nth-child(8) > div.recent-post-info > div.content{
|
||||
height: 120px;
|
||||
margin-top: 20px!important;
|
||||
} */
|
||||
|
||||
/* 文章卡片标题 */
|
||||
#recent-posts > .recent-post-item > .recent-post-info > .article-title {
|
||||
line-height: 1.4;
|
||||
|
|
@ -9754,12 +9740,14 @@ span.recent-post-top-text {
|
|||
}
|
||||
|
||||
/* 文章标签置底 */
|
||||
|
||||
#recent-posts > .recent-post-item > .recent-post-info {
|
||||
height: 174px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
|
@ -9783,15 +9771,15 @@ span.recent-post-top-text {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
#recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap {
|
||||
#recent-posts > .recent-post-item.top:hover > .recent-post-info > .article-meta-wrap {
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap {
|
||||
bottom: 30px;
|
||||
#recent-posts > .recent-post-item.top.post-card-large:hover > .recent-post-info > .article-meta-wrap {
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
|
||||
#recent-posts > .recent-post-item.top > .recent-post-info > .article-meta-wrap {
|
||||
bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
||||
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title}, head = ~{::head})}" >
|
||||
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title}, head = ~{::head})}">
|
||||
<th:block th:fragment="head">
|
||||
<th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '分类',
|
||||
_permalink = ${category.status.permalink},
|
||||
|
|
@ -16,60 +16,101 @@
|
|||
</header>
|
||||
<main class="layout" id="content-inner">
|
||||
<div id="category">
|
||||
<div class="category-in-bar">
|
||||
<div class="category-in-bar-tips">分类</div>
|
||||
<div id="category-bar">
|
||||
<div class="category-bar-items" id="category-bar-items">
|
||||
<div class="category-bar-item" id="category-bar-home">
|
||||
<a href="/">首页</a>
|
||||
</div>
|
||||
<div class="category-bar-item"
|
||||
th:classappend="${category.metadata.name == categoryItem.metadata.name} ? ' select'"
|
||||
th:each="categoryItem : ${categoryFinder.listAll()}"
|
||||
th:id="${categoryItem.spec.displayName}">
|
||||
<a th:href="@{${categoryItem.status.permalink}}"
|
||||
th:text="${categoryItem.spec.displayName}"></a>
|
||||
<div id="category-bar">
|
||||
<div class="category-bar-items" id="category-bar-items">
|
||||
<div class="category-bar-item" id="category-bar-home">
|
||||
<a href="/">首页</a>
|
||||
</div>
|
||||
<div class="category-bar-item"
|
||||
th:classappend="${category.metadata.name == categoryItem.metadata.name} ? ' select'"
|
||||
th:each="categoryItem : ${categoryFinder.listAll()}"
|
||||
th:id="${categoryItem.spec.slug}">
|
||||
<a th:href="@{${categoryItem.status.permalink}}"
|
||||
th:text="${categoryItem.spec.displayName}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 跳转到分类页 -->
|
||||
<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>
|
||||
<!-- 跳转到分类页 -->
|
||||
<a class="category-bar-more" href="/categories">更多</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-sort-title" th:text="${category.spec.displayName}"></div>
|
||||
<div class="article-sort">
|
||||
<!-- TODO 按照年份分组 需要 halo 提供归档数据-->
|
||||
<!--<div class="article-sort-item year">2022</div>-->
|
||||
<div class="article-sort-item" th:each="post : ${posts.items}"
|
||||
th:with='postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
|
||||
<a class="article-sort-item-img" th:href="@{${post.status.permalink}}"
|
||||
th:title="${post.spec.title}">
|
||||
<img th:alt="${post.spec.title}"
|
||||
th:src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
|
||||
</a>
|
||||
<div class="article-sort-item-info">
|
||||
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
|
||||
<time class="post-meta-date-created"
|
||||
th:attr="datetime=${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}"
|
||||
th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
|
||||
th:title="'创建于' + ${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
|
||||
</time>
|
||||
</div>
|
||||
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
|
||||
th:href="@{${post.status.permalink}}" th:text="${post.spec.title}"
|
||||
th:title="${post.spec.title}"></a>
|
||||
<div class="article-sort-item-tags">
|
||||
<a class="article-meta__tags"
|
||||
th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}">
|
||||
<span class="tags-punctuation">[[${tag.spec.displayName}]]</span>
|
||||
</a>
|
||||
<span class="article-meta__link">•</span>
|
||||
|
||||
<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>
|
||||
<!-- 分页 -->
|
||||
<div th:replace="~{modules/widgets/page :: page(${'/categories/'+category.spec.slug},${posts},false)}"></div>
|
||||
</div>
|
||||
<!-- sidebar -->
|
||||
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
<div class="recent-post-item"
|
||||
th:classappend="${theme.config.layout.post.cols} + ' ' +
|
||||
${theme.config.layout.post.postLocation} + ' ' +
|
||||
(${iStat.even} ? 'even' : 'odd') +
|
||||
(${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"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
th:text="${category.spec.displayName}" th:title="${category.spec.displayName}"
|
||||
class="original"></span>
|
||||
</th:block>
|
||||
<!-- <span class="lastestpost">最新</span>-->
|
||||
<!-- <span class="lastestpost">最新</span>-->
|
||||
<a class="unvisited-post" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}"
|
||||
data-pjax-state="">未读</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- 页码按钮 -->
|
||||
<th:block th:if="${pageInfo.page > 3}">
|
||||
<a class="page-number" th:href="${paths}" th:text="1" onclick="scrollToPost()"></a>
|
||||
<a class="page-number" th:href="${paths}" th:text="1" onclick="scrollToPost()></a>
|
||||
<span class="space" th:if="${pageInfo.page != 4}">…</span>
|
||||
</th:block>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<div class="pagination_tips_next">下页</div>
|
||||
<i class="haofont hao-icon-chevron-right fa-fw"></i>
|
||||
</a>
|
||||
<div th:if="${pageInfo.totalPages > 1 && isIndex}" class="toPageGroup">
|
||||
<div th:if="${pageInfo.totalPages > 1}" class="toPageGroup">
|
||||
<input id="toPageText" maxlength="3" title="跳转到指定页面"
|
||||
oninput="value=value.replace(/[^0-9]/g,'')"
|
||||
onkeyup="if (this.value === '0') this.value = ''">
|
||||
|
|
@ -57,21 +57,21 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<script th:if="${theme.config.top.above.enable_above}">
|
||||
function scrollToPost() {
|
||||
if (document.querySelector(".pl-container")) {
|
||||
setTimeout(() => {
|
||||
btf.scrollToDest(window.innerHeight, 500);
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script th:unless="${theme.config.top.above.enable_above}">
|
||||
function scrollToPost() {
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
<script th:if="${theme.config.top.above.enable_above}">
|
||||
function scrollToPost(){
|
||||
setTimeout(()=>{
|
||||
btf.scrollToDest(window.innerHeight, 500);
|
||||
},1000)
|
||||
}
|
||||
</script>
|
||||
<script th:unless="${theme.config.top.above.enable_above}">
|
||||
function scrollToPost(){
|
||||
setTimeout(()=>{
|
||||
btf.scrollToDest(0, 500);
|
||||
},1000)
|
||||
}
|
||||
</script>
|
||||
</nav>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -26,38 +26,82 @@
|
|||
<span class="tagsPageCount" th:text="${tagItem.status.visiblePostCount}"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="article-sort-title" th:text="${tag.spec.displayName}"></div>
|
||||
<div class="article-sort" th:with="postItems=${posts.items}">
|
||||
<!--<div class="article-sort-item year">2022</div>-->
|
||||
<div class="article-sort-item" th:each="post : ${postItems}"
|
||||
th:with='postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg+"&" : theme.config.layout.postRandomImg+"?"}'>
|
||||
<a class="article-sort-item-img" th:href="@{${post.status.permalink}}"
|
||||
th:title="${post.spec.title}">
|
||||
<img loading="lazy" th:alt="${post.status.excerpt}"
|
||||
th:src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
|
||||
</a>
|
||||
<div class="article-sort-item-info">
|
||||
<div class="article-sort-item-time"><i class="far fa-calendar-alt"></i>
|
||||
<time th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
|
||||
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
|
||||
</time>
|
||||
</div>
|
||||
<a class="article-sort-item-title" onclick="window.event.cancelBubble=!0"
|
||||
th:href="@{${post.status.permalink}}"
|
||||
th:text="${post.spec.title}" th:title="${post.spec.title}">
|
||||
<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 class="article-sort-item-tags">
|
||||
<a class="article-meta__tags" event.cancelbubble onclick="window.event.cancelBubble=!0"
|
||||
th:each="tag : ${post.tags}" th:href="@{${tag.status.permalink}}">
|
||||
<span class="tags-punctuation">[[${tag.spec.displayName}]]</span>
|
||||
</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>
|
||||
<span class="article-meta__link">•</span>
|
||||
<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>
|
||||
<!-- 分页 -->
|
||||
<div th:replace="~{modules/widgets/page :: page(${'/tags/'+tag.spec.slug},${posts},false)}"></div>
|
||||
</div>
|
||||
<!-- sidebar -->
|
||||
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.tagWidgets})}"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue