Khám phá nội dung mặc định của Jekyll
Jekyll là một trình tạo trang web tĩnh cung cấp một số lợi ích của Hệ thống quản lý nội dung (CMS) trong khi tránh các vấn đề về hiệu suất và bảo mật do các trang web hướng database đó đưa ra. Nó "biết blog" với các tính năng đặc biệt để xử lý nội dung được sắp xếp theo ngày tháng. Jekyll rất phù hợp cho những người cần làm việc offline , những người thích sử dụng trình soạn thảo nhẹ thay vì biểu mẫu web để duy trì nội dung và những người muốn sử dụng kiểm soát version để theo dõi các thay đổi đối với trang web của họ.Trong phần đầu tiên của loạt bài này, ta đã cài đặt Jekyll và các phụ thuộc của nó trên server Ubuntu 16.04, tạo trang web phát triển trong folder chính của ta và đảm bảo firewall cho phép lưu lượng truy cập vào trang web.
Trong hướng dẫn này, ta sẽ sử dụng nội dung được tạo tự động từ hướng dẫn trước để khám phá cách Jekyll biến các file nguồn thành nội dung tĩnh, giúp việc tạo và duy trì nội dung dễ dàng hơn.
Yêu cầu
Để làm theo hướng dẫn này, bạn cần hoàn thành hướng dẫn trước, Cách cài đặt trang web phát triển Jekyll trên Ubuntu 16.04 . Ta xây dựng dựa trên công việc ta đã làm trong hướng dẫn đó và nếu không hoàn thành, các ví dụ sẽ không khớp.
Khi bạn đã hoàn thành Phần 1, bạn đã sẵn sàng để bắt đầu.
Trang chủ
Hãy bắt đầu khám phá trên trang chủ, được tập hợp từ bốn file nguồn khác nhau. Ta sẽ đi qua từng file riêng lẻ, xem xét cách chúng hoạt động cùng nhau để tạo ra trang chủ tĩnh.
Nếu bạn đã thoát khỏi web server phát triển sau khi hoàn thành hướng dẫn đầu tiên, hãy khởi động lại nó ngay bây giờ:
- cd ~/www
- jekyll serve --host=203.0.113.0
Sau đó, truy cập trang web trong trình duyệt web. Ảnh chụp màn hình của trang chủ bên dưới đã được sửa đổi để làm nổi bật cấu hình và nguồn thông tin.
Cài đặt cấu hình: _config.yml
Phần lớn sức mạnh của Jekyll đến từ khả năng cài đặt thông tin sẽ được lặp lại ở nhiều nơi trên trang web tĩnh trong một file nguồn duy nhất, _config.yml
_config.yml mặc định được tạo bằng cách chạy jekyll new , chứa năm cài đặt hiển thị trên trang chủ:
title: Tiêu đề tuyệt vời của bạn
email: your-e-mail@domain.com
description: Viết một mô tả tuyệt vời cho trang web mới của bạn tại đây…
twitter_username: jekyll
github_username: jekyllrb
Thông tin này tự động được đưa vào tất cả các trang và bài đăng khác mà ta tạo. Khi cần cập nhật một trong các cài đặt này, ta có thể thực hiện thay đổi trong file này và file sẽ được cập nhật ở mọi nơi. Để xem điều này đang hoạt động, ta sẽ thay đổi các giá trị này.
Mở file trong một terminal mới:
- nano ~/www/_config.yml
Ta sẽ thay đổi cài đặt thành các giá trị bên dưới:
title: Sammy's Blog email: sammy@digitalocean.com description: > Welcome to my blog! github_username: DigitalOcean twitter_username: DigitalOcean Ta sẽ để riêng url và baseurl trong khi ta đang phát triển và thực hiện bất kỳ điều chỉnh nào khi đến lúc triển khai trang web của ta .
Để xem những thay đổi được thực hiện trong file cấu hình, ta cần dừng web server bằng CTRL-C , sau đó khởi động lại nó:
- jekyll serve --host=203.0.113.0
Lưu ý: Đảm bảo mỗi dòng trong description được thụt vào ít nhất một khoảng trắng, nếu không bạn sẽ gặp phải lỗi: “không thể tìm thấy mong đợi”: 'khi đang quét một khóa đơn giản ở dòng 19 cột 1`.
Khi bạn hoàn tất, hãy lưu và thoát khỏi editor . Sau đó, reload trang trong trình duyệt web . Tùy thuộc vào cài đặt bộ nhớ cache local của trình duyệt web , bạn có thể cần Shfit + Reload để xem các thay đổi, sẽ xuất hiện trong hai vùng được đánh dấu bên dưới:
Có nhiều tùy chỉnh khác có thể được thực hiện trong file _config.yml , nhưng bây giờ ta sẽ chuyển sang file nguồn tiếp theo và lưu ý cách những thay đổi mà ta đã thực hiện hiển thị trên phần còn lại của trang web.
Các trang: about.md
Nhấp vào liên kết About ở góc trên bên phải. Những thay đổi ta đã thực hiện trong file cấu hình có thể nhìn thấy ở đây, bên trên và bên dưới nội dung chính của trang Giới thiệu.
Nội dung trung tâm đó và văn bản liên kết trong tiêu đề, được lưu trữ trong file about.md chứa bốn loại nội dung:
1. Vật chất phía trước Jekyll
Khối ở đầu file about.md bắt đầu và kết thúc bằng ba dấu gạch ngang là Vật chất phía trước của Jekyll. Nó phải là thứ đầu tiên trong file và khi nó xuất hiện, nó báo hiệu cho Jekyll rằng file cần được phân tích cú pháp. Nó thường bao gồm YAML hợp lệ giữa các dòng để tận dụng các biến được định nghĩa , nhưng nó cũng có thể để trống. Khối Front Matter trống đôi khi hữu ích cho file CSS hoặc nơi khác mà bạn không cần đặt bất kỳ giá trị nào nhưng bạn muốn truy cập vào các biến.
Trang "Giới thiệu" đặt ba giá trị trong Vấn đề phía trước:
--- layout: page title: About permalink: /about/ --- Bố trí:
Bố cục loại bỏ nội dung lặp lại như đầu trang, chân trang và menu để giúp trang web dễ bảo trì hơn. Jekyll có ba bố cục: default , page và post . Mỗi người đều có những đặc điểm đặc biệt. Trong trường hợp này, một liên kết menu đến giá trị tiêu đề, “Giới thiệu” xuất hiện trong chuyển tiêu đề vì bố cục được đặt thành “trang”.
Tiêu đề:
Ngoài việc được sử dụng làm văn bản liên kết trong chuyển tiêu đề, tiêu đề còn được sử dụng làm tiêu đề trang hiển thị, được định dạng bằng thẻ Tiêu đề 1 và làm <title> , là văn bản xuất hiện trên thanh trình duyệt và khi trang được đánh dấu.
Permalink:
Jekyll tự động tạo các folder và file HTML từ các file nguồn này để xác định URL của một trang. Liên kết cố định cho phép bạn overrides hành vi mặc định. Ở đây, nó làm cho URL của trang là http:// 203.0.113.0 :4000/about/ thay vì http:// 203.0.113.0 :4000/about.html .
2. Văn bản có thể nhìn thấy
Nội dung trang bắt đầu sau Front Matter. Văn bản ở đây xuất hiện trên trang, chẳng hạn như “Đây là chủ đề cơ bản của Jekyll 3.”.
3. Đánh dấu
Markdown là một phần của nội dung trang chính và kiểm soát định dạng của nội dung. Nó sẽ được phân tích cú pháp thành HTML cho trang web tĩnh. Markdown thường được người viết nội dung ưa thích hơn HTML vì nó được thiết kế để dễ đọc và viết hơn.
4. Chỉ thị mẫu lỏng
Jekyll sử dụng Liquid làm công cụ mẫu của nó để bao gồm các yếu tố động. Các lệnh Liquid xuất hiện giữa các dấu ngoặc nhọn, chẳng hạn như {% include icon-github.html username="jekyll" %} .
Hãy thực hiện một số thay đổi đối với trang này để xem trang bị ảnh hưởng như thế nào.
Thay đổi tiêu đề
Ta sẽ thực hiện một thay đổi nhỏ và gọi trang là “Giới thiệu về tôi” thay vì chỉ là “Giới thiệu”:
- nano ~/www/about.md
--- . . . title: "About me" . . . --- Khi bạn hoàn tất, hãy lưu và thoát khỏi file .
Thay đổi sẽ xuất hiện ở ba vị trí và liên kết menu sẽ được cập nhật trên tất cả các trang của trang web:
Thêm một trang mới
Tiếp theo, ta sẽ thêm trang “Liên hệ” vào trang web và sử dụng một chút dấu xuống để đưa vào hình ảnh.
Ta sẽ bắt đầu bằng cách làm cho một assets folder để giữ hình ảnh của ta :
- mkdir ~/www/assets
Sau đó, ta sẽ chuyển hình ảnh vào máy của bạn bằng wget . Cờ -O sẽ hướng nó đến folder mà ta đã tạo. Cờ yêu cầu ta cũng chỉ định tên file , vì vậy ta sẽ:
- wget -O ~/www/assets/postcard.jpg http://assets.digitalocean.com/articles/jekyll-1604/postcard.jpg
Sau khi hình ảnh được đặt local , ta sẽ tạo trang mới:
- nano ~/www/contact.md
--- layout: page title: "Send me a postcard!" --- DigitalOcean\\ Attn: Sammy Shark\\ 101 Avenue of the Americas\\ New York, NY 10013  Ta hãy xem xét kỹ hơn sự đánh dấu. Đầu tiên, dấu gạch chéo kép, \\ , ở cuối mỗi dòng buộc trả về mà không cần thêm khoảng trống. Thứ hai, hình ảnh được hiển thị với phần đánh dấu này ![]() . Dấu chấm than báo hiệu rằng liên kết theo sau là một hình ảnh. Dấu ngoặc chứa văn bản thay thế sẽ được sử dụng nếu hình ảnh không được tải hoặc khách truy cập đang sử dụng trình đọc màn hình. Dấu ngoặc đơn chứa liên kết đến file hình ảnh. Bạn có thể tìm hiểu thêm về kiểu đánh dấu mặc định của Jekyll trên trang web kramdown .
Lưu và thoát khỏi file , sau đó reload trang. Liên kết mới sẽ xuất hiện, được sắp xếp theo thứ tự bảng chữ cái dựa trên tên của file .
Với các file mới đã có sẵn, phần trên cùng của cấu trúc file của ta bây giờ trông giống như sau:
├── about.md ├── assets │ └── postcard.jpg ├── _config.yml ├── contact.md Trang web thực tế trông giống như sau:
Nhấp vào tiêu đề trang web để quay lại trang chủ, nơi bạn sẽ tìm thấy liên kết mới có trong phần chuyển tiêu đề.
Lưu ý: Thường có một biểu mẫu web tương tác trên trang Liên hệ. Jekyll không cung cấp bất kỳ xử lý biểu mẫu tích hợp nào , nhưng bạn có thể sử dụng các dịch vụ dựa trên cloud như Disqus, Formspree hoặc FormKeep hoặc lưu trữ của bạn .
Bài đăng: _posts / YYYY-MM-DD -welcome-to-jekyll.markdown
Nhấp vào liên kết "Chào mừng đến với Jekyll" để xem bài đăng blog mẫu được cung cấp.
Thư mục _posts chứa các file được đặt tên đặc biệt, theo định dạng YYYY-MM-DD-Words-in-Title . Nếu bài đăng của bạn không có tên ở định dạng này, nó sẽ không được phân tích cú pháp. Nếu tên file có ngày được đặt trong tương lai, trang sẽ không được phân tích cú pháp cho trang tĩnh. Đặt tên file với một ngày trong tương lai không cho phép các chương trình đặt tên được sử dụng kết hợp với cron hoặc chiến lược tự động hóa khác để xuất bản một bài sau ngày và thời gian cụ thể. Các file bài đăng có thể kết thúc bằng .markdown , .md , .html hoặc các phần mở rộng khác khi trình chuyển đổi tùy chỉnh được cài đặt.
Bài viết bắt đầu với Front Matter. Front Matter là bắt buộc đối với mọi file bài đăng vì nó chứa các giá trị như ngày tháng quan trọng đối với việc tạo trang web.
--- layout: post title: "Welcome to Jekyll!" date: 2016-08-31 17:35:19 +0000 categories: jekyll update --- Bố trí:
Mặc dù có thể bố cục khá khác nhau, nhưng bố cục cho bài viết rất giống với mặc định. Có các biến thể trong phần HTML <head> ... </head> trong đó nội dung trang khác nhau và nội dung giữa các <div class="wrapper"> ... </div> , nhưng phần còn lại là giống hệt nhau. Sự khác biệt duy nhất có thể nhìn thấy trên chính trang này là việc tự động đưa giá trị ngày của Front Matter vào bên dưới tiêu đề.
Tiêu đề:
Tiêu đề xuất hiện dưới dạng Tiêu đề 1 trên chính bài đăng blog và Tiêu đề 2 trên trang index .
Ngày:
Ngày, được đặt ở đây, sẽ xác định ngày được hiển thị trên cả trang chủ và chính bài đăng. Chính ngày này cũng sẽ xác định URL của bài đăng mà ta sẽ khám phá chi tiết hơn ngay sau đây.
Lưu ý: Ngày trong Front Matter không có mối quan hệ trực tiếp với ngày bắt đầu tên file . Tên file phải bắt đầu bằng ngày tháng ở định dạng thích hợp để có thể được phân tích cú pháp. Nếu nó được đặt tên với một ngày trong tương lai, nó sẽ không được phân tích cú pháp cho đến quá trình xây dựng trang web tiếp theo sau ngày đó. Trong khi đó, ngày Front Matter xác định cấu trúc folder sau khi file được phân tích cú pháp và được sử dụng làm giá trị hiển thị trên trang chủ và bài đăng.
- Danh mục: Danh mục dành riêng cho bài đăng và được sử dụng để group nội dung theo chủ đề. Theo mặc định, chúng không hiển thị trên trang, mặc dù chúng có thể được thêm vào mẫu tùy chỉnh.
Các file còn lại
Lúc này, ta đã xem xét kỹ ba file , _config.yml , about.md và _posts/ YYYY-MM-DD -welcome-to-jekyll.markdown . Dưới đây là tổng quan ngắn gọn về các file ít hiển thị trực tiếp từ trình duyệt:
main.scss :
Jekyll sử dụng Trang tính kiểu tuyệt vời cú pháp (Sass), được biên dịch thành CSS thông thường mỗi khi trang web được xây dựng lại. Các file .sass nằm trong folder css .
feed.xml :
Jekyll cung cấp một nguồn cấp RSS, cũng được xây dựng mỗi khi trang web tĩnh được xây dựng lại, để cho phép các trang web tổng hợp các bài đăng và cung cấp một cách để user đăng ký.
Gemfile và Gemfile.lock :
Gemfile liệt kê các plugin cho Jekyll được cài đặt bằng lệnh bundle . Khi chúng được cài đặt, file Gemfile.lock được tạo để theo dõi version cụ thể của các plugin đã được cài đặt.
Trong bốn file này, chỉ có CSS ảnh hưởng đến việc trình bày nội dung. Nếu đặc biệt quan tâm đến Jekyll và Sass, bạn có thể tìm hiểu thêm về nó từ trang web mẫu của Jekyll về tích hợp Sass.
Kết luận
Trong hướng dẫn này, ta đã khám phá nội dung bản soạn sẵn mà Jekyll cung cấp khi ta tạo một trang web mới và thực hiện một số thay đổi để chứng minh cách các file nguồn kết hợp với nhau trên các trang web. Điều này giúp trang web dễ bảo trì hơn bằng cách đặt các giá trị ở một nơi duy nhất, nơi chúng có thể được cập nhật bằng một lần chỉnh sửa thay vì phải thay đổi mọi file . Nó cũng cho phép các bài đăng được đưa vào trang chủ một cách tự động, vì vậy bạn không phải lo lắng về việc cập nhật thủ công một trang khác để làm nổi bật bài đăng mới.
Trong Phần 3 , ta sẽ xem xét cấu trúc file của trang web tĩnh, cách cấu trúc đó được phản ánh trong URL của các trang và bài đăng của ta theo mặc định và cách overrides hành vi mặc định.
Các tin liên quan
