从零开始搭建个人博客

v25.6.0  # Node.js 版本
11.9.0     # npm 版本

http://localhost:4321/

import sitemap from "@astrojs/sitemap";
import { minify } from '@zokki/astro-minify';

export default defineConfig({
  site: siteConfig.rootSiteUrl || 'https://example.com', // Root URL of site
  i18n: {
    locales: i18nConfig.supportedLanguages,
    defaultLocale: i18nConfig.defaultLanguage,
    routing: {
      prefixDefaultLocale: false,
      redirectToDefaultLocale: false
    }
  },
  integrations: [icon({
    include: {
      "fa6-brands": ["*"],
      "fa6-solid": ["*"],
      "simple-icons": ["*"],
      "vscode-icons": ["*"],
      "material-symbols": ["*"],
      "fluent": ["*"],
    }
  }), svelte(),sitemap(), minify(),

export const siteConfig: SiteConfig = {
    title: "example", // Title of the site, used in the tab in the browser and in SEO
    subTitle: "Blog", // Subtitle of the site
    rootSiteUrl: "https://example.com", // Root URL of the site, used for generating absolute URLs for SEO and social sharing

    favicon: "/favicon/favicon.ico", // Path of the favicon, relative to the /public directory

    pageSize: 6, // Number of posts per page
    toc: {
        enable: true,
        depth: 3 // Max depth of the table of contents, between 1 and 4
    },
    blogNavi: {
        enable: true // Whether to enable blog navigation in the blog footer
    },
    comments: {
        enable: false, // Whether to enable comments
        platform: "default", // Comment platform, set "default" to use Momo-backend, also supports "twikoo"
        backendUrl: "https://api-momo.motues.top" // Backend URL for comments
    },
    theme: {
        AOS: true, // Whether to enable AOS (Animate On Scroll) for animations
        LQIP: true, // Whether to enable LQIP (Low-Quality Image Placeholder) for image placeholders
        PhotoSwipe: true, // Whether to enable PhotoSwipe for image viewer
        imageCollage: {
            enable: true, // Whether to automatically arrange consecutive images into a grid (collage)
            maxColumns: 4 // Max images per row in a collage (2 - 6); the actual number is chosen automatically
        },
        postCard: {
            imageMode: "top" // Cover image mode for article cards: "top" shows the image above the content; "background" uses the image as the card background, fading to transparent from right to left
        },
        photoCover: {
            enable: false, // Whether to use a full-screen photo as the background of the home page; the title and subtitle are centered, and everything smoothly returns to the normal style as you scroll down
            image: "/cover.jpg", // Photo path: relative to the /public directory if it starts with '/', otherwise relative to the /src directory (e.g. assets/cover.jpg). The blurred placeholder is generated at build time, so there is no small image to prepare by hand
            mask: 0.5 // Opacity (0 - 1) of the black mask over the photo, fading away as you scroll down
        },
        overlayScrollbars: {
            enable: true, // Whether to replace the browser's default scrollbar with OverlayScrollbars (overlay style, can auto-hide)
            autoHide: "leave", // When to hide the scrollbar: "never" always visible; "scroll" hidden unless scrolling; "move" hidden unless the pointer moves over the page or the user scrolls; "leave" hidden when the pointer leaves the page or the user isn't scrolling
            size: 8 // Scrollbar thickness in pixels
        }
    },
    expressiveCode: {
        enable: true, // Whether to enable Expressive Code for code blocks; when false, code blocks fall back to plain text without highlighting (same in the CMS preview)
        theme: "one-dark-pro" // Shiki theme of code blocks, e.g. "one-dark-pro", "github-dark", "vitesse-dark"; one theme is used for both light and dark mode
    }
}

export const profileConfig: ProfileConfig = {
    avatar: "assets/avatar.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
    name: "example", // Used in the footer of the blog
    description: "example", // Used in SEO
    indexPage: "https://github.com/example", // The homepage, used in footer and SEO
    startYear: 2025, // The year the site was created, used in the footer
}

export const i18nConfig: I18nConfig = {
    defaultLanguage: "zh-cn", // Default language of the site
    supportedLanguages: ["zh-cn", "en"], // List of supported languages
    translations: { // Translation content for each supported language
        "zh-cn": {
            Cover: {
                title: {
                    home: "欢迎来到我的博客！",
                    archive: "文章归档",
                    about: "关于",
                    friends: "友链",
                },
                subTitle: {
                    home: "example",
                    archive: "共 {count} 篇文章", // {count} will be replaced with the total number of articles
                    about: "",
                    friends: "",
                }
            }
        },
        "en": {
            Cover: {
                title: {
                    home: "Welcome to My Blog!",
                    archive: "Archive",
                    about: "About",
                    friends: "Friends",
                },
                subTitle: {
                    home: "example",
                    archive: "Total of {count} articles",
                    about: "",
                    friends: "",
                }
            }
        }
    }
};

        <!-- Dark Mode
        <ThemeIcon class="flex items-center justify-center w-10 h-10 hover:bg-[var(--button-hover-color)] rounded-lg hover:text-current active:scale-90 border border-[var(--button-border-color)] transition duration-300"/>
         -->

  function updateNavBar() {
    ticking = false;
    const y = window.scrollY;
    if (y === lastScrollY) return;
    lastScrollY = y;
    if (!navBar || !navBarList) return;
    const scrolled = false;
    navBar.classList.toggle('fixed', scrolled);
    // 外壳（描边 / 底色 / 阴影 / 模糊）全部由 --nav-chrome 派生，这里只负责翻状态：
    //   0 = 顶部，只有文字与当前页色块（没有边框、没有底色）
    //   1 = 吸顶，完整毛玻璃胶囊
    // photo-cover.css 会把照片封面页的这个变量换成滚动进度 --photo-p，
    // 于是首页是逐帧插值，而不是滚一像素就硬切 —— 所以状态类仍然要照常维护。
    // 打在两层上是同一个状态的两个落点：#nav-bar 供 photo-cover.css 覆盖，
    // #nav-bar-list 是外壳本身，两行都由这只 updateNavBar() 幂等对账。
    navBar.classList.toggle('nav-scrolled', scrolled);
    navBarList.classList.toggle('nav-scrolled', scrolled);
  }

    page404: {
        title: "404",
        subTitle: "page not found or removed",
        backToHome: "Home",
        backToPreview: "Previous Page",
        errorCode: "Error Code: 404",
        notice: "Perhaps you can try:"
    },

    page404: {
        title: "404",
        subTitle: "页面不存在或已被移除",
        backToHome: "返回首页",
        backToPreview: "返回上一页",
        errorCode: "错误代码：404",
        notice: "或许你可以尝试："
    },

<MainPageLayout title={pageTitle} lang="zh-CN">
    <div class="mx-auto w-full max-w-[var(--page-width)] px-4 text-center">
        <div class="my-8">
            <h1 class="text-7xl md:text-8xl font-bold text-black dark:text-white mb-2">{t("page404.title")}</h1>
            <p class="text-xl md:text-2xl text-[var(--text-color-80)]">{t("page404.subTitle")}</p>
        </div>

        <div class="mt-8 flex flex-col items-center">
            <p class="text-[var(--text-color-70)]">{t("page404.notice")}</p>
            <div class="mt-4 flex gap-4">
                <a href={indexPage}
                class="px-6 py-2 border border-[var(--button-border-color)] rounded-lg text-[var(--text-color)] hover:bg-[var(--button-hover-color)] transition-all">
                    {t("page404.backToHome")}
                </a>
                <a href="javascript:history.back()"
                class="px-6 py-2 border border-[var(--button-border-color)] rounded-lg text-[var(--text-color)] hover:bg-[var(--button-hover-color)] transition-all">
                    {t("page404.backToPreview")}
                </a>
            </div>
        </div>
    </div>
</MainPageLayout>

src/content/blog/hello-world/
└── zh-cn.md

---
title: hello-world
pubDate: 2026-10-18
description: ""
image: ""
draft: false
slugId: hello-world
category: ""
pinTop: 0
---
## hello-world

在这里开始写作…

http://localhost:4321/