refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability
这个提交包含在：
+87
-88
@@ -1,105 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, pageType = 'moments', terminalUserName = ${moments != null and moments.items != null and !#lists.isEmpty(moments.items) and moments.items[0].owner != null and !#strings.isEmpty(moments.items[0].owner.name) ? moments.items[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
|
||||
<script src="https://gcore.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-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</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>
|
||||
|
||||
<section class="devcm-editor-window">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span>moments.md</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="/"
|
||||
th:aria-label="#{devcm.action.closeMomentsTab}"
|
||||
th:title="#{devcm.action.closeMomentsTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-editor-body">
|
||||
<div class="devcm-moments" x-data="upvote('moment','moment.halo.run','moments')">
|
||||
<article
|
||||
class="devcm-post-card devcm-moment-card"
|
||||
th:each="moment,iterStat : ${moments.items}"
|
||||
th:with="content=${moment.spec.content}"
|
||||
th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
|
||||
>
|
||||
<div class="devcm-post-card__meta">
|
||||
<span th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">Moment CreateTime</span>
|
||||
<span th:with="owner = ${moment.owner}" th:text="${owner.displayName}">Author</span>
|
||||
</div>
|
||||
<div class="devcm-post-card__excerpt" th:utext="${content.html}">Moment Content...</div>
|
||||
|
||||
<th:block th:with="medium=${moment.spec.content.medium}">
|
||||
<div
|
||||
th:unless="${#lists.isEmpty(medium)}"
|
||||
class="devcm-moment-media"
|
||||
th:classappend="${(#lists.size(medium) > 4 ? ' devcm-moment-media--three' : '') + (#lists.size(medium) == 1 ? ' devcm-moment-media--one' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? ' devcm-moment-media--two' :'')}"
|
||||
>
|
||||
<div 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')}"
|
||||
th:src="${media.url}"
|
||||
th:alt="${moment.owner.displayName}"
|
||||
/>
|
||||
</a>
|
||||
<video th:if="${#strings.equals(media.type,'VIDEO')}" controls th:src="${media.url}"></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"
|
||||
:class="{'text-red-700': getIsUpvoted(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' }"
|
||||
@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>
|
||||
</th:block>
|
||||
|
||||
<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 class="devcm-moment-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="devcm-action-link"
|
||||
:class="{ 'devcm-action-link--active': getIsUpvoted(name) }"
|
||||
@click="handleUpvote(name)"
|
||||
>
|
||||
<i class="i-pixelarticons-heart"></i>
|
||||
<span th:attr="data-upvote-moment-name=${moment.metadata.name}" th:text="${moment.stats.upvote}"
|
||||
>0</span
|
||||
>
|
||||
</button>
|
||||
<button type="button" class="devcm-action-link" @click="showComment = !showComment">
|
||||
<i class="i-pixelarticons-comment"></i>
|
||||
<span th:text="${moment.stats.approvedComment}">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="devcm-moment-comments" x-data="themeComment()" x-init="init()" x-show="showComment">
|
||||
<halo:comment
|
||||
group="moment.halo.run"
|
||||
kind="Moment"
|
||||
th:attr="name=${moment.metadata.name}"
|
||||
colorScheme="localStorage.getItem('theme-mode')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<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}}">
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${moments.hasNext()}">
|
||||
<a th:href="@{${moments.nextUrl}}">
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const lightbox = GLightbox({
|
||||
loop: false,
|
||||
|
||||
在新议题中引用
屏蔽一个用户