diff --git a/astro.config.mjs b/astro.config.mjs index 0dbd924..77d4156 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,11 +1,13 @@ -// @ts-check - -import mdx from '@astrojs/mdx'; -import sitemap from '@astrojs/sitemap'; import { defineConfig } from 'astro/config'; -// https://astro.build/config export default defineConfig({ - site: 'https://example.com', - integrations: [mdx(), sitemap()], + site: 'https://gallery.yourdomain.com', + // 或者如果是主域名：'https://yourdomain.com' + + // 图片优化 + image: { + service: { + entrypoint: 'astro/assets/services/sharp' + } + } }); diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..823138a --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,37 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + {title} + + + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 55caf7e..20a96b4 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,49 +1,632 @@ --- -import BaseHead from '../components/BaseHead.astro'; -import Footer from '../components/Footer.astro'; -import Header from '../components/Header.astro'; -import { SITE_DESCRIPTION, SITE_TITLE } from '../consts'; +import Layout from '../layouts/Layout.astro'; + +// Hero 大画幅展示图片 +const heroImage = { + src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=2400&h=1600&fit=crop', + title: '视界之外', + subtitle: '每一次快门，都是时间的诗', +}; + +// 展示作品集合 - 支持不同布局类型 +const sections = [ + { + type: 'full-bleed', // 全出血大图 + image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=2000&h=1200&fit=crop', + title: '山川湖海', + description: '在自然中寻找内心的宁静', + align: 'left' + }, + { + type: 'dual', // 双图并排 + images: [ + { + src: 'https://images.unsplash.com/photo-1514565131-fce0801e5785?w=1000&h=1200&fit=crop', + title: '都市脉搏', + description: '霓虹闪烁的夜晚' + }, + { + src: 'https://images.unsplash.com/photo-1511988617509-a57c8a288659?w=1000&h=1200&fit=crop', + title: '人间烟火', + description: '最真实的生活瞬间' + } + ] + }, + { + type: 'stacked', // 层叠卡片 + images: [ + { + src: 'https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&h=800&fit=crop', + title: '几何诗篇', + offset: { x: 0, y: 0, rotate: -2 } + }, + { + src: 'https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=1200&h=800&fit=crop', + title: '色彩交响', + offset: { x: 40, y: 40, rotate: 3 } + }, + { + src: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1200&h=800&fit=crop', + title: '海天一色', + offset: { x: 80, y: 80, rotate: -1 } + } + ] + }, + { + type: 'grid', // 网格展示 + images: [ + { src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&h=800&fit=crop', span: 'large' }, + { src: 'https://images.unsplash.com/photo-1682687221038-404670f09439?w=600&h=600&fit=crop' }, + { src: 'https://images.unsplash.com/photo-1682687220063-4742bd7fd538?w=600&h=600&fit=crop' }, + { src: 'https://images.unsplash.com/photo-1682687220923-c58b9a4592ae?w=600&h=600&fit=crop' }, + { src: 'https://images.unsplash.com/photo-1682687221080-5cb261c645cb?w=600&h=600&fit=crop' }, + ] + }, + { + type: 'full-bleed', + image: 'https://images.unsplash.com/photo-1682687220015-186f63b8850a?w=2000&h=1200&fit=crop', + title: '时光印记', + description: '定格永恒的瞬间', + align: 'right' + } +]; --- - - - - - - -
-
-

🧑‍🚀 Hello, Astronaut!

-

- Welcome to the official Astro blog starter template. This - template serves as a lightweight, minimally-styled starting point for anyone looking to build - a personal website, blog, or portfolio with Astro. -

-

- This template comes with a few integrations already configured in your - astro.config.mjs file. You can customize your setup with - Astro Integrations to add tools like Tailwind, - React, or Vue to your project. -

-

Here are a few ideas on how to get started with the template:

-
    -
  • Edit this page in src/pages/index.astro
    • -
  • Edit the site header items in src/components/Header.astro
    • -
  • Add your name to the footer in src/components/Footer.astro
    • -
  • Check out the included blog posts in src/content/blog/
    • -
  • Customize the blog post page layout in src/layouts/BlogPost.astro
    • -
-

- Have fun! If you get stuck, remember to - read the docs - or join us on Discord to ask questions. -

-

- Looking for a blog template with a bit more personality? Check out - astro-blog-template - by Maxi Ferreira. -

-
-