优化图片样式，添加图片和字体预加载

Author: LingLambda

src/layouts/BaseLayout.astro

@@ -12,6 +12,8 @@ const { description, keywords, title } = Astro.props;
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.svg" type="image/svg" />
     <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="preload" href="/fonts/MapleMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/assets/images/chair.webp" as="image" type="image/webp" crossorigin>
     <script src="../scripts/swUnregister.ts"></script>
     <ClientRouter />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

src/posts/index.md

@@ -12,4 +12,4 @@ title: index
 
 累了吗，可以在下面的椅子上休息，坐多久都可以！
 
-![chair](../../public/assets/images/chair.webp "看起来很结实的椅子")
+![chair](/assets/images/chair.webp "看起来很结实的椅子")

src/styles/global.css

@@ -47,7 +47,7 @@ a {
 
 @font-face {
   font-family: "Maple Mono";
-  src: url("../../public/fonts/MapleMono-Regular.woff2") format("woff");
+  src: url("/fonts/MapleMono-Regular.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
   font-display: swap;

src/styles/markdown.css

@@ -36,6 +36,19 @@
     font-size: 0.9rem;
   }
 
+  img,
+  video {
+    width: 100%;
+    object-fit: cover;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+  }
+
+  video {
+    outline: none; /* 移除焦点时的边框 */
+    cursor: pointer; /* 鼠标悬停时显示手型 */
+  }
+
   @media (max-width: 768px) {
     line-height: 1.4;
     code {