Cách kiểm soát URL và liên kết trong 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, mặc dù tính hữu ích của nó không chỉ giới hạn ở các trang blog. 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 hướng dẫn này, ta sẽ tập trung vào cách Jekyll xử lý URL và liên kết vì việc thay đổi URL sẽ phá vỡ liên kết của người khác đến các trang của ta , cũng như các liên kết trong nội dung của trang web của ta . URL rất quan trọng đối với cách mọi người tìm và sử dụng trang web và đảm bảo cân nhắc trước khi xuất bản trang web lần đầu tiên.
Ta sẽ xem xét cách Jekyll tạo URL theo mặc định và chỉ ra cách thay đổi mẫu cho một file riêng lẻ hoặc toàn bộ trang web. Sau đó, ta sẽ xem xét cách liên kết đến các trang trong nội dung của ta . Cuối cùng, ta sẽ phân đoạn trang web để thử nghiệm.
Yêu cầu
Để làm theo hướng dẫn này, bạn cần phải hoàn thành các hướng dẫn trước:
Khi bạn hoàn thành những điều này, bạn đã sẵn sàng để bắt đầu.
Cấu trúc file của trang web tĩnh
Trong Phần 2 của loạt bài này , ta đã tạo giàn giáo bằng lệnh jekyll new và tập trung vào cách trang web kết quả trông như thế nào trong trình duyệt web. Bây giờ, ta hãy xem cấu trúc file được tạo khi Jekyll tạo trang web tĩnh.
Lưu ý: Nếu bạn đã theo dõi Phần 2 của loạt bài này, bạn sẽ có thêm folder nội dung và trang liên hệ. Nếu bạn không làm như vậy hoặc nếu bạn đã thử nghiệm bằng cách thêm nhiều trang hơn, cấu trúc của bạn có thể trông hơi khác.
Thư mục _site và tất cả nội dung bên dưới nó, được đánh dấu bên dưới, bao gồm trang web tĩnh.
. ├── 404.html ├── about.md ├── assets │ └── postcard.jpg ├── _config.yml ├── contact.md ├── Gemfile ├── Gemfile.lock ├── index.md ├── _posts │ └── 2017-09-04-welcome-to-jekyll.markdown └── _site ├── 404.html ├── about │ └── index.html ├── assets │ ├── main.css │ └── postcard.jpg ├── contact.html ├── feed.xml ├── index.html └── jekyll └── update └── 2017 └── 09 └── 04 └── welcome-to-jekyll.html Không giống như các trang web dựa trên database , URL cho một trang web tĩnh là sự trình bày theo nghĩa đen của cấu trúc folder trên đĩa. Jekyll đã chuyển đổi các danh mục của bài đăng thành các folder và ghi ngày tháng vào cấu trúc file , một mẫu phổ biến đối với nhiều blog, do đó, mẫu URL cuối cùng cho bài đăng này là /category1/category2/YYYY/MM/DD/words-in-title.html , vì vậy URL theo nghĩa đen là http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html .
Dàn trang không cung cấp các trang index động cho các folder này, vì vậy một trong hai điều sẽ xảy ra nếu user xóa một phần của URL để cố gắng tìm tất cả các bài đăng từ một danh mục cụ thể, năm, tháng hoặc ngày. Nếu web server cho phép lập index folder tự động, họ sẽ thấy thông tin về file và folder :
Trong trường hợp thứ hai, nếu administrator của trang web production vô hiệu hóa danh sách folder trên server , user sẽ bị từ chối quyền truy cập:
Cấu trúc dựa trên danh mục và ngày tháng là một mẫu phổ biến cho các URL blog, nhưng cách bạn quyết định cấu trúc URL của bạn sẽ phụ thuộc vào nhu cầu của trang web cụ thể của bạn.
Nếu bạn muốn thay đổi mặc định, Jekyll làm cho việc tạo URL khá đơn giản. Sẽ rất hữu ích nếu bạn suy nghĩ về điều này trước khi xuất bản trang web lần đầu tiên, vì những thay đổi đối với mẫu URL ảnh hưởng đến mức độ hiệu quả của mọi người có thể tìm thấy nội dung bằng các công cụ tìm kiếm và ảnh hưởng đến các liên kết mà những người khác thực hiện với trang web.
Hiểu cách URL được kiểm soát
Hệ thống tạo URL của Jekyll vừa linh hoạt vừa mạnh mẽ. Chúng có thể bị ảnh hưởng bởi vị trí và cách bạn đặt tên và lưu trữ các file nguồn, cũng như được overrides động bằng một giá trị cụ thể hoặc mẫu chung hơn.
Trang mặc định
Khi ta tạo một trang trong folder root của trang web giống như ta đã làm cho trang liên hệ của bạn , tên file , contact.md được chuyển thành contact.html và URL kết quả cũng nằm ngay ngoài folder root : http://203.0.113.0:4000 /contact.html . Nếu ta đặt nó trong một hoặc nhiều folder con, những folder đó cũng sẽ trở thành một phần của URL. Ví dụ: nếu ta đặt trang contact.md trong một folder có tên là main , URL sẽ trở thành http://203.0.113.0:4000 /main/contact.html .
Đăng mặc định
Các bài đăng hoạt động khác với các trang. Đầu tiên, chúng được phép có các danh mục và các danh mục đó trở thành folder trên trang web tĩnh cũng như một phần của URL. Mẫu bài đăng mặc định là sự kết hợp của Front Matter:
title: "Welcome to Jekyll!" date: 2017-09-04 03:36:31 +0000 categories: jekyll update Trong folder _site , folder con sẽ là jekyll/update/2017/09/04/welcome-to-jekyll.html , theo mẫu /:categories/:year/:month/:day/:title và dẫn đến URL http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html .
Nếu ta đã xóa một danh mục khỏi Vấn đề phía trước, cấu trúc folder sẽ thay đổi vào lần tiếp theo trang web được tạo và sẽ không còn là một phần của URL.
Các mặc định của trang và bài đăng có thể được overrides theo hai cách.
Permalinks
Việc xác định Permalink trong Front Matter của một trang riêng lẻ sẽ overrides mặc định cho cả trang và bài đăng, cho phép ta chỉ định chính xác những gì ta muốn liên kết trên cơ sở từng file . Điều này được đặt trong nội dung mặc định của trang Giới thiệu, nơi giá trị liên kết cố định, /about/ dẫn đến URL http://203.0.113.0:4000 /about/ lần lượt tồn tại trên đĩa dưới dạng about/index.html
Các mẫu Permalink
Jekyll cho phép bạn xác định lại toàn bộ mẫu mặc định trong _config.yml Điều này sẽ ảnh hưởng đến cả trang và bài đăng với một điểm khác biệt quan trọng: bài đăng có quyền truy cập vào danh mục và các yếu tố ngày giờ từ Front Matter, trong khi các trang thì không. URL của trang sẽ tuân theo mẫu, loại bỏ bất kỳ yếu tố cụ thể nào một cách duyên dáng.
Để xem thao tác overrides mẫu liên kết cố định, ta sẽ tạo một mẫu giữ lại các danh mục cho bài đăng, bỏ qua các yếu tố ngày tháng và kết thúc bằng bài đăng hoặc tiêu đề trang:
- nano ~/www/_config.yml
Thêm giá trị sau vào cuối file :
. . . permalink: /:categories/:title/ Để xem các thay đổi từ việc chỉnh sửa file cấu hình, ta cần dừng web server bằng CTRL-C , sau đó khởi động lại:
- jekyll serve --host=203.0.113.0
Trên đĩa, cấu trúc file đã thay đổi:
├── about.md ├── assets │ └── postcard.jpg ├── _config.yml ├── contact.md ├── css │ └── main.scss ├── feed.xml ├── Gemfile ├── Gemfile.lock ├── index.html ├── _posts │ ├── 2017-09-04-welcome-to-jekyll.markdown │ └── 2017-09-04-link-test.md └── _site ├── about │ └── index.html ├── assets │ └── postcard.jpg ├── contact # originally `contact.html` │ └── index.html ├── css │ └── main.css ├── feed.xml ├── Gemfile ├── Gemfile.lock └── index.html └── jekyll └── update └── welcome-to-jekyll └── index.html Những thay đổi này trong cấu trúc file chuyển thành những thay đổi trong URL. Trang Giới thiệu vẫn ở /about/ vì liên kết cố định của nó đã được đặt trên file riêng lẻ ngay từ đầu. Trang Liên hệ đã thay đổi từ /contact.html thành /contact/ và bài đăng Kiểm tra Liên kết hiện có tại /jekyll/update/welcome-to-jekyll/ vì sự thay đổi trên toàn trang đối với mẫu liên kết cố định. Bạn có thể tìm hiểu thêm về những mã thông báo nào có sẵn để tạo URL trong tài liệu Jekyll Permalinks .
Tạo liên kết mạnh mẽ đến bài viết
Bây giờ ta đã biết cách kiểm soát địa chỉ nơi một trang được đặt, có một số điều cần cân nhắc khi liên kết đến các địa chỉ đó.
Nếu ta tạo các liên kết trong phần nội dung của một trang cho một trang hoàn toàn tĩnh, ta sẽ sử dụng URL của trang mà ta muốn liên kết đến ở một trong một số định dạng.
- Liên kết tuyệt đối:
[Link Text]([http://203.0.113.0:4000/post-name)Đây là định dạng phù hợp cho một liên kết ngoài trang web, nhưng không phù hợp với trang web của ta vì giữ số cổng trên URL cơ sở sẽ phá vỡ các liên kết của ta trong quá trình production và bỏ qua nó sẽ phá vỡ chúng trên trang web phát triển của ta . -
[Link Text(/[post-name)gốc tương đối:[Link Text(/[post-name)Các liên kết root chỉ hoạt động đối với liên kết local và chúng tuân theo cấu trúc folder trên server bắt đầu từ root web do dấu gạch chéo đầu tiên,/. - Liên kết tương đối:
[Link Text](post-name)Liên kết tương đối cũng dành cho các liên kết local và bắt đầu theo đường dẫn từ cùng folder với trang chứa liên kết.
Cả hai liên kết tương đối đều có một vấn đề tương tự. Nếu ta thay đổi định dạng liên kết của bạn , ta cần tìm tất cả các liên kết đến URL cũ trong nội dung của ta và cập nhật chúng. Jekyll's Liquid templating cung cấp một cách liên kết đến các bài đăng linh hoạt hơn. Thay vì sử dụng liên kết theo nghĩa đen, bạn có thể sử dụng biến post_url với tên của file để thay vì liên kết như thế này:
[Link Text](/jekyll/update/2016/09/08/welcome-to-jekyll.html) ta sẽ liên kết như thế này:
[Link Text]({% post_url 2010-09-08-welcome-to-jekyll %}) Ta chỉ cần bao gồm tên file và không cần bao gồm folder _posts hoặc phần mở rộng của file . Liên kết đến một bài đăng được thực hiện theo cách này sẽ tiếp tục hoạt động với cài đặt liên kết cố định nào mà bạn cấu hình .
Lưu ý: Hiện tại, khả năng liên kết động này khả dụng cho Bài đăng nhưng không khả dụng cho Trang, mặc dù các kế hoạch cho Trang đang được triển khai.
Tạo bài đăng mới
Ta sẽ tạo một bài đăng mới để áp dụng những gì ta đã học được về việc tạo liên kết. Mở một file mới trong editor , đặt ngày trong tên file nếu cần:
- nano ~/www/_posts/2017-09-04-link-test.md
Ta sẽ cài đặt Front Matter giống như bài đăng ví dụ, đảm bảo ngày ở đây trùng với tên file ở bước trước. Đảm bảo thay thế địa chỉ IP hoặc domain của trang web của bạn và ngày trong tên file Kiểm tra liên kết của bạn.
--- layout: post date: 2017-09-04 07:00 title: Link Test --- Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links: * [An absolute link](http://203.0.113.0:4000/about/) * [A root relative link](/jekyll/update/welcome-to-jekyll/) * [A Jekyll post_url link]({% post_url 2017-09-04-link-test %}) Lưu và thoát. Khi bạn truy cập lại trang chủ, bài đăng mới sẽ tự động xuất hiện:
Theo liên kết trang chủ đến bài đăng mới và thử từng bài. Cả ba đều hoạt động trên trang web nhà phát triển của ta :
Liên kết tuyệt đối sẽ hoạt động trên trang web phát triển của ta , nhưng nó sẽ bị hỏng khi ta triển khai đến một trang web có URL khác hoặc không có số cổng. Liên kết root -họ hàng sẽ hoạt động ở một vị trí mới miễn là schemas liên kết cố định vẫn giữ nguyên. Tuy nhiên, nếu thay đổi được thực hiện, liên kết này sẽ không được cập nhật và nó sẽ bị hỏng trên bất kỳ trang web nào. Liên kết Jekyll post_url sẽ tạo liên kết root -họ hàng khi trang web được phân tích cú pháp. Nó không chỉ hoạt động ở mọi nơi, mà Jekyll còn đảm bảo bài đăng mà bạn liên kết đến thực sự tồn tại khi nó phân tích trang web. Nếu bài đăng không có, nó sẽ đưa ra một "Liquid Exception" cho bạn biết file nào chứa liên kết xấu và liên kết nào là vấn đề. Ví dụ: nếu ta đã nhập nhầm tên file sai trên liên kết thứ ba:
Liquid Exception: Could not find post "broken-name-welcome-to-jekyll" in tag 'post_url'. Make sure the post exists and the name is correct. in /home/sammy/www/_posts/2017-09-04-link-test.md ERROR: YOUR SITE COULD NOT BE BUILT: ------------------------------------ Đây là thay đổi cuối cùng đối với nội dung trang web. Trong bước tiếp theo, ta sẽ sao chép trang web của bạn sang một vị trí mới để ta có thể kiểm tra công việc của bạn .
Kiểm tra các liên kết trên một trang web dàn dựng
Trang Phương pháp triển khai của Jekyll bao gồm nhiều cách khác nhau để di chuyển nội dung của bạn đến vị trí production tùy thuộc vào nhu cầu của bạn. Điều này bao gồm mọi thứ từ FTP đến các phương pháp tự động tinh vi. Hiện tại, ta sẽ cài đặt một trang web dàn dựng trên cùng một máy để minh họa cách các liên kết hoạt động.
Tạo một trang web thử nghiệm
Ta sẽ cài đặt Nginx để có thể kiểm tra cách thức hoạt động của liên kết trước khi triển khai nó vào production :
- sudo apt-get install nginx
Khi quá trình cài đặt hoàn tất, ta sẽ cho phép lưu lượng truy cập HTTP.
- sudo ufw allow http
Khi ta truy cập địa chỉ của máy phát triển, ta sẽ thấy:
Vì ta đang sử dụng cùng một hệ thống file nên ta sẽ di chuyển trang web bằng lệnh rsync cơ bản.
Để đưa nội dung của _site vào folder root của tài liệu Nginx, nằm tại /var/www/html ta sẽ sử dụng lệnh sau với -a để đồng bộ hóa đệ quy và bảo toàn hầu hết mọi thứ và tùy chọn -v để cung cấp kết quả dài dòng:
- sudo rsync -av ~/www/_site/ /var/www/html/
Sau khi rsync hoàn tất, ta có thể truy cập trang web của ta , được cung cấp bởi Nginx, không có số cổng http:// 203.0.113.0 và đảm bảo bạn đã thoát khỏi web server phát triển của bạn trước khi thử nghiệm.
Kiểm tra trang web
Thử nghiệm sau khi triển khai đến một địa điểm mới giúp ta đảm bảo độc giả của ta có trải nghiệm mà ta dự định. Kiểm tra liên kết tự động có thể giúp điều này trở thành một phần dễ dàng và thường xuyên của quy trình, nhưng hiện tại, ta sẽ xem xét nó bằng tay.
Bài đăng trên blog mới tự động xuất hiện trên trang chủ, được sắp xếp theo thứ tự mới nhất ở trên cùng.
Khi ta truy cập bài đăng "Kiểm tra liên kết", ta sẽ thấy rằng cả liên kết tuyệt đối và liên kết root tương đối đều bị hỏng do môi trường ta triển khai không sử dụng cổng 4000, trong khi liên kết Jekyll post_url hoạt động ở cả hai vị trí.
Ta đã thử nghiệm xong, vì vậy ta sẽ tắt nginx và đóng cổng 80 vì ta không có ý định phục vụ trang web:
- sudo systemctl stop nginx
- sudo ufw delete allow http
Ta đã hoàn thành việc khám phá các liên kết và URL, vì vậy ta cũng sẽ thoát khỏi server phát triển bằng CTRL+C
Nếu ta kết hợp các tên trang ổn định, được lựa chọn cẩn thận với liên kết đến các bài đăng bằng thẻ post_url , ta sẽ không phải lo lắng quá nhiều khi liên kết đến các trang của riêng mình. Thử nghiệm ở một vị trí mới trước khi triển khai vào production vẫn có giá trị để tìm ra những sai lầm của chính ta và hơn thế nữa để tìm ra các liên kết bị hỏng đến các trang bên ngoài.
Kết luận
Trong loạt bài này, ta đã cài đặt và cấu hình một trang web phát triển. Trong hướng dẫn này, ta đã xem xét cách kiểm soát địa chỉ web của các trang và bài đăng trên trang web của ta , overrides các mẫu mặc định, tạo liên kết mạnh mẽ đến các bài đăng trong nội dung của ta và triển khai trang web để thử nghiệm. Bạn có thể quan tâm đến việc tìm hiểu về cách tùy chỉnh các mẫu và chủ đề của trang web hoặc cách triển khai trang web đến vị trí production của nó .
Các tin liên quan
