feat(blog): 首次提交

2024-08-21 16:31:38 +08:00
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{modules/layout :: html(header = null, content = ~{::content}, footer = null)}"
+>
+  <th:block th:fragment="content">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
+    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
+    <div class="content">
+      <div class="moments" x-data="upvote('moment','moment.halo.run','moments')">
+        <div
+          class="moment on-list post"
+          th:each="moment,iterStat : ${moments.items}"
+          th:with="content=${moment.spec.content}"
+          th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
+        >
+          <div class="post-meta">
+            <span class="post-date" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">
+              Moment CreateTime
+            </span>
+            <span class="post-author" th:with="owner = ${moment.owner}" th:text="${':: '+owner.displayName}">
+              :: Author
+            </span>
+          </div>
+          <div class="post-content" th:utext="${content.html}">Moment Content...</div>
+          <th:block th:with="medium=${moment.spec.content.medium}">
+            <div
+              th:unless="${#lists.isEmpty(moments)}"
+              class="moment-media mt-4 grid w-4/5 gap-2 sm:w-4/5"
+              th:classappend="${(#lists.size(medium) > 4 ? 'grid-cols-3' : '') + (#lists.size(medium) == 1 ? 'grid-cols-1' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? 'grid-cols-2' :'')}"
+            >
+              <div class="" th:each="media : ${medium}">
+                <a th:class="|glightbox|" th:data-gallery="|gallery${iterStat.count}|" th:href="${media.url}">
+                  <img
+                    th:if="${#strings.equals(media.type,'PHOTO')}"
+                    class="transform-gpu rounded-lg object-cover"
+                    th:src="${media.url}"
+                  />
+                </a>
+                <div th:if="${#strings.equals(media.type,'VIDEO')}" class="w-full">
+                  <video controls th:src="${media.url}" class="rounded-lg object-cover"></video>
+                </div>
+              </div>
+            </div>
+          </th:block>
+          <div class="mt-3 flex items-center gap-4">
+            <div
+              class="journal-likes inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700"
+              x-bind:class="{'text-red-700': upvoted(name)}"
+              @click="handleUpvote(name)"
+            >
+              <i class="!h-4 !w-4 i-pixelarticons-heart"></i>
+              <span
+                class="ml-1"
+                th:attr="data-upvote-moment-name=${moment.metadata.name}"
+                th:text="${moment.stats.upvote}"
+              >
+              </span>
+            </div>
+            <div
+              class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:hover:text-white"
+              :class="{'!text-black':showComment && storedTheme == 'light','!text-white':showComment && storedTheme == 'dark' }"
+              x-on:click="showComment = !showComment"
+            >
+              <i class="!h-4 !w-4 i-pixelarticons-comment"></i>
+              <span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
+            </div>
+          </div>
+
+          <div class="mt-2" x-show="showComment">
+            <halo:comment
+              group="moment.halo.run"
+              kind="Moment"
+              th:attr="name=${moment.metadata.name}"
+              colorScheme="storedTheme"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="pagination" th:if="${moments.hasPrevious()} or ${moments.hasNext()}">
+        <div class="pagination__buttons">
+          <span class="button previous" th:if="${moments.hasPrevious()}">
+            <a th:href="@{${moments.prevUrl}}">
+              <div class="button__icon i-pixelarticons-chevron-left !h-6 !w-6"></div>
+              <span class="button__text">上一页</span>
+            </a>
+          </span>
+          <span class="button next" th:if="${moments.hasNext()}">
+            <a th:href="@{${moments.nextUrl}}" class="items-center">
+              <span class="button__text">下一页</span>
+              <div class="button__icon i-pixelarticons-chevron-right !h-6 !w-6"></div>
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      const lightbox = GLightbox({
+        loop: false,
+      });
+    </script>
+  </th:block>
+</html>