HTML启动器

one-space-away-html — HTML 启动器模板

作者 truedaniyyel

面向室内设计师、建筑师与家居陈设师的单页 HTML 模板，基于 Astro 构建，内置响应式布局、本地字体优化与安全响应头配置。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

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

全部页面与视图 2

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

采集于 2026-10-03查看来源

值得关注的模板亮点

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

单页结构，面向室内设计、建筑与家居陈设的展示场景

基于 Astro 构建，使用 HTML、CSS 与 JS，依赖较少

内置图片优化，默认通过 Astro Image 组件完成 WebP/AVIF 转换与缩放

本地字体方案，字体文件置于 src/assets/fonts/ 并通过 astro.config.mjs 注册

public 目录提供 _headers 文件，预置 CSP 与安全响应头规则

轮播使用 Swiper.js，初始化逻辑集中在 utils/initSwiper.ts

模板详细介绍

One Space Away 是一个单页网站模板，定位为室内设计、建筑与家居陈设方向的展示型站点。页面结构围绕作品与流程展示展开，README 中给出了室内设计咨询环节的图片引用示例，说明模板包含可复用的图文区块。

技术层面，模板使用 Astro（HTML、CSS、JS）构建，依赖较少。图片默认通过 Astro 内置的 Image 组件在本地完成优化，包括 WebP/AVIF 转换与尺寸调整；也可以按文档说明改用 astro-cloudinary 接入 Cloudinary 处理图片。字体存放在 src/assets/fonts/，通过 astro.config.mjs 中的本地字体 provider 注册，并在 src/styles/_reset.css 中引用对应 CSS 变量。轮播由 Swiper.js 驱动，初始化逻辑位于 utils/initSwiper.ts。

部署方面，public 目录下的 _headers 文件承载 CSP 与 XSS 防护规则，主要面向 Cloudflare；部署到 Vercel 或 Netlify 时需要把规则迁移到 vercel.json 或 netlify.toml。模板为响应式设计，覆盖手机、平板与桌面。仓库采用 MIT 许可，免费范围限于该版本代码，演示图片、字体、图标等第三方素材需另行核对许可。

HTML启动器

适合你的项目吗？

适用场景

室内设计师搭建单页作品展示与业务介绍页面
建筑师或家居陈设师制作用于呈现项目与设计流程的静态站点
需要本地图片优化与本地字体托管的轻量展示型网站
以 Cloudflare 为主要托管平台、需要预置安全响应头的项目

适合人群

室内设计、建筑与家居陈设方向的个人或小型工作室
偏好 Astro 与静态 HTML 输出、希望减少依赖的开发者
需要单页结构而非多页内容体系的展示型站点
能够按文档自行调整字体、图片与部署配置的使用者

上手与定制指南

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

1
部署到 Cloudflare 以外的平台时，需将 public/_headers 中的 CSP 与安全规则迁移到 vercel.json 或 netlify.toml
2
更换字体需将 .woff2 文件放入 src/assets/fonts/，更新 astro.config.mjs 的字体 provider，并同步修改 src/styles/_reset.css 中的字体变量
3
如需使用 Cloudinary，按文档安装 astro-cloudinary 并将 Image 组件替换为 CldImage
4
轮播的初始化逻辑位于 utils/initSwiper.ts，调整轮播行为需修改该文件
5
代码采用 MIT 许可，分发时需保留版权声明与许可文本；演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

Cloudinary 图片优化为可选外部服务，需自行注册 Cloudinary 账号并配置 API 凭据；不使用该服务时模板默认走 Astro 本地图片优化，不影响免费使用。
public/_headers 中的 CSP 与安全响应头规则主要面向 Cloudflare；部署到 Vercel 或 Netlify 时需自行迁移到 vercel.json 或 netlify.toml，否则安全头不生效。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

For top-tier loading speeds and high-resolution assets, you can easily swap to [Astro-Cloudinary](https://docs.astro.build/en/guides/media/cloudinary/).
README 原文

This file handles the Content Security Policy (CSP) and XSS protections mainly for Cloudflare.
README 原文

https://github.com/truedaniyyel/one-space-away-html/blob/main/LICENSE https://github.com/truedaniyyel/one-space-away-html/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: Astro Themes
资料与维护参考分: 资料较完整 · 75 / 100
技术栈: HTML
网站类型: 启动器

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2026-04-13
截图检查日期: 2026-10-03

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: db28b6d31ea927ba6372f908206bfffb1d450fbbceed353912a19d961cd9834b

2026-10-03T15:57:24.817Z

来源文件 / 仓库

# One Space Away - Interior Design Template

**One Space Away** is single-page template built for interior designers, architects, and home stylists.

<img width="1910" height="915" alt="PageSpeed Insights" src="https://github.com/user-attachments/assets/8b3bd9cf-6e91-4624-bda5-aa5cf71e950b" />

**Features**

- Astro 6.0 Ready:
  - Native Font Optimization
  - Pre-configured CSP (Content Security Policy) and security headers (optimized for Cloudflare, easily adaptable for Vercel or Netlify).
    <img width="1910" height="915" alt="HTTP Observatory" src="https://github.com/user-attachments/assets/4a38f8c3-c851-4239-a0b5-73f80fe8be57" />
- Responsive: mobile, tablet, and desktop devices.
- Stack: Astro (HTML, CSS, and JS) with minimal dependencies.

## Deployment

You will find a `_headers `file located in the `/public` folder. This file handles the Content Security Policy (CSP) and XSS protections mainly for Cloudflare.

If you are deploying to Vercel or Netlify, simply move these rules to a `vercel.json` or `netlify.toml` file respectively.

## Media & Image Optimization

### Local Optimization (Default)

By default, the template uses Astro’s built-in `<Image />` component for automatic optimization (WebP/AVIF conversion, resizing).

```astro
import consultationImage from '/src/assets/images/consultation.jpg';

<div class="process-step-image-wrapper">
   <Image
     src={consultationImage}
     alt="Interior Design Consultation"
     class="media"
   />
</div>
```

### Cloudinary Integration (Optional)

For top-tier loading speeds and high-resolution assets, you can easily swap to [Astro-Cloudinary](https://docs.astro.build/en/guides/media/cloudinary/).

```
pnpm add astro-cloudinary
```

```astro
import { CldImage } from 'astro-cloudinary';

<CldImage
  src="your-public-id"
  width="800"
  height="600"
  alt="Project Transformation"
/>
```

## Fonts

All local fonts are stored in `src/assets/fonts/`. To add or change fonts:

1. Drop your `.woff2` files into the fonts folder.
2. Update the `astro.config.mjs` font provider:

```mjs
fonts: [
    {
      provider: fontProviders.local(),
      name: "YourFontName",
      cssVariable: "--font-custom",
      options: {
        variants: [{
            src: ["./src/assets/fonts/YourFont.woff2"],
            weight: "normal",
            style: "normal",
          }],
      },
    },
  ],
```

3. Update the variable in `src/styles/_reset.css`:

```css
font-family: var(--font-custom), system-ui, sans-serif;
```

*For more info on using remote fonts (Google Fonts, etc.), check the [Astro Font Provider Reference](https://docs.astro.build/en/reference/font-provider-reference/).*

## Technical Details

Carousels: Powered by **Swiper.js.** Initialization logic is in `utils/initSwiper.ts`.

反馈内容错误