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
public
0, 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ụcDự án Astro mới của bạn được tạo từ trình hướng dẫn CLI
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├── 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
Đâ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ệpAstro 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
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]├── 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
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
Phần có tiêu đề src/
9├── 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
Thư mục
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├── 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
- 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
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├── 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
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
Phần có tiêu đề src/thành phần
32├── 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
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
Phần có tiêu đề src/layouts
33├── 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
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ư
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.json
Phần có tiêu đề src/pages
35├── 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
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
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.json
Phần có tiêu đề src/styles
37├── 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
Quy ước chung là lưu trữ các tệp CSS hoặc Sass của bạn trong thư mục
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.json
Phần có tiêu đề công cộng/
30├── 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
Thư mục
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├── 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
Hành vi này làm cho
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├── 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
Bạn có thể đặt CSS và JavaScript trong thư mục
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├── 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
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
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.json
Phần có tiêu đề gói. 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
Đâ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ụ:.
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]├── 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
Có hai loại phụ thuộc mà bạn có thể chỉ định trong một
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├── 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
Để được trợ giúp tạo tệp
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.json
Phần có tiêu đề astro. cấu hình. mjs
7├── 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
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
8├── 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
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.