Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

Làm thế nào để thiết lập một theme Jekyll

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Jekyll là một hệ thống tạo website tĩnh cho phép bạn dùng các file văn bản thuần tuý và chuyển chúng thành một trang blog phức tạp mà không cần phải lo lắng về cơ sở dữ liệu, vấn đề bảo mật, bản cập nhật và các vấn đề phiền toái khác có thể phát sinh với nhiều CMS và các nền tảng blog.

Tương tự như hầu hết các hệ thống quản lý website, có thể sử dụng các theme trên các website Jekyll. Tuy nhiên vào lúc này, Jekyll không sử dụng các theme theo cách bạn từng biết.

Ngay bây giờ theme Jekyll không phải là các package độc lập cần được áp dụng thông qua trình cài đặt. Khi bạn download một theme Jekyll, bạn cũng sẽ download tất cả các file cần thiết để chạy toàn bộ website Jekyll.

Điều này sẽ được thay đổi với phiên bản tương lai của Jekyll, nhưng giờ bạn sẽ cần phải biết làm thế nào để đối mặt với thực tế rằng những theme của Jekyll chứa đựng một website toàn bộ gắn liền với những theme đó.

Trong bài hướng dẫn này, chúng tôi sẽ giới thiệu một theme Jekyll ngay từ đầu, bắt đầu với một số lời khuyên cài đặt cơ bản, hướng dẫn cách làm quen với các tính năng của một theme mới và trải nghiệm các lời khuyên để cài đặt một website mới hoặc cài lại theme một website hiện đang hoạt động.

Hãy bắt đầu nào!

Jekyll trên Envato Market

Danh mục Jekyll trên Envato Market có hàng loạt các theme khác nhau, giá trị từ $19 đến $24. Sau đó, chúng tôi sẽ sử dụng "Writer" và "Astro" (hai người bán hàng đứng đầu hiện tại) để minh hoạ cho phần cài đặt.

jekyll on Themeforest
Theme Jekyll trên thị trường Envato

Cài đặt Jekyll

Jekyll được thiết kế để quản lý offline trên máy tính của riêng bạn, được tích hợp vào một website HTML tĩnh, sau đó được triển khai. Khi thêm nội dung, quy trình cơ bản là tạo file markdown, thêm một số vấn đề phía người dùng ở trên cùng, bổ sung phần còn lại của file với nội dung, sau đó tái xây dựng website của bạn.

Khi website của bạn được xây dựng, bạn có thể triển khai nó theo cách bất kỳ bạn chọn, có thể là thông qua FTP hoặc các lệnh git. Tuy nhiên, chúng tôi sẽ không tập trung vào phần triển khai trong hướng dẫn này, do đó nếu bạn muốn đọc thêm về chủ đề này, vui lòng truy cập phần tài liệu của Jekyll.

Thay vào đó, chúng tôi sẽ tập trung vào phần của quá trình thiết lập website Jekyll của bạn diễn ra ngoại tuyến trên máy tính của bạn, tất cả bắt đầu với quá trình cài đặt.

Điều kiện cần có trước tiên

Làm việc với Jekyll sẽ có liên quan một chút đến việc sử dụng dòng lệnh, nhưng nếu bạn chưa bao giờ làm việc này trước đây thì bạn cũng đừng để nó làm bạn nản lòng. Tôi khuyên bạn nên xem qua một số mục trong loạt bài hướng dẫn The Command Line for Web Design để trở nên thuần thục.

Nếu máy tính của bạn đang chạy Windows, thật không may Jekyll không được hỗ trợ chính thức. Điều đó không có nghĩa là bạn không thể làm cho nó hoạt động được, nhưng bạn có thể vượt qua một số rào cản. Nếu bạn muốn sử dụng Jekyll trên Windows, hãy xem chi tiết cách thực hiện trong tài liệu Jekyll.

Mặt khác, nếu bạn đang sử dụng Mac OS X, Linux hoặc Unix, bạn cần phải đảm bảo đã cài đặt các điều kiện cần có sau đây:

  • Ruby (được cài đặt sẵn trên máy Mac)
  • Ruby Gems (để quản lý các package của Ruby)

Để kiểm tra xem bạn đã cài đặt Ruby chưa, hãy chạy lệnh ruby ​​-v. Để kiểm tra phiên bản Ruby Gems chạy gem -v. Trong cả hai trường hợp, các lệnh này đang kiểm tra mã số phiên bản, mọi thứ sẽ ổn miễn là bạn nhìn thấy kết quả trả về là một con số.

