Mark瞬间动态功能添加

主题：theme-fuwari V1.0.3
https://github.com/jiewenhuang/halo-theme-fuwari#readme
瞬间功能插件：瞬间 V1.15.0
https://www.halo.run/store/apps/app-SnwWD
使用方法：下载主题（或直接修改主题内templates/moments.html）
<!doctype html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = ${site.title}, hero = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null, pageType = 'home')}"
>
  <th:block th:fragment="content">
    <!-- 标签列表部分 -->
    <div class="mb-4">
      <ul class="flex flex-wrap gap-2">
        <li th:each="tag : ${tags}">
          <a
            th:href="|/moments?tag=${tag.name}|"
            th:classappend="${#lists.contains(param.tag, tag.name) ? 'active' : ''}"
            class="inline-block px-3 py-1 rounded-full bg-[var(--card-bg)] hover:bg-[var(--card-hover-bg)] transition"
          >
            <span th:text="${tag.name}"></span>
            <span th:text="'(' + ${tag.momentCount} + ')'" class="ml-1 text-sm"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- 瞬间列表部分 -->
    <div class="space-y-8">  <!-- 增大整体间距 -->
      <ul class="space-y-6">  <!-- 增大条目间距 -->
        <li th:each="moment : ${moments.items}" th:with="content=${moment.spec.content}" 
            class="p-6 mb-6 rounded-xl bg-[var(--card-bg)] shadow-md hover:shadow-lg transition-shadow duration-300">  <!-- 更圆润的圆角和阴影效果 -->
    
          <div class="px-4 py-4">
            <div th:if="${not #strings.isEmpty(content.html)}" th:utext="${content.html}" 
                class="prose prose-sm max-w-none mb-4"></div>  <!-- 增加底部间距 -->
          
            <th:block th:if="${not #lists.isEmpty(content.medium)}" class="mt-4 grid gap-3" 
                    th:classappend="${#lists.size(content.medium) > 1 ? 'grid-cols-2' : ''}">
                <th:block th:each="momentItem : ${content.medium}">
                <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" 
                    class="rounded-lg w-full h-auto object-cover shadow-sm hover:shadow-md transition-shadow" />
                <video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}" 
                        class="rounded-lg w-full shadow-sm hover:shadow-md transition-shadow" controls></video>
                <audio th:if="${momentItem.type.name == 'AUDIO'}" th:src="${momentItem.url}" 
                        class="w-full rounded-lg bg-[var(--card-hover-bg)] p-2" controls="true"></audio>
                </th:block>
            </th:block>

            <div class="flex mt-2 gap-3 text-base text-black/30 transition dark:text-white/30">
                <div class="flex items-center justify-center space-x-2">
                    <div class="flex space-x-2 items-center justify-center">
                        <span class="icon-[material-symbols--calendar-today-outline-rounded] mr-1 text-lg text-[var(--primary-color)]"></span>
                    </div>
                    <span class="text-sm font-medium" th:text="${#temporals.format(moment.metadata.creationTimestamp, 'yyyy-MM-dd')}"></span>
                </div>
                <div>|</div>
                <div class="flex items-center justify-center">
                    <span class="mr-1 text-lg">
                        <svg viewBox="0 0 24 24" width="1.0em" height="1.0em">
                            <path fill="currentColor" d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2m-3.566 15.604a27 27 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5C5.56 5 4 6.657 4 9c0 2.944 1.666 5.533 4.645 7.903c.745.593 1.54 1.146 2.421 1.7c.299.189.595.37.934.572c.339-.202.635-.383.934-.571"></path>
                        </svg>
                    </span>
                    <!-- 点赞数 -->
                    <span class="text-sm font-medium" th:text="${moment.stats.upvote}"></span>
                </div>
                <div>|</div>
                <div class="flex items-center justify-center">
                    <span class="icon-[material-symbols--ar-stickers-outline] mr-1 text-lg"></span>
                    <!-- 通过的评论数 -->
                    <span class="text-sm font-medium" th:text="${moment.stats.approvedComment}"></span>
                </div>
            </div>

          </div>

        </li>
      </ul>
  
      <!-- 分页部分 -->
      <div th:if="${moments.hasPrevious() || moments.hasNext()}" 
           class="flex justify-center gap-4 mt-8">
        <a th:href="@{${moments.prevUrl}}" th:if="${moments.hasPrevious()}" 
           class="px-4 py-2 rounded-lg bg-[var(--card-bg)] hover:bg-[var(--primary-color)] hover:text-white transition-colors">
          <span>上一页</span>
        </a>
        <span th:text="'第 ' + ${moments.page} + ' 页'" class="px-4 py-2 text-sm text-neutral-500"></span>
        <a th:href="@{${moments.nextUrl}}" th:if="${moments.hasNext()}" 
           class="px-4 py-2 rounded-lg bg-[var(--card-bg)] hover:bg-[var(--primary-color)] hover:text-white transition-colors">
          <span>下一页</span>
        </a>
      </div>
    </div>
  </th:block>
</html>
2026-03-17T02:09:05-ftabdsqg.png