学习 Astro

overlookart · Oct 27, 2024 · 5f3444e · 5f3444e
1 parent da10892
commit 5f3444e
Show file tree

Hide file tree

Showing 27 changed files with 5,971 additions and 26,467 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -9,5 +9,6 @@ export default defineConfig({
   site: 'https://overlookart.github.io',
   base: '/ArtWebsite',
   // 集成
-  integrations: [vue(), tailwind(), db()]
+  integrations: [vue({devtools: true}), tailwind(), db()],
+  renderers: ['@astrojs/renderer-vue'],
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Astro/Background.astro b/src/components/Astro/Background.astro
@@ -0,0 +1,2 @@
+
+<div class=" bg-center bg-no-repeat bg-cover fixed top-0 -z-10 w-full h-full bg-sitebg"></div>
diff --git a/src/components/BlogPost.astro → src/components/Astro/BlogPost.astro b/src/components/BlogPost.astro → src/components/Astro/BlogPost.astro
diff --git a/src/components/Card.astro → src/components/Astro/Card.astro b/src/components/Card.astro → src/components/Astro/Card.astro
diff --git a/src/components/Footer.astro → src/components/Astro/Footer.astro b/src/components/Footer.astro → src/components/Astro/Footer.astro
diff --git a/src/components/Astro/Head.astro b/src/components/Astro/Head.astro
@@ -0,0 +1,14 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+
+const { title } = Astro.props;
+---
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    <ViewTransitions />
+</head>
diff --git a/src/components/Astro/Header.astro b/src/components/Astro/Header.astro
@@ -0,0 +1,9 @@
+---
+import Navigation from '../Astro/Navigation.astro'
+---
+
+<header>
+    <nav>
+        <Navigation/>
+    </nav>
+</header>
diff --git a/src/components/Navigation.astro → src/components/Astro/Navigation.astro b/src/components/Navigation.astro → src/components/Astro/Navigation.astro
@@ -1,5 +1,5 @@
 ---
-import '../styles/global.css'
+import '../../styles/global.css'
 ---
 <div class="nav-links">
     <a href="/ArtWebsite/">首页</a>

diff --git a/src/components/Social.astro → src/components/Astro/Social.astro b/src/components/Social.astro → src/components/Astro/Social.astro
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
diff --git a/src/components/Header.astro b/src/components/Header.astro
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1 +1,3 @@
+/// <reference path="../.astro/db-types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -1,39 +1,35 @@
 ---
-import Header from "../components/Header.astro";
-import Footer from "../components/Footer.astro";
+import Head from "../components/Astro/Head.astro";
+import Background from "../components/Astro/Background.astro";
+import Header from "../components/Astro/Header.astro";
+import Footer from "../components/Astro/Footer.astro";
+import { ViewTransitions } from 'astro:transitions';
 import '../styles/global.css'
 const { pageTitle } = Astro.props
 ---
-
+<!DOCTYPE html>
 <html lang="zh-cn">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <meta name="viewport" content="width=device-width" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{pageTitle}</title>
-    </head>
+    <Head />
     <body>
+        <Background />
+        <script type="module" src="/src/scripts/main.js"></script>
         <Header />
-        <h1>{pageTitle}</h1>
-        <slot />
-        <Footer />
-        <script>
-        import "../scripts/menu.js";
-        </script>
+        <div class="container mx-auto">
+            <div class="flex h-screen shadow-gray-600 py-4">
+                <div class="flex-none py-2 backdrop-blur-md bg-white/5 rounded-l-lg w-[215px]" style="box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.1);">
+                    <p>可被其他模版覆盖的左侧内容</p>
+                </div>
+                <div id="content" class="flex flex-col grow backdrop-blur-md bg-white/0 rounded-r-lg" style="box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.1);">
+                    <div class="overflow-scroll flex">
+                        <div class="grow">
+                            <slot></slot>
+                        </div>
+                        <div class="w-[215px] h-full mx-auto overflow-scroll">
+                            <p>请使用 block "rightSideBar" 定义右侧内容</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </body>
 </html>
-
-<style is:global>
-    :root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-</style>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -0,0 +1,19 @@
+---
+import BaseLayout from './BaseLayout.astro';
+const { frontmatter } = Astro.props;
+---
+<BaseLayout pageTitle={frontmatter.title}>
+  <p><em>{frontmatter.description}</em></p>
+  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
+
+  <p>Written by: {frontmatter.author}</p>
+
+
+  <div class="flex">
+    {frontmatter.tags.map((tag) => (
+      <p class="m-1 border-[1px] border-x-cyan-100 rounded-md px-2"><a href={`/tags/${tag}`}>{tag}</a></p>
+    ))}
+  </div>
+
+  <slot />
+</BaseLayout>
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,7 +1,7 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro'
-import BlogPost from '../components/BlogPost.astro';
-const allPosts = await Astro.glob('../pages/posts/*.md');
+import BlogPost from '../components/Astro/BlogPost.astro';
+const allPosts = await Astro.glob('../pages/posts/**/*.md');
 const pageTitle = '我的 Astro 学习博客'
 ---
 <BaseLayout pageTitle={pageTitle}>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import Card from '../components/Card.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 const pageTitle = "首页"
 ---
@@ -10,77 +9,4 @@ const pageTitle = "首页"
 		To get started, open the directory <code>src/pages</code> in your project.<br />
 		<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
 	</p>
-	<ul role="list" class="link-card-grid">
-		<Card
-			href="https://docs.astro.build/"
-			title="Documentation"
-			body="Learn how Astro works and explore the official API docs."
-		/>
-		<Card
-			href="https://astro.build/integrations/"
-			title="Integrations"
-			body="Supercharge your project with new frameworks and libraries."
-		/>
-		<Card
-			href="https://astro.build/themes/"
-			title="Themes"
-			body="Explore a galaxy of community-built starter themes."
-		/>
-		<Card
-			href="https://astro.build/chat/"
-			title="Community"
-			body="Come say hi to our amazing Discord community. ❤️"
-		/>
-	</ul>
 </BaseLayout>
-
-
-<style>
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-</style>
diff --git a/src/pages/posts/Astro/Start.md b/src/pages/posts/Astro/Start.md
@@ -0,0 +1,18 @@
+---
+layout: '../../../layouts/MarkdownLayout.astro'
+title: 'Astro 的开始之旅'
+pubDate: 2024-10-27
+description: '这是将记录 Astro 环境搭建、使用、以及遇到的问题的学习笔记。'
+author: 'Astro 学习者'
+tags: ["astro", "blogging", "learning in public"]
+---
+
+# Hello, Astro!  
+
+这是我的第一篇文章，欢迎来到 Astro 的世界！
+
+## 搭建 Astro 环境
+
+> 1. 安装 Node.js `v18.17.1` 或 `20.3.0` 或更高版本。不支持 ～～v19～～  
+> 2. 编辑器：推荐使用 VS Code 并安装 Astro 的官方扩展
+> 3. 安装 Astro CLI `npm install -g astro`  
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
@@ -1,5 +1,5 @@
 ---
-layout: '../../layouts/MarkdownPostLayout.astro'
+layout: '../../layouts/MarkdownLayout.astro'
 title: '我的第一篇博客文章'
 pubDate: 2022-07-01
 description: '这是我 Astro 博客的第一篇文章。'

diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
@@ -1,5 +1,5 @@
 ---
-layout: '../../layouts/MarkdownPostLayout.astro'
+layout: '../../layouts/MarkdownLayout.astro'
 title: 我的第二篇博客文章
 author: Astro 学习者
 description: "学习了一些 Astro 后，我根本停不下来！"

diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
@@ -1,5 +1,5 @@
 ---
-layout: '../../layouts/MarkdownPostLayout.astro'
+layout: '../../layouts/MarkdownLayout.astro'
 title: 我的第三篇博客文章
 author: Astro 学习者
 description: "我遇到了一些问题，但是在社区里面提问真的很有帮助！"

diff --git a/src/pages/posts/post-4.md b/src/pages/posts/post-4.md
@@ -1,5 +1,5 @@
 ---
-layout: '../../layouts/MarkdownPostLayout.astro'
+layout: '../../layouts/MarkdownLayout.astro'
 title: '我的第四篇博客文章'
 author: 'Astro 学习者'
 description: "这篇文章会自己出现在列表中！"

diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
@@ -1,6 +1,6 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import BlogPost from '../../components/BlogPost.astro';
+import BlogPost from '../../components/Astro/BlogPost.astro';
 
 export async function getStaticPaths() {
     const allPosts = await Astro.glob('../posts/*.md');

diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -0,0 +1 @@
+console.debug('加载主脚本')
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		<div class=" bg-center bg-no-repeat bg-cover fixed top-0 -z-10 w-full h-full bg-sitebg"></div>