2025 年 2 月 18 日 1篇

首页最新文章封面

原本Thyuu主题在首页的最新文章部分是没有封面的

HTML代码：

themes/thyuu-xingdu/templates/macro/index/new-post.html 修改该文件中的代码，在17行<time></time>和<h6></h6>之间插入下面的代码：

<div class="post-img" style="background-size: cover;height: 240px;">
    <a th:href="@{${post.status.permalink}}"><img th:unless="${#strings.isEmpty(post.spec.cover)}"
            th:src="${thumbnail.gen(post.spec.cover, 'm')}" alt="" loading="lazy"
            style="border-radius: var(--radius); object-fit: cover; width: 100%;   height: 100%; "
            th:data-caption="${post.spec.title}" class></a>
    <div th:if="${#strings.isEmpty(post.spec.cover)}" class="no-thumbnail"
        style="border-radius: var(--radius); object-fit: cover; width: 100%;   height: 100%; padding-bottom: 10px;">
    </div>
</div>

CSS样式修改

修改 themes/thyuu-xingdu/templates/assets/css/front.css 的代码：

修改的CSS：

.new-post {
	position: relative;
	z-index: 2;
	padding: var(--gap-divs);
	border-top: thin solid hsl(var(--hue) var(--satura) var(--light) / .5);
	border-radius: 50vw 50vw 0 0 / 5vw 5vw 0 0;
	background: radial-gradient(farthest-side at 50% 0, var(--s-bg, rgb(255 255 255 / .5)), #0000);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -2em 3em -4em rgb(0 0 0 / 5%);
	animation: var(--animation);
	animation-delay: .5s;
	padding-top: 50px
}

@media (max-width:1152px) {
	.new-post li {
		flex: 1 1 calc(50% - 10px);
		justify-content: space-between;
		padding: .5em;
		background: var(--s-bg, rgb(255 255 255 / .5));
		border: thin solid transparent;
		border-radius: var(--radius);
	}
}

新增加的CSS：

@media (max-width:1152px) {	
	.new-post li .summary {
		font-size: .8rem;
        line-height: 1.3rem;
	}

	.flex-ul {
	   position: relative;
	   display: flex;
	   flex-wrap: wrap;
	   gap: 0rem
    }

	.new-post {
	position: relative;
	z-index: 2;
	padding: 1rem;
	border-top: thin solid hsl(var(--hue) var(--satura) var(--light) / .5);
	border-radius: 50vw 50vw 0 0 / 5vw 5vw 0 0;
	background: radial-gradient(farthest-side at 50% 0, var(--s-bg, rgb(255 255 255 / .5)), #0000);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -2em 3em -4em rgb(0 0 0 / 5%);
	animation: var(--animation);
	animation-delay: .5s
	}
}

修改过后，请重启halo