重构部分 Layout 优化动画效果修复文章链接无法加载等若干bug

WhitePaper233 · Nov 24, 2024 · 814c228 · 814c228
1 parent c0149bf
commit 814c228
Show file tree

Hide file tree

Showing 17 changed files with 210 additions and 251 deletions.
diff --git a/README.md b/README.md
@@ -54,11 +54,15 @@ yarn preview
 
 ### 近期
 
+✅ - 已完成 | 🚧 - 进行中 | ⏳ - 计划中
+
 | 状态 | 项目 |
 | --- | --- |
-| ⏳ | 重构部分代码，优化总体结构 |
-| ⏳ | 优化动画效果 |
-| ⏳ | 优化网站性能 |
+| ✅ | 基础功能实现 |
+| 🚧 | 重构部分代码，优化总体结构 |
+| 🚧 | 优化动画效果 |
+| 🚧 | 移动端适配 |
+| 🚧 | 优化网站性能 |
 | ⏳ | 可调的颜色 |
 | ⏳ | 添加 RSS、SiteMap 等功能 |
 | ⏳ | 更多构建选项（如 SLUG 生成方法） |

diff --git a/README_en.md b/README_en.md
@@ -51,14 +51,18 @@ yarn preview
 
 ### Short-term
 
+✅ - Completed | 🚧 - In Progress | ⏳ - Planned
+
 | Status | Project |
 | --- | --- |
-| ⏳ | Refactor some code and optimize the overall structure |
-| ⏳ | Optimize animation effects |
-| ⏳ | Optimize website performance |
+| ✅ | Basic functionality implementation |
+| 🚧 | Refactor some code and optimize overall structure |
+| 🚧 | Optimize animation effects |
+| 🚧 | Mobile adaptation |
+| 🚧 | Optimize website performance |
 | ⏳ | Adjustable colors |
-| ⏳ | Add RSS, SiteMap, and other features |
-| ⏳ | More build options (e.g., SLUG generation methods) |
+| ⏳ | Add RSS, SiteMap, etc. |
+| ⏳ | More build options (e.g., SLUG generation method) |
 | ⏳ | Add Live2D character |
 | ⏳ | Search functionality |
 | ⏳ | i18n |

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -18,8 +18,10 @@ export default defineConfig({
       containers: ['main', '.dynamic-ele'],
       smoothScrolling: true,
       progress: true,
-      // cache: true,
-      // preload: true,
+      cache: true,
+      preload: true,
+      updateHead: true,
+      updateBodyClass: false,
       // accessibility: true,
       globalInstance: true,
     }),

diff --git a/src/components/Copyright.astro b/src/components/Copyright.astro
@@ -21,35 +21,37 @@ const { title, published } = Astro.props;
 ---
 
 <div
-  class="relative fonts flex flex-col mt-8 py-4 px-4 rounded-lg justify-between bg-gray-100 dark:bg-[var(--background-color)] w-full h-36"
+  class="relative fonts mt-8 rounded-lg py-4 px-4 bg-gray-100 dark:bg-[var(--background-color)] w-full h-36"
 >
-  <div class="flex flex-col space-y-1 items-start">
-    <p class="text-[var(--text-color)] pl-1 font-bold">{title}</p>
-    <a
-      class="text-sm px-1 py-0.5 rounded-md transition-all hover:bg-[var(--primary-color-lighten)]"
-      id="post-url"
-      href=""></a>
-  </div>
-  <div class="flex flex-row space-x-8">
-    <div class="flex flex-col">
-      <span class="text-sm text-[var(--text-color-lighten)]">作者</span>
-      <p class="text-[var(--text-color)]">{YukinaConfig.Username}</p>
-    </div>
-    <div class="flex flex-col">
-      <span class="text-sm text-[var(--text-color-lighten)]">发布日期</span>
-      <p class="text-[var(--text-color)]">{formatDate(published)}</p>
-    </div>
-    <div class="flex flex-col">
-      <span class="text-sm text-[var(--text-color-lighten)]">许可协议</span>
+  <div class="absolute top-4 left-4 flex flex-col justify-between h-28 z-10">
+    <div class="flex flex-col space-y-1 items-start">
+      <p class="text-[var(--text-color)] pl-1 font-bold">{title}</p>
       <a
