mirror of
https://ghfast.top/https://github.com/zsjy/halo-theme-dream2.0-plus.git
synced 2025-03-15 20:09:41 +08:00
53 lines
4.1 KiB
HTML
53 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<th:block xmlns:th="https://www.thymeleaf.org"
|
||
th:insert="~{common/layout :: layout (title = ${title} + ' - ' + ${site.title}, canonical = @{/links}, content = ~{::content}, isPost = false)}"
|
||
th:with="isPhotos = true">
|
||
<th:block th:fragment="content">
|
||
<div class="card card-content photos">
|
||
<div class="card-tab"><div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div></div>
|
||
<div class="photos-teams">
|
||
<a th:class="${#strings.isEmpty(param.group)? 'item active' : 'item'}" th:href="@{/photos}">全部</a>
|
||
<a th:each="group : ${groups}" th:class="${#strings.equals(param.group, group.metadata.name)? 'item active' : 'item'}" th:href="@{/photos(group=${group.metadata.name})}" th:text="${group.spec.displayName}"></a>
|
||
</div>
|
||
</div>
|
||
<div class="photos-gallery load-block loading">
|
||
<div th:each="photo : ${photos.items}" th:href="${photo.spec.url}" data-fancybox="gallery" th:data-caption="${#strings.defaultString(photo.spec.description, photo.spec.displayName)}">
|
||
<img width="100%" height="100%" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}"/>
|
||
<div class="info">
|
||
<div>
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M834.9 913.6H189.7c-69.2 0-125.5-56.3-125.5-125.5V381.5c0-69.2 56.3-125.5 125.5-125.5h14.7c14.4 0 27.3-8.6 32.9-21.8l19.2-45.1c19.7-46.3 65-76.3 115.4-76.3h280.6c50.4 0 95.7 30 115.4 76.3l19.2 45c5.7 13.2 18.6 21.8 33 21.8h14.7c69.2 0 125.5 56.3 125.5 125.5V788c0.1 69.3-56.2 125.6-125.4 125.6z m-645.2-568c-19.8 0-35.8 16.1-35.8 35.8V788c0 19.8 16.1 35.8 35.8 35.8h645.2c19.8 0 35.8-16.1 35.8-35.8V381.5c0-19.8-16.1-35.8-35.8-35.8h-14.7c-50.4 0-95.7-30-115.4-76.3l-19.2-45c-5.6-13.2-18.6-21.8-33-21.8H372c-14.4 0-27.3 8.6-33 21.8l-19.2 45c-19.7 46.3-65 76.3-115.4 76.3h-14.7z"></path><path d="M512.3 742.8c-97.4 0-176.6-79.2-176.6-176.6s79.2-176.6 176.6-176.6 176.6 79.2 176.6 176.6-79.2 176.6-176.6 176.6z m0-263.6c-48 0-87 39-87 87s39 87 87 87 87-39 87-87-39-87-87-87z"></path></svg>
|
||
<p th:text="${photo.spec.displayName}"></p>
|
||
</div>
|
||
<div>
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512.7 959.8c-247 0-448-201-448-448s201-448 448-448 448 201 448 448-200.9 448-448 448z m0-806.4c-197.6 0-358.4 160.8-358.4 358.4s160.8 358.4 358.4 358.4 358.4-160.8 358.4-358.4-160.7-358.4-358.4-358.4z"></path><path d="M700 576.8H512.7c-24.6 0-44.6-19.9-44.8-44.5L466 254.5c-0.2-24.7 19.8-44.9 44.5-45.1h0.3c24.6 0 44.6 19.9 44.8 44.5l1.6 233.3H700c24.7 0 44.8 20.1 44.8 44.8 0 24.7-20.1 44.8-44.8 44.8z"></path></svg>
|
||
<p th:text="${#dates.format(photo.metadata.creationTimestamp,'yyyy-MM-dd')}"></p>
|
||
</div>
|
||
[[${photo.spec.description}]]
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<th:block th:replace="~{main/pagination :: pagination (${photos}, '/photos')}"/>
|
||
<script>
|
||
var timer = setInterval(() => {
|
||
if($.fn.justifiedGallery) {
|
||
$('.photos-gallery')
|
||
.justifiedGallery({
|
||
rowHeight: 200,
|
||
maxRowHeight: false,
|
||
maxRowsCount: 0,
|
||
sizeRangeSuffixes: {},
|
||
lastRow: 'nojustify',
|
||
captions: false,
|
||
waitThumbnailsLoad: true, //等待图片加载完，这样就可以根据图片比例展示，如果为false，则都是统一比例
|
||
margins: 10,
|
||
extension: /\.(jpe?g|png|gif|bmp|webp)$/,
|
||
cssAnimation: false,
|
||
})
|
||
$('.photos-gallery.loading').removeClass('loading')
|
||
clearInterval(timer);
|
||
}
|
||
}, 500);
|
||
</script>
|
||
</th:block>
|
||
</th:block>
|