主题魔改 - 文章卡片
本文为付费文章，在购买前，请先阅读
一、修改文章卡片布局
1. 修改首页文章卡片
修改 themes/theme-hao/templates/modules/post-list.html
<th:block
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}"
th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<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 : thumbnail.gen(post.spec.cover, "m")}'
th:alt="${post.spec.title}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? loadingImg : img}">
</a>
</div>
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<a th:each="category : ${post.categories}" th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}" th:title="${category.spec.displayName}"
th:attr="onclick='event.stopPropagation()'"
class="original"></a>
</th:block>
<div class="recent-post-info">
<div class="recent-post-info-top">
<div class="title-wrapper">
<a class="article-title"
th:attr="title=${post.spec.title}"
th:href="@{${post.status.permalink}}"
th:text="${post.spec.title}">
</a>
<span class="lastestpost" th:if="${days < 3 and not post.spec.pinned}">最新</span>
<span class="sticky-warp sticky" th:if="${post.spec.pinned}">置顶</span>
</div>
<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"
onclick="event.stopPropagation()"
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">
<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>
<!-- 文章卡片擦亮效果 -->
<style th:if="${theme.config.layout.articleCardPolish}">
#recent-posts > .recent-post-item:not(a)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background: linear-gradient(to right, transparent, white, transparent);
transform: translateX(-200%);
transition: transform 0.5s linear;
z-index: 1;
}
#recent-posts > .recent-post-item:not(a):hover::before {
transform: translateX(100%) skewX(-60deg);
}
</style>
</div>
<!-- 分页 -->
<div th:replace="~{modules/widgets/page :: page('',${posts},true,'')}"></div>
</th:block>
2. 修改分类及标签文章卡片
修改 themes/theme-hao/templates/macro/post-list.html
<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}"
th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
<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 : thumbnail.gen(post.spec.cover, "m")}'
th:alt="${post.spec.title}" th:data-lazy-src="${ isLazyload ? img : ''}"
th:src="${isLazyload ? loadingImg : img}">
</a>
</div>
<!-- 类别非空时 -->
<th:block th:if="${not #lists.isEmpty(post.categories)}">
<a th:each="category : ${post.categories}" th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}" th:title="${category.spec.displayName}"
th:attr="onclick='event.stopPropagation()'"
class="original"></a>
</th:block>
<div class="recent-post-info">
<div class="recent-post-info-top">
<div class="title-wrapper">
<a class="article-title"
th:attr="title=${post.spec.title}"
th:href="@{${post.status.permalink}}"
th:text="${post.spec.title}">
</a>
<span class="lastestpost" th:if="${days < 3 and not post.spec.pinned}">最新</span>
<span class="sticky-warp sticky" th:if="${post.spec.pinned}">置顶</span>
</div>
<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">
<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>二、代码注入（推荐）
主题样式代码的修改相对复杂，且容易出错，对于初学者而言，建议采用全局代码注入的方式，以简化操作过程。因此，第三节的内容可以直接略过，以避免不必要的困扰。
全局代码注入操作：控制台 -> 设置 -> 代码注入 -> 全局head注入
<style>
/* 文章类别 */
.recent-post-item .original {
position: absolute;
top: 20px;
left: 20px;
font-size: 12px;
color: var(--heo-white);
padding: 3px 8px;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 5px;
transition: 0.3s ease-in-out;
}
.recent-post-item .original:hover {
background: var(--heo-theme);
}
/* 文章封面 */
#recent-posts>.recent-post-item .left_radius,#recent-posts>.recent-post-item .right_radius {
width: calc(100% - 20px);
height: 200px;
margin: 10px;
border-radius: 9px;
}
/* 文章内容 */
#recent-posts > .recent-post-item > .recent-post-info {
padding: 10px 0 0;
}
@media screen and (max-width: 768px) {
#recent-posts .recent-post-item .recent-post-info {
height: 6.3rem;
padding: 0;
}
}
/* 文章标题 */
.recent-post-item .recent-post-info .recent-post-info-top .title-wrapper {
display: flex;
}
.recent-post-info-top .title-wrapper .article-title {
width: max-content;
max-width: calc(100% - 34px);
height: max-content;
font-size: 1rem;
font-weight: bold;
color: var(--heo-fontcolor);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-height: 1.4;
overflow: hidden;
transition: .3s;
}
.recent-post-info-top .title-wrapper .article-title {
-webkit-line-clamp: 1;
}
/* 置顶与最新 */
#recent-posts > .recent-post-item > .recent-post-info .sticky-warp {
width: max-content;
height: max-content;
margin-left: 4px;
align-items: flex-start;
font-size: .55rem;
}
.recent-post-item .recent-post-info .recent-post-info-top .lastestpost {
width: max-content;
height: max-content;
margin-left: 4px;
font-size: .55rem;
}
/* 文章摘要 */
.recent-post-item .recent-post-info .recent-post-info-top .content {
opacity: 1;
-webkit-line-clamp: 3;
}
/* 底部标签 */
@media screen and (min-width: 1300px) {
#recent-posts > .recent-post-item.top > .recent-post-info > .article-meta-wrap {
bottom: 20px;
}
#recent-posts > .recent-post-item.top:hover > .recent-post-info > .article-meta-wrap {
bottom: 20px;
}
}
</style>三、修改文章卡片样式 （进阶）
如果您对CSS以及本主题文件有深入了解，那么您可以尝试执行以下专业操作：
特别说明：①修改以下样式即代表全部替换为该样式；②修改此项仅代表修改其中几项。
修改 /themes/theme-hao/templates/assets/zhheo/zhheoblog.css
1. 文章类别
/* 删除以下样式 */
.recent-post-item .recent-post-info .recent-post-info-top .original {
display: flex;
color: var(--heo-secondtext);
font-size: .5rem;
position: relative;
margin-right: 8px
}
/* 并替换为如下 */
.recent-post-item .original {
position: absolute;
top: 20px;
left: 20px;
font-size: 12px;
color: var(--heo-white);
padding: 3px 8px;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 5px;
transition: 0.3s ease-in-out;
}
.recent-post-item .original:hover {
background: var(--heo-theme);
}2. 文章封面
/* 定位：文章卡片偏移样式 */
/* 新增以下样式 */
#recent-posts>.recent-post-item .left_radius,#recent-posts>.recent-post-item .right_radius {
width: calc(100% - 20px);
height: 200px;
margin: 10px;
border-radius: 9px;
}
/* 并在其下方 */
@media screen and (max-width: 1300px) {
/* 删除以下样式 */
#recent-posts>.recent-post-item .left_radius,#recent-posts>.recent-post-item .right_radius {
width:75%;
display: flex;
height: 220px
}
}
/* 删除以下样式 */
@media screen and (min-width: 1300px) {
#recent-posts>.recent-post-item .left_radius,#recent-posts>.recent-post-item .right_radius {
width:100%;
display: flex
}
}
@media screen and (max-width: 768px) {
/* 删除以下样式 */
#recent-posts .recent-post-item .post_cover {
border-radius: 0 !important;
width: 100%;
}
}3. 文章内容
/* 定位：文章卡片相关 */
/* 删除以下冗余数据 */
#recent-posts > .recent-post-item > .recent-post-info {
padding: 0;
}
/* 文章标签置底 */
#recent-posts > .recent-post-item > .recent-post-info {
/* 修改此项 */
padding: 10px 0 0;
}
@media screen and (max-width: 768px) {
/* 修改以下样式 */
#recent-posts .recent-post-item .recent-post-info {
height: 6.3rem;
padding: 0;
}
}4. 文章标题
/* 删除以下样式 */
.recent-post-item .recent-post-info .recent-post-info-top .article-title {
line-height: 30px;
margin-top: 0;
font-weight: bold;
color: var(--heo-fontcolor);
margin-bottom: 0;
width: 100%;
transition: .3s;
font-size: 1rem;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
/* 替换为以下样式*/
/* ----------------------------------------------- */
.recent-post-item .recent-post-info .recent-post-info-top .title-wrapper {
display: flex;
}
.recent-post-info-top .title-wrapper .article-title {
width: max-content;
max-width: calc(100% - 34px);
height: max-content;
font-size: 1rem;
font-weight: bold;
color: var(--heo-fontcolor);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-height: 1.4;
overflow: hidden;
transition: .3s;
}
/* ----------------------------------------------- */
/* 修改此项 */
/* .recent-post-top .recent-post-item .recent-post-info .article-title { */
.recent-post-info-top .title-wrapper .article-title {
-webkit-line-clamp: 1;
}
@media screen and (min-width: 1300px) {
/* 修改以下样式 */
/* .recent-post-item .recent-post-info .recent-post-info-top .article-title { */
.recent-post-info-top .title-wrapper .article-title {
font-size: 20px;
-webkit-line-clamp: 1;
}
/* .recent-post-item .recent-post-info .recent-post-info-top .article-title { */
.recent-post-info-top .title-wrapper .article-title {
-webkit-line-clamp: 1;
}
}5. 置顶与最新
/* 删除以下样式 */
#recent-posts>.recent-post-item>.recent-post-info .sticky-warp {
line-height: 23px;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: flex-start;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin-right: 8px
}
/* 修改以下样式 */
/* #recent-posts > .recent-post-item > .recent-post-info .sticky { */
.recent-post-info-top > .title-wrapper > .sticky {
width: max-content;
height: max-content;
margin-left: 4px;
color: #ff7242;
font-size: .55rem;
}
/* 修改以下样式 */
/* .recent-post-item .recent-post-info .recent-post-info-top .lastestpost { */
.recent-post-info-top > .title-wrapper > .lastestpost {
width: max-content;
height: max-content;
margin-left: 4px;
color: var(--heo-secondtext);
font-size: .55rem;
}6. 文章摘要
.recent-post-item .recent-post-info .recent-post-info-top .content {
/* 修改此项 */
opacity: 1;
-webkit-line-clamp: 3;
}7. 底部标签
@media screen and (min-width: 1300px) {
#recent-posts>.recent-post-item.top>.recent-post-info>.article-meta-wrap {
/* 修改此项 */
bottom: 20px;
}
#recent-posts>.recent-post-item.top:hover>.recent-post-info>.article-meta-wrap {
/* 修改此项 */
bottom: 20px;
}
}四、常见问题
执行完操作后，没有效果？
重建 Halo 应用，然后清理反向代理缓存；
清除浏览器缓存，推荐使用无痕浏览。
Hao主题版本不一致造成效果不一致，如何解决？
建议先确认是否为缓存造成的原因导致效果出不来；
实在不行则建议用备份还原改动的代码，然后借鉴博主的代码来做调整。
最后，感谢您对本站的关注和支持，希望该文章对您有所帮助！
更多关于 Hao 主题的深度定制和修改，您可以访问以下链接进行了解。
相关推荐
评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