Chúng ta sẽ làm việc với Jekyll 3.1.x vì vậy bạn sẽ không yêu cầu NodeJS hoặc Python như được đề cập trên trang tài liệu cài đặt Jekyll.

Chạy cài đặt Jekyll

Bây giờ, để cài đặt Jekyll vào máy tính của bạn chạy lệnh: gem install jekyll

Nếu bạn thấy thông báo cho biết bạn không có quyền write, hãy sử dụng kèm lệnh sudo và nhập mật khẩu của bạn khi được yêu cầu.

Sau đó, bạn sẽ thấy một vài dòng được in ra trong terminal báo cáo quá trình cài đặt đang được chạy. Khi nhận thông báo "1 gem installed" bạn thành công rồi.

Tạo một website Jekyll mặc định

Nhanh chóng tạo một website Jekyll để bạn có thể thấy nó trông thế nào với trạng thái mặc định, không có theme và tự làm quen với cấu trúc thư mục và file của nó. Tạo một thư mục để chứa website, sau đó mở terminal ở vị trí của thư mục và chạy: jekyll new.

Lưu ý: nếu tại một số thời điểm bạn muốn tạo một website Jekyll mới trong thư mục con của thư mục thứ cấp, sử dụng lệnh: jekyll new subfolder_name

Khi việc cài đặt website hoàn tất, bạn sẽ thấy một thông báo trong terminal của bạn báo rằng “New jekyll site installed in <path>”. Tại thời điểm này, bên trong thư mục của bạn, bạn sẽ thấy nội dung chuẩn của website Jekyll.

Bây giờ hãy chạy lệnh jekyll serve để khởi chạy website của bạn ở chế độ offline.

Khi bạn thấy thông báo "Server running... press ctrl-c to stop" trong terminal của bạn, bạn có thể đi đến địa chỉ http://localhost:4000 trong trình duyệt và xem qua website Jekyll mặc định.

Bây giờ bạn đã thấy cấu trúc tập tin và thư mục của một website Jekyll mặc định trông như thế nào, cũng như trạng thái không có theme của nó, bạn sẽ hiểu rõ hơn về những gì bạn đang nhìn thấy bên trong một bản download theme Jekyll điển hình.

Demo nhanh cho những theme mới

Như bạn đã biết qua những điều chúng tôi đã đề cập trong hướng dẫn này cho đến nay, các theme Jekyll hiện có tất cả các file cần thiết để chạy toàn bộ website. Và như bạn đã thấy trong phần trước, một khi bạn có tất cả các file đó, bạn có thể chạy jekyll serve để cho phép xem website đó trong trình duyệt.

Điều này có nghĩa rằng khi bạn tải về một theme Jekyll mới, bạn chỉ cần giải nén nó, chạy jekyll serve và ngay tức thì giới thiệu một theme trên một website Jekyll đầy đủ chức năng. Nhiều theme thậm chí sẽ đi kèm với nội dung demo đã được kèm sẵn.

Hãy xem qua một số đang sử dụng các theme "Writer" và "Astro", (hoặc theme nào mà bạn thích).

Sau khi giải nén, tìm kiếm xuyên qua cấu trúc của theme cho đến khi bạn tìm thấy thư mục gốc chứa tất cả các file của website Jekyll. Bạn sẽ có thể nhận ra thư mục này từ phần cài đặt Jekyll mặc định trước đó. Hãy tìm những file như _config.yml, thư mục _includes và vv.

Sau đó, mở terminal bên trong thư mục hiện tại và chạy jekyll serve.

Nếu tất cả thành công, bạn sẽ thấy thông báo "Server address:" với một URL được hiển thị ở cuối cùng trong terminal. Copy và dán URL này vào trình duyệt và bạn sẽ thấy bản demo của theme mới của bạn.

Bỏ sót những phần phụ thuộc?

Trong một số trường hợp, bạn có thể thấy thông báo lỗi khi bạn thử chạy jekyll serve. Nếu xảy ra vấn đề này, hãy xem liệu có phải thông báo đang mô tả việc thiếu phần phụ thuộc hay nào không, nghĩa theme cần một chức năng đang bị thiếu trong thiết lập của bạn.

Trong ví dụ này, bạn có thể thấy trong thông điệp lỗi màu đỏ báo rằng gem thiếu "jekyll-paginate":

Một tìm kiếm nhanh bằng Google sẽ cho kết quả repo Github cho gem trong câu hỏi này, hướng dẫn câu lệnh cần thiết để cài đặt phần còn thiếu này.

