Một công cụ tham khảo toàn diện để thiết kế và triển khai các hệ thống điều hướng và đầu trang web dễ tiếp cận, phản hồi nhanh.
Cài đặt & Tải xuống
1. ClawHub CLI
Cách nhanh nhất để cài đặt kỹ năng trực tiếp từ thư viện.
npx clawhub@latest install header
2. Cài đặt Thủ công
Sao chép thư mục kỹ năng vào một trong những vị trí sau
~/.openclaw/skills/ <project>/skills/ Ưu tiên: Không gian làm việc > Cục bộ > Gói sẵn
3. Cài đặt Prompt
Sao chép prompt này vào OpenClaw để tự động cài đặt.
Giúp tôi cài đặt header bằng Clawhub. Nếu Clawhub chưa
Bạn muốn tải xuống?
Nhận các tệp kỹ năng gốc dưới dạng lưu trữ ZIP.
Header: Tài liệu tham khảo thiết kế điều hướng Web là gì?
Kỹ năng Header là một tài liệu tham khảo kỹ thuật chuyên dụng dành cho các nhà phát triển và nhà thiết kế cần triển khai các thành phần điều hướng chất lượng cao. Là một phần của hệ sinh thái Openclaw Skills, công cụ này cung cấp quyền truy cập tức thì vào các thực tiễn tốt nhất cho kiến trúc UI, từ điều hướng ngang cơ bản đến các menu mega phức tạp. Nó thu hẹp khoảng cách giữa lý thuyết thiết kế và thực thi frontend bằng cách cung cấp các cấu trúc mã ngữ nghĩa và mẫu bố cục.
Bằng cách tận dụng kỹ năng này, các nhà phát triển có thể đảm bảo đầu trang trang web của họ hoạt động hiệu quả, nhất quán về mặt hình ảnh và vững chắc về mặt kỹ thuật. Nó tập trung mạnh vào các nhu cầu của web hiện đại, bao gồm các hoạt ảnh dựa trên cuộn và các chuyển đổi thích ứng ưu tiên thiết bị di động, làm cho nó trở thành một tiện ích thiết yếu cho các quy trình làm việc frontend chuyên nghiệp.
Trường hợp sử dụng Header: Tài liệu tham khảo thiết kế điều hướng Web
- Thiết kế các đầu trang trang web chuyên nghiệp với bố cục điều hướng chính trực quan.
- Triển khai các hành vi đầu trang sticky hoặc cố định nâng cao, chẳng hạn như hiệu ứng hiển thị khi cuộn hoặc thu nhỏ.
- Xây dựng điều hướng thích ứng sẵn sàng cho di động bao gồm menu hamburger và ngăn kéo off-canvas.
- Đảm bảo tuân thủ khả năng truy cập web thông qua các vai trò ARIA phù hợp và quản lý tiêu điểm bàn phím.
- Chọn mẫu điều hướng lý tưởng (ví dụ: mega menu so với thanh bên) dựa trên mật độ nội dung trang web.
Cách thức hoạt động của Header: Tài liệu tham khảo thiết kế điều hướng Web
- Người dùng khởi tạo kỹ năng để truy cập cấu trúc cốt lõi và các nguyên tắc thiết kế đầu trang.
- Các nhà phát triển truy vấn các mẫu điều hướng cụ thể như thanh ngang hoặc breadcrumbs để xác định cấu trúc trang web.
- Kỹ năng cung cấp các đoạn mã CSS và HTML được tùy chỉnh cho bố cục flexbox và đánh dấu ngữ nghĩa.
- Logic cuộn nâng cao được áp dụng bằng các lệnh sticky và responsive để xử lý các kích thước khung nhìn và tương tác người dùng khác nhau.
- Cuối cùng, mô-đul khả năng truy cập được tham khảo để xác nhận điều hướng bằng bàn phím và hỗ trợ trình đọc màn hình.
Cài đặt Header: Tài liệu tham khảo thiết kế điều hướng Web
Để tích hợp tài liệu tham khảo điều hướng này vào môi trường của bạn, hãy làm theo các bước sau:
- Đảm bảo bạn đã cài đặt môi trường cơ sở cho Openclaw Skills.
- Sao chép hoặc tải các tệp kỹ năng vào thư mục dự án của bạn.
- Cấu hình thư mục dữ liệu cục bộ nếu bạn muốn ghi đè mặc định:
export HEADER_DIR="~\/.custom_header_data\/"
- Chạy lệnh help để xác minh cài đặt:
scripts\/script.sh help
Lược đồ dữ liệu & Hệ thống phân loại của Header: Tài liệu tham khảo thiết kế điều hướng Web
Kỹ năng quản lý dữ liệu tham khảo và cấu hình của nó thông qua một hệ thống thư mục có cấu trúc. Dưới đây là siêu dữ liệu và phân loại tổ chức:
| Thuộc tính | Đặc tả |
|---|---|
| Version | 1.0.0 |
| Default Path | ~\/.header\/ |
| Author | BytesAgain |
| Primary Tags | header, navigation, ui, responsive, accessibility |
| Supported Languages | HTML5, CSS3 (Flexbox/Grid), ARIA Standard |
Tính năng Nâng cao của Header: Tài liệu tham khảo thiết kế điều hướng Web
- Hỗ trợ đa mẫu: Chuyển đổi giữa mega menus, mẫu priority+ và điều hướng ngang tiêu chuẩn.
- Hiệu ứng dựa trên cuộn: Hướng dẫn triển khai chi tiết cho logic hiển thị khi cuộn và thu nhỏ đầu trang.
- Đi sâu vào khả năng truy cập: Tập trung chuyên sâu vào các liên kết bỏ qua điều hướng và quản lý trạng thái ARIA phức tạp.
- Các cột mốc ngữ nghĩa: Hướng dẫn triển khai các thành phần
<header>và<nav>để cải thiện SEO và lập chỉ mục trình đọc màn hình. - Ví dụ thực tế phong phú: Truy cập vào các mẫu triển khai được chọn lọc dùng trong các môi trường sản xuất hiện đại.
SKILL.md
Đang tải
Các kỹ năng Openclaw liên quan
SearXNG Search
Một kỹ năng tìm kiếm tổng hợp tôn trọng quyền riêng tư cho phép AI agent tìm kiếm web, hình ảnh và tin tức thông qua phiên bản SearXNG cục bộ.
media-cli-local
Một bash CLI đơn tệp, nhẹ để quản lý toàn bộ stack tự động hóa phương tiện *arr của bạn trực tiếp từ terminal hoặc thông qua các tác nhân AI.
Tài liệu Tham khảo Chuẩn bị Làm đất Gieo hạt
Một kỹ năng tham khảo kỹ thuật để tối ưu hóa việc chuẩn bị đất gieo hạt, trình tự làm đất và quản lý cấu trúc đất nhằm đảm bảo tỷ lệ nảy mầm tối đa của cây trồng.
Tài liệu tham khảo công nghệ RFID
Một kỹ năng tham khảo kỹ thuật toàn diện để thiết kế, triển khai và tối ưu hóa các hệ thống RFID và giải pháp theo dõi kho hàng.
Chuyển Đổi Video Nghi Lễ & Kỷ Niệm Linh Thiêng
Một kỹ năng tạo video điện ảnh cao cấp giúp chuyển đổi các câu lệnh hoặc hình ảnh thành những buổi lễ linh thiêng, phủ đầy bụi vàng bằng công cụ Seedance 2.0.
Silo
Một kỹ năng tham chiếu toàn diện để quản lý lưu trữ silo ngũ cốc, chất lượng sau thu hoạch và các giao thức an toàn công nghiệp.
Đặc sắc*
