图库增加样式

settings.yaml

@@ -1507,25 +1507,42 @@ spec:
     - group: photos
       label: 图库
       formSchema:
+        - $formkit: select
+          name: photosStyle
+          id: photosStyle
+          key: photosStyle
+          label: 样式
+          value: default
+          options:
+            - value: default
+              label: 默认
+            - value: one
+              label: 样式一
         - $formkit: attachment
+          if: $get(photosStyle).value == 'default'
           name: backgroundImg
           label: 背景图
           value: https://liuzhihang.com/upload/moments.png
-          placeholder: 请输入图片地址
         - $formkit: text
+          if: $get(photosStyle).value == 'default'
           name: smallTitle
+          key: smallTitle
           label: 小标题
           value: 相册集
         - $formkit: text
           name: bigTitle
+          key: bigTitle
           label: 大标题
           value: 这里是我的相册集哦😯
         - $formkit: text
+          if: $get(photosStyle).value == 'default'
           name: detail
           label: 描述
           value: 每一张照片都是一次美好的记忆。
 
 
+
+
     - group: todo
       label: 待办清单
       formSchema:

templates/album.html

@@ -12,19 +12,18 @@
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
-                <div id="album">
+                <div id="album" th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}">
-                    <th:div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.photos.backgroundImg},
+                    <div th:replace="~{macro/author-content :: author-content(background = ${theme.config.photos.backgroundImg},
                         smallTitle = ${theme.config.photos.smallTitle},
                         bigTitle = ${theme.config.photos.bigTitle},
                         detail = ${theme.config.photos.detail},
                         buttonUrl = '',
-                        buttonTitle = '')}" />
+                        buttonTitle = '')}"></div>
 
                     <div class="card-album">
                         <th:block th:each="group : ${photoFinder.groupBy()}">
                             <div class="card" th:onclick="go([[${group.metadata.name}]])">
-                                <img  class="card_cover entered loaded"
+                                <img class="card_cover entered loaded" th:src="${#annotations.get(group, 'cover')}">
-                                      th:src="${#annotations.get(group, 'cover')}">
                                 <div class="card__content">
                                     <p class="card__category" th:text="${group.spec.displayName}"></p>
                                     <h3 class="card__heading" th:text="${#annotations.get(group, 'description')}"></h3>
@@ -36,12 +35,38 @@
                         </th:block>
                     </div>
                 </div>
+                <div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}">
+                    <h2 style="text-align:center;">[[${theme.config.photos.bigTitle}]]</h2>
+                    <div class="gallery-group-main">
+                        <th:block th:each="group : ${photoFinder.groupBy()}">
+                            <figure class="gallery-group"><img class="gallery-group-img no-lightbox"
+                                                               th:src="${#annotations.get(group, 'cover')}" alt="Group Image Gallery">
+                                <figcaption>
+                                    <div class="gallery-group-name">[[${group.spec.displayName}]]</div>
+                                    <p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank"
+                                                                                           rel="noopener" th:onclick="go([[${group.metadata.name}]])"></a>
+                                </figcaption>
+                            </figure>
+                        </th:block>
+                    </div>
+                </div>
                 <script>
