封面图加载中
不爱思考
更换主题后一直没有装备页面，在参考又见梅林的装备页面样式和星度的相册页面后进行了改写。
分类参考星度相册展示形式
颜色适配黑暗模式
增加分页
样式微调，减弱查看详情按钮重要性
前置插件
https://github.com/springai/halo-plugin-device
模板代码
将代码复制到星度主题的/templates/devices.html中即可。
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layout :: layout(_title = ${title},menu_site_title = ${'正在阅读：'+title},_content = ~{::content},
_head = ~{::head},page_js = null,body_class = 'page-template page-template-gallery page wide-page')}">
<th:block th:fragment="head">
<th:block th:replace="~{modules/page-css}" />
<style>
/* 设备卡片样式 */
.device-card {
padding: 20px;
background: var(--mask-color,var(--w-bg));
border-radius: var(--custom-radius);
box-shadow: var(--box-shadow);
transition: transform 0.3s ease;
}
.device-card:hover {
transform: translateY(-5px);
}
.device-image {
width: 100%;
height: calc(var(--card-size)*0.5);
object-fit: contain;
border-radius: var(--custom-radius);
}
.device-title {
margin: 10px 0 5px;
font-size: 1rem;
}
.device-subtitle {
margin: 0 0 10px;
font-size: 0.8rem;
color: hsl(var(--font-color) / .8);
}
.device-review {
margin: 15px 0;
font-size: 0.85rem;
height: 5rem;
}
.device-button {
text-align: center;
background: hsl(var(--main-color) / .5);
color: #fff;
padding: 5px 10px;
border-radius: 10px;
text-decoration: none;
font-size: 15px;
transition: opacity 0.3s;
}
.device-button:hover {
background: hsl(var(--main-color) / .8);
}
</style>
</th:block>
<th:block th:fragment="content">
<main id="main" class="site-main" role="main">
<header class="page-header">
<th:block th:with="groupspec=${#strings.isEmpty(param.group)? null : deviceFinder.groupBy(param.group).spec}">
<h1 class="page-title fade-before">
<span th:text="${#strings.isEmpty(param.group)} ? ${title} : ${groupspec.displayName}"></span>
</h1>
<div class="taxonomy-des fade-before">
<p th:text="${#strings.isEmpty(param.group)} ? '' : ${groupspec.description}"></p>
</div>
</th:block>
<nav class="taxonomy-nav fade-before">
<ul class="taxonomy-sub no-scrollbar">
<li class="cat-item" th:classappend="${#strings.isEmpty(param.group) ? 'current-cat' : ''}">
<a th:href="@{/devices}">全部</a>
</li>
<th:block th:each="group : ${deviceFinder.groupBy()}">
<li class="cat-item" th:classappend="${#strings.equals(param.group, group.metadata.name) ? 'current-cat' : ''}">
<a th:href="@{|/devices?group=${group.metadata.name}|}"
th:text="${group.spec.displayName}"></a>
</li>
</th:block>
</ul>
</nav>
</header>
<article class="page-article gallery">
<th:block th:each="device : ${devices.items}">
<div class="device-card">
<img th:src="${device.spec.cover}" th:alt="${device.spec.displayName}" data-fancybox="gallery" class="device-image">
<h3 class="device-title" th:text="${device.spec.displayName}"></h3>
<p class="device-subtitle" th:text="${device.spec.label}"></p>
<div class="device-review">
<p class="device-review-text" th:text="${device.spec.description}"></p>
</div>
<a th:href="${device.spec.url}" target="_blank" class="device-button">查看详情</a>
</div>
</th:block>
</article>
<th:block th:with="param_group = ${not #strings.isEmpty(param.group) ? '?group='+param.group : ''},path = '/devices'">
<nav th:if="${devices.totalPages > 1}" class="navigation page-navigation" role="navigation">
<a class="prev page-numbers" th:if="${devices.hasPrevious}" th:href="@{${devices.prevUrl}}">
<button class="button prev has-thyuu-color has-btn-effect">
<span class="btn-meta">上一页</span>
</button>
</a>
<th:block th:if="${devices.page > 2}">
<a class="page-numbers" th:href="${path+'/page/1'+param_group}">1</a>
<span class="page-numbers dots" th:if="${devices.page != 3}">…</span>
</th:block>
<th:block th:each="index:${#numbers.sequence(devices.page-1,devices.page+1)}">
<span aria-current="page" class="page-numbers current" th:if="${devices.page} == ${index}"
th:text="${devices.page}"></span>
<a th:unless="${devices.page == index}" th:if="${index > 0 && index <= devices.totalPages}"
class="page-numbers" th:href="${path+'/page/'+index+param_group}" th:text="${index}"></a>
</th:block>
<th:block th:if="${devices.totalPages - devices.page >= 2}">
<span class="page-numbers dots" th:if="${devices.totalPages - devices.page != 2}">…</span>
<a class="page-numbers" th:href="${path+'/page/'+devices.totalPages+param_group}"
th:text="${devices.totalPages}"></a>
</th:block>
<a class="next page-numbers" th:if="${devices.hasNext}" th:href="@{${devices.nextUrl}}">
<button class="button next has-thyuu-color has-btn-effect">
<span class="btn-meta">下一页</span>
</button>
</a>
</nav>
</th:block>
<th:block th:if="${haloCommentEnabled}">
<th:block th:replace="~{modules/widgets/comment :: comment(post_name='plugin-device-comment',kind='DeviceComment',group='core.erzip.com')}"></th:block>
</th:block>
</main>
</th:block>
</html>