项目简介link

Zaira 是一款面向新闻/杂志类网站的静态 HTML 模板，基于 Bootstrap 5 构建，提供首页多布局变体、博客、作者介绍、联系页等完整页面，内置暗色模式切换、响应式导航、滚动回到顶部等功能，适合快速搭建新闻资讯或个人博客站点。

技术栈link

• Bootstrap 5.1.3（响应式框架）
• jQuery 3.x（DOM 操作与交互）
• Slick Carousel（轮播组件）
• Google Fonts（Inter + Manrope 字体）
• Font Awesome 6（图标库）
• PHP（仅 contact.html 表单后端，mail.php）

项目结构link

zairahtml-10/
├── Documentation/         # 官方文档（HTML 格式）
│   └── index.html
└── zaira/                 # 主模板（LTR 版本）
    ├── index.html         # 首页（6 种布局变体：index ~ index-6）
    ├── blog.html
    ├── blog-details.html
    ├── contact.html
    ├── about.html
    ├── author.html
    └── assets/
        ├── css/           # 样式表（style.css、responsive.css 等）
        ├── fonts/         # Font Awesome 字体文件
        └── js/
            └── main.js    # 核心交互逻辑

核心文件说明link

• zaira/index.html — 主首页入口，默认布局
• zaira/assets/css/style.css — 全局样式与 CSS 变量定义
• zaira/assets/js/main.js — 预加载、导航、主题切换、轮播等交互
• zaira/assets/mail.php — 联系表单后端处理脚本
• zaira/contact.html — 带有表单的联系方式页
• Documentation/index.html — 模板官方使用文档

快速开始link

1. 直接用浏览器打开 zaira/index.html 即可预览；
2. 如需本地服务，推荐使用 VS Code 的 Live Server 插件或 npx serve 启动；
3. 若要启用联系表单功能，需将 mail.php 部署至支持 PHP 的服务器。

使用建议link

• 模板内置 6 种首页布局变体，可根据内容需求选择或组合使用；
• 暗色模式通过 localStorage 记忆用户偏好，切换按钮位于 main.js 的 tg_theme_toggler 函数中。