-                    const go = (photo_group_name)=>{
+                    const go = (photo_group_name) => {
-                        window.location.href='/photos?photo_group_name='+photo_group_name
+                        window.location.href = '/photos?photo_group_name=' + photo_group_name
                     }
                 </script>
                 <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;
+                    }
+
                     :root {
                         --album-background-dark: #2d3548;
                         --album-text-light: rgba(255, 255, 255, 0.6);

templates/assets/zhheo/zhheoblog.css

@@ -313,22 +313,6 @@ template {
     white-space: nowrap;
 }
 
-/*#aside-content .aside-list > .aside-list-item .content > .comment,*/
-/*#aside-content .aside-list > .aside-list-item .content > .name,*/
-/*#aside-content .aside-list > .aside-list-item .content > .title,*/
-/*#error-wrap .error-content .error-info .error_subtitle,*/
-/*#post-info .post-title,*/
-/*#recent-posts > .recent-post-item > .recent-post-info > .article-title,*/
-/*#recent-posts > .recent-post-item > .recent-post-info > .content,*/
-/*.article-sort-item-title,*/
-/*.limit-more-line,*/
-/*.relatedPosts > .relatedPosts-list .content .title,*/
-/*figure.gallery-group .gallery-group-name,*/
-/*figure.gallery-group p {*/
-/*    display: -webkit-box;*/
-/*    overflow: hidden;*/
-/*    -webkit-box-orient: vertical;*/
-/*}*/
 
 #article-container h1::before,
 #article-container h2::before,
@@ -1068,119 +1052,6 @@ blockquote footer cite::before {
     padding: 0px 0.3em;
     content: "—";
 }
-
-/*#article-container code,*/
-/*#article-container pre {*/
-/*    font-size: var(--global-font-size);*/
-/*    font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important;*/
-/*}*/
-
-/*#article-container code {*/
-/*    padding: 0.1rem 0.2rem;*/
-/*    background: rgba(27, 31, 35, 0.05);*/
-/*    color: rgb(244, 116, 102);*/
-/*}*/
-
-/*#article-container pre {*/
-/*    padding: 10px 20px;*/
-/*}*/
-
-/*#article-container pre code {*/
-/*    padding: 0px;*/
-/*    background: 0px 0px;*/
-/*    color: var(--hl-color);*/
-/*    text-shadow: none;*/
-/*}*/
-
-/*#article-container figure.highlight {*/
-/*    position: relative;*/
-/*}*/
-
-/*#article-container figure.highlight pre {*/
-/*    margin: 0px;*/
-/*    padding: 8px 0px;*/
-/*    border: none;*/
-/*}*/
-
-/*#article-container figure.highlight .caption,*/
-/*#article-container figure.highlight figcaption {*/
-/*    padding: 0.3rem 0px 0.1rem 0.7rem;*/
-/*    font-size: var(--global-font-size);*/
-/*    line-height: 1em;*/
-/*}*/
-
-/*#article-container figure.highlight .caption a,*/
-/*#article-container figure.highlight figcaption a {*/
-/*    float: right;*/
-/*    padding-right: 10px;*/
-/*    color: var(--hl-color);*/
-/*}*/
-
-/*#article-container figure.highlight .caption a:hover,*/
-/*#article-container figure.highlight figcaption a:hover {*/
-/*    border-bottom-color: var(--hl-color);*/
-/*}*/
-
-/*#article-container .highlight-tools {*/
-/*    position: relative;*/
-/*    display: flex;*/
-/*    -webkit-box-align: center;*/
-/*    align-items: center;*/
-/*    overflow: hidden;*/
-/*    min-height: 1.2rem;*/
-/*    height: 2.15em;*/
-/*    background: var(--hltools-bg);*/
-/*    color: var(--hltools-color);*/
-/*    font-size: var(--global-font-size);*/
-/*}*/
-
-/*#article-container .highlight-tools.closed + table {*/
-/*    display: none;*/
-/*}*/
-
-/*#article-container .highlight-tools .expand {*/
-/*    position: absolute;*/
-/*    padding: 0.4rem 0.7rem;*/
-/*    cursor: pointer;*/
-/*    transition: transform 0.3s ease 0s;*/
-/*}*/
-
-/*#article-container .highlight-tools .expand + .code-lang {*/
-/*    left: 1.7rem;*/
-/*}*/
-
-/*#article-container .highlight-tools .expand.closed {*/
-/*    transition: all 0.3s ease 0s;*/
-/*    transform: rotate(-90deg) !important;*/
-/*}*/
-
-/*#article-container .highlight-tools .code-lang {*/
-/*    position: absolute;*/
-/*    left: 0.7rem;*/
-/*    text-transform: uppercase;*/
-/*    font-weight: 700;*/
-/*    font-size: 1.15em;*/
-/*    user-select: none;*/
-/*}*/
-
-/*#article-container .highlight-tools .copy-notice {*/
-/*    position: absolute;*/
-/*    right: 1.7rem;*/
-/*    opacity: 0;*/
-/*    transition: opacity 0.4s ease 0s;*/
-/*}*/
-
-/*#article-container .highlight-tools .copy-button {*/
-/*    position: absolute;*/
-/*    right: 0.7rem;*/
-/*    cursor: pointer;*/
-/*    transition: color 0.2s ease 0s;*/
-/*}*/
-
-/*#article-container .highlight-tools .copy-button:hover {*/
-/*    color: rgb(48, 122, 246);*/
-/*}*/
-
 #article-container .gutter {
     user-select: none;
 }
@@ -1192,40 +1063,6 @@ blockquote footer cite::before {
 #article-container .gist table td {
     border: none;
 }
