Được xuất bản vào ngày 12 tháng 2 năm 2024 | Tháng Ba | Chia sẻ kinh nghiệm | Tổng số từ: 3.8k | Dự kiến thời gian đọc: 20 phút | Số lượt xem: 255 | Số bình luận: 14

Bài viết đồng bộ trên nhiều nền tảng.

📚 Nhiều tài liệu hơn 🚀 Hướng dẫn thiết lập | 1 - 📑 Bài học trước | 2 - 🎈 Điều chỉnh chủ đề | 3 - ✨ Hướng dẫn chỉnh sửa | 4 - 🐈 Tái cấu trúc dữ liệu cá nhân

Hướng dẫn này dựa trên Hexo 6.3.0 và Butterfly 4.9.0, nhằm ghi lại quá trình chỉnh sửa của blogger, để tránh mất phương hướng khi chỉnh sửa sau này 📝

Phần chỉnh sửa này không bao gồm thanhh banner phía trên, nếu cần vui lòng tham khảo ✨ Chương hai - Phần ba | Chỉnh sửa trang trước

Cập nhật ngày 240410: Điều chỉnh cấu hình thanh Bar, sửa lỗi do nhiều trang album gây ra. Cập nhật ngày 240112: Thêm tính năng chuyển đổi phân loại album bằng thanh Bar; sửa lỗi nhấn lặp lại trên thanh Bar.

Nếu không có máy chủ để thiết lập memos, bạn có thể sử dụng dịch vụ memos tự dùng của iCat. !iCat - MemosMemos nói chuyện thoải mái

]( "Xem trước hiệu ứng") Xem trước hiệu ứng

![Album cuộc sống Giới thiệu về tôi Khoảnh khắc màu sắc của sự nhanh chóng

[]( "Tạo dữ liệu") Tạo dữ liệu

• Tạo [blogRoot]/themes/butterfly/layout/includes/page/photo.pug và thêm nội dung dưới đây

plaintext

112345678910111213141516171819

| ``` if page.bar .icat-status-bar .status-bar-tips= page.bar.tips || 'Danh mục' .status-bar #bar-box each item in page.bar.list - const content = item.split(' || ') .status-bar-item a(onclick="photos('" + content[0] + "')") #{content[1]} #status-bar-button(onclick="statusbar()") i.iconfont.icat-chevron-too if page.bar.more - const contents = page.bar.more.split(' || ') if contents[0].startsWith('/') a.status-bar-more(href="javascript:void(0)" onclick="pjax.loadUrl('" + contents[0] + "')") #{contents[1]} else a.status-bar-more(href=contents[0]) #{contents[1]}div.gallery-photos.page img(src=" style="margin:auto")

1  
2---|---  
3  * Chỉnh sửa `[blogRoot]/themes/butterfly/layout/page.pug` để làm cho trang khớp ( **+** dấu chỉ cần xóa là đúng lề)
4
5
6plaintext

123456

1| ```
2   when 'categories'    include includes/page/categories.pug+   when 'photo'+ [b29 club](/post/f0edad3821c02892.html)     include includes/page/photo.pug   default    include includes/page/default-page.pug

---|---

• Tạo [blogRoot]/themes/butterfly/source/css/_page/photo.styl tập tin kiểu và thêm nội dung dưới đây

styl

1123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154

| ``` .icat-status-bar margin: 16px 0 display: flex white-space: nowrap align-items: center background: var(--icat-card-bg) border-radius: 8px padding: 0 12px border: var(--style-border) transition: .6s box-shadow: var(--icat-shadow-border) &:hover border-color: var(--icat-blue) box-shadow: var(--icat-shadow-blue) .status-bar padding: 0.4rem 0 0.4rem 0.4rem white-space: nowrap overflow: hidden transition: .3s width: 100% justify-content: space-between user-select: none display: flex align-items: center font-size: 15px #bar-box white-space: nowrap overflow-x: scroll overflow-y: hidden display: flex border-radius: 8px align-items: center height: 30px .status-bar-item a padding: 0.1rem 0.5rem margin-right: 10px font-weight: 700 border-radius: 8px display: flex align-items: center height: 30px color: var(--icat-fontcolor) opacity: .8 transition: .6s &:hover background: var(--icat-blue) opacity: 1 color: var(--icat-white) &.selected a background: var(--icat-blue) !important opacity: 1 !important color: var(--icat-white) !important #status-bar-button margin-left: 12px cursor: pointer height: 22px display: flex align-items: center transition: .6s &:hover color: var(--icat-blue) .status-bar-more margin-left: 12px font-weight: 400 color: var(--icat-fontcolor) opacity: .8 transition: .6s &:hover color: var(--icat-blue)#bar-box::-webkit-scrollbar display: tải game nổ hũ tặng code none.gallery-photos width: 100% text-align: center animation: slide-in .6s .4s backwards .gallery-photo min-height: 5rem width: 24.99% padding: 4px position: relative animation: slide-in 0.6s 0.4s backwards +maxWidth1024() width: 33.3% +maxWidth768() width: 49.9% padding: 3px +minWidth2000() width: 20% &:hover img transform: scale(1.1) a border-radius: 8px border: var(--style-border) box-shadow: var(--icat-shadow-border) display: block overflow: hidden transition: .6s &:hover border-color: var(--icat-blue) box-shadow: var(--icat-shadow-blue) img display: block width: 100% animation: fadeIn 1s cursor: pointer transition: all .4s ease-in-out .photo-title, .photo-time max-width: calc(100% - 7px) line-height: 1.8 position: absolute left: 4px font-size: 14px background: rgba(0,0,0,0.3) padding: 0px 8px color: #fff animation: fadeIn 1s .photo-title bottom:4px border-radius: 0 8px 0 8px +maxWidth768() font-size: 12px left: 3px bottom: 3px .photo-time top:4px border-radius: 8px 0 8px 0

1  
2---|---  
3
4Các bước tiếp theo được dịch tương tự như trên với ngôn ngữ Việt Nam.