-        class="text-[var(--text-color)]"
-        href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
-        target="_blank">CC BY-NC-SA 4.0</a
-      >
+        class="text-sm px-1 py-0.5 rounded-md transition-all hover:bg-[var(--primary-color-lighten)]"
+        id="post-url"
+        href=""></a>
+    </div>
+    <div class="flex flex-row space-x-8">
+      <div class="flex flex-col">
+        <span class="text-sm text-[var(--text-color-lighten)]">作者</span>
+        <p class="text-[var(--text-color)]">{YukinaConfig.Username}</p>
+      </div>
+      <div class="flex flex-col">
+        <span class="text-sm text-[var(--text-color-lighten)]">发布日期</span>
+        <p class="text-[var(--text-color)]">{formatDate(published)}</p>
+      </div>
+      <div class="flex flex-col">
+        <span class="text-sm text-[var(--text-color-lighten)]">许可协议</span>
+        <a
+          class="text-[var(--text-color)]"
+          href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
+          target="_blank">CC BY-NC-SA 4.0</a
+        >
+      </div>
     </div>
   </div>
   <div
-    class="absolute flex right-8 top-1/2 -translate-y-1/2 overflow-hidden h-36"
+    class="absolute z-0 flex right-8 top-1/2 -translate-y-1/2 overflow-hidden h-36"
   >
     <i
       class="-translate-y-[66.6%] iconfont ic-creative-commons text-[230px] text-gray-300 dark:text-[var(--card-color)]"
@@ -67,23 +69,3 @@ const { title, published } = Astro.props;
     /* height: 9rem; */
   }
 </style>
-
-<script>
-  document.addEventListener("DOMContentLoaded", setupUrlAnchor);
-
-  if (window.swup?.hooks) {
-    setupUrlAnchor();
-  } else {
-    document.addEventListener("swup:enable", () => {
-      window.swup.hooks.on("page:view", setupUrlAnchor);
-    });
-  }
-
-  function setupUrlAnchor() {
-    const url = window.location.href;
-    const urlElement = document.getElementById("post-url") as HTMLAnchorElement;
-    if (!urlElement) return;
-    urlElement.href = url;
-    urlElement.innerText = url;
-  }
-</script>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -31,9 +31,9 @@ import { YukinaConfig } from "../../yukina.config";
       <a href="/about">
         <p>关于</p>
       </a>
-      <!-- <a href="/bangumi">
+      <a href="https://github.com/WhitePaper233/yukina">
         <p>Github</p>
-      </a> -->
+      </a>
     </div>
     <div class="toolbar">
       <div class="search">
@@ -56,6 +56,7 @@ import { YukinaConfig } from "../../yukina.config";
     transform: translateX(-50%);
     animation: 500ms nav-onload-animation;
     animation-delay: var(--onload-animation-delay);
