修复EXIF

2026-05-18 20:35:58 +08:00
parent a0c64736eb
commit 0021045c5f
19 changed files with 315 additions and 911 deletions
@@ -11,7 +11,7 @@ import Layout from "../layouts/Layout.astro";
    <header class="wi-archives__header">
      <h1 class="wi-archives__title">归档</h1>
      <span class="wi-page-accent"></span>
-      <p class="wi-archives__subtitle" th:text="${theme.config?.home?.home_label_post_count ?: '共 {total} 篇文章}'.replace('{total}', archives.total)}"></p>
+      <p class="wi-archives__subtitle" th:text="|共 ${archives.total} 篇文章|"></p>
    </header>

    <section class="wi-archives__timeline" aria-label="Archive timeline">
@@ -14,7 +14,7 @@ import Layout from "../layouts/Layout.astro";
        th:text="${category.spec.displayName}"
      ></h1>
      <span class="wi-page-accent"></span>
-      <p class="wi-category__subtitle" th:text="${theme.config?.home?.home_label_post_count ?: '共 {total} 篇文章}'.replace('{total}', posts.total)}"></p>
+      <p class="wi-category__subtitle" th:text="|共 ${posts.total} 篇文章|"></p>
      <p
        th:if="${not #strings.isEmpty(category.spec.description)}"
        class="wi-category__description"
@@ -60,36 +60,74 @@ import HeroSection from "../components/HeroSection.astro";

  <section class="wi-home-posts" id="wi-home-posts">
    <div class="wi-container">
+      <div class="wi-section__header">
+        <h2 class="wi-section__title" th:text="${theme.config?.home?.home_posts_title ?: '文章'}">文章</h2>
+      </div>
      <div class="wi-flow" id="wi-post-grid">
-        <a
+        <article
          th:each="post : ${posts.items}"
          th:if="${!post.spec.pinned}"
-          th:href="@{${post.status.permalink}}"
          class="wi-flow__card"
          th:classappend="${!#strings.isEmpty(post.spec.cover)} ? 'wi-flow__card--with-cover' : ''"
        >
+          <a
+            class="wi-flow__stretched-link"
+            th:href="@{${post.status.permalink}}"
+            tabindex="-1"
+            aria-hidden="true"
+          ></a>
          <div class="wi-flow__body">
            <div class="wi-flow__meta">
-              <span
-                class="wi-flow__category"
-                th:if="${!#lists.isEmpty(post.categories)}"
-                th:text="${post.categories[0].spec.displayName}"
-              ></span>
+              <th:block th:if="${(theme.config?.home?.home_card_show_category ?: true) and !#lists.isEmpty(post.categories)}">
+                <span class="wi-flow__categories">
+                  <a
+                    th:each="cat : ${post.categories}"
+                    th:href="@{${cat.status.permalink}}"
+                    th:text="${cat.spec.displayName}"
+                    class="wi-flow__category-link"
+                  ></a>
+                </span>
+              </th:block>
              <time
                class="wi-flow__date"
                th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
              ></time>
            </div>
-            <h3
-              class="wi-flow__title"
-              th:text="${post.spec.title}"
-            ></h3>
+            <a
+              th:href="@{${post.status.permalink}}"
+              class="wi-flow__title-link"
+            >
+              <h3
+                class="wi-flow__title"
+                th:text="${post.spec.title}"
+              ></h3>
+            </a>
            <p
              class="wi-flow__excerpt"
              th:if="${post.status.excerpt}"
              th:text="${post.status.excerpt}"
              th:style="'-webkit-line-clamp:' + (${theme.config?.home?.home_excerpt_lines ?: 3})"
            ></p>
+            <div class="wi-flow__footer">
+              <th:block th:if="${(theme.config?.home?.home_card_show_tags ?: true) and post.tags != null and !#lists.isEmpty(post.tags)}">
+                <div class="wi-flow__tags">
+                  <a
+                    th:each="tag : ${post.tags}"
+                    th:href="@{${tag.status.permalink}}"
+                    th:text="${tag.spec.displayName}"
+                    class="wi-flow__tag-link"
+                  ></a>
+                </div>
+              </th:block>
+              <div class="wi-flow__stats">
+                <span
+                  class="wi-flow__stat"
+                  th:if="${theme.config?.home?.home_card_show_visit ?: true}"
+                >
+                  <th:block th:text="${post.stats?.visit ?: 0}"></th:block> 阅读
+                </span>
+              </div>
+            </div>
          </div>
          <div
            class="wi-flow__cover"
