新增相册集页面模板，适配图库插件
This commit is contained in:
roozen
parent
8fc4c3a4d2
commit
d5a464adf2
|
|
@ -1220,6 +1220,56 @@ spec:
|
|||
- label: 关闭
|
||||
value: false
|
||||
|
||||
- group: photos
|
||||
label: 图库
|
||||
formSchema:
|
||||
- $formkit: attachment
|
||||
name: backgroundImg
|
||||
validation: url
|
||||
label: 图片
|
||||
value: https://liuzhihang.com/upload/moments.png
|
||||
placeholder: 请输入图片地址
|
||||
- $formkit: text
|
||||
name: smallTitle
|
||||
label: 小标题
|
||||
value: 相册集
|
||||
- $formkit: text
|
||||
name: bigTitle
|
||||
label: 大标题
|
||||
value: 这里是我的相册集哦😯
|
||||
- $formkit: text
|
||||
name: detail
|
||||
label: 描述
|
||||
value: 每一张照片都是一次美好的记忆。
|
||||
- $formkit: repeater
|
||||
name: list
|
||||
label: 相册集
|
||||
value:
|
||||
- group_name: 既是日常，也是奇迹
|
||||
group_description: 记录生活小美好。
|
||||
url: https://bu.dusays.com/2023/04/09/64329399d1175.jpg
|
||||
- group_name: 清晨&夕阳&美景
|
||||
group_description: 因为到不了世界各地，所以请网友们发来了各地的夕阳与风景🌇。
|
||||
url: https://bu.dusays.com/2023/04/09/64329399d1175.jpg
|
||||
- group_name: 精选壁纸
|
||||
group_description: 不一定精，但是我选了
|
||||
url: https://bu.dusays.com/2023/04/09/64329399d1175.jpg
|
||||
children:
|
||||
- $formkit: text
|
||||
name: group_name
|
||||
label: 图库分组名称
|
||||
placeholder: 请输入图库分组名称
|
||||
help: 必须与图库插件里的分组名一致
|
||||
- $formkit: text
|
||||
name: group_description
|
||||
label: 图库分组描述
|
||||
placeholder: 请输入图库分组描述
|
||||
- $formkit: attachment
|
||||
name: url
|
||||
label: 图库分组展示图
|
||||
placeholder: 请输入图库分组展示图
|
||||
|
||||
|
||||
- group: todo
|
||||
label: 待办清单
|
||||
formSchema:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page')}"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<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 = null)}"></nav>
|
||||
</header>
|
||||
<main class="layout hide-aside" id="content-inner">
|
||||
<div id="page">
|
||||
<div id="album">
|
||||
<div class="author-content author-content-item essayPage single"
|
||||
th:style="'background:url('+${theme.config.photos.backgroundImg}+') left 28% / cover no-repeat !important;'">
|
||||
<div class="card-content">
|
||||
<div class="author-content-item-tips" th:text="${theme.config.photos.smallTitle}"></div>
|
||||
<span class="author-content-item-title" th:text="${theme.config.photos.bigTitle}"></span>
|
||||
<div class="content-bottom">
|
||||
<div class="tips" th:text="${theme.config.photos.detail}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-album">
|
||||
<th:block th:each="photos : ${theme.config.photos.list}">
|
||||
<div class="card" th:onclick="go([[${photos.group_name}]])">
|
||||
<img class="card_cover entered loaded"
|
||||
th:src="${photos.url}">
|
||||
<div class="card__content">
|
||||
<p class="card__category" th:text="${photos.group_name}"></p>
|
||||
<h3 class="card__heading" th:text="${photos.group_description}"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
<th:block th:each="photos : ${theme.config.photos.list}">
|
||||
<div class="album-content-nocover"></div>
|
||||
</th:block>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const go = (photo_group_name)=>{
|
||||
window.location.href='/photos?photo_group_name='+photo_group_name
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--album-background-dark: #2d3548;
|
||||
--album-text-light: rgba(255, 255, 255, 0.6);
|
||||
--album-text-lighter: rgba(255, 255, 255, 0.9);
|
||||
--album-spacing-s: 8px;
|
||||
--album-spacing-m: 16px;
|
||||
--album-spacing-l: 24px;
|
||||
--album-spacing-xl: 32px;
|
||||
--album-spacing-xxl: 64px
|
||||
}
|
||||
|
||||
#album .card-album {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: var(--album-spacing-xxl) 0 0
|
||||
}
|
||||
|
||||
#album .card-album .album-content-nocover {
|
||||
width: calc(100% / 4 - 40px)
|
||||
}
|
||||
|
||||
#album .card-album .card {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: calc(100% / 4 - 10px);
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
#album .card-album .card:hover {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#album .card_cover {
|
||||
border-radius: var(--album-spacing-l);
|
||||
filter: brightness(.75) saturate(1.2) contrast(.85);
|
||||
transform-origin: center;
|
||||
transform: scale(1) translateZ(0);
|
||||
transition: filter .2s linear, transform .2s linear;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
height: 550px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--album-spacing-l)
|
||||
}
|
||||
|
||||
#album .card:hover .card_cover {
|
||||
transform: scale(1.05) translateZ(0);
|
||||
filter: brightness(.9) saturate(1.2) contrast(1)
|
||||
}
|
||||
|
||||
#album .card-album:hover>.card:not(:hover) .card_cover {
|
||||
filter: brightness(.5) saturate(.9) contrast(1.2) blur(20px)
|
||||
}
|
||||
|
||||
#album .card__content {
|
||||
left: 0;
|
||||
padding: var(--album-spacing-l);
|
||||
position: absolute;
|
||||
top: 0
|
||||
}
|
||||
|
||||
#album .card__category {
|
||||
color: var(--album-text-light);
|
||||
font-size: .9rem;
|
||||
margin-bottom: var(--album-spacing-s);
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
#album .card__heading {
|
||||
color: var(--album-text-lighter);
|
||||
font-size: 1.9rem;
|
||||
text-shadow: 2px 2px 20px rgba(0, 0, 0, .2);
|
||||
line-height: 1.4;
|
||||
word-spacing: 100vw
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#album img.card_cover {
|
||||
height: 600px
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
#album .card-album .card {
|
||||
width: calc(100% / 2 - 40px)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
#album .card-album .card {
|
||||
width: calc(100%)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--/* 评论组件 */-->
|
||||
<th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
||||
kind = 'SinglePage',
|
||||
name = ${singlePage.metadata.name},
|
||||
allowComment = ${singlePage.spec.allowComment})}" />
|
||||
</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>
|
||||
|
|
@ -280,6 +280,9 @@
|
|||
case 'music':
|
||||
title = '音乐馆'
|
||||
break;
|
||||
case 'photos':
|
||||
title = '图库'
|
||||
break;
|
||||
|
||||
}
|
||||
if (title != '')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'photos')}"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<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 = null)}"></nav>
|
||||
</header>
|
||||
<main class="layout hide-aside" id="content-inner">
|
||||
<div id="page">
|
||||
<div class="author-content author-content-item essayPage single"
|
||||
th:style="'background:url('+${theme.config.equipment.backgroundImg}+') left 28% / cover no-repeat !important;'">
|
||||
<div class="card-content">
|
||||
<div class="author-content-item-tips" th:text="${theme.config.equipment.smallTitle}"></div>
|
||||
<span class="author-content-item-title" th:text="${theme.config.equipment.bigTitle}"></span>
|
||||
<div class="content-bottom">
|
||||
<div class="tips" th:text="${theme.config.equipment.detail}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="photos">
|
||||
<section class="timeline page-1">
|
||||
<th:block th:each="group : ${groups}">
|
||||
<ul class="list" id="waterfall"
|
||||
th:if="${#strings.toString(group.spec.displayName)}==${#strings.toString(param.photo_group_name)}">
|
||||
<li class="item" th:each="photo : ${group.photos}">
|
||||
<img th:src="${photo.spec.url}">
|
||||
<span class="photo-title" th:text="${photo.spec.displayName}"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</th:block>
|
||||
</section>
|
||||
</div>
|
||||
<script>heo.reflashEssayWaterFall();</script>
|
||||
<style>
|
||||
#photos {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#photos .timeline #waterfall.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#photos .timeline #waterfall {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#photos ul.list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#photos .timeline ul li.item {
|
||||
position: relative;
|
||||
width: 24.35%;
|
||||
margin: 4px;
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#photos .timeline ul li:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#photos .timeline ul li.item img {
|
||||
width: 100%;
|
||||
animation: fadeIn 1s;
|
||||
}
|
||||
|
||||
|
||||
span.photo-title {
|
||||
bottom: 4px;
|
||||
border-radius: 0 8px 0 8px;
|
||||
}
|
||||
|
||||
span.photo-title {
|
||||
max-width: calc(100% - 7px);
|
||||
line-height: 1.8;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
padding: 0 8px;
|
||||
color: #fff;
|
||||
animation: fadeIn 1s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--/* 评论组件 */-->
|
||||
<!--/* 评论组件 */-->
|
||||
<th:block
|
||||
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
||||
kind = 'SinglePage',
|
||||
name = 'moments',
|
||||
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>
|
||||
|
|
@ -41,6 +41,10 @@ spec:
|
|||
description: 我的装备页面
|
||||
screenshot:
|
||||
file: equipment.html
|
||||
- name: 相册页面模版
|
||||
description: 相册页面
|
||||
screenshot:
|
||||
file: album.html
|
||||
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
||||
logo: https://liuzhihang.com/upload/logo.jpg
|
||||
website: https://liuzhihang.com
|
||||
|
|
|
|||
Loading…
Reference in New Issue