-
-/* 代码块增加边框 */
-#article-container pre {
-    /*border: var(--style-border-always);*/
-}
-
-
-/*#article-container .code-expand-btn {*/
-/*    position: absolute;*/
-/*    bottom: 0px;*/
-/*    z-index: 10;*/
-/*    width: 100%;*/
-/*    background: var(--hlexpand-bg);*/
-/*    text-align: center;*/
-/*    font-size: var(--global-font-size);*/
-/*    cursor: pointer;*/
-/*}*/
-
-/*#article-container .code-expand-btn i {*/
-/*    padding: 0.3rem 0px;*/
-/*    color: var(--hlnumber-color);*/
-/*    animation: 1.2s ease 0s infinite normal none running code-expand-key;*/
-/*}*/
-
-/*#article-container .code-expand-btn.expand-done {*/
-/*    display: none !important;*/
-/*}*/
-
-/*#article-container .code-expand-btn:not(.expand-done) ~ pre,*/
-/*#article-container .code-expand-btn:not(.expand-done) ~ table {*/
-/*    overflow: hidden;*/
-/*    height: 400px;*/
-/*}*/
-
 @-webkit-keyframes code-expand-key {
     0% {
         opacity: 0.6;
@@ -4265,108 +4102,165 @@ mjx-container[jax="CHTML"][display="true"] {
     background: rgb(92, 184, 92);
 }
 
+.gallery-group {
+    width: calc(33.33% - 8px) !important;
+}
+
 figure.gallery-group {
     position: relative;
     float: left;
     overflow: hidden;
-    margin: 0.3rem 0.2rem;
+    margin: 6px 4px;
-    width: calc(50% - 0.4rem);
+    width: calc(50% - 8px);
     height: 250px;
-    border-radius: 5px;
+    border-radius: 8px;
-    background: rgb(0, 0, 0);
+    background: #000;
-    transform: translate3d(0px, 0px, 0px);
+    -webkit-transform: translate3d(0, 0, 0)
 }
 
 @media screen and (max-width: 600px) {
     figure.gallery-group {
-        width: calc(100% - 0.4rem);
+        width: calc(100% - 8px)
     }
 }
 
 figure.gallery-group:hover img {
-    opacity: 0.4;
+    opacity: .4;
-    transform: translate3d(0px, 0px, 0px);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
 }
 
 figure.gallery-group:hover .gallery-group-name::after {
-    transform: translate3d(0px, 0px, 0px);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
+}
+
+figure.gallery-group p {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
 }
 
 figure.gallery-group:hover p {
     opacity: 1;
+    -ms-filter: none;
     filter: none;
-    transform: translate3d(0px, 0px, 0px);
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
 }
 
 figure.gallery-group img {
     position: relative;
+    margin: 0;
     max-width: none;
     width: calc(100% + 20px);
     height: 250px;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
     backface-visibility: hidden;
-    opacity: 0.8;
+    opacity: .8;
-    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
+    -webkit-transition: all .3s, filter 375ms ease-in .2s;
-    transform: translate3d(-10px, 0px, 0px);
+    -moz-transition: all .3s, filter 375ms ease-in .2s;
-    object-fit: cover;
+    -o-transition: all .3s, filter 375ms ease-in .2s;
-    margin: 0px !important;
+    -ms-transition: all .3s, filter 375ms ease-in .2s;
+    transition: all .3s, filter 375ms ease-in .2s;
+    -webkit-transform: translate3d(-10px, 0, 0);
+    -moz-transform: translate3d(-10px, 0, 0);
+    -o-transform: translate3d(-10px, 0, 0);
+    -ms-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+    object-fit: cover
 }
 
 figure.gallery-group figcaption {
     position: absolute;
-    top: 0px;
+    top: 0;
-    left: 0px;
+    left: 0;
-    padding: 1.5rem;
+    padding: 30px;
     width: 100%;
     height: 100%;
-    color: rgb(255, 255, 255);
+    color: #fff;
     text-transform: uppercase;
-    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden
 }
 
-figure.gallery-group figcaption > a {
+figure.gallery-group figcaption>a {
     position: absolute;
-    inset: 0px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 1000;
-    opacity: 0;
+    opacity: 0
 }
-
 figure.gallery-group p {
-    margin: 0px;
+    margin: 0;
-    padding: 0.4rem 0px 0px;
+    padding: 8px 0 0;
     letter-spacing: 1px;
     font-size: 1.1em;
     line-height: 1.5;
     opacity: 0;
-    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
+    -webkit-transition: opacity .35s, -webkit-transform .35s;
-    transform: translate3d(100%, 0px, 0px);
+    -moz-transition: opacity .35s, -moz-transform .35s;
-    -webkit-line-clamp: 4;
+    -o-transition: opacity .35s, -o-transform .35s;
+    -ms-transition: opacity .35s, -ms-transform .35s;
+    transition: opacity .35s, transform .35s;
+    -webkit-transform: translate3d(100%, 0, 0);
+    -moz-transform: translate3d(100%, 0, 0);
+    -o-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    -webkit-line-clamp: 4
 }
 
 figure.gallery-group .gallery-group-name {
     position: relative;
-    margin: 0px;
+    margin: 0;
-    padding: 0.4rem 0px;
+    padding: 8px 0;
     font-weight: 700;
     font-size: 1.65em;
     line-height: 1.5;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 2
 }
 
-figure.gallery-group .gallery-group-name::after {
+figure.gallery-group .gallery-group-name:after {
     position: absolute;
-    bottom: 0px;
+    bottom: 0;
-    left: 0px;
+    left: 0;
     width: 100%;
-    height: 2px;
+    /* height: 2px; */
-    background: rgb(255, 255, 255);
+    background: #fff;
-    content: "";
+    content: '';
-    transition: transform 0.35s ease 0s;
+    -webkit-transition: -webkit-transform .35s;
-    transform: translate3d(-100%, 0px, 0px);
+    -moz-transition: -moz-transform .35s;
+    -o-transition: -o-transform .35s;
+    -ms-transition: -ms-transform .35s;
+    transition: transform .35s;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -moz-transform: translate3d(-100%, 0, 0);
+    -o-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0)
 }
 
+
+
 .gallery-group-main {
     overflow: auto;
-    padding: 0px 0px 0.8rem;
+    padding: 0 0 16px
 }
 
 .justified-gallery {
@@ -14274,9 +14168,6 @@ figure.gallery-group:hover .gallery-group-name::after {
     }
 }
 
-.gallery-group figcaption p {
-    line-height: 1.5 !important;
-}
 
 /* 超级博主友链 */
 

templates/equipment.html

@@ -12,12 +12,12 @@
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
-                <th:div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.equipment.backgroundImg},
+                <div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.equipment.backgroundImg},
                         smallTitle = ${theme.config.equipment.smallTitle},
                         bigTitle = ${theme.config.equipment.bigTitle},
                         detail = ${theme.config.equipment.detail},
                         buttonUrl = '',
-                        buttonTitle = '')}" />
+                        buttonTitle = '')}" ></div>
                 <div id="equipment" th:if="${not #lists.isEmpty(theme.config.equipment.category_list)}"
                      th:with="categoryList = ${theme.config.equipment.category_list}">
                     <th:block th:each="category : ${categoryList}">

