Xây Dựng Chủ Đề Jekyll Với Điều Hướng File Explorer

Chào cộng đồng Dev.to!

Trong vài tháng qua, tôi đã làm việc trên một chủ đề Jekyll và muốn chia sẻ với mọi người. Cảm hứng đến từ việc muốn tạo ra một sản phẩm phù hợp cho nhiều loại người dùng khác nhau - từ sinh viên đại học ghi chép dự án đến các nhà nghiên cứu chia sẻ tài liệu, và thậm chí là những người đam mê xây dựng portfolio cá nhân.

Mẫu Demo & Mã Nguồn

🔗 Mẫu Demo: Xem tại đây

💻 Kho Mã GitHub: Truy cập GitHub

Vấn Đề Tôi Muốn Giải Quyết

Hầu hết các chủ đề Jekyll thường tập trung vào blog hoặc portfolio, nhưng tôi cần một thứ có thể xử lý cả công việc học thuật và dự án cá nhân. Tôi cũng muốn một hệ thống điều hướng cảm thấy trực quan hơn so với các menu thông thường.

Điểm Khác Biệt Của Chủ Đề Này

🗂️ Điều Hướng Giống File Explorer

Thanh điều hướng hiển thị vị trí hiện tại của bạn như một trình xem tệp:

• Trang Chủ > Tech Bites > Bài Viết Cụ Thể
• Trang Chủ > Phim > Thư Viện Ảnh

Tính năng này rất hữu ích cho người dùng để hiểu họ đang ở đâu trên trang web, đặc biệt khi phải xử lý nhiều loại nội dung khác nhau.

🎨 Tùy Chỉnh Màu Sắc Chính

Dễ dàng để phù hợp với thương hiệu hoặc phong cách cá nhân chỉ với một thay đổi đơn giản trong tệp _config.yml. Chỉ cần một thay đổi màu sắc sẽ biến đổi toàn bộ giao diện của trang web.

📱 Cuộn Thư Viện Động

Thư viện tự động cuộn qua các hình ảnh, rất tuyệt vời cho việc giới thiệu các dự án hoặc ảnh chụp mà không cần điều hướng thủ công.

🎯 Thiết Kế Đa Năng

Phù hợp cho:

• Portfolio học thuật - Tài liệu nghiên cứu, ghi chép dự án
• Blogs cá nhân - Kiến thức công nghệ, hướng dẫn, cập nhật cuộc sống
• Trưng bày sáng tạo - Nhiếp ảnh, nghệ thuật, thiết kế
• Dự án sinh viên - Công việc khóa học, dự án bên lề, ghi chú học tập

Công Nghệ Sử Dụng

• Jekyll 4.4+ - Phiên bản ổn định mới nhất
• SCSS với thuộc tính CSS tùy chỉnh - Để tăng tính linh hoạt trong thiết kế
• JavaScript thuần - Không có phụ thuộc vào framework
• Sẵn sàng cho GitHub Pages - Bao gồm tệp workflow
• Thiết kế đáp ứng mobile-first

Tính Năng Nổi Bật

• ✅ Thiết Kế Đáp Ứng - Hoạt động từ di động đến máy tính để bàn
• ✅ Chủ Đề Sáng & Tối - Phát hiện sở thích hệ thống tự động
• ✅ Tối Ưu SEO - Thẻ meta và dữ liệu có cấu trúc hợp lý
• ✅ Tiếp Cận Được - Thuộc tính ARIA và điều hướng bằng bàn phím
• ✅ Tải Nhanh - CSS/JS và xử lý hình ảnh được tối ưu hóa
• ✅ Dễ Dàng Thiết Lập - Clone, cấu hình, triển khai

Hướng Dẫn Nhanh

# Clone kho mã
git clone https://github.com/dudududukim/spectrum.git
cd spectrum

# Cài đặt phụ thuộc
bundle install

# Cấu hình trang của bạn
# Chỉnh sửa _config.yml để cập nhật thông tin và màu sắc trang

# Chạy cục bộ
bundle exec jekyll serve

# Truy cập http://localhost:4000

Điều Tôi Học Được

Xây dựng chủ đề này đã dạy tôi rất nhiều về:

• Tính linh hoạt của Jekyll với templating bằng liquid
• Thuộc tính CSS tùy chỉnh cho thiết kế động
• Nguyên tắc thiết kế đáp ứng mobile-first
• GitHub Actions cho triển khai tự động

Câu Hỏi Cho Cộng Đồng

• Những mẫu điều hướng nào bạn cảm thấy trực quan nhất?
• Có phải có bất kỳ hạn chế nào của Jekyll mà bạn đã gặp phải với các chủ đề tùy chỉnh?
• Những tính năng nào sẽ giúp các chủ đề Jekyll dễ tiếp cận hơn cho những người không phải là lập trình viên?
• Bạn xử lý các trang web đa loại nội dung trong các dự án của mình như thế nào?

Đóng Góp

Đây hoàn toàn là miễn phí và mã nguồn mở. Nếu bạn thấy nó hữu ích hoặc có đề xuất cải tiến, hãy tự do:

• ⭐ Đánh giá sao cho kho mã
• 🍴 Fork và gửi pull requests
• 🐛 Báo cáo sự cố
• 💬 Chia sẻ phản hồi

Suy Nghĩ Cuối Cùng

Tôi xây dựng điều này vì tôi tin rằng có chỗ cho nhiều chủ đề Jekyll đa dạng hơn trong hệ sinh thái. Hầu hết các chủ đề chỉ tập trung vào một trường hợp sử dụng, nhưng tôi muốn một cái gì đó đủ linh hoạt cho những nhu cầu đa dạng của sinh viên, nhà nghiên cứu và người sáng tạo.

Điều hướng giống file explorer có thể không phù hợp với mọi người, nhưng tôi thấy nó thật sự hữu ích cho các trang web có nhiều loại nội dung. Bạn nghĩ sao về phương pháp này?

Xây Dựng Với ❤️ và Jekyll

Điều này hoàn toàn miễn phí để sử dụng, sửa đổi và phân phối. Tôi không bán bất cứ điều gì - chỉ chia sẻ một thứ mà tôi đã xây dựng mà người khác có thể thấy hữu ích.