Hướng Dẫn Tùy Chỉnh Chuyển Trang cho Butterfly - cwin666

Mar 2, 2025 · 5 phút đọc · cwin666 ·

Bài viết đồng bộ đa nền tảng 📚 Nhiều danh mục tài liệu hơn 🚀 Hướng dẫn cài đặt | 1 - 📑 Bài học trước | 2 - 🎈 Điều chỉnh chủ đề | 3 - ✨ Hướng dẫn tùy chỉnh | 4 - 🐈 Ghi chép lại dữ liệu tự sử dụng

Hướng dẫn này dựa trên Hexo 6.3.0 & Butterfly 4.8.5 là ghi nhận các thay đổi tùy chỉnh của tác giả tại vin777 blog, nhằm tránh mất phương hướng khi thực hiện sau này 📝 Cập nhật cuối cùng vào ngày 13 tháng 07 năm 2023 230713 Cập nhật: Sửa lỗi chức năng chuyển trang tùy chỉnh bên ngoài trang chủ.

Phần hướng dẫn tùy chỉnh này dựa trên phiên bản gốc của tính năng chuyển trang tùy chỉnh trong Butterfly.

Chỉnh sửa nội dung file [blogRoot]/themes/butterfly/layout/includes/pagination.pug (+ dấu cộng chỉ cần xóa là có thể giữ nguyên định dạng)

plaintext

11234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

