Thư mục nào chứa các tệp hình ảnh js css của nội dung công cộng?

Tiếp theo. js có thể phục vụ các tệp tĩnh, chẳng hạn như hình ảnh, trong một thư mục có tên là public trong thư mục gốc. Các tệp bên trong public sau đó có thể được mã của bạn tham chiếu bắt đầu từ URL cơ sở (/)

Ví dụ: nếu bạn thêm một hình ảnh vào public/me.png, đoạn mã sau sẽ truy cập hình ảnh

import Image from 'next/image'

function Avatar() {
  return 

}

export default Avatar

Ghi chú. next/image yêu cầu Tiếp theo. js 10 trở lên

Thư mục này cũng hữu ích cho robots.txt, favicon.ico, Google Site Verification và bất kỳ tệp tĩnh nào khác (bao gồm cả .html)

Ghi chú. Hãy chắc chắn rằng thư mục được đặt tên là public. Tên không thể thay đổi và là thư mục duy nhất được sử dụng để phục vụ nội dung tĩnh

Ghi chú. Đảm bảo không có tệp tĩnh có cùng tên với tệp trong thư mục public0, vì điều này sẽ dẫn đến lỗi

Đọc thêm. https. // nextjs. org/docs/messages/conflicting-public-file-page

Ghi chú. Chỉ những nội dung nằm trong thư mục public tại thời điểm xây dựng mới được phục vụ bởi Next. js. Các tệp được thêm vào thời gian chạy sẽ không khả dụng. Chúng tôi khuyên bạn nên sử dụng dịch vụ của bên thứ ba như AWS S3 để lưu trữ tệp liên tục

Dự án Astro mới của bạn được tạo từ trình hướng dẫn CLI

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

3 đã bao gồm một số tệp và thư mục. Những cái khác, bạn sẽ tự tạo và thêm vào cấu trúc tệp hiện có của Astro

Đây là cách một dự án Astro được tổ chức và một số tệp bạn sẽ tìm thấy trong dự án mới của mình

Thư mục và tập tin

Phần có tiêu đề Thư mục và Tệp

Astro tận dụng bố cục thư mục có ý kiến ​​cho dự án của bạn. Mọi gốc của dự án Astro phải bao gồm các thư mục và tệp sau

• ├── src/
  │   ├── components/
  │   │   ├── Header.astro
  │   │   └-─ Button.jsx
  │   ├── layouts/
  │   │   └-─ PostLayout.astro
  │   └── pages/
  │   │   ├── posts/
  │   │   │   ├── post1.md
  │   │   │   ├── post2.md
  │   │   │   └── post3.md
  │   │   └── index.astro
  │   └── styles/
  │       └-─ global.css
  ├── public/
  │   ├── robots.txt
  │   ├── favicon.svg
  │   └-─ social-image.png
  ├── astro.config.mjs
  ├── package.json
  └── tsconfig.json

  4 - Mã nguồn dự án của bạn (các thành phần, trang, kiểu, v.v. )

• ├── src/
  │   ├── components/
  │   │   ├── Header.astro
  │   │   └-─ Button.jsx
  │   ├── layouts/
  │   │   └-─ PostLayout.astro
  │   └── pages/
  │   │   ├── posts/
  │   │   │   ├── post1.md
  │   │   │   ├── post2.md
  │   │   │   └── post3.md
  │   │   └── index.astro
  │   └── styles/
  │       └-─ global.css
  ├── public/
  │   ├── robots.txt
  │   ├── favicon.svg
  │   └-─ social-image.png
  ├── astro.config.mjs
  ├── package.json
  └── tsconfig.json

  5 - Nội dung không phải mã, chưa được xử lý của bạn (phông chữ, biểu tượng, v.v. )

• ├── src/
  │   ├── components/
  │   │   ├── Header.astro
  │   │   └-─ Button.jsx
  │   ├── layouts/
  │   │   └-─ PostLayout.astro
  │   └── pages/
  │   │   ├── posts/
  │   │   │   ├── post1.md
  │   │   │   ├── post2.md
  │   │   │   └── post3.md
  │   │   └── index.astro
  │   └── styles/
  │       └-─ global.css
  ├── public/
  │   ├── robots.txt
  │   ├── favicon.svg
  │   └-─ social-image.png
  ├── astro.config.mjs
  ├── package.json
  └── tsconfig.json

  6 - Bản kê khai dự án

