Web-Next 样式调整

YuJianBlog-Web-Next/src/components/ArticleBox/index.module.scss

@@ -18,6 +18,7 @@
   }
 
   @media (max-width: 1280px) {
+    margin-bottom: 3rem;
     width: 90%;
   }
 

YuJianBlog-Web-Next/src/components/ArticleBox/index.tsx

@@ -7,19 +7,10 @@ import { qprogressStart } from "../../utils";
 const ArticleBox = ({ articleData }: { articleData: ArticleData }) => {
   const { id, title, description, cover_url, createdAt } = articleData;
 
-  const onLinkClick = () => {
-    qprogressStart();
-  };
-
   return (
     <Link href={`/Article/${id}`}>
-      <div className={style.articleBox} onClick={onLinkClick}>
-        <BlogImage
-          imageUrl={cover_url || ""}
-          imageAlt={title}
-          height={460}
-          radius={5}
-        />
+      <div className={style.articleBox} onClick={() => qprogressStart()}>
+        <BlogImage imageUrl={cover_url || ""} imageAlt={title} radius={5} />
         <div className={style.articleBox__box}>
           <span className={style["articleBox__box-title"]}>{title}</span>
           <span className={style["articleBox__box-dep"]}>{description}</span>

YuJianBlog-Web-Next/src/components/BlogImage/index.tsx

@@ -2,8 +2,8 @@ import Image from "next/image";
 import { imagesLoader } from "../../utils";
 import type { BlogImageType } from "./type";
 
-export default ({ height, imageUrl, imageAlt, radius }: BlogImageType) => (
-  <div style={{ position: "relative", height, width: "100%" }}>
+export default ({ imageUrl, imageAlt, radius }: BlogImageType) => (
+  <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 9" }}>
     <Image
       style={{ borderTopLeftRadius: radius, borderTopRightRadius: radius }}
       loader={imagesLoader}

YuJianBlog-Web-Next/src/components/BlogImage/type/index.ts

@@ -1,5 +1,4 @@
 export interface BlogImageType {
-  height: number;
   imageUrl: string;
   imageAlt: string;
   radius: number;

YuJianBlog-Web-Next/src/components/MarkdownRender/components/CustomRender/index.module.scss

@@ -35,8 +35,8 @@
 
 .customBlockquote {
   color: #666666;
-  padding: 1px 23px;
+  padding: 2px 20px;
   margin: 22px 0;
-  border-left: 4px solid #cbcbcb;
-  background-color: #f8f8f8
+  border-left: 4px solid #b2aec5;
+  background-color: #fff9f9
 }

YuJianBlog-Web-Next/src/components/MarkdownRender/components/CustomRender/index.tsx

@@ -29,7 +29,7 @@ const CodeRender = ({
       style={oneDark}
       language={match[1]}
       PreTag="div"
-      showLineNumbers={true}
+      // showLineNumbers={true}
       children={String(children).replace(/\n$/, "")}
       {...props}
     />

YuJianBlog-Web-Next/src/components/Navigation/index.tsx

@@ -14,7 +14,13 @@ const Navigation = () => (
     <div className={style.pageHeader__container}>
       <span className={style["pageHeader__container-left"]}>
         <div className={style.leftImg}>
-          <Image src={YuJianLogo} alt="YuJianLogo" layout="responsive" />
+          <Image
+            src={YuJianLogo}
+            alt="YuJianLogo"
+            draggable={false}
+            layout="responsive"
+            priority
+          />
         </div>
         <span className={style.leftSpan}>
           <Link href="/">YuJian's Blog</Link>
@@ -65,14 +71,32 @@ const DarkModeButton = () => {
   const onDarkMode = (value: boolean) => {
     if (value) {
       document.documentElement.style.setProperty("--theme-bg-color", "#0f0f0f");
-      document.documentElement.style.setProperty("--theme-font-color", "#ced8de");
-      document.documentElement.style.setProperty("--theme-box-color", "#2d3235");
-      document.documentElement.style.setProperty("--theme-slogan-color", "linear-gradient(45deg,rgba(147, 181, 207, 1) 0%,rgba(147, 181, 207, 0.4) 100%)");
+      document.documentElement.style.setProperty(
+        "--theme-font-color",
+        "#ced8de"
+      );
+      document.documentElement.style.setProperty(
+        "--theme-box-color",
+        "#2d3235"
+      );
+      document.documentElement.style.setProperty(
+        "--theme-slogan-color",
+        "linear-gradient(45deg,rgba(147, 181, 207, 1) 0%,rgba(147, 181, 207, 0.4) 100%)"
+      );
     } else {
       document.documentElement.style.setProperty("--theme-bg-color", "#fafafa");
-      document.documentElement.style.setProperty("--theme-font-color", "#000000");
-      document.documentElement.style.setProperty("--theme-box-color", "#ffffff");
-      document.documentElement.style.setProperty("--theme-slogan-color", "linear-gradient(45deg,rgba(43, 115, 175, 1) 0%,rgba(43, 115, 175, 0.4) 100%)");
+      document.documentElement.style.setProperty(
+        "--theme-font-color",
+        "#000000"
+      );
+      document.documentElement.style.setProperty(
+        "--theme-box-color",
+        "#ffffff"
+      );
+      document.documentElement.style.setProperty(
+        "--theme-slogan-color",
+        "linear-gradient(45deg,rgba(43, 115, 175, 1) 0%,rgba(43, 115, 175, 0.4) 100%)"
+      );
     }
 
     setDarkMode(value);

YuJianBlog-Web-Next/src/pages/Article/[id].tsx

@@ -26,7 +26,6 @@ const Article = ({ data }: { data: ArticleData }) => {
       </div>
       <div className={style.article__box}>
         <BlogImage
-          height={550}
           imageUrl={data?.cover_url || ""}
           imageAlt={data?.title}
           radius={8}

YuJianBlog-Web-Next/src/pages/Article/index.module.scss

@@ -1,5 +1,4 @@
 .article {
-  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -13,23 +12,20 @@
     justify-content: center;
     align-items: center;
     font-weight: 700;
-    // margin-top: 3.2rem;
     margin-bottom: 3.2rem;
-    width: 100rem;
-
-    @media (max-width: 500px) {
-      margin-top: 1rem;
-      width: 30rem;
-      margin-bottom: 1.5rem;
-    }
 
     &-title {
-      font-size: 4rem;
+      text-align: center;
+      font-size: 5rem;
       line-height: 4rem;
       margin-bottom: 1.2rem;
 
+      @media (max-width: 900px) {
+        font-size: 5vw;
+      }
+
       @media (max-width: 500px) {
-        font-size: 2.4rem;
+        font-size: 6vw;
         line-height: 2.5rem;
       }
     }
@@ -46,11 +42,14 @@
     box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.02),
       1px 1px 15px 0 rgba(0, 0, 0, 0.03);
     border-radius: 0.8rem;
-    width: 100rem;
+    width: 60vw;
+
+    @media (max-width: 1000px) {
+      width: 90vw;
+    }
 
     @media (max-width: 500px) {
-      margin-top: 1rem;
-      width: 38rem;
+      width: 95vw;
     }
 
     &-tips {
@@ -61,15 +60,15 @@
       background-color: #f1c4cd;
       color: #ff597a;
       font-weight: 700;
-      margin-top: 3rem;
-      padding: 2rem 0;
-      width: 100%;
+      margin-top: 3%;
+      padding: 1.5rem 1rem;
+      max-width: 100%;
     }
 
     &-content {
       display: flex;
       flex-direction: column;
-      margin: 1rem 2rem;
+      margin: 1rem;
       padding-bottom: 2rem;
       overflow-wrap: break-word;
       font-size: 1.5rem;