+    animation-timing-function: ease-in;
   }
 
   .nav-hidden {

diff --git a/src/layouts/ArticleLayout.astro b/src/layouts/ArticleLayout.astro
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -9,7 +9,7 @@ import BaseHead from "../components/BaseHead.astro";
   </body>
 </html>
 
-<style lang="postcss">
+<style>
   body {
     @apply bg-[var(--background-color)];
   }

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -4,6 +4,8 @@ import NavBar from "../components/NavBar.astro";
 import Banner from "../components/Banner.astro";
 
 import { YukinaConfig } from "../../yukina.config";
+import Footer from "../components/Footer.astro";
+import SideBar from "../components/SideBar.astro";
 
 export interface Props {
   title?: string;
@@ -17,6 +19,7 @@ const props = Astro.props;
 
 <Base>
   <NavBar />
+
   {
     YukinaConfig.EnableBanner && (
       <Banner
@@ -27,16 +30,33 @@ const props = Astro.props;
       />
     )
   }
-  <main class="transition-main">
-    <div class="main-container transition-leaving my-10">
-      <slot />
+
+  <div class="main-container my-10">
+    <div class="flex flex-row xl:space-x-4 items-start">
+      <div class="side-bar">
+        <SideBar />
+      </div>
+      <div class="space-y-10 w-full transition-leaving">
+        <main class="content onload-animation">
+          <slot />
+        </main>
+        <Footer />
+      </div>
     </div>
-  </main>
+  </div>
 </Base>
 
-<style lang="postcss">
-.main-container {
-  @apply w-full md:w-[80%] lg:w-[var(--page-width-lg)] xl:w-[var(--page-width-xl)];
-  @apply md:mx-auto;
-}
+<style>
+  .main-container {
+    @apply w-full md:max-w-[80%] md:min-w-[80%] lg:min-w-[var(--page-width-lg)] lg:max-w-[var(--page-width-lg)]  xl:max-w-[var(--page-width-xl)] xl:min-w-[var(--page-width-xl)];
+    @apply md:mx-auto;
+  }
+
+  .side-bar {
+    @apply hidden min-w-[248px] xl:block;
+  }
+
+  .content {
+    @apply w-[1016px];
+  }
 </style>
diff --git a/src/layouts/PostArchiveLayout.astro b/src/layouts/PostArchiveLayout.astro
@@ -25,46 +25,31 @@ const { archiveMap, title, subTitle, headerImg, hashedSlug } = Astro.props;
 	headerImg={headerImg}
 	hashedSlug={hashedSlug}
 >
-	<div class="flex flex-row xl:space-x-4 items-start">
-		<div class="side-bar">
-			<SideBar />
-		</div>
-		<div class="space-y-10 w-full">
-			<div class="archives onload-animation">
-				{
-					archiveMap.keys().map((year) => (
-						<div>
-							<ArchiveYearTitle
-								year={year}
-								count={archiveMap.get(year)!.length}
-							/>
-							<ul>
-								{archiveMap.get(year)?.map((entry) => (
-									<li>
-										<ArchivePost
-											slug={entry.slug}
-											title={entry.title}
-											pubilished={entry.date}
-											tags={entry.tags}
-										/>
-									</li>
-								))}
-							</ul>
-						</div>
-					))
-				}
-			</div>
-			<Footer />
-		</div>
+	<div class="archives">
+		{
+			archiveMap.keys().map((year) => (
+				<div>
+					<ArchiveYearTitle year={year} count={archiveMap.get(year)!.length} />
+					<ul>
+						{archiveMap.get(year)?.map((entry) => (
+							<li>
+								<ArchivePost
+									slug={entry.slug}
+									title={entry.title}
+									pubilished={entry.date}
+									tags={entry.tags}
+								/>
+							</li>
+						))}
+					</ul>
+				</div>
+			))
+		}
 	</div>
 </Main>
 
 <style>
-	.side-bar {
-		@apply hidden min-w-[248px] xl:block;
-	}
-
 	.archives {
-		@apply bg-[var(--card-color)] p-10 rounded-2xl shrink flex flex-col w-full space-y-4;
+		@apply min-w-full max-w-full flex flex-col bg-[var(--card-color)] p-10 rounded-2xl;
 	}
 </style>
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
@@ -0,0 +1,35 @@
+---
+import Main from "../layouts/MainLayout.astro";
+import Markdown from "../components/Markdown.astro";
+import Copyright from "../components/Copyright.astro";
+
+interface Props {
+  title?: string;
+  subTitle?: string;
+  headerImg?: string;
+  published?: Date;
+}
+
+const { title, subTitle, headerImg, published } = Astro.props;
+---
+
+<Main title={title} subTitle={subTitle} headerImg={headerImg}>
+  <!-- <Fragment set:html={tocHTMLString} /> -->
+  <div class="article-wrapper">
+    <div class="article">
+      <Markdown>
+        <slot />
+      </Markdown>
+      {published && title && <Copyright title={title} published={published} />}
+    </div>
+  </div>
+</Main>
+
+<style>
+  .article-wrapper {
+    @apply w-full bg-[var(--card-color)] p-10 rounded-2xl;
+  }
+  .article {
+    @apply flex flex-col;
+  }
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ import BaseHead from "../components/BaseHead.astro"; @@
       </body>
     </html>
-    <style lang="postcss">
+    <style>
       body {
         @apply bg-[var(--background-color)];
       }
@@ Expand Down @@