CSS 砌體 Catness-css教學-PHP中文網

首頁

web前端

css教學

CSS 砌體 Catness

Mary-Kate Olsen

Nov 01, 2024 am 07:09 AM

CSS 就像技術中的其他東西一樣 - 它總是在變化和發展。該領域正在進行的開發是 CSS 網格佈局模組層級 3，也稱為 CSS Masonry 佈局。 Theo 製作了一段視頻，介紹了它的開發方式以及蘋果和谷歌就如何實施它進行的辯論。

所有這些讓我很高興嘗試 CSS 砌體！ WebKit 照片示範啟發我用貓的照片製作類似的視圖！誰不愛貓呢？

先決條件

要查看我們要建立的內容，您需要 Safari 技術預覽版，或在 Firefox 中將功能標誌 layout.css.grid-template-masonry-value.enabled 設為 true。

要存取 Firefox 中的功能標誌，請在網址列中輸入 about:config。按下回車鍵，您可以搜尋網格或上面提到的字串。將其切換為 true，然後就可以開始了！

基本上熟悉 TypeScript/JavaScript、React 和 Next。

設定一個新項目

在終端機中建立一個新的 Next 專案。

執行此指令：npx create-next-app@latest

那麼您可能需要安裝以下軟體包：

create-next-app@15.0.1
Ok to proceed? (y) y

登入後複製

為您的項目命名。我稱我的貓為圖片瀑布

繼續在終端機中設定下一個項目（確保不要使用 Tailwind）：

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

登入後複製

當您的專案完成設定後：

透過在終端機 cd your-project-name 中執行此命令將目錄變更為您的專案。
然後執行此命令程式碼在 VSCode 中開啟它。（如果還沒有設定此指令）

刪除樣板

應用程式資料夾內有一個名為 page.tsx 的文件，其中包含樣板檔案中呈現的所有程式碼。

刪除該程式碼並暫時保留 div 或片段。這是一個例子：

// app/page.tsx
export default function Home() {
  return <div></div>;
}

登入後複製

應用程式資料夾中還有一個頁面樣式表。它名為 page.module.css，您可以打開它，選擇其中的所有樣式，然後刪除它們。

讓我們更改我們的元數據，讓我們的應用程式的功能更加清晰。像這樣更新layout.tsx：

// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Cat Pics",
  description: "Bringing cats your way with experimental CSS",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

登入後複製

如果您也願意的話，可以添加一個貓的圖標（如何在下一步中添加圖標）！

建立 .env 文件

在專案根目錄建立一個 .env 檔案。我們將在此處儲存來自 Cat API 的 API 金鑰。

註冊 Cat API

從 The Cat API 註冊免費的 API 金鑰。初始註冊後，您將收到一封包含 API 金鑰的電子郵件。複製該 API 金鑰並在 .env 中建立一個新變數。我將我的鑰匙稱為 CAT_KEY。

您的本地 .env 應如下所示：CAT_KEY=your_api_key。如果您部署此功能，請確保將其新增至部署的任何位置。

把貓咪的照片拿出來！

我從前面提到的 WebKit 演示中收集資訊來創建貓圖片的頁面和樣式。在這裡，我們呼叫 API，映射結果，並渲染返回的圖片：

create-next-app@15.0.1
Ok to proceed? (y) y

登入後複製

為照片設計風格

現在我們已經引入了圖片，讓我們看看 CSS 砌體的實際效果！從 WebKit 的書中取出一頁，這裡是 page.module.css：

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

登入後複製

如果您儲存檔案並在終端機中執行 npm run dev，它應該會給您一個像這樣的頁面（隨機選擇映像）：

CSS Masonry Catness