本页面的翻译由 LLM 生成。如果你发现翻译有误,请在 GitHub 上提交 issue 告诉我们。

快速开始

本快速入门将带你完成创建第一个自定义页面并将 varsha 站点准备好部署的步骤。假设你已经安装了 varsha。

1. 启动开发服务器

如果开发服务器尚未运行，启动它：

npm run dev

在浏览器中打开 http://localhost:4321，你应该能看到 varsha 的首页。

2. 更新站点元数据

打开 astro.config.mjs 并更新站点配置以匹配你的品牌：

export default defineConfig({
  site: 'https://your-domain.com', // 替换为你的域名
  // ...
  integrations: [
    sitemap(),
    starlight({
      title: 'Your Product Name',
      description: 'A short description of your product or service.',
      // ...
    }),
  ],
});

3. 创建第一个页面

在 src/pages/about.astro 创建一个新文件：

---
import MarketingLayout from '../components/MarketingLayout.astro';
---

<MarketingLayout
  title="About Us"
  description="Learn about our company and mission."
  canonicalPath="/about/"
>
  <main class="page">
    <section class="hero">
      <h1>About Us</h1>
      <p>We build tools that help people ship faster.</p>
    </section>

    <section class="section">
      <div class="container">
        <h2>Our Mission</h2>
        <p>
          This is your first custom page. Edit it freely — add sections,
          components, images, and whatever else your site needs.
        </p>
      </div>
    </section>
  </main>
</MarketingLayout>

访问 http://localhost:4321/about 查看新页面。它将自动继承站点页眉、页脚、主题切换器和 “Built with varsha” 署名。

4. 添加导航链接

打开 src/components/MarketingLayout.astro，在导航中添加新页面的链接：

<div class="nav-links">
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <!-- 现有链接 -->
</div>

记得同时更新移动端导航面板（.nav-menu-panel）以保持桌面和移动端导航同步。

5. 尝试主题

在任意页面按 / 或 t 键打开主题切换器。varsha 内置 18+ 主题：

Tokyo Night（默认深色）/ Tokyo Day（默认浅色）
Catppuccin / Catppuccin Latte
Nord
Dracula
Gruvbox / Gruvbox Light
Kanagawa / Kanagawa Lotus
Rose Pine / Rose Pine Dawn
等等

你选择的主题会保存在 localStorage 中，跨会话保持。

6. 添加博客文章

在 src/content/blog/my-first-post.md 创建一篇新博客文章：

---
title: "My First Post"
description: "Hello world from my varsha site."
pubDate: "2025-01-15"
---

Welcome to my blog! This is my first post powered by varsha.

## What's next

- Write more posts
- Customize the design
- Deploy to production