209 lines
9.0 KiB
HTML
209 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
|
th:replace="~{modules/layouts/layout :: layout(content = ~{::content},htmlType = 'photos',title = ${title + ' | ' + site.title})}">
|
|
|
|
<th:block th:fragment="content">
|
|
|
|
<div class="page" id="body-wrap">
|
|
<!-- 头部导航栏 -->
|
|
<header class="not-top-img" id="page-header">
|
|
<nav th:replace="~{modules/nav :: nav(title = ${title})}"></nav>
|
|
</header>
|
|
<main class="layout hide-aside" id="content-inner">
|
|
<div id="page">
|
|
<th:block th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}">
|
|
<th:block th:each="group : ${photoFinder.groupBy()}">
|
|
<th:block th:if="${#strings.equals(group.metadata.name, param.photo_group_name)}" th:with="description = ${#annotations.get(group, 'description')},
|
|
background = ${#annotations.get(group, 'background')}">
|
|
<th:div th:replace="~{macro/author-content :: author-content(background = ${background},
|
|
smallTitle = '相册集',
|
|
bigTitle = ${group.spec.displayName},
|
|
detail = ${description},
|
|
buttonUrl = '',
|
|
buttonTitle = '')}" />
|
|
</th:block>
|
|
</th:block>
|
|
<div id="article-container">
|
|
<section class="page-1 loadings">
|
|
<div class="type-gallery ">
|
|
<div class="gallery">
|
|
<div class="fj-gallery-item"
|
|
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
|
|
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
|
|
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
|
|
th:title="${photo.spec.description}">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</th:block>
|
|
|
|
<div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}">
|
|
<th:block th:each="group : ${photoFinder.groupBy()}">
|
|
<h1 style="margin: 8px 0px 20px" th:if="${#strings.equals(group.metadata.name, param.photo_group_name)}">
|
|
[[${group.spec.displayName}]]
|
|
</h1>
|
|
</th:block>
|
|
<div id="article-container">
|
|
<section class="page-1 loadings">
|
|
<div class="type-gallery ">
|
|
<div class="gallery">
|
|
<div class="fj-gallery-item"
|
|
th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
|
|
<div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
|
|
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
|
|
th:title="${photo.spec.description}">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.gallery-groups {
|
|
box-shadow: var(--heo-shadow-border);
|
|
padding: 1rem 2rem;
|
|
border-radius: 12px;
|
|
background: var(--heo-card-bg);
|
|
border: var(--style-border);
|
|
width: 100%;
|
|
align-self: flex-start;
|
|
animation: slide-in 0.6s 0.1s backwards;
|
|
}
|
|
|
|
#content-inner .loadings .type-gallery {
|
|
opacity: 0
|
|
}
|
|
|
|
.loadings {
|
|
height: 60px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
color: #504e4e;
|
|
border: none;
|
|
background-size: auto 100%;
|
|
box-shadow: none;
|
|
background-color: inherit;
|
|
background-image: none;
|
|
background-image: url(/themes/theme-hao/assets/images/load/rotating-ball-o.svg)
|
|
}
|
|
|
|
#article-container .type-gallery {
|
|
overflow: hidden;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
#content-inner .gallery {
|
|
margin: 0 0 16px;
|
|
text-align: center
|
|
}
|
|
|
|
#content-inner .gallery .fj-gallery {
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity=0)
|
|
}
|
|
|
|
#content-inner .gallery .fj-gallery .img-alt {
|
|
display: none
|
|
}
|
|
|
|
#content-inner .gallery .fj-gallery.lazyload+button {
|
|
display: inline-block
|
|
}
|
|
|
|
#content-inner .gallery .fj-gallery .gallery-data {
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity=0);
|
|
visibility: hidden
|
|
}
|
|
|
|
#content-inner .gallery button {
|
|
display: none;
|
|
margin-top: 25px;
|
|
padding: 10px;
|
|
width: 9em;
|
|
border-radius: 5px;
|
|
background: var(--btn-bg);
|
|
color: var(--btn-color);
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
-webkit-transition: all .3s;
|
|
-moz-transition: all .3s;
|
|
-o-transition: all .3s;
|
|
-ms-transition: all .3s;
|
|
transition: all .3s
|
|
}
|
|
|
|
#content-inner .gallery button>* {
|
|
-webkit-transition: all .4s;
|
|
-moz-transition: all .4s;
|
|
-o-transition: all .4s;
|
|
-ms-transition: all .4s;
|
|
transition: all .4s
|
|
}
|
|
|
|
#content-inner .gallery button i {
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
filter: none;
|
|
font-size: 1.1rem
|
|
}
|
|
|
|
#content-inner .gallery button:hover {
|
|
background: var(--btn-hover-color)
|
|
}
|
|
|
|
#content-inner .gallery button:hover i {
|
|
margin-left: 2px
|
|
}
|
|
|
|
#article-container .tag-address {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 8px;
|
|
padding: 4px 6px;
|
|
border-radius: 8px;
|
|
background: var(--heo-black-op);
|
|
font-size: 12px;
|
|
color: var(--heo-white);
|
|
transition: .3s;
|
|
z-index: 1;
|
|
user-select: none
|
|
}
|
|
|
|
img {
|
|
border-style: none;
|
|
border-radius: 8px;
|
|
max-width: 100%;
|
|
transition: all .2s ease 0s;
|
|
-webkit-user-drag: none;
|
|
-khtml-user-drag: none;
|
|
-moz-user-drag: none;
|
|
-ms-user-drag: none;
|
|
user-drag: none
|
|
}
|
|
</style>
|
|
<!--/* 评论组件 */-->
|
|
<th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
|
kind = 'SinglePage',
|
|
name = 'photos',
|
|
allowComment = true)}" />
|
|
</div>
|
|
|
|
</main>
|
|
<!-- 底部 -->
|
|
<footer th:replace="~{modules/footer :: footer}"></footer>
|
|
<!-- 卡片顶部气泡效果 -->
|
|
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
|
|
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
|
|
</div>
|
|
|
|
</th:block>
|
|
|
|
</html> |