Astro博客企业官网

astro-theme-solenne — Astro 博客模板

作者 Sv3nskie

面向精品酒店、民宿与客栈的 Astro 单页主题，包含预订栏、实时时钟与天气卡片，以及明暗模式切换。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

预订栏含日期区间日历与成人、儿童、宠物住客选择器，提交处理需接入自有预订引擎

02

实时本地时钟与 Open-Meteo 天气卡片，无需 API 密钥

03

明暗模式记住访客选择，加载无闪烁

04

包含房间图库、设施、直订优势、数据统计、位置理由与住客故事等板块

05

响应式图片与懒加载，滚动动效遵循 prefers-reduced-motion

06

除 Astro 外无其他依赖，构建输出为静态文件

模板详细介绍

Solenne 是一个用 Astro 构建的单页主题，定位为精品酒店、B&B 与客栈的展示页面。页面采用编辑式排版风格，包含房间图库、设施介绍、直订优势、数据统计、位置理由与住客故事等板块。

交互部分由一份原生 JavaScript 文件驱动：预订栏提供日期区间日历与住客选择器（成人、儿童、宠物），提交处理需要自行接入预订引擎；另有本地时间时钟与天气卡片，天气数据来自 Open-Meteo，无需 API 密钥。明暗模式会记住访客选择，加载时不会闪烁。

样式使用普通 CSS，除 Astro 外没有其他依赖。图片做了响应式与懒加载处理，滚动动效遵循 prefers-reduced-motion。构建产物为静态文件，可部署到任意静态托管；仓库自带 GitHub Actions 工作流用于发布演示站。

需要留意的限制：预订栏只提供前端交互，不包含后端预订逻辑；时钟与天气依赖配置中的时区与坐标；占位图片来自 Unsplash，图标来自 Phosphor，上线前应替换并按各自许可核对。

Astro博客企业官网

适合你的项目吗？

适用场景

  • 精品酒店或客栈制作用于展示与引导直订的单页官网
  • 民宿经营者需要一个包含房型图库与设施说明的静态站点
  • 开发者以该主题为基础，接入第三方预订引擎或表单服务
  • 需要明暗模式与实时本地信息的酒店类落地页

适合人群

  • 精品酒店、B&B 与客栈类项目
  • 接受静态托管、自行对接预订系统的团队
  • 希望以少量依赖快速搭建单页展示站的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    使用 npm create astro@latest -- --template Sv3nskie/astro-theme-solenne 创建项目，再运行 npm run dev 本地预览

  2. 2

    在 src/config.ts 中修改酒店名称、区域、城市、SEO、分享图，以及时钟与天气所需的时区和坐标

  3. 3

    在 src/components/*.astro 中替换各板块文案与照片，在 src/styles/styles.css 中调整颜色与明暗模式变量

  4. 4

    预订栏、日历与主题切换逻辑位于 src/scripts/main.js，需自行把提交处理接到预订引擎

  5. 5

    占位图片来自 Unsplash、图标来自 Phosphor，上线前替换并核对各自许可；代码为 MIT 许可，分发时保留版权与许可声明

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 预订栏仅提供前端交互，不含后端预订逻辑；需自行将提交处理接入第三方预订引擎或表单服务。
  • 占位图片来自 Unsplash，上线前应替换为自有图片，并自行核对图片的授权条款。
  • 图标来自 Phosphor，属第三方资源，需按该图标库自身许可使用。
  • 天气卡片依赖外部服务 Open-Meteo，无需 API 密钥，但需联网获取数据。
  • 时钟与天气卡片依赖在 src/config.ts 中配置的时区与坐标，未配置则无法正确显示。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Wire the submit handler to your booking engine.

README 原文

Placeholder photography is from [Unsplash](https://unsplash.com) — replace it with your own before launch.

README 原文

Icons: [Phosphor](https://phosphoricons.com).

README 原文

live weather (Open-Meteo, no API key)

README 原文

Time zone and coordinates for the clock and weather cards

README 原文
https://github.com/Sv3nskie/astro-theme-solenne/blob/main/LICENSEhttps://github.com/Sv3nskie/astro-theme-solenne/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 85 / 100
技术栈
Astro
网站类型
博客 · 企业官网
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-28
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 9ec937611c1eb032aa382fc9193e6903078d0b03b8a42fb2570e0dba389ba5a8

2026-10-01T13:40:25.116Z

来源文件 / 仓库
# Solenne — Astro theme

A warm, editorial one-page theme for **boutique hotels, B&Bs and guesthouses**. Light and dark mode, a real booking bar, and live "right now" cards for local time and weather — built with plain CSS and one vanilla JS file.

**[Live demo →](https://sv3nskie.github.io/astro-theme-solenne/)**

## Features

- **Booking bar** with a date-range calendar and a guests picker (adults, children, pets). Wire the submit handler to your booking engine.
- **At-a-glance cards:** live local clock, live weather (Open-Meteo, no API key), stay times and travel times.
- **Light / dark mode** that remembers the visitor's choice, with no flash on load.
- **Room gallery, amenities, "book direct" benefits, stats, location reasons and guest stories.**
- **Responsive, accessible, and fast:** responsive images, lazy loading, scroll reveals that respect `prefers-reduced-motion`.
- **Zero dependencies** beyond Astro.

## Getting started

```bash
npm create astro@latest -- --template Sv3nskie/astro-theme-solenne
cd <your-project>
npm run dev
```

## Make it yours

| What | Where |
| --- | --- |
| Hotel name, district, city, SEO, share image | `src/config.ts` |
| Time zone and coordinates for the clock and weather cards | `src/config.ts` |
| Crest / logo | `src/components/Emblem.astro` |
| Section copy and photos | `src/components/*.astro` (one file per section) |
| Colors, type, light/dark tokens | `src/styles/styles.css` |
| Booking bar, calendar, theme toggle | `src/scripts/main.js` |

Placeholder photography is from [Unsplash](https://unsplash.com) — replace it with your own before launch. Icons: [Phosphor](https://phosphoricons.com).

## Deploying

Any static host works (`npm run build` → `dist/`). The included GitHub Actions workflow publishes the demo to GitHub Pages.

## Credits

Designed and built by **[Sven Esser](https://sv3n.dev?utm_source=github&utm_medium=theme-readme&utm_campaign=solenne)** — full-stack & Web3 developer. Need a site for your hotel? [Get in touch](https://sv3n.dev/contact?utm_source=github&utm_medium=theme-readme&utm_campaign=solenne).

MIT licensed. Keeping the small "Theme by Sv3n" credit in the footer is appreciated but not required.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

astrowind

astrowind

⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.

Astro · 博客

astro-paper

astro-paper

A minimal, accessible and SEO-friendly Astro blog theme.

Astro · 博客

fuwari

fuwari

✨A static blog template built with Astro.

Astro · 博客

Firefly

Firefly

Firefly 是一款基于 Astro 的静态博客主题，由 CuteLeaf 在 saicaca 的 Fuwari 模板基础上二次开发，主打清新美观的视觉风格。

Astro · 博客

astro-theme-cactus

astro-theme-cactus

A simple Astro theme. Use it to create your blog or website.

Astro · 作品集

astrofy

astrofy

Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCS…

Astro · 作品集