Sau khi chạy lệnh đó và cài đặt phần phụ thuộc còn thiếu thì jekyll serve có thể hoạt độn như mong đợi:

Nếu Demo không được load

Nếu bạn truy cập URL đã cung cấp và không thấy website, ví dụ:

... kiểm tra giá trị của baseurl trong file _config.yml. Chúng ta sẽ nói thêm về file này sau đó, file này điều khiển cấu hình tổng thể cho toàn bộ website.

Biến số baseurl được nối vào domain chính, ở chế độ offline là http://localhost:4000.

Trong ví dụ trên, chúng tôi muốn website của chúng tôi hiển thị tại http://localhost:4000. Trong file _config.yml, biến số baseurl của chúng ta được đặt thành:

Điều này có vẻ đúng ban đầu, nhưng vì giá trị này được nối vào domain chính, nên nó thực sự làm cho website cố gắng tải tại http://localhost:4000http://localhost.

Vì vậy, chúng ta cần thay đổi giá trị thành một chuỗi rỗng như sau:

Sau đó, website của bạn sẽ tải đúng.

Nếu bạn muốn tải website của mình từ thư mục con, hãy thay đổi giá trị baseurl thành tên của thư mục con, hãy bắt đầu và kết thúc bằng dấu "/":

Tập làm quen với theme

Một trong những lý do chính để bắt đầu bằng cách khám phá cấu trúc hiện tại của theme, (ngoài việc kiểm tra nó vận hành như mong đợi), là bạn có cơ hội làm quen với các tính năng và quy trình vận hành của theme.

Bởi vì Jekyll cung cấp sự linh hoạt, các theme của nó có thể cung cấp chức năng hoàn toàn khác biệt. Sau khi thực hiện bản demo của một theme mới, hãy dành một chút thời gian để duyệt qua và xem loại cấu trúc mà theme này có. Hãy tìm xem liệu theme có trang danh mục, hình ảnh nổi bật, trang tác giả hay không. Hãy chú ý các tính năng này để bạn có thể tìm kiếm tài liệu của theme và tìm hiểu cách sử dụng chúng.

Bạn cũng nên xem qua cấu trúc file và thư mục của theme. Các thành phần chính bạn muốn tìm hiểu là:

  • Mọi bố cục trang tùy chỉnh mà theme có thể có trong thư mục _layouts
  • Bất kỳ biến số nào bạn sẽ cần xét trong nội dung của bạn.

Bạn cũng sẽ cần phải tìm hiểu các chọn lựa về cấu hình website bạn có thể phải thiết lập trong file _config.yml của website để sử dụng các tính năng của theme, chẳng hạn như URL các mạng xã hội, thông tin tác giả, liên kết điều hướng và nhiều thứ khác.

Hãy tự mình thực hiện

Bây giờ bạn có dịp để quan sát theme và tự mình làm quen, đã đến lúc sử dụng nó trên website của riêng bạn. Giữ nguyên không thay đổi phiên bản demo mà bạn đã tạo ra, để bạn có thể so sánh với website vừa được xây dựng của bạn.

Làm rõ nội dung của bản demo

Tạo một thư mục mới trên máy tính của bạn và giải nén lại tất cả các file của theme vào đó.

Lần này, đến vào thư mục _posts và xóa tất cả các file trong đó để các bài đăng demo bị xóa.

Sau đó, xóa bất kỳ file .md (markdown) khỏi thư mục gốc để tất cả trang demo đều biến mất.

Nếu muốn, bạn cũng có thể định vị và xóa bất kỳ hình ảnh nào được sử dụng trong nội dung demo, chẳng hạn như hình đại diên đặc biệt, nếu bạn dự định thay thế chúng bằng hình của riêng bạn. Cho dù hình ảnh nội dung demo hiện tại có thể khác nhau giữa các theme.

Nếu theme có hình ảnh demo bạn muốn xóa nhưng lại không chắc chắn chúng ở đâu, thì việc kiểm tra tài liệu về theme sẽ giúp bạn tìm ra giải pháp. Nếu không, bạn có thể cần xem qua code trong các template của theme để tìm ra chúng.

Thiết lập cấu hình website

Tiếp theo, bạn mở file _config.yml từ thư mục gốc và thiết lập bất kỳ biến chiều rộng của trang được theme yêu cầu. Cơ bản có một số cài đặt phổ biến đối với tất cả các file _config.yml, chẳng hạn như title, email, description và một số thứ khác. Tuy nhiên có một số cài đặt cụ thể cho theme đang dùng.

