测试文章

1. 项目部署与初始化 (Git Setup)

目标：将公开模板转为私有仓库并部署到本地。

  • 操作：
    1. git clone 下来代码。
    2. 删除原有的 .git 文件夹（断开与原作者的关联）。
    3. git init 初始化新仓库。
    4. 在 GitHub 创建私有仓库。
    5. git remote add origin <你的仓库地址> 并推送代码。
  • 依赖安装：运行了 npm install (忽略了警告信息)。

2. 全局样式修改 (CSS)

目标：隐藏所有页面的滚动条，但保留滚动功能。

  • 修改文件：src/styles/global.css (或 main.scss)
  • 改动内容：添加了隐藏滚动条的 CSS 代码。 
    ::-webkit-scrollbar { display: none; }
html, body { -ms-overflow-style: none; scrollbar-width: none; }

3. 首页功能修复 (Home)

目标：修复首页 Banner 按钮点击后“跳出新标签页”的问题。

  • 修改文件：src/layouts/components/Banner.astro (或首页调用的组件)
  • 改动内容：
    • 找到了 <Button ... /> 组件。
    • 删除了 newtab 属性（这个属性会导致 target="_blank"）。

4. 新增功能：归档页面 (Archive Page) —— 核心改动

目标：创建一个按时间倒序排列、包含所有文章、风格与博客一致的归档页。

  • 创建文件：src/pages/archive/index.astro

  • 最终代码逻辑：

    1. 引入组件：使用 @components/common/PageHeader.astro 以保持标题风格一致；使用 @layouts/Base.astro 作为基础布局。
    2. 数据获取：使用 getCollection("blog") 获取文章。
    3. 数据清洗：
      • 使用 .filter 剔除 -index 开头的文件（避免把博客说明文件显示出来）。
      • 使用 post.id 替代 post.slug（修复了 Astro 5.0 Content Layer 报错）。
    4. UI 样式：
      • 容器：使用了主题自带的 class="glass"，实现了完美的磨砂玻璃+边框效果。
      • 标题：使用了 <PageHeader /> 组件，实现了与博客页面完全一致的大标题 UI。
      • 列表：去掉了左侧垂直线，将圆圈改为“实心小灰点”，并完美对齐了文字。

  • 最终代码存档：

    ---
import Layout from "@layouts/Base.astro";
import PageHeader from "@components/common/PageHeader.astro";
import { getCollection } from "astro:content";

const posts = await getCollection("blog");
const sortedPosts = posts
  .filter(post => !post.id.startsWith("-index") && !post.id.includes("/-index"))
  .sort((a, b) => {
    const dateA = a.data.date ? new Date(a.data.date).valueOf() : 0;
    const dateB = b.data.date ? new Date(b.data.date).valueOf() : 0;
    return dateB - dateA;
  });

function formatDate(date: Date | undefined) {
  if (!date) return "";
  return new Date(date).toLocaleDateString("zh-CN", {
    year: "numeric", month: "2-digit", day: "2-digit"
  });
}
---

<Layout title="文章归档">
  <PageHeader title="文章归档" />
  <section class="section">
    <div class="container max-w-4xl mx-auto px-4">
      <div class="glass p-8 sm:p-12 rounded-lg intersect:animate-fadeUp">
        {sortedPosts.length === 0 ? (
           <p class="text-center text-gray-500 py-4">暂无文章</p>
        ) : (
          <div class="relative ml-2 space-y-1">
            {sortedPosts.map((post) => (
              <div class="ml-6 relative group">
                <span class="absolute -left-6 top-[22px] h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-600 group-hover:bg-primary transition-colors duration-300"></span>
                <a href={`/blog/${post.id}`} class="block p-3 -mx-3 rounded-lg hover:bg-body/50 dark:hover:bg-darkmode-body/50 transition-colors duration-200">
                  <div class="flex items-center justify-between gap-4">
                    <h3 class="text-lg font-medium text-text dark:text-darkmode-text group-hover:text-primary transition-colors">
                      {post.data.title}
                    </h3>
                    <div class="hidden sm:block flex-1 mx-4 border-b border-dotted border-border opacity-50 relative top-1"></div>
                    <time class="text-sm font-mono text-light dark:text-darkmode-light whitespace-nowrap">
                      {formatDate(post.data.date)}
                    </time>
                  </div>
                </a>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  </section>
</Layout>

5. 导航栏配置 (Menu)

目标：在顶部菜单添加“归档”入口。

  • 修改文件：src/config/menu.json (或类似的配置文件)
  • 改动内容：
    • 新增了一个对象。
    • 修正点：最初使用了错误的 key (path)，导致点击无效；后来修正为与文件中其他项一致的 key（如 url、href 或 link）。
    {
  "name": "归档",
  "url": "/archive"  // 确保这里是 /archive 且属性名正确
}

6. 社交图标 (Social Icons)

目标：添加或修改社交媒体图标（如 Bilibili）。

  • 修改文件：
    1. 配置数据：src/config/social.json (或 consts.ts) -> 修改链接和名称。
    2. 图标组件：src/components/SocialIcon.tsx (或类似文件)。
  • 改动内容：
    • 导入新图标：import { SiBilibili } from "react-icons/si";
    • 添加 Case 判断：case "Bilibili": return <SiBilibili ... />

日常更新流程

以后每次写完文章或修改配置，只需执行以下 3 步（使用 VS Code 界面或命令均可）：

  1. 本地预览： pnpm dev (确认无误后 Ctrl+C 停止)

  2. 提交代码：

    git add .
git commit -m "更新了文章"

  3. SSH 推送：

    git push

    (配置好 SSH 后，这一步无需输入密码，直接成功)

EdgeOne 会自动检测推送并更新网站。

总结

你现在的项目已经是一个功能完善、且拥有自定义归档页面的 Astro 博客了。后续如果想修改样式，重点关注 global.css 里的 .glass 类，或者直接修改 src/pages/archive/index.astro 即可。

相关文章

图片测试

这是一篇测试文章

测试文章01

这是一篇测试文章