Hướng dẫn tùy chỉnh Butterfly Về trang web - trực tiếp bóng đá

Được xuất bản vào ngày 14 tháng 10 năm 2023 | Thành phố Thâm Quyến | Chia sẻ kinh nghiệm | Tổng số từ: 13.1k | Dự kiến thời gian đọc: 72 phút | Số lượt xem: 269 | Số bình luận: 26

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

]( "Trang về iCat") Trang về iCat

[Xem trước hiệu ứng

!Về trang web này qua núi cao đường xa, nhìn thế giới và cũng tìm chính mình.

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

  • Tạo trang [blogRoot]/source/about/index.md

markdown

1--- 
2title: Về trang web này 
3date: 2021-10-16 13:42:00 
4type: about 
5top_img: false 
6aside: false 
7---
8<!-- Nội dung trang -->
  • Sửa file [blogRoot]/themes/butterfly/layout/page.pug để làm cho trang phù hợp ( + dấu cộng trực tiếp xóa là lùi đúng mức)

plaintext

1when 'categories'    
2    include includes/page/categories.pug
3+   when 'about'
4+    include includes/page/about.pug  
5default    
6    include includes/page/default-page.pug
  • Tạo file mới [blogRoot]/themes/butterfly/layout/includes/page/about.pug, thêm nội dung sau:

plaintext

1...
  • Tạo file [blogroot]/source/_data/reward.yml để thêm dữ liệu thưởng

yml

 1- class_name: Thưởng 
 2  reward_list: 
 3    - name: Tài năng thiên bẩm 
 4      amount: 134 
 5      datatime: 2023-10-05 
 6      suffix: Mèo lương 
 7    - name: Thiên tài thiếu nữ 
 8      amount: 52 
 9      datatime: 2023-10-05 
10      suffix: Mèo lương 
11    - name: Tôi đẩy天下 đầu tiên đẹp trai 
12      amount: 5 
13      datatime: 2023-10-05 
14      suffix: Mèo lương 
15    - name: Người dùng phát điện Ai 
16      amount: 5 
17      datatime: 2023-08-02 
18      suffix: Móng mèo nhỏ 
19    - name: _ 
20      amount: 35 
21      datatime: 2023-06-25 
22      suffix: Mèo lương 
  • Tạo file [blogroot]/themes/butterfly/source/css/_page/about.styl với nội dung sau:

styl

1...
  • Tạo file [blogRoot]/source/js/about.js để xử lý các hàm của trang về (hoặc có thể viết trong js chung tự tạo).

js

1function khiDOMSẵn sàng() {
2	if (location.pathname.startsWith('/about/')) meuicat.bình luận(), meuicat.Thông tin cá nhân(), meuicat.thờigianchạy(), meuicat.năm mươi một();
3}
4khiDOMSẵn sàng() // Mở website thực hiện trước
5document.addEventListener("pjax:complete", khiDOMSẵn sàng) // pjax tải hoàn tất (chuyển trang) rồi thực hiện lại lần nữa
6...
  • Nội dung phần Tâm lộ có thể viết trực tiếp trong file md; thêm nội dung mới cho trang [blogRoot]/source/about/index.md

markdown

1Trước hết, gửi lời chào đến mọi người đã ghé thăm đây "Rất vui được gặp bạn" 👋 
2Sáng lập iCat với mong muốn mỗi người đều có thể sống như những chú mèo, có nghi thức sống đầy đủ; tính kiêu ngạo lúc nào cũng sẵn sàng; có một chủ nhân cưng chiều.
3Là nơi để tích lũy kiến thức, sở thích cá nhân; là tổ ấm riêng biệt; là nơi trú ẩn tâm hồn giữa xã hội rộng lớn.
4Cùng chia sẻ sẽ biến những điều này thành sự tích lũy và lắng đọng. Nếu có thể giúp đỡ nhiều người hơn, giải quyết vấn đề cho họ thì thật tuyệt vời.
5Khác với hầu hết các blog kỹ thuật chuyên sâu, ở đây có rất nhiều loại nội dung khác nhau, từ hướng dẫn kỹ năng, chia sẻ cuộc sống đến suy nghĩ cá nhân.
6Những gì tôi nghiên cứu hoặc khám phá đều sẽ được chia sẻ tại đây.
7Đây là lý do tạo ra Meucat, cũng là cách tôi chia sẻ cuộc sống. Rất vinh dự được gặp bạn tại đây, tin rằng chúng ta sẽ cùng lưu lại những kỷ niệm đẹp.

]( "Trang về Heo") Trang về Heo

Phiên bản này bỏ đi một số chức năng không cần thiết nên sẽ có đôi chút khác biệt so với trang về Heo, hiệu ứng tổng thể có thể xem bên dưới.