@@ -97,7 +135,7 @@ import HeroSection from "../components/HeroSection.astro";
          >
            <img th:src="${post.spec.cover}" th:alt="${post.spec.title}" class="wi-flow__image" />
          </div>
-        </a>
+        </article>
      </div>

      <nav
@@ -396,13 +434,19 @@ import HeroSection from "../components/HeroSection.astro";
    overflow: hidden;
    background: var(--bg-raised);
    box-shadow: var(--shadow-sm);
-    text-decoration: none;
    color: inherit;
+    position: relative;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo);
  }

+  .wi-flow__stretched-link {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
  .wi-flow__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
@@ -448,20 +492,37 @@ import HeroSection from "../components/HeroSection.astro";
    flex-wrap: wrap;
  }

-  .wi-flow__category {
+  .wi-flow__categories {
    font-size: var(--text-xs);
-    color: var(--accent);
    letter-spacing: var(--tracking-wide);
-    text-transform: uppercase;
    font-weight: 600;
  }

-  .wi-flow__category::after {
+  .wi-flow__categories::after {
    content: '·';
    margin-left: var(--space-sm);
+    margin-right: var(--space-sm);
    color: var(--ink-3);
  }

+  .wi-flow__category-link {
+    color: var(--accent);
+    text-decoration: none;
+    position: relative;
+    z-index: 2;
+    transition: color var(--duration-fast) var(--ease-out-quart);
+  }
+
+  .wi-flow__category-link:hover {
+    color: var(--accent-hover);
+    text-decoration: underline;
+  }
+
+  .wi-flow__category-link + .wi-flow__category-link::before {
+    content: '、';
+    color: var(--accent);
+  }
+
  .wi-flow__date {
    font-size: var(--text-xs);
    color: var(--ink-3);
@@ -469,6 +530,12 @@ import HeroSection from "../components/HeroSection.astro";
    text-transform: uppercase;
  }

+  .wi-flow__title-link {
+    text-decoration: none;
+    position: relative;
+    z-index: 2;
+  }
+
  .wi-flow__title {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
@@ -493,6 +560,57 @@ import HeroSection from "../components/HeroSection.astro";
    margin-block-end: 0;
  }

+  .wi-flow__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: auto;
+    padding-top: var(--space-xs);
+  }
+
+  .wi-flow__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .wi-flow__tag-link {
+    font-size: 11px;
+    color: var(--ink-3);
+    text-decoration: none;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: var(--bg);
+    border: 1px solid var(--rule);
+    position: relative;
+    z-index: 2;
+    transition: color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), background var(--duration-fast) var(--ease-out-quart);
+    white-space: nowrap;
+  }
+
+  .wi-flow__tag-link:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
+  }
+
+  .wi-flow__stats {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--text-xs);
+    color: var(--ink-3);
+    white-space: nowrap;
+  }
+
+  .wi-flow__stat + .wi-flow__stat::before {
+    content: '·';
+    margin-right: 0.5rem;
+    color: var(--ink-3);
+  }
+
  .wi-pagination {
    display: flex;
    align-items: center;
@@ -561,5 +679,11 @@ import HeroSection from "../components/HeroSection.astro";
      width: 100%;
      aspect-ratio: 16 / 9;
    }
+
+    .wi-flow__footer {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.4rem;
+    }
  }
 </style>
@@ -37,6 +37,7 @@ import LightGallery from "../components/LightGallery.astro";
                            th:alt="''"
                            class="wi-moments-page__image"
                            loading="lazy"
+                            decoding="async"
                          />
                        </th:block>
                      </div>
@@ -93,6 +94,7 @@ import LightGallery from "../components/LightGallery.astro";
                          th:alt="''"
                          class="wi-moments-page__card-image"
                          loading="lazy"
+                          decoding="async"
                        />
                      </th:block>
                    </div>
@@ -148,6 +150,7 @@ import LightGallery from "../components/LightGallery.astro";
                          th:alt="''"
                          class="wi-moments-page__masonry-image"
                          loading="lazy"
+                          decoding="async"
                        />
                      </th:block>
                    </div>
@@ -68,6 +68,7 @@ import LightGallery from "../components/LightGallery.astro";
                            th:alt="${photo.spec.displayName ?: ''}"
                            class="wi-photos-page__image"
                            loading="lazy"
+                            decoding="async"
                          />
                          <div class="wi-photos-page__overlay">
                            <span
@@ -111,6 +112,7 @@ import LightGallery from "../components/LightGallery.astro";
                          th:alt="${photo.spec.displayName ?: ''}"
                          class="wi-photos-page__image"
                          loading="lazy"