Chính xác những gì bạn cần làm trong file cấu hình trang đều phụ thuộc vào một theme cụ thể, do đó, bạn nên tham khảo tài liệu của theme tại thời điểm này để biết hướng dẫn về chi tiết cài đặt.

Ví dụ, trong theme Writer, bạn có thể thiết lập menu điều hướng tùy chỉnh bằng biến nav_list để xác định danh sách các mục menu. Mỗi menu sẽ có một label, liên kết cố định và một class định kiểu, sẽ có một biểu tượng Font Awesome xuất hiện bên cạnh nó.

Ngược lại, theme Astro không sử dụng biến specifc nav_item của Writer, nhưng có các biến tùy chỉnh riêng của nó để cho phép bạn thêm liên kết vào các tài khoản truyền thông xã hội khác nhau, cũng như kích hoạt các nhận xét Disqus v.v.

Xét giá trị các biến trong file _config.yml của theme do bạn tạo ra cho đến khi bạn có tất cả các biến theo ý của mình.

Lưu ý rằng nếu bạn thực hiện thay đổi như thế này sau lần đầu tiên phát hành website mới của mình bằng cách sử dụng jekyll serve, bạn sẽ cần phải stop quá trình bằng CTRL + C và khởi động lại để xem mọi thay đổi tiếp theo có hiệu lực hay không.

Thiết lập trang chủ của bạn (nếu cần)

Một số theme sẽ cung cấp cho bạn chọn lựa với nhiều bố cục cho trang chủ của bạn và xét giá trị các mục điều khiển có ảnh hưởng đến việc hiển thị. Nếu trường hợp này xảy ra, có thể bạn sẽ thấy các cài đặt có thể được thay đổi trong file index.html từ thư mục gốc.

Nếu có nhiều bố trí được hỗ trợ, bạn có thể chọn một bố cục khác bằng cách sửa đổi giá trị của cài đặt layout - bạn sẽ phải tham khảo tài liệu của theme để xem những giá trị có thể được sử dụng.

Trong khi bạn đang chỉnh sửa file, hãy xem liệu có các giá trị khác có nên được thay đổi để tác động đến nội dung sẽ được hiển thị trên trang chủ hay không. Ví dụ, trong theme Writer, bạn có thể đặt tiêu đề và mô tả để xuất hiện duy nhất trên trang chủ, và một hình ảnh nổi bật.

Bổ sung các trang của riêng bạn

Nếu bạn muốn thêm các trang như “About” hoặc “Contact” thì giờ là lúc thích hợp. Thêm tài liệu .md (markdown) vào thư mục gốc của website cho mỗi trang bạn muốn thiết lập.

