feat: 显示封面

src/pages/post/[...slug].astro

@@ -7,11 +7,8 @@ import Layout from '@/layouts/Layout.astro';
 import {createHttp} from "@/lib/request.ts";
 import type {Post} from "@/types";
 import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
-import {siteConfig} from '@/consts'
 import {formatDatetime} from "@/lib/format.ts";
 
-const {siteTitle} = siteConfig
-
 const {slug} = Astro.params;
 
 const http = createHttp(Astro.request.headers);
@@ -41,6 +38,12 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
     </div>
     <h1>{data.title}</h1>
 
+    {data.cover &&
+      <div class="cover-container">
+        <img class="cover" src={data.cover} alt={data.title}>
+      </div>
+    }
+
     <p class="summary">{data.summary}</p>
 
     <div class="divider"></div>
@@ -60,11 +63,28 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   article {
     width: 100%;
     margin: 0 auto;
-    padding: 0 0 24px 0;
     flex: 1;
     flex-shrink: 0;
   }
 
+  .cover-container {
+    padding-bottom: 56.25%;
+    position: relative;
+    width: 100%;
+    margin-bottom: 24px;
+  }
+
+  .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .meta {
     color: var(--text-meta);
     font-size: 13px;
@@ -79,7 +99,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
     flex-wrap: wrap;
   }
 
-  .meta-view-count:hover{
+  .meta-view-count:hover {
     color: var(--text-primary);
   }
 
@@ -101,7 +121,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   }
 
   .markdown-body {
-    margin: 24px 0 24px 0;
+    margin-top: 24px;
     line-height: 1.8;
     font-size: 15px;
     color: var(--article-text-color);
@@ -128,7 +148,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
   import ClipboardJS from "clipboard";
 
   const init = async () => {
-    const article = document.querySelector("article")!;
+    const article = document.querySelector(".markdown-body")!;
     const images = Array.from(article.querySelectorAll("img"));
 
     const waitImageLoaded = (img: HTMLImageElement) => {
@@ -164,7 +184,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
     );
 
     const lightbox = new PhotoSwipeLightbox({
-      gallery: "article",
+      gallery: ".markdown-body",
       children: "a[data-pswp-width]",
       pswpModule: () => import("photoswipe"),