qwind

？快风

Qwind是一个免费的开源模板，可使用Qwik + Tailwind CSS制作您的网站。准备开始一个新项目，并根据最佳实践进行设计。

特征

• ✅ 与支持深色模式的Tailwind CSS集成。
• ✅ Lighthouse 和 PageSpeed Insights 报告中的生产就绪分数。
• ✅图像优化和字体优化。

目录

• 演示
• 入门
  • 项目结构
  • 命令
  • 配置
  • 部署
• 路线图
• 贡献
• 致谢
• 执照

演示

？ https://qwind.pages.dev/

入门

该项目使用 Qwik 和 QwikCity。 QwikCity 只是 Qwik 之上的一组额外工具，可以更轻松地构建完整站点，包括基于目录的路由、布局等。

项目结构

在Qwind模板中，您将看到以下文件夹和文件：

 /
├── adaptors/
|   └── static/
|       └── vite.config.ts
├── public/
│   ├── favicon.svg
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── images/
|   |   └── styles/
|   |       └── global.css
│   ├── components/
│   │   ├── atoms/
│   │   ├── core/
│   │   ├── icons/
|   |   └── widgets/
|   |       ├── Hero.tsx
|   |       ├── Features.tsx
|   |       └── ...
│   ├── content/
│   |   └── blog/
│   |       ├── post-slug-1.md
│   |       ├── post-slug-2.md
│   |       └── ...
│   ├── routes/
│   |   ├── blog/
│   |   ├── index.tsx
|   |   ├── layout.tsx
|   |   ├-- service-worker.ts
│   |   └-- ...
│   ├── config.mjs
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   └── root.tsx
├── package.json
└── ...

• src/routes ：提供基于目录的路由，其中​​可以包含layout.tsx布局文件的层次结构，以及作为页面的index.tsx文件。此外， index.ts文件是端点。请参阅路由文档以获取更多信息。

• src/components ：组件的推荐目录。

• public ：任何静态资源（例如图像）都可以放置在 public 目录中。请参阅 Vite 公共目录以获取更多信息。

经验丰富的 qwik 专家？删除这个文件。更新config.mjs和内容。玩得开心！

命令

所有命令都从项目的根目录的终端运行：

命令	行动
npm install	安装依赖项
npm run dev	在127.0.0.1:5173/启动本地开发服务器
npm run build	将您的生产站点构建到./dist/
npm run preview	在部署之前在本地预览您的构建
npm run fmt	使用 Prettier 设置代码格式
npm run lint	运行埃斯林特
npm run qwik ...	运行 CLI 命令，例如qwik add 、 qwik build

配置

基本配置文件： ./src/config.mjs

 export const SITE = {
  name : "Example" ,

  origin : "https://example.com" ,
  basePathname : "/" , // Change this if you need to deploy to Github Pages, for example
  trailingSlash : true , // Generate permalinks with or without "/" at the end
} ;

部署

部署到生产（手动）

您可以使用以下方法创建优化的生产版本：

npm run build

现在，您的网站已准备好部署。所有生成的文件都位于dist文件夹中，您可以将该文件夹部署到您喜欢的任何托管服务。

部署到 Netlify

在自己的 GitHub 帐户上克隆此存储库并部署到 Netlify：

部署到 Vercel

在自己的 GitHub 帐户上克隆此存储库并部署到 Vercel：

路线图

根据

• 创建实用程序来生成针对域和基本路径名定制的永久链接。
• 简化图像优化的方式。
• 创建组件使 SEO 更简单、更直观。
• 使用 MDX 创建包含类别、标签和作者的可配置博客。
• 添加更常用的页面（产品组合、服务、联系人、文档...）。
• 查找或创建一个库以提供更多可用的图标源。
• 重构一些尚不遵循 Qwik 约定的代码。

先进的

• 获得完美的 100% Google Page Speed 分数。
• 在主页上插入复杂的 javascript 示例小部件以演示 Qwik 功能。
• 创建小型说明性管理后端。

贡献

如果您有任何想法、建议或发现任何错误，请随时展开讨论、提出问题或创建拉取请求。这对我们所有人都非常有用，我们很乐意倾听并采取行动。

致谢

最初由 onWidget 创建并由贡献者社区维护。

执照

Qwind根据 MIT 许可证获得许可 - 有关详细信息，请参阅许可证文件。