[Xem trước hiệu ứng

!iCat V2 - Về trang web này qua núi cao đường xa, nhìn thế giới và cũng tìm chính mình.

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

  • Tạo trang [blogRoot]/source/about/index.md

markdown

1--- 
2title: Về trang web này 
3date: 2021-10-16 13:42:00 
4type: about 
5top_img: false 
6aside: false 
7---
8<!-- Nội dung trang -->
  • Sửa file [blogRoot]/themes/butterfly/layout/page.pug để làm cho trang phù hợp ( + dấu cộng trực tiếp xóa là lùi đúng mức)

plaintext

1when 'categories'    
2    include includes/page/categories.pug
3+   when 'about'
4+    include includes/page/about.pug  
5default    
6    include includes/page/default-page.pug
  • Tạo file mới [blogRoot]/themes/butterfly/layout/includes/page/about.pug, thêm nội dung sau:

plaintext

1...
  • Tạo file [blogroot]/source/_data/creativity.yml để thêm dữ liệu sáng tạo

yml

 1- class_name: Khởi động sáng tạo 
 2  creativity_list: 
 3    - name: Vue 
 4      color: "#b8f0ae" 
 5      icon: 
 6    - name: Docker 
 7      color: "#57b6e6" 
 8      icon: 
 9    - name: Photoshop 
10      color: "#4082c3" 
11      icon: 
12    - name: Node 
13      color: "#333" 
14      icon: 
15    - name: AfterEffect 
16      color: "#989bf8" 
17      icon: 
18    - name: Python 
19      color: "#fff" 
20      icon: 
21    - name: Java 
22      color: "#fff" 
23      icon: 
24    - name: CSS3 
25      color: "#2c51db" 
26      icon: 
27    - name: JS 
28      color: "#f7cb4f" 
29      icon: 
30    - name: HTML 
31      color: "#e9572b" 
32      icon: 
33    - name: Git 
34      color: "#df5b40" 
35      icon: 
36    - name: illustrator 
37      color: "#f29e39" 
38      icon: 
  • Tạo file f8betv0 [blogroot]/themes/butterfly/source/css/_page/about/about.styl với nội dung sau:

styl

1...
  • Tạo file [blogRoot]/source/js/reward.js để xử lý cửa sổ thưởng (hoặc có thể viết trong js chung tự tạo).

js

 1function thưởng(){
 2 Swal.fire({
 3  title: '<strong>Bạn đang sạc điện cho <u>MeuiCat</u></strong>',
 4  html: '<b>Vui lòng chọn phương thức thanh toán của bạn</b>',
 5  icon: 'info',
 6  showCancelButton: true,
 7  confirmButtonText:   
 8    '<i class="iconfont icat-alipay"></i> Alipay',
 9  cancelButtonText:   
10    '<i class="iconfont icat-weixin"></i> WeChat Pay',
11  confirmButtonColor: '#1677FF',
12  cancelButtonColor: '#2AAE67',
13 }).then((result) => {
14  if (result.isConfirmed) {
15   Swal.fire({
16    title: 'Cảm ơn bạn',
17    html: 'Vui lòng mở Alipay <b>[Quét mã]</b> để sạc điện',
18    imageUrl: 'https://via.placeholder.com/150',
19    imageWidth: 175,
20    imageHeight: 175,
21    imageAlt: 'Custom image'
22   }).then((result) => {
23    Swal.fire(
24     'Sạc điện thành công',
25     'Cảm ơn sự ủng hộ của bạn',
26     'success'
27    )
28   })
29  } else if (   
30   result.dismiss === Swal.DismissReason.cancel
31  ) {
32   Swal.fire({
33    title: 'Cảm ơn bạn',
34    html: 'Vui lòng mở WeChat <b>[Quét mã]</b> để sạc điện',
35    imageUrl: 'https://via.placeholder.com/150',
36    imageWidth: 175,
37    imageHeight: 175,
38    imageAlt: 'Custom image'
39   }).then((result) => {
40    Swal.fire(
41     'Sạc điện thành công',
42     'Cảm ơn sự ủng hộ của bạn',
43     'success'
44    )
45   })
46  }
47})
48}
  • Trong _config.butterfly.yml cấu hình CDN ở phần option nhập countup.js (dấu + xóa là lùi đúng mức)

yml

1 ···
2 CDN:
3   option:
4     # Có thể thay đổi một số tập tin tại đây, sẽ ghi đè cấu hình gốc
5     # main_css:   
6     ···
7     # busuanzi:
8+    countup_js: /js/countup.js
  • Nếu bật thống kê 51la, cần thêm file trong _config.butterfly.yml cấu hình chủ đề phần inject ở phần head

yml

1inject: 
2 head: 
3   - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # Kiểu thống kê 51la
4   - <script> LA.init({id:"# ID của bạn",ck:"# CK của bạn"})</script> # 51 thống kê - ID & CK
5 bottom: 
6   - ...

Trong đó ID của bạn{Mã ID} được nhắc đến ở file above.pug và CK của bạn có thể tìm thấy trong Cấu hình trang - Thiết lập tham số - Mã thống kê - Cài đặt thủ công (tổng quát).

[]( "Cài đặt sweetalert2") Cài đặt sweetalert2

powershell

1npm install sweetalert2 --save

[]( "Nội dung trang về") Nội dung trang về

  • Dòng thứ 4 chứa ảnh đại diện phía trên cùng trang.
  • Dòng thứ 84 chứa ảnh trong phần sự nghiệp.
  • Từ dòng 198 đến dòng 274 là phần Tâm lộ sử dụng cú pháp Plaintext, cần tự sửa đổi.
  • Dòng 352 chứa {Mã ID} được cung cấp bởi mô-đun thống kê truy cập 51la (cần bật trong Cấu hình trang - Thiết lập tham số - Mô-đun dữ liệu).