| ``` ··· var options = { prev_text: '', next_text: '', mid_size: 1, escape: false }+ var icat_options = {+ prev_text: '

Trang trước

',+ next_text: '

Trang tiếp

',+ mid_size: 1,+ escape: false+ }if is_post() - let prev = theme.post_pagination === 1 ? page.prev : page.next - let next = theme.post_pagination === 1 ? page.next : page.prev nav#pagination.pagination-post if(prev) - var hasPageNext = next ? 'pull-left' : 'pull-full' .prev-post(class=hasPageNext) a(href=url_for(prev.path) title=prev.title) if prev.cover_type === 'img' img.cover(src=url_for(prev.cover) onerror=onerror=null;src='${url_for(theme.error_img.post_page)}' alt='cover of previous post') else .cover(style=background: ${prev.cover || 'var(--default-bg-color)'}) .pagination-info .label=_p('pagination.prev') .prev_info=prev.title if(next) - var hasPagePrev = prev ? 'pull-right' : 'pull-full' .next-post(class=hasPagePrev) a(href=url_for(next.path) title=next.title) if next.cover_type === 'img' img.cover(src=url_for(next.cover) onerror=onerror=null;src='${url_for(theme.error_img.post_page)}' alt='cover of next post') else .cover(style=background: ${next.cover || 'var(--default-bg-color)'}) .pagination-info .label=_p('pagination.next') .next_info=next.titleelse nav#pagination .pagination if is_home() - options.format = 'page/%d/#content-inner'- !=paginator(options)+ !=paginator(icat_options)+ else+ !=paginator(options)+ if is_home()+ .toPageGroup+ input#toPageText(maxlength="3" oninput="value=value.replace(/[^0-9]/g,'')" onkeyup="if (this.value === '0') this.value = ''" title="Chuyển đến trang cụ thể")+ a#toPageButton(data-pjax-state="" onclick="icattoPage.toPage()")+ i.fa-solid.fa-angles-right

1  
2---|---  
3  * Tạo file kiểu mới `[blogRoot]/source/css/pagination.css` và thêm nội dung sau (cũng có thể thêm vào file CSS riêng đã tạo)
4
5
6css

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137

1| ```
2.page .layout > .recent-posts .pagination > a:hover {  background: #00c4b6;}/* Màu nền nút chuyển trang khi di chuột qua */.layout [kết quả bóng đá hôm nay](/post/337141c879d1fe8f.html)  > .recent-posts .pagination > a { border: var(--style-border);}/* Thêm viền mặc định */#pagination .pagination { position: relative; display: flex; justify-content: center; align-items: center;}.page .layout .recent-posts #pagination .pagination .prev { left: 0;}.page .layout .recent-posts #pagination .pagination .next { right: 0;}.page .layout .recent-posts #pagination .pagination .prev,.page .layout .recent-posts #pagination .pagination .next { position: absolute; margin: 0 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 5.25em; overflow: hidden;}.page .layout .recent-posts #pagination .pagination .prev:hover .pagination_tips_prev { margin-right: 2.5px; opacity: 1;}.page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev { margin-right: -28px; transition: margin-right .3s; opacity: 0;}.page .layout .recent-posts #pagination .pagination .next:hover .pagination_tips_next { margin-left: 2.5px; opacity: 1;}.page .layout .recent-posts #pagination .pagination .next .pagination_tips_next { margin-left: -28px; transition: margin-left .3s; opacity: 0;}@media screen and (max-width: 768px) { .page .layout .recent-posts #pagination .pagination .prev, .page .layout .recent-posts #pagination .pagination .next {  position: sticky;  margin: 0 6px;  display: inline-block;  width: 2.5em; } .page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev, .page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {  display: none; }}/* Tùy chỉnh nút chuyển trang */.pagination input { width: 2.5em; height: 2.5em; border-radius: 8px; border: var(--style-border-always); transition: all 0.3s; outline-style: none; padding-left: 12px; background: var(--icat-secondbg); color: var(--icat-fontcolor);}.pagination .toPageGroup:hover input,.pagination .toPageGroup input:focus { border: 1px solid #00c4b6; outline-style: none; width: 100px;}.toPageGroup { display: inline-flex !important; position: relative; margin: 0 6px !important;}a#toPageButton { display: flex; position: absolute; width: 2.5em; height: 2.5em; border-radius: 8px; justify-content: center; align-items: center; transition: all 0.3s; background: var(--card-bg); border: var(--style-border-always); cursor: text !important; pointer-events: none;}.toPageGroup:hover a#toPageButton, .toPageGroup:focus-within a#toPageButton { margin-top: 4px; width: 27px; height: 27px; margin-left: 70px; background: var(--icat-card-bg); border: 1px solid var(--icat-none); border-radius: 4px; opacity: 0.2; transition: all 0.3s !important;}.toPageGroup:focus-within a#toPageButton.haveValue { opacity: 1; cursor: pointer;}a#toPageButton.haveValue { opacity: 1!important; cursor: pointer!important; pointer-events: all;}a#toPageButton.haveValue:hover { background: var(--icat-theme); color: var(--icat-white);}@media screen and (max-width: 768px) { .toPageGroup {  display: none !important; }}/* Nút chọn trang */

---|---

Tạo file [blogRoot]/source/js/pagination.js và thêm nội dung sau (có thể thêm vào file JS riêng nếu muốn)

11234567891011121314151617181920212223242526272829303132

| ``` var icattoPage = { toPage: function() { console.log("Thực hiện chuyển trang"); var e = document.querySelectorAll(".page-number") , t = parseInt(e[e.length - 1].innerHTML) , n = document.getElementById("toPageText") , a = parseInt(n.value); if (!isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= t) { var s = 1 == a ? "/" : "/page/" + a + "/#content-inner"; document.getElementById("toPageButton").href = s } }, listenToPageInputPress() { var e = document.getElementById("toPageText") , t = document.getElementById("toPageButton"); e && (e.addEventListener("keydown", (e=>{ 13 === e.keyCode && (icattoPage.toPage(), pjax.loadUrl(t.href)) } )), e.addEventListener("input", (function() { "" === e.value || "0" === e.value ? t.classList.remove("haveValue") : t.classList.add("haveValue"); var n = document.querySelectorAll(".page-number") , a = +n[n.length - 1].innerHTML; +document.getElementById("toPageText").value > a && (e.value = a) } ))) }}icattoPage.listenToPageInputPress();// Tùy chỉnh chuyển trang

1  
2---|---  
3Hướng dẫn tùy chỉnh chuyển trang cho Butterfly