Lưu ý: Thay vì được đặt trong thư mục gốc thì một số theme được thiết lập để đặt tất cả các trang vào thư mục thứ cấp, (thường được đặt tên là "pages". Vì thế hãy kiểm tra tài liệu theme để xem nếu bạn ở trong trường hợp đó.

Ví dụ: tại đây tôi đã thêm trang “About the Site” (about.md), một trang tiểu sử tác giả "About Me" (author-kezz.md), và trang "Contact" (contact.md).

Khi bạn bổ sung các file của trang bạn sẽ muốn biết liệu có các template bố cục cụ thể và/hoặc các cài đặt trang người dùng mà bạn nên sử dụng với chúng. Để tìm hiểu bạn có thể tham khảo tài liệu của theme hoặc chỉ copy và paste các file markdown từ bản cài đặt bản demo mà bạn đã làm trong theme và làm lại chúng.

Ví dụ, ở đây tôi đã copy một trang tác giả hiện có từ bản demo Writer và chuyển nó thành của riêng tôi bằng cách đổi tên rồi chỉnh sửa nội dung của nó.

Bổ sung thêm bài viết

Bây giờ bạn có các thành phần cần thiết để thiết lập cấu trúc website của bạn, đã đến lúc bổ sung một số bài viết. Tôi khuyên bạn nên copy một bài đăng từ thư mục _posts trong trang demo và paste nó vào bản cài đặt mà bạn đang làm việc. Sau đó, bạn có thể đổi tên, ngày và permalink theo ý bạn cho bài viết mới. Bằng cách sử dụng lại một bài giới thiệu, mọi thứ đã đâu vào đấy và bạn chỉ cần thực hiện việc cập nhật.

Danh mục, các thẻ và các tiện ích khác

Một số theme đề xuất hỗ trợ cho danh mục và thẻ. Dù tường hợp này không phổ biến, và kiểu triển khai như vậy có thể khác nhau ở mỗi theme. Kiểm tra tài liệu của theme về những điều bạn có thể cần làm để tương tác với các danh mục và thẻ trên website của bạn.

Ví dụ, trong theme Writer, cho mỗi thể loại bạn muốn sử dụng, bạn cần phải tự thiết lập một thư mục và file mẫu trong một thư mục con của trang có tên là "thể loại".

Có lẽ theme bạn đang sử dụng có một số tính năng bổ sung. Hãy chắc rằng bạn nắm rõ danh sách tính năng và tài liệu mà theme này đề xuất để bạn có thể tận dụng mọi thứ có thể.

Việc thay đổi các theme trên một website hiện hành

Nếu bạn đã có một website Jekyll và chỉ muốn áp dụng một theme mới, bạn sẽ muốn trải nghiệm hầu hết quá trình tương tự như chúng tôi đã làm ở trên. Bạn sẽ thấy sự khác biệt khi xoá đi nội dung của bản demo, thay vì bạn phải hoàn toàn tạo các trang mới và bài viết mới thì bạn chỉ cần copy nội dung của trang hiện có.

Nếu bạn có website Jekyll hiện hành với các trang đã có, hãy copy và paste các file markdown được liên kết từ website cũ của bạn vào trang mới của bạn. Xem qua từng trang và cập nhật vấn đề cần để sử dụng bố cục của theme mới và các biến số cần có.

Sau đó, copy tất cả các file bài viết của bạn từ thư mục _posts cũ sang thư mục mới. Việc này hơi tẻ nhạt, nhưng rất có thể bạn sẽ phải duyệt qua từng file bài viết, từng bài một, và cập nhật cho trang front với bất kỳ cài đặt nào mà theme mới yêu cầu, và xóa các thiết lập của theme cũ mà hiện giờ không cần sử dụng.

Nếu bạn có thư mục image và media được sử dụng trong các trang và bài đăng trên website cũ của mình, hãy copy toàn bộ thư mục vào cấu trúc website mới của bạn. Các bài viết và trang của bạn vẫn nên tham chiếu đến cùng một vị trí hình ảnh, cho phép chúng tiếp tục xuất hiện trong nội dung của bạn.

Tổng kết

Vậy là những điều thiết yếu để bạn thiết lập một theme Jekyll! Quá trình sẽ đa dạng cho từng theme, nhưng bạn vẫn có thể tuân theo các giai đoạn quan trọng này trong mỗi trường hợp. Hãy tóm tắt nhanh lại những giai đoạn đó.

  • Nhanh chóng demo một theme mới bằng cách giải nén và khởi chạy: jekyll serve
  • Cài đặt bất kỳ phần phụ thuộc cần có đang thiếu để theme có thể bắt đầu chạy.
  • Duyệt qua giao diện người dùng của bản demo và ghi chú các tính năng bạn cần tìm hiểu để sử dụng.
  • Duyệt cấu trúc file, đặc biệt là thư mục _layouts, để xem bố cục và biến tùy chỉnh nào bạn có thể cần sử dụng.
  • Tạo bản cài đặt thứ hai của theme và xóa các trang nội dung bản trình diễn, bài đăng và hình ảnh (tùy chọn).
  • Xét giá trị các cấu hình trong _config.yml cho phù hợp với website của bạn.
  • Thiết lập trang chủ (nếu được yêu cầu) bằng cách thay đổi các biến trong file index.html ở thư mục gốc.
  • Tạo file cho trang markdown với yêu cầu hiện tại, (hoặc copy và dán chúng từ website demo của bạn/website hiện có).
  • Tạo file đánh dấu bài đăng trong thư mục _posts với các yêu cầu cần thiết, (hoặc copy và dán chúng từ website demo của bạn/website hiện có).
  • Thực hiện bất kỳ thiết lập bổ sung mà theme cần có, chẳng hạn như tạo các template cho danh mục.

Tôi hy vọng bài hướng dẫn này giúp bạn cảm thấy tự tin để xử lý việc thiết lập một website Jekyll mới với theme tự chọn hoặc chuyển đổi theme của website hiện tại sang theme mới.

Để được hướng dẫn chi tiết về cách sử dụng Jekyll, hãy xem khóa học này từ Guy Routledge:

Cảm ơn bạn đã đọc bài viết và tôi sẽ sớm gặp lại bạn!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.