Hướng dẫn tùy chỉnh Butterfly Hiệu ứng loading - tin tức the thao bóng đá

calendar Apr 7, 2025 · 6 phút đọc · tin tức the thao bóng đá  ·
Chia sẻ trên: linkedin copy

Được xuất bản vào ngày 27-07-2023 | Thành phố Th profound | Chia sẻ kinh nghiệm | Tổng số từ: 1.5k | Dự kiến thời gian đọc: 8 phút | Số lượt xem: 356 | Số bình luận: ( Bài viết được đồng bộ trên nhiều 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 - 🐈 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.8.5, ghi lại các thay đổi của blogger để tránh mất phương hướng sau khi tùy chỉnh 📝 Cập nhật lần cuối vào ngày 28 tháng 07 năm 2023 230728 Cập nhật: Kết hợp kiểu dáng thành loading.styl, bỏ qua liên kết

[Phiên bản Logo iCat Loading

Một hiệu ứng loading tạm thời, có thể còn một số lỗi về kiểu dáng, phiên bản đầu tiên sẽ như vậy, sau đó sẽ tiếp tục sửa chữa

]( "Xem trước hiệu quả") Xem trước hiệu quả

![ !]( Chế độ thông thường Chế độ tối

[Tạo dữ liệu

  • Chỉnh sửa nội dung trang [blogRoot]/themes/butterfly/layout/includes/loading/fullpage-loading.pug ( + Dấu cộng chỉ cần xóa là đúng định dạng)

plaintext

1123456789101112131415161718192021222324252627282930313233343536373839404142

| ``` -#loading-box- .loading-left-bg- .loading-right-bg- .spinner-box- .configure-border-1- .configure-core- .configure-border-2- .configure-core- .loading-word= _p('loading')+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')+ #icat-splash+ .icat-loading+ img(src=url_for(theme.preloader.logo) data-src=url_for(theme.preloader.logo_dark))script.+ var htmlElement = document.querySelector('html');+ if (htmlElement.getAttribute('data-theme') === 'dark') {+ var imgElement = document.querySelector('.icat-loading img');+ var dataSrc = imgElement.getAttribute('data-src');+ imgElement.src = dataSrc;+ }+ const preloader = { endLoading: () => {- document.body.style.overflow = '';+ document.body.style.overflow = 'auto'; document.getElementById('loading-box').classList.add("loaded") }, initLoading: () => {- document.body.style.overflow Live Casino = '';+ document.body.style.overflow = 'hidden'; document.getElementById('loading-box').classList.remove("loaded") } }++ preloader.initLoading() window.addEventListener('load',()=> { preloader.endLoading() }) if (!{theme.pjax && theme.pjax.enable}) { document.addEventListener('pjax:send', () => { preloader.initLoading() }) document.addEventListener('pjax:complete', () => { preloader.endLoading() }) }

1
2---|---  
3  * Thay thế nội dung trong `[blogRoot]/themes/butterfly/source/css/_layout/loading.styl`
4
5
6styl

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364

1| ```
2if hexo-config('preloader') #loading-box.loaded  #icat-splash   opacity: 0   z-index: -1000 #icat-splash  display: -webkit-box  display: -moz-box  display: -webkit-flex  display: -ms-flexbox  display: box  display: flex  justify-content: center  align-items: center  width: 100%  height: 100%  position: fixed  background: var(--icat-card-bg)  z-index: 1999  opacity: 1  -ms-filter: none  filter: none  -webkit-transition: .3s  -moz-transition: .3s  -o-transition: .3s  -ms-transition: .3s  transition: .3s  .icat-loading   width: 30%   height: auto   overflow: hidden   display: flex   justify-content: center   position: relative   @media screen and (max-width: 768px)    width: 50%   img    width: 100%    height: auto    -webkit-filter: brightness(1)    -moz-filter: brightness(1)    -o-filter: brightness(1)    -ms-filter: brightness(1)    filter: brightness(1)   &::before    content: ""    display: inline-block    width: 100%    height: 400%    background-image: linear-gradient(to bottom, #FCFCFC, #FCFCFC 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #FCFCFC 75%, #FCFCFC)    background-position: center top    position: absolute    top: 0    animation-name: loading    animation-delay: 0.5s    animation-duration: 4s    animation-iteration-count: infinite    animation-timing-function: linear    [data-theme="dark"]     background-image: linear-gradient(to bottom, #1d1e22, #1d1e22 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #1d1e22 75%, #1d1e22) @keyframes loading  from   top: 0  to   top: -300%

---|---

  • Thêm cấu hình con logo và logo_dark trong phần preloader của tập tin cấu hình chủ đề _config.butterfly.yml

yml

112345678910111213141516

| ``` ···# Hoạt ảnh tải trang preloader# --------------------------------------preloader: enable: true source: 1 # nguồn; 1. Màn hình mở; 2. Tiến trình ở đầu trang # Chủ đề pace (xem pace_css_url:+ logo: logo_dark: # Hình ảnh logo mặt trời và mặt trăng ···

1
2---|---  
3# []( "Hiệu ứng Avatar Heo") Hiệu ứng Avatar Heo
4> Phần này chỉ áp dụng cho phiên bản Butterfly 4.5 trở lên
5  * Chỉnh sửa nội dung trang `[blogRoot]/themes/butterfly/layout/includes/loading/fullpage-loading.pug` ( **+** Dấu cộng chỉ cần xóa là đúng định dạng)
6
7
8plaintext

1234567891011121314151617181920212223242526272829303132333435

1| ```
2-#loading-box- .loading-left-bg- .loading-right-bg- .spinner-box-  .configure-border-1-   .configure-core-  .configure-border-2-   .configure-core-  .loading-word= _p('loading')+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')+ .loading-bg+  div.loading-img(style=`background-image:url(${theme.preloader.avatar});background-repeat: no-repeat;background-position:center;`)+  .loading-image-dotscript. const preloader = {  endLoading: () => {-   document.body.style.overflow = '';+   document.body.style.overflow = 'auto';   document.getElementById('loading-box').classList.add("loaded")  },  initLoading: () => {-   document.body.style.overflow = '';+   document.body.style.overflow = 'hidden';   document.getElementById('loading-box').classList.remove("loaded")  } }++ preloader.initLoading() window.addEventListener('load',()=> { preloader.endLoading() }) if (!{theme.pjax && theme.pjax.enable}) {  document.addEventListener('pjax:send', () => { preloader.initLoading() })  document.addEventListener('pjax:complete', () => { preloader.endLoading() }) }

---|---
Cá nhân điều chỉnh trang Loading

Xóa dấu chấm màu xanh lá dưới chân dung plaintext

112345

| ``` ···- .loading-image-dot ··· top kiến tạo ngoại hạng anh 2025

1
2---|---  
3  * Chỉnh sửa nội dung trang `[blogRoot]/themes/butterfly/layout/includes/loading/index.pug` ( **+** Dấu cộng chỉ cần xóa là đúng định dạng)
4
5
6plaintext

1234567

1| ```
2if theme.preloader.source === 1 include ./fullpage-loading.pug+else if theme.preloader.source === 2+ include ./pace.pugelse+ include ./fullpage-loading.pug include ./pace.pug

---|---

  • Thêm nội dung sau đây vào tập tin CSS tự tạo [blogRoot]/source/css/icat_change.css

Bước này dùng để chỉnh sửa kiểu dáng viên nang pace 💊 Có thể tạo riêng một tập tin css mới, đưa kiểu dáng bên dưới vào, hoặc cũng có thể bỏ qua bước này, nếu vậy thì mục pace_css_url trong tập tin cấu hình chủ đề phải để trống css

112345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364

| ``` .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 10px; left: 0; right: 0; height: 8px; border-radius: 8px; width: 4rem; background: #eaecf2; border: 1px #e3e8f7; overflow: hidden;}.pace-inactive .pace-progress { opacity: 0; transition: 0.3s ease-in;}.pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 200px; position: absolute; z-index: 2000; display: block; top: 0; right: 100%; height: 100%; width: 100%; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: gradient 1.5s ease infinite; background-size: 200%;}.pace.pace-inactive { opacity: 0; transition: 0.3s; top: -8px;}@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}/* Kiểu dáng viên nang pace */

1
2---|---  
3  * Thay thế nội dung trong `[blogRoot]/themes/butterfly/source/css/_layout/loading.styl`
4
5
6styl

12345678910111213141516171819202122232425262728293031323334353637383940414243444546

1| ```
2if hexo-config('preloader') .loading-bg  display: flex;  width: 100%;  height: 100%;  position: fixed;  background: var(--icat-card-bg);  z-index: 1001;  opacity: 1;  transition: .3s; #loading-box  .loading-img   width: 100px;   height: 100px;   border-radius: 50%;   margin: auto;   border: 4px solid #f0f0f2;   animation-duration: .3s;   animation-name: loadingAction;   animation-iteration-count: infinite;   animation-direction: alternate;   background-size: cover;  .loading-image-dot   width: 30px;   height: 30px;   background: #6bdf8f;   position: absolute;   border-radius: 50%;   border: 6px solid #fff;   top: 50%;   left: 50%;   transform: translate(18px, 24px);  &.loaded   .loading-bg    opacity: 0;    z-index: -1000; @keyframes loadingAction  0% {    opacity: 1;  }  100% {    opacity: .4;  }

---|---
Cá nhân điều chỉnh kiểu dáng Loading

Loại bỏ viền quanh chân dung styl

1123456789101112131415161718192021

| ``` ··· #loading-box .loading-img ···- border: 4px solid #f0f0f2; ···- .loading-image-dot- width: 30px;- height: 30px;- background: #6bdf8f;- position: absolute;- border-radius: 50%;- border: 6px solid #fff;- top: 50%;- left: 50%;- transform: translate(18px, 24px); ···

1
2---|---  
3  * Thêm cấu hình con `avatar` trong phần `preloader` của tập tin cấu hình chủ đề `_config.butterfly.yml`
4
5
6yml

123456789101112131415

1| ```
2 ···# Hoạt ảnh tải trang preloader# --------------------------------------preloader: enable: true source: 3 # nguồn; 1. Màn [tin tức the thao bóng đá](/post/86bc44283d5b75d2.html)  hình mở; 2. Tiến trình ở đầu trang # pace theme (xem  pace_css_url: /css/icat_change.css+ avatar:  # Ảnh đại diện tùy chỉnh (tùy chỉnh - loader toàn màn hình) ···

---|---
source: 1 là màn hình loading không có viên nang pacesource: 2 là viên nang pace không có hoạt ảnh toàn màn hìnhsource: 3 là cả hai đều kích hoạt

Hướng dẫn tùy chỉnh Butterfly: Hiệu ứng loading