halo-theme-whitespace/src/moment.html

<include src="partials/layout.html">
  <template name="head">
    <title th:text="|${title} - ${site.title}|">瞬间</title>
    <style>
      .moment-detail {
        max-width: 46rem;
        margin: 0 auto;
      }
      .moment-back {
        display: inline-block;
        margin-bottom: 1.5rem;
        color: var(--color-link);
        font-size: 0.9rem;
      }
      .moment-back:hover {
        color: var(--color-link-hover);
      }
      .moment-card {
        padding: 1.5rem 0;
      }
      .moment-card header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
        color: var(--color-text-secondary);
      }
      .moment-owner {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
      }
      .moment-owner img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        object-fit: cover;
      }
      .moment-owner-name {
        color: var(--color-text);
        font-weight: 600;
      }
      .moment-meta {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.85rem;
      }
      .moment-meta a {
        color: var(--color-link);
      }
      .moment-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
        font-size: 0.85rem;
      }
      .moment-tags a {
        color: var(--color-link);
      }
      .moment-media {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
        margin-top: 0.75rem;
      }
      .moment-media img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--color-bg-secondary);
      }
      .moment-media img:only-child {
        aspect-ratio: auto;
        width: auto;
        max-width: min(100%, 22rem);
        max-height: 26rem;
      }
      .moment-media video {
        grid-column: 1 / -1;
        display: block;
        max-width: 100%;
        border-radius: var(--radius-md);
      }
      .moment-media audio {
        grid-column: 1 / -1;
        width: 100%;
      }
      .comments-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--color-border);
      }
    </style>
  </template>

  <div class="container">
    <section class="moment-detail" th:if="${moment != null}">
      <a class="moment-back" th:href="@{/moments}" th:text="#{moment.back_to_list}"
        >返回瞬间列表</a
      >

      <article class="moment-card" th:with="content=${moment.spec.content}">
        <header>
          <span class="moment-owner" th:if="${moment.owner != null}">
            <img
              th:if="${not #strings.isEmpty(moment.owner.avatar)}"
              th:src="${moment.owner.avatar}"
              th:alt="${moment.owner.displayName}"
              loading="lazy"
            />
            <span class="moment-owner-name" th:text="${moment.owner.displayName}"
              >用户名</span
            >
          </span>
          <span class="moment-meta">
            <time
              th:if="${moment.spec.releaseTime != null}"
              th:datetime="${moment.spec.releaseTime}"
              th:text="${#temporals.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}"
              >发布时间</time
            >
          </span>
        </header>

        <div
          class="moment-tags"
          th:if="${not #lists.isEmpty(moment.spec.tags)}"
        >
          <a
            th:each="tag : ${moment.spec.tags}"
            th:href="@{/moments(tag=${tag})}"
            th:text="'#' + ${tag}"
          ></a>
        </div>

        <div
          class="article-content"
          th:if="${not #strings.isEmpty(content.html)}"
          th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
          th:utext="${content.html}"
        ></div>

        <div
          class="moment-media"
          th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
          th:if="${not #lists.isEmpty(content.medium)}"
        >
          <th:block th:each="medium : ${content.medium}">
            <img
              th:if="${medium.type.name == 'PHOTO'}"
              th:src="${medium.url}"
              alt="瞬间图片"
              loading="lazy"
            />
            <video
              th:if="${medium.type.name == 'VIDEO'}"
              th:src="${medium.url}"
              controls
            ></video>
            <audio
              th:if="${medium.type.name == 'AUDIO'}"
              th:src="${medium.url}"
              controls
            ></audio>
          </th:block>
        </div>
      </article>

      <div class="comments-section" th:if="${haloCommentEnabled}">
        <halo:comment
          group="moment.halo.run"
          kind="Moment"
          th:attr="name=${moment.metadata.name}"
        />
      </div>
    </section>

    <p th:if="${moment == null}">瞬间不存在或不可见。</p>
  </div>
</include>