anian
99 lines
5.5 KiB
HTML
99 lines
5.5 KiB
HTML
<th:block th:if="${not #lists.isEmpty(content.medium)}">
|
|
|
|
<div class="img_list">
|
|
<div class="list_inner" th:num="${content.medium.size}">
|
|
<th:block th:each="momentItem : ${content.medium}">
|
|
|
|
<th:block th:with="isStrictVideo=${momentItem.type.name == 'VIDEO'},
|
|
isVideoExt=${#strings.endsWith(#strings.toLowerCase(momentItem.url), '.mp4')
|
|
|| #strings.endsWith(#strings.toLowerCase(momentItem.url), '.webm')
|
|
|| #strings.endsWith(#strings.toLowerCase(momentItem.url), '.ogv')}">
|
|
|
|
<div class="pix_bili_player" th:if="${isStrictVideo && momentItem.originType == 'video/bili'}">
|
|
<iframe th:src="|//player.bilibili.com/player.html?bvid=${momentItem.url}&autoplay=0&page=1|"
|
|
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
|
|
</div>
|
|
|
|
<!-- 非 Bilibili 视频：使用 Fancybox 灯箱 -->
|
|
<span th:if="${(isStrictVideo || isVideoExt) && momentItem.originType != 'video/bili'}"
|
|
class="fancybox mo_img" th:href="${momentItem.url}"
|
|
th:data-fancybox="${'post-images-' + moment.metadata.name}" th:data-type="video">
|
|
<video th:src="${momentItem.url}" class="pix_video"
|
|
style="width:100%; border-radius:8px;"></video>
|
|
<div
|
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
|
|
<i class="ri-play-circle-line"
|
|
style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
|
|
</div>
|
|
</span>
|
|
|
|
<span th:if="${momentItem.type.name == 'PHOTO' && !isVideoExt}" class="fancybox mo_img"
|
|
th:href="${momentItem.url}" th:data-fancybox="${'post-images-' + moment.metadata.name}">
|
|
<img class="lazy" th:src="@{/assets/img/logo.webp}" th:data-src="${momentItem.url}">
|
|
</span>
|
|
|
|
</th:block>
|
|
|
|
</th:block>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="audio_list" th:if="${#strings.contains(content.medium,'AUDIO')}">
|
|
<div class="list_inner">
|
|
<th:block th:each="momentItem : ${content.medium}">
|
|
<div class="pix_player loacl_audio" th:if="${momentItem.type.name == 'AUDIO' &&
|
|
(momentItem.originType != 'audio/netease' && momentItem.originType != 'audio/tencent' &&
|
|
momentItem.originType != 'audio/kugou' && momentItem.originType != 'audio/kuwo')}">
|
|
<audio th:src="${momentItem.url}" controls></audio>
|
|
</div>
|
|
<div class="pix_player qt" th:if="${momentItem.type.name == 'AUDIO' &&
|
|
(momentItem.originType == 'audio/netease' || momentItem.originType == 'audio/tencent' ||
|
|
momentItem.originType == 'audio/kugou' || momentItem.originType == 'audio/kuwo')}"
|
|
th:id="${momentItem.url}" th:type="${momentItem.originType}">
|
|
</div>
|
|
</th:block>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card_list" th:if="${#strings.contains(content.medium,'POST')}">
|
|
<div class="list_inner">
|
|
<th:block th:each="momentItem : ${content.medium}">
|
|
<th:block th:if="${momentItem.type.name == 'POST'}">
|
|
<div class="moment_card_item loop_card_item" th:pid="${momentItem.url}"
|
|
th:type="${momentItem.originType}">
|
|
<th:block th:if="${momentItem.originType == 'post'}">
|
|
<a th:with="post = ${postFinder.getByName(momentItem.url)}"
|
|
th:href="@{${post.status.permalink}}">
|
|
<div class="left"><img th:src="${post.spec.cover}"></div>
|
|
<div class="right">
|
|
<h4 th:text="${post.spec.title}"></h4>
|
|
<div class="content">
|
|
<th:block th:if="${!post.spec.excerpt.autoGenerate}"
|
|
th:text="${post.spec.excerpt.raw}" />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</th:block>
|
|
<th:block th:if="${momentItem.originType == 'page'}">
|
|
<a th:with="page = ${singlePageFinder.getByName(momentItem.url)}"
|
|
th:href="@{${page.status.permalink}}" target="_blank">
|
|
<div class="left"><img th:src="${page.spec.cover}"></div>
|
|
<div class="right">
|
|
<h4 th:text="${page.spec.title}"></h4>
|
|
<div class="content">
|
|
<th:block th:if="${!page.spec.excerpt.autoGenerate}"
|
|
th:text="${page.spec.excerpt.raw}" />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</th:block>
|
|
|
|
</div>
|
|
</th:block>
|
|
|
|
</th:block>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</th:block> |