+                          decoding="async"
                        />
                        <div class="wi-photos-page__overlay">
                          <span
@@ -148,6 +150,7 @@ import LightGallery from "../components/LightGallery.astro";
                          th:alt="${photo.spec.displayName ?: ''}"
                          class="wi-photos-page__image"
                          loading="lazy"
+                          decoding="async"
                        />
                        <div class="wi-photos-page__overlay">
                          <span
@@ -176,6 +179,7 @@ import LightGallery from "../components/LightGallery.astro";
                        th:alt="${photo.spec.displayName ?: ''}"
                        class="wi-photos-page__image"
                        loading="lazy"
+                        decoding="async"
                      />
                      <div class="wi-photos-page__overlay">
                        <span
@@ -187,6 +191,7 @@ import LightGallery from "../components/LightGallery.astro";
                    </a>
                  </div>
                </th:block>
+                </th:block>
              </div>
            </th:block>
          </th:block>
@@ -221,6 +226,7 @@ import LightGallery from "../components/LightGallery.astro";
                          th:alt="${photo.spec.displayName ?: ''}"
                          class="wi-photos-page__image"
                          loading="lazy"
+                          decoding="async"
                        />
                        <div class="wi-photos-page__overlay">
                          <span
@@ -210,12 +210,19 @@ import LightGallery from "../components/LightGallery.astro";
      if (progressBar) {
        var article = document.querySelector(".wi-post");
        if (article) {
+          var progressTicking = false;
          window.addEventListener("scroll", function () {
-            var rect = article.getBoundingClientRect();
-            var articleHeight = article.offsetHeight;
-            var scrolled = -rect.top;
-            var progress = Math.min(Math.max(scrolled / (articleHeight - window.innerHeight), 0), 1);
-            progressBar.style.width = (progress * 100) + "%";
+            if (!progressTicking) {
+              requestAnimationFrame(function () {
+                var rect = article.getBoundingClientRect();
+                var articleHeight = article.offsetHeight;
+                var scrolled = -rect.top;
+                var progress = Math.min(Math.max(scrolled / (articleHeight - window.innerHeight), 0), 1);
+                progressBar.style.width = (progress * 100) + "%";
+                progressTicking = false;
+              });
+              progressTicking = true;
+            }
          }, { passive: true });
        }
      }
