# 108: Xây dựng Trang Đoạn trích Cá nhân - Thủ thuật CSS

Anonim

Chúng ta bắt đầu bằng cách xem xét một số công việc khó khăn mà tôi đã làm ở hậu trường để rút ra một số việc cần phải làm. Giống như thêm vào phần còn lại của lệnh gọi wp_list_pages () để xuất phần còn lại của danh sách các đoạn mã cho mỗi danh mục. Và cũng thêm CSS để thay đổi màu sắc của thanh phân tách các danh mục và danh sách các đoạn trích. Chúng tôi cũng thay đổi các di chuột của các danh mục để làm sáng màu thay vì đường viền trắng câm mà chúng tôi tạm thời có trong đó. Theo nghĩa đen, chúng tôi đã sử dụng lighten()hàm trong Sass để thực hiện công việc cho chúng tôi.

Tuy nhiên, mục tiêu trong video màn hình này là tạo kiểu cho chế độ xem cho một đoạn mã. Nếu tôi đã tạo khu vực này của trang web gần đây hơn, các đoạn trích có thể là một loại bài đăng tùy chỉnh (như ảnh chụp màn hình thư viện đơn lẻ), nhưng chúng không tồn tại khi tôi bắt đầu làm việc này. Như vậy, chúng chỉ là “Trang” và tất cả đều sử dụng mẫu trang tùy chỉnh. Không phải là vấn đề lớn, thực sự, đặc biệt là bây giờ có nhiều trang không phải là mối quan tâm về hiệu suất.

Các trang đoạn trích riêng lẻ sẽ giống như các bài đăng trên blog. Cấu trúc lưới 2/3 1/3 tiêu chuẩn và một thanh bên thông thường. Có một số khác biệt mặc dù. Có một hệ thống phân cấp rõ ràng cho các đoạn trích, ví dụ:

Trang chủ »Đoạn mã» Danh mục đoạn mã »Tên đoạn mã

Điều này hoàn hảo cho điều hướng phụ "thanh màu đen" đang phát triển trên trang web này. Plugin Yoast SEO của chúng tôi cung cấp chức năng breadcrumb nên việc này rất dễ dàng - chỉ cần gọi một hàm.

Một sự khác biệt nữa là chúng tôi xuất the_modified_time()thay vì ngày xuất bản. Bằng cách đó, mọi người biết ngày cuối cùng đoạn trích được cập nhật, có liên quan hơn so với thời điểm xuất bản. Nó cũng cung cấp cho tôi một số động lực để xem lại các đoạn trích thường xuyên.

Chúng tôi sang một bên một chút cập nhật một đoạn mã cũ chỉ cho vui.

Chúng tôi kết thúc bằng cách viết một chút JavaScript sẽ làm cho các chế độ xem danh mục phụ của chúng tôi hoạt động. Các chế độ xem đó về cơ bản trông giống như trang chủ Đoạn mã của chúng tôi, chỉ khi bạn đang ở / snippets / javascript /, các đoạn mã JavaScript sẽ được xem theo mặc định và danh mục JavaScript được đánh dấu. Tin hay không thì tùy, chỉ một vài dòng mã JavaScript cao nhất của URL lén lút mà có lẽ phải là một đoạn mã của chính nó.