feat: deepen single post experience

assets/css/frontend/single-post/code-blocks.css

@@ -1,4 +1,4 @@
-/* ========== 浠ｇ爜鍧?GitHub 椋庢牸 ========== */
+/* ========== 代码块：GitHub 风格 ========== */
 .code-block {
   border-radius: var(--radius-code);
   border: 1px solid var(--color-line);
@@ -52,8 +52,8 @@
   }
 }
 
-.entry-content pre.wp-block-code,
-.entry-content pre:not(.wp-block-preformatted) {
+:is(.entry-content, .wp-posts-content) pre.wp-block-code,
+:is(.entry-content, .wp-posts-content) pre:not(.wp-block-preformatted) {
   border-radius: var(--radius-code);
   border: 1px solid var(--color-line);
   background: var(--surface-3);
@@ -61,7 +61,7 @@
   overflow: hidden;
 }
 
-.entry-content pre code {
+:is(.entry-content, .wp-posts-content) pre code {
   display: block;
   padding: 16px 20px;
   overflow-x: auto;

assets/css/frontend/single-post/content.css

@@ -129,27 +129,33 @@ article.article.box-body,
   height: 2px;
 }
 
-.entry-content > *:first-child {
+:is(.entry-content, .wp-posts-content) > *:first-child {
   margin-top: 0;
 }
 
-.entry-content p {
+:is(.entry-content, .wp-posts-content) p {
   margin: 0 0 1.5em;
 }
 
-.entry-content h2 {
+:is(.entry-content, .wp-posts-content) h2 {
   font-size: 20px;
   font-weight: 700;
-  margin: 20px 0 10px;
+  margin: 28px 0 14px;
 }
 
-.entry-content h3 {
+:is(.entry-content, .wp-posts-content) h3 {
   font-size: 18px;
   font-weight: 700;
-  margin: 20px 0 10px;
+  margin: 24px 0 12px;
 }
 
-.entry-content blockquote {
+:is(.entry-content, .wp-posts-content) h4 {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 22px 0 10px;
+}
+
+:is(.entry-content, .wp-posts-content) blockquote {
   margin: 0 0 24px;
   padding: 18px 20px;
   border-left: 4px solid var(--color-primary);
@@ -158,11 +164,29 @@ article.article.box-body,
   color: var(--color-ink-3);
 }
 
-.entry-content img {
+:is(.entry-content, .wp-posts-content) img {
   margin: 0 auto;
   display: block;
   max-width: 100%;
   height: auto;
+  border-radius: min(8px, var(--main-radius, 8px));
+}
+
+:is(.entry-content, .wp-posts-content) figure {
+  max-width: 100%;
+  margin: 1.5em auto;
+}
+
+:is(.entry-content, .wp-posts-content) figcaption {
+  margin-top: 8px;
+  color: var(--muted-color, #777);
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+:is(.entry-content, .wp-posts-content) .aksrt-lightbox-target {
+  cursor: zoom-in;
 }
 
 /* ===== 图片灯箱 ===== */
@@ -226,14 +250,14 @@ article.article.box-body,
   pointer-events: none;
 }
 
-.entry-content iframe,
-.entry-content .wp-block-embed iframe,
-.entry-content video {
+:is(.entry-content, .wp-posts-content) iframe,
+:is(.entry-content, .wp-posts-content) .wp-block-embed iframe,
+:is(.entry-content, .wp-posts-content) video {
   max-width: 100%;
   height: auto;
 }
 
-.entry-content .wp-block-embed {
+:is(.entry-content, .wp-posts-content) .wp-block-embed {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -242,7 +266,7 @@ article.article.box-body,
 }
 
 /* 行内代码 — 对齐 zibll: 粉色文字 + 粉色背景 */
-.entry-content code {
+:is(.entry-content, .wp-posts-content) code {
   font-family: var(--font-mono);
   font-size: 0.9em;
   color: #ff3c98;
@@ -251,13 +275,13 @@ article.article.box-body,
   border-radius: 4px;
 }
 
-.entry-content ul,
-.entry-content ol {
+:is(.entry-content, .wp-posts-content) ul,
+:is(.entry-content, .wp-posts-content) ol {
   padding-left: 1.5em;
   margin: 0 0 1.5em;
 }
 
-.entry-content ul li::marker {
+:is(.entry-content, .wp-posts-content) ul li::marker {
   color: var(--color-primary);
 }
 

assets/css/frontend/single-post/shell.css

@@ -40,3 +40,72 @@ body.single .sidebar .widget {
 body.single main.container {
   box-sizing: border-box;
 }
+
+/* Reading facts below the author row. */
+.article-reading-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  margin: 12px 0 2px;
+  color: var(--muted-color, #777);
+  font-size: 12px;
+}
+
+.article-reading-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* Useful fallback for sites that enable the column before adding widgets. */
+.single-overview-widget {
+  padding: 18px;
+  border-radius: var(--main-radius, 8px);
+  background: var(--main-bg-color, #fff);
+  box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
+}
+
+.single-overview-widget__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 12px;
+  font-size: 15px;
+}
+
+.single-overview-widget__title i {
+  color: var(--focus-color, #f04494);
+}
+
+.single-overview-widget__list {
+  margin: 0;
+}
+
+.single-overview-widget__list > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--main-border-color, rgba(50, 50, 50, 0.08));
+}
+
+.single-overview-widget__list > div:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.single-overview-widget__list dt,
+.single-overview-widget__list dd {
+  margin: 0;
+  font-size: 12px;
+}
+
+.single-overview-widget__list dt {
+  color: var(--muted-color, #777);
+}
+
+.single-overview-widget__list dd {
+  color: var(--key-color, #333);
+  text-align: right;
+}

assets/js/page-template.js

@@ -177,7 +177,7 @@
 
   function initLightbox() {
     var overlay = document.getElementById('lightbox-overlay');
-    var content = document.querySelector(".entry-content[data-aksrt-lightbox='1']");
+    var content = document.querySelector(".wp-posts-content[data-aksrt-lightbox='1'], .entry-content[data-aksrt-lightbox='1']");
     if (!overlay || !content || overlay.dataset.aksrtLightboxBound === '1') return;
 
     overlay.dataset.aksrtLightboxBound = '1';
@@ -188,6 +188,7 @@
 
     function close() {
       overlay.classList.remove('is-open');
+      overlay.setAttribute('aria-hidden', 'true');
       document.body.style.overflow = '';
       if (image) {
         image.src = '';
@@ -196,11 +197,19 @@
     }
 
     content.querySelectorAll('img').forEach(function (img) {
-      img.style.cursor = 'zoom-in';
-      img.addEventListener('click', function () {
-        if (!image) return;
+      var link = img.closest('a[href]');
+      var linkHref = link ? link.href : '';
+      var linksToImage = /\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i.test(linkHref);
+      if (img.closest('[data-no-lightbox]') || (link && !linksToImage)) return;
 
-        image.src = img.src;
+      img.classList.add('aksrt-lightbox-target');
+      img.addEventListener('click', function (event) {
+        if (!image) return;
+        if (linksToImage) event.preventDefault();
+
+        image.src = linksToImage
+          ? linkHref
+          : (img.getAttribute('data-src') || img.getAttribute('data-lazy-src') || img.currentSrc || img.src);
         image.alt = img.alt || '';
 
         if (caption) {
@@ -210,20 +219,18 @@
         }
 
         overlay.classList.add('is-open');
+        overlay.setAttribute('aria-hidden', 'false');
         document.body.style.overflow = 'hidden';
+        if (closeBtn) closeBtn.focus();
       });
     });
 
     overlay.addEventListener('click', function (event) {
-      if (event.target === overlay || event.target === closeBtn) {
+      if (event.target === overlay || event.target === closeBtn || (event.target.closest && event.target.closest('.lightbox-close'))) {
         close();
       }
     });
 
-    if (closeBtn) {
-      closeBtn.addEventListener('click', close);
-    }
-
     document.addEventListener('keydown', function (event) {
       if (event.key === 'Escape' && overlay.classList.contains('is-open')) {
         close();