@@ -242,25 +249,35 @@ import LightGallery from "../components/LightGallery.astro";
      function buildTocHtml(headings) {
        var groups = [];
        var currentGroup = null;
+        var baseLevel = 6;
+
+        headings.forEach(function (h) {
+          var level = parseInt(h.tagName.charAt(1), 10);
+          if (level < baseLevel) baseLevel = level;
+        });

        headings.forEach(function (h, i) {
          var id = "wi-heading-" + i;
          h.id = id;
          var level = parseInt(h.tagName.charAt(1), 10);

-          if (level === 2 || !currentGroup) {
-            currentGroup = { h2: { id: id, text: h.textContent.trim() }, children: [] };
+          if (level === baseLevel || !currentGroup) {
+            currentGroup = { h2: { id: id, text: h.textContent.trim(), level: level }, children: [] };
            groups.push(currentGroup);
-          } else {
+          } else if (level > baseLevel) {
            currentGroup.children.push({ id: id, text: h.textContent.trim(), level: level });
          }
        });

        var html = "";
-        groups.forEach(function (group) {
-          html += '<div class="wi-toc__group" data-h2="' + group.h2.id + '">';
-          html += '<a class="wi-toc__link wi-toc__link--h2" href="#' + group.h2.id + '">' + group.h2.text + '</a>';
-          if (group.children.length > 0) {
+          groups.forEach(function (group) {
+            var linkClasses = "wi-toc__link";
+            if (group.children.length > 0) {
+              linkClasses += " wi-toc__link--group";
+            }
+            html += '<div class="wi-toc__group" data-h2="' + group.h2.id + '">';
+            html += '<a class="' + linkClasses + ' wi-toc__link--h' + group.h2.level + '" href="#' + group.h2.id + '">' + group.h2.text + '</a>';
+            if (group.children.length > 0) {
            html += '<div class="wi-toc__sub">';
            group.children.forEach(function (child) {
              html += '<a class="wi-toc__link wi-toc__link--h' + child.level + '" href="#' + child.id + '">' + child.text + '</a>';
@@ -286,16 +303,12 @@ import LightGallery from "../components/LightGallery.astro";
          var tocLinks = tocNav.querySelectorAll(".wi-toc__link");

          tocGroups.forEach(function (group) {
-            var h2Link = group.querySelector(".wi-toc__link--h2");
-            if (h2Link) {
-              h2Link.addEventListener("click", function (e) {
+            var groupLink = group.querySelector(".wi-toc__link--group");
+            if (groupLink) {
+              groupLink.addEventListener("click", function (e) {
                e.preventDefault();
-                var isExpanded = group.classList.contains("wi-toc__group--expanded");
-                tocGroups.forEach(function (g) { g.classList.remove("wi-toc__group--expanded"); });
-                if (!isExpanded) {
-                  group.classList.add("wi-toc__group--expanded");
-                }
-                var targetId = h2Link.getAttribute("href").substring(1);
+                group.classList.toggle("wi-toc__group--expanded");
+                var targetId = groupLink.getAttribute("href").substring(1);
                var target = document.getElementById(targetId);
                if (target) {
                  target.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -394,16 +407,12 @@ import LightGallery from "../components/LightGallery.astro";
        var drawerGroups = tocDrawerNav.querySelectorAll(".wi-toc__group");
        tocDrawerNav.querySelectorAll(".wi-toc__link").forEach(function (link) {
          link.addEventListener("click", function (e) {
-            var h2Link = link.classList.contains("wi-toc__link--h2");
-            if (h2Link) {
+            var isGroupLink = link.classList.contains("wi-toc__link--group");
+            if (isGroupLink) {
              e.preventDefault();
              var group = link.closest(".wi-toc__group");
              if (group) {
-                var isExpanded = group.classList.contains("wi-toc__group--expanded");
-                drawerGroups.forEach(function (g) { g.classList.remove("wi-toc__group--expanded"); });
-                if (!isExpanded) {
-                  group.classList.add("wi-toc__group--expanded");
-                }
+                group.classList.toggle("wi-toc__group--expanded");
              }
              var targetId = link.getAttribute("href").substring(1);
              var target = document.getElementById(targetId);
@@ -967,9 +976,13 @@ import LightGallery from "../components/LightGallery.astro";
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

-  .wi-toc__group--active .wi-toc__sub,
+  .wi-toc__group--active .wi-toc__sub {
+    max-height: 600px;
+    opacity: 1;
+  }
+
  .wi-toc__group--expanded .wi-toc__sub {
-    max-height: 500px;
+    max-height: 600px;
    opacity: 1;
  }

@@ -998,14 +1011,14 @@ import LightGallery from "../components/LightGallery.astro";
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }

-  .wi-toc__link--h2 {
+  .wi-toc__link--group {
    padding-left: 0;
    padding-right: 4px;
    font-weight: 500;
    cursor: pointer;
  }

-  .wi-toc__link--h2::before {
+  .wi-toc__link--group::before {
    content: "";
    display: inline-block;
    width: 4px;
@@ -1017,7 +1030,25 @@ import LightGallery from "../components/LightGallery.astro";
    transition: background 0.15s ease;
  }

-  .wi-toc__link--active.wi-toc__link--h2::before {
+  .wi-toc__link--group::after {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-right: 1.5px solid var(--ink-3);
+    border-bottom: 1.5px solid var(--ink-3);
+    transform: rotate(-45deg);
+    margin-left: 6px;
+    vertical-align: middle;
+    transition: transform 0.2s ease, border-color 0.15s ease;
+  }
+
+  .wi-toc__group--expanded > .wi-toc__link--group::after,
+  .wi-toc__group--active > .wi-toc__link--group::after {
+    transform: rotate(45deg);
+  }
+
+  .wi-toc__link--active.wi-toc__link--group::before {
    background: var(--accent);
  }

@@ -11,7 +11,7 @@ import Layout from "../layouts/Layout.astro";
    <header class="wi-tag__header">
      <h1 class="wi-tag__title" th:text="${tag.spec.displayName}"></h1>
      <span class="wi-page-accent"></span>
-      <p class="wi-tag__subtitle" th:text="${theme.config?.home?.home_label_post_count ?: '共 {total} 篇文章}'.replace('{total}', posts.total)}"></p>
+      <p class="wi-tag__subtitle" th:text="|共 ${posts.total} 篇文章|"></p>
      <p
        th:if="${not #strings.isEmpty(tag.spec.description)}"
        class="wi-tag__description"
@@ -46,6 +46,7 @@ import Layout from "../layouts/Layout.astro";
            th:src="${post.spec.cover}"
            alt=""
            loading="lazy"
+            decoding="async"
          />
        </a>
      </li>