新增相册集页面模板，适配图库插件
This commit is contained in:
roozen
parent
8fc4c3a4d2
commit
d5a464adf2
|
|
@ -1220,6 +1220,56 @@ spec:
|
||||||
- label: 关闭
|
- label: 关闭
|
||||||
value: false
|
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
|
- group: todo
|
||||||
label: 待办清单
|
label: 待办清单
|
||||||
formSchema:
|
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':
|
case 'music':
|
||||||
title = '音乐馆'
|
title = '音乐馆'
|
||||||
break;
|
break;
|
||||||
|
case 'photos':
|
||||||
|
title = '图库'
|
||||||
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
if (title != '')
|
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: 我的装备页面
|
description: 我的装备页面
|
||||||
screenshot:
|
screenshot:
|
||||||
file: equipment.html
|
file: equipment.html
|
||||||
|
- name: 相册页面模版
|
||||||
|
description: 相册页面
|
||||||
|
screenshot:
|
||||||
|
file: album.html
|
||||||
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
||||||
logo: https://liuzhihang.com/upload/logo.jpg
|
logo: https://liuzhihang.com/upload/logo.jpg
|
||||||
website: https://liuzhihang.com
|
website: https://liuzhihang.com
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue