教程：博客搭建--在你的网站上添加、设计和链接页面

overlookart · Feb 21, 2024 · 11c9ebf · 11c9ebf
1 parent 387dfdf
commit 11c9ebf
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 3 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,17 +1,74 @@
-<html lang="zh-cn">
+---
+
+import '../styles/global.css'
+
+const pageTitle = "关于我"
+
+const identity = {
+    firstName: "莎拉",
+    country: "加拿大",
+    occupation: "技术撰稿人",
+    hobbies: ["摄影", "观鸟", "棒球"],
+}
+
+const skills = ["Swift","HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
+
+const happy = true;
+const finished = false;
+const goal = 3;
+
+// css 变量
+const skillColor = "navy";
+const fontWeight = "bold";
+const textCase = "uppercase";
+---
+
+</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>Astro</title>
+    <style define:vars={{skillColor, fontWeight, textCase}}>
+        h1 {
+            color: purple;
+            font-size: 4rem;
+        }
+
+        .skill {
+            color: var(--skillColor);
+            font-weight: var(--fontWeight);
+            text-transform: var(--textCase);
+        }
+    </style>
   </head>
   <body>
     <a href="/ArtWebsite/">首页</a>
     <h1>我的 Astro 网站</h1>
-    <h1>关于我</h1>
+    <h1>{pageTitle}</h1>
+
     <h2>……和我的新 Astro 网站！</h2>
     <p>我正在学习 Astro 的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！</p>
     <p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！</p>
+
+    {happy && <p>我非常乐意学习 Astro！</p>}
+
+    {finished && <p>我完成了这节教程！</p>}
+
+    {goal === 3 ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}
+
+    <p>以下是关于我的几个事实：</p>
+    <ul>
+    <li>我的名字是{identity.firstName}.</li>
+    <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
+    {identity.hobbies.length >= 2 &&
+        <li>我的两个习惯：{identity.hobbies[0]}和{identity.hobbies[1]}</li>
+    }
+    </ul>
+    <p>我的技能是：</p>
+    <ul>
+    {skills.map((skill) => <li class="skill">{skill}</li>)}
+    </ul>
   </body>
 </html>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,3 +1,7 @@
+---
+import '../styles/global.css'
+---
+
 <html lang="zh-cn">
   <head>
     <meta charset="utf-8" />
@@ -9,8 +13,12 @@
   <body>
     <a href="/ArtWebsite/">首页</a>
     <a href="/ArtWebsite/about/">关于</a>
-    <h1>我的 Astro 网站</h1>
     <h1>我的 Astro 学习博客</h1>
     <p>在这里，我将分享我的学习 Astro 之旅。</p>
+    <ul>
+        <li><a href="/ArtWebsite/posts/post-1/">文章 1</a></li>
+        <li><a href="/ArtWebsite/posts/post-2/">文章 2</a></li>
+        <li><a href="/ArtWebsite/posts/post-3/">文章 3</a></li>
+      </ul>
   </body>
 </html>
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
@@ -0,0 +1,28 @@
+---
+title: '我的第一篇博客文章'
+pubDate: 2022-07-01
+description: '这是我 Astro 博客的第一篇文章。'
+author: 'Astro 学习者'
+image:
+    url: 'https://docs.astro.build/assets/full-logo-light.png'
+    alt: 'The full Astro logo.'
+tags: ["astro", "blogging", "learning in public"]
+---
+
+# 我的第一篇博客文章
+
+ 发表于：2022-07-01
+
+ 欢迎来到我学习关于 Astro 的新博客！在这里，我将分享我建立新网站的学习历程。
+
+ ## 我做了什么
+
+ 1. **安装 Astro**：首先，我创建了一个新的 Astro 项目并设置好了我的在线账号。
+
+ 2. **制作页面**：然后我学习了如何通过创建新的 `.astro` 文件并将它们保存在 `src/pages/` 文件夹里来制作页面。
+
+ 3. **发表博客文章**：这是我的第一篇博客文章！我现在有用 Astro 编写的页面和用 Markdown 写的文章了！
+
+ ## 下一步计划
+
+ 我将完成 Astro 教程，然后继续编写更多内容。关注我以获取更多信息。
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
@@ -0,0 +1,11 @@
+---
+title: 我的第二篇博客文章
+author: Astro 学习者
+description: "学习了一些 Astro 后，我根本停不下来！"
+image:
+    url: "https://docs.astro.build/assets/arc.webp"
+    alt: "Thumbnail of Astro arcs."
+pubDate: 2022-07-08
+tags: ["astro", "blogging", "learning in public", "successes"]
+---
+在学习 Astro 大约一周后，我决定尝试些新的东西。我编写并导入了一个小组件！
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
@@ -0,0 +1,11 @@
+---
+title: 我的第三篇博客文章
+author: Astro 学习者
+description: "我遇到了一些问题，但是在社区里面提问真的很有帮助！"
+image:
+    url: "https://docs.astro.build/assets/rays.webp"
+    alt: "Thumbnail of Astro rays."
+pubDate: 2022-07-15
+tags: ["astro", "learning in public", "setbacks", "community"]
+---
+尽管这并不总是一帆风顺，但我很享受使用 Astro 进行搭建。并且，[Discord 社区](https://astro.build/chat)真的很友好而且乐于助人！
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,21 @@
+html {
+    background-color: #f1f5f9;
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 80ch;
+    padding: 1rem;
+    line-height: 1.5;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  h1 {
+    margin: 1rem 0;
+    font-size: 2.5rem;
+  }