templates/fcircle.html

@@ -12,12 +12,12 @@
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
-                <th:div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.fcircle.backgroundImg},
+                <div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.fcircle.backgroundImg},
                 smallTitle = ${theme.config.fcircle.smallTitle},
                 bigTitle = ${theme.config.fcircle.bigTitle},
                 detail = ${theme.config.fcircle.detail},
                 buttonUrl = ${theme.config.fcircle.buttonUrl},
-                buttonTitle = ${theme.config.fcircle.buttonTitle})}" />
+                buttonTitle = ${theme.config.fcircle.buttonTitle})}" ></div>
                 <!--钓鱼-->
                 <th:block th:if="${theme.config.fcircle.fcircleRandomFriendsEnable}" >
                     <div  class="title-h2-a">

templates/moments.html

@@ -12,12 +12,12 @@
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
-                <th:div th:replace="~{macro/author-content :: author-content(background = ${theme.config.moment.backgroundImg},
+                <div th:replace="~{macro/author-content :: author-content(background = ${theme.config.moment.backgroundImg},
                         smallTitle = ${theme.config.moment.smallTitle},
                         bigTitle = ${theme.config.moment.bigTitle},
                         detail = ${theme.config.moment.detail},
                         buttonUrl = ${theme.config.moment.buttonUrl},
-                        buttonTitle = ${theme.config.moment.buttonTitle})}" />
+                        buttonTitle = ${theme.config.moment.buttonTitle})}" ></div>
                 <div id="bber">
                     <section class="timeline page-1">
                         <ul class="list" id="waterfall">

templates/photos.html

@@ -11,11 +11,9 @@
         </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')},
-
-                    <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 = '相册集',
@@ -24,9 +22,7 @@
                         buttonUrl = '',
                         buttonTitle = '')}" />
                         </th:block>
-
                     </th:block>
-
                     <div id="article-container">
                         <section class="timeline page-1 loadings">
                             <div class="type-gallery ">
@@ -42,7 +38,41 @@
                             </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="timeline 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 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

templates/todolist.html

@@ -12,12 +12,12 @@
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
-                <th:div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.todo.backgroundImg},
+                <div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.todo.backgroundImg},
                         smallTitle = ${theme.config.todo.smallTitle},
                         bigTitle = ${theme.config.todo.bigTitle},
                         detail = ${theme.config.todo.detail},
                         buttonUrl = '',
-                        buttonTitle = '')}" />
+                        buttonTitle = '')}" ></div>
                 <div id="todolist-main" th:if="${not #lists.isEmpty(theme.config.todo.list)}"
                      th:with="todoList = ${theme.config.todo.list}">