• ├── src/
  │   ├── components/
  │   │   ├── Header.astro
  │   │   └-─ Button.jsx
  │   ├── layouts/
  │   │   └-─ PostLayout.astro
  │   └── pages/
  │   │   ├── posts/
  │   │   │   ├── post1.md
  │   │   │   ├── post2.md
  │   │   │   └── post3.md
  │   │   └── index.astro
  │   └── styles/
  │       └-─ global.css
  ├── public/
  │   ├── robots.txt
  │   ├── favicon.svg
  │   └-─ social-image.png
  ├── astro.config.mjs
  ├── package.json
  └── tsconfig.json

  7 - Tệp cấu hình Astro. (khuyến khích)

• ├── src/
  │   ├── components/
  │   │   ├── Header.astro
  │   │   └-─ Button.jsx
  │   ├── layouts/
  │   │   └-─ PostLayout.astro
  │   └── pages/
  │   │   ├── posts/
  │   │   │   ├── post1.md
  │   │   │   ├── post2.md
  │   │   │   └── post3.md
  │   │   └── index.astro
  │   └── styles/
  │       └-─ global.css
  ├── public/
  │   ├── robots.txt
  │   ├── favicon.svg
  │   └-─ social-image.png
  ├── astro.config.mjs
  ├── package.json
  └── tsconfig.json

  8 - Tệp cấu hình TypeScript. (khuyến khích)

Cây dự án ví dụ

Phần có tiêu đề Cây Dự án Ví dụ

Một thư mục dự án chung của Astro có thể trông như thế này

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json9

Phần có tiêu đề src/

Thư mục

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

9 là nơi chứa hầu hết mã nguồn dự án của bạn. Điêu nay bao gôm

• trang
• Bố cục
• thành phần thiên văn
• Các thành phần khung giao diện người dùng (React, v.v. )
• Kiểu (CSS, Sass)
• đánh dấu

Astro xử lý, tối ưu hóa và nhóm các tệp

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

9 của bạn để tạo trang web cuối cùng được chuyển đến trình duyệt. Không giống như thư mục tĩnh

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

30, các tệp

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

9 của bạn được Astro xây dựng và xử lý cho bạn

Một số tệp (như các thành phần của Astro) thậm chí không được gửi tới trình duyệt như được viết mà thay vào đó được hiển thị thành HTML tĩnh. Các tệp khác (như CSS) được gửi tới trình duyệt nhưng có thể được tối ưu hóa hoặc đi kèm với các tệp CSS khác để tăng hiệu suất

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json32

Phần có tiêu đề src/thành phần

Các thành phần là các đơn vị mã có thể tái sử dụng cho các trang HTML của bạn. Đây có thể là các thành phần của Astro hoặc các thành phần khung giao diện người dùng như React hoặc Vue. Thông thường, nhóm và sắp xếp tất cả các thành phần dự án của bạn lại với nhau trong thư mục này

Đây là một quy ước phổ biến trong các dự án Astro, nhưng nó không bắt buộc. Thoải mái sắp xếp các thành phần của bạn theo cách bạn muốn

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json33

Phần có tiêu đề src/layouts

Bố cục là một loại thành phần đặc biệt bao bọc một số nội dung trong bố cục trang lớn hơn. Chúng thường được sử dụng bởi các trang Astro và các trang Markdown hoặc MDX để xác định bố cục của trang

Cũng giống như

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

32, thư mục này là quy ước chung nhưng không bắt buộc

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json35

Phần có tiêu đề src/pages

Các trang là một loại thành phần đặc biệt được sử dụng để tạo các trang mới trên trang web của bạn. Một trang có thể là một thành phần của Astro hoặc tệp Markdown đại diện cho một số trang nội dung cho trang web của bạn

thận trọng

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

35 là thư mục con bắt buộc trong dự án Astro của bạn. Không có nó, trang web của bạn sẽ không có trang hoặc tuyến đường

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json37

Phần có tiêu đề src/styles

Quy ước chung là lưu trữ các tệp CSS hoặc Sass của bạn trong thư mục

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

37, nhưng điều này không bắt buộc. Miễn là phong cách của bạn nằm ở đâu đó trong thư mục

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

9 và được nhập chính xác, Astro sẽ xử lý và tối ưu hóa chúng

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json30

Phần có tiêu đề công cộng/

Thư mục

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

30 dành cho các tệp và nội dung không cần xử lý trong quá trình xây dựng của Astro. Các tệp này sẽ được sao chép vào thư mục bản dựng mà không bị ảnh hưởng

Hành vi này làm cho

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

30 trở nên lý tưởng cho các nội dung phổ biến như hình ảnh và phông chữ hoặc các tệp đặc biệt như

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

43 và

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

44

Bạn có thể đặt CSS và JavaScript trong thư mục

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

30 của mình, nhưng lưu ý rằng các tệp đó sẽ không được đóng gói hoặc tối ưu hóa trong bản dựng cuối cùng của bạn

Mẹo

Theo nguyên tắc chung, mọi CSS hoặc JavaScript mà bạn tự viết sẽ nằm trong thư mục

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

9 của bạn

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json6

Phần có tiêu đề gói. json

Đây là tệp được trình quản lý gói JavaScript sử dụng để quản lý các phần phụ thuộc của bạn. Nó cũng xác định các tập lệnh thường được sử dụng để chạy Astro (ví dụ:.

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

48,

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

49)

Có hai loại phụ thuộc mà bạn có thể chỉ định trong một

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

6.

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

51 và

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

52. Trong hầu hết các trường hợp, chúng hoạt động giống nhau. Astro cần tất cả các phụ thuộc tại thời điểm xây dựng và trình quản lý gói của bạn sẽ cài đặt cả hai. Chúng tôi khuyên bạn nên đặt tất cả các thành phần phụ thuộc của mình vào

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

51 để bắt đầu và chỉ sử dụng

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

52 nếu bạn thấy có nhu cầu cụ thể để làm như vậy

Để được trợ giúp tạo tệp

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

6 mới cho dự án của bạn, hãy xem hướng dẫn thiết lập thủ công

├── src/ │ ├── components/ │ │ ├── Header.astro │ │ └-─ Button.jsx │ ├── layouts/ │ │ └-─ PostLayout.astro │ └── pages/ │ │ ├── posts/ │ │ │ ├── post1.md │ │ │ ├── post2.md │ │ │ └── post3.md │ │ └── index.astro │ └── styles/ │ └-─ global.css ├── public/ │ ├── robots.txt │ ├── favicon.svg │ └-─ social-image.png ├── astro.config.mjs ├── package.json └── tsconfig.json7

Phần có tiêu đề astro. cấu hình. mjs

Tệp này được tạo trong mọi mẫu khởi động và bao gồm các tùy chọn cấu hình TypeScript cho dự án Astro của bạn. Một số tính năng (như nhập gói npm) không được hỗ trợ đầy đủ trong trình chỉnh sửa nếu không có tệp

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
├── package.json
└── tsconfig.json

8

Tệp css được lưu trữ ở đâu?

Truy cập wp-content > themes > TÊN CHỦ ĐỀ CỦA BẠN và thử tìm thư mục chứa các tệp css . Chúng thường được đặt tên là CSS stylesheets hoặc style. Sau đó, bạn có thể chọn tải xuống và chỉnh sửa bằng chương trình soạn thảo văn bản trên máy tính của mình. Sau khi chỉnh sửa, hãy chuyển đến cùng thư mục mà bạn đã tìm thấy các tệp CSS và nhấn tải lên.

css có nên ở trong thư mục chung không?

Trong thư mục chung, bạn sẽ có tất cả các tập lệnh được biên dịch và rút gọn để sản xuất. Vì vậy, css và js phải có trong tài nguyên/nội dung, sau đó được biên dịch và xuất bản ra công chúng .

Thư mục css là gì?

Thư mục css sẽ chứa các tệp CSS cần thiết để định kiểu trang web của bạn . Cuối cùng mở thư mục css vừa tạo. Bên trong thư mục này, tạo như sau. Một tệp mới có tên là chỉ mục. css (sử dụng trình soạn thảo văn bản ưa thích của bạn)

Tôi nên lưu tệp css ở đâu trong CodeIgniter?

Thêm tệp JavaScript và CSS (Cascading Style Sheet) trong CodeIgniter rất đơn giản. Bạn phải tạo thư mục JS và CSS trong thư mục gốc và sao chép tất cả. js trong thư mục JS và. css trong thư mục CSS như trong hình.