feat(photos): 适配photos

This commit is contained in:
nineya 2023-08-28 15:54:12 +08:00
parent 9410df4033
commit 1368fd6ffb
4 changed files with 50 additions and 3 deletions

File diff suppressed because one or more lines are too long

View File

@ -35,7 +35,7 @@ th:with="description=${isPost ? post != null ? post.status.excerpt : singlePage
</th:block> </th:block>
<link rel="stylesheet" th:href="@{/assets/css/mew-custom.min.css(mew=${theme.spec.version})}"> <link rel="stylesheet" th:href="@{/assets/css/mew-custom.min.css(mew=${theme.spec.version})}">
<link th:if="${isPost}" data-pjax rel="stylesheet" th:href="@{/assets/lib/fancybox@5.3.7/jquery.fancybox.min.css}"> <link th:if="${isPost == true || isPhotos == true}" data-pjax rel="stylesheet" th:href="@{/assets/lib/fancybox@5.3.7/jquery.fancybox.min.css}">
<link rel="stylesheet" th:href="@{/assets/lib/qmsg/qmsg.min.css}"> <link rel="stylesheet" th:href="@{/assets/lib/qmsg/qmsg.min.css}">
<link th:if="${theme.config.enhance.cursor_style != 'none'}" rel="stylesheet" th:href="@{'/assets/css/cursor/' + ${theme.config.enhance.cursor_style} + '.min.css'(mew=${theme.spec.version})}"> <link th:if="${theme.config.enhance.cursor_style != 'none'}" rel="stylesheet" th:href="@{'/assets/css/cursor/' + ${theme.config.enhance.cursor_style} + '.min.css'(mew=${theme.spec.version})}">

View File

@ -13,6 +13,7 @@
<script th:if="${isPost}" data-pjax th:src="@{/assets/js/post.min.js(mew=${theme.spec.version})}"></script> <script th:if="${isPost}" data-pjax th:src="@{/assets/js/post.min.js(mew=${theme.spec.version})}"></script>
<script th:if="${isJournals}" data-pjax th:src="@{/assets/js/journals.min.js(mew=${theme.spec.version})}"></script> <script th:if="${isJournals}" data-pjax th:src="@{/assets/js/journals.min.js(mew=${theme.spec.version})}"></script>
</th:block> </th:block>
<script th:if="${isPhotos}" data-pjax th:src="@{/assets/lib/justifiedGallery@3.8.1/jquery.justifiedGallery.min.js}"></script>
<th:block th:if="${isPost || enableComment != null}"> <th:block th:if="${isPost || enableComment != null}">
<script th:if="${pluginFinder.available('PluginCommentWidget') && (post != null || singlePage != null || enableComment != null)}" data-pjax src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script> <script th:if="${pluginFinder.available('PluginCommentWidget') && (post != null || singlePage != null || enableComment != null)}" data-pjax src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script>
</th:block> </th:block>
@ -26,7 +27,7 @@
</th:block> </th:block>
<script async th:src="@{/assets/lib/qmsg/qmsg.min.js}"></script> <script async th:src="@{/assets/lib/qmsg/qmsg.min.js}"></script>
<script th:if="${isPost}" data-pjax async th:src="@{/assets/lib/fancybox@5.3.7/jquery.fancybox.min.js}"></script> <script th:if="${isPost == true || isPhotos == true}" data-pjax async th:src="@{/assets/lib/fancybox@5.3.7/jquery.fancybox.min.js}"></script>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

46
templates/photos.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<th:block xmlns:th="https://www.thymeleaf.org"
th:insert="~{common/layout :: layout (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>我的相册</div></div>
<div class="photos-teams">
<a th:class="${#strings.isEmpty(param.group)? 'item active' : 'item'}" 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">
<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')}"/>
</th:block>
</th:block>
<script>
$('.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,
})
</script>