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ìnhCDN
ở phầnoption
nhậpcountup.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ầninject
ở phầnhead
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
là {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
- Thực thi lệnh sau trong thư trực tiếp bóng đá mục
[blogroot]
để cài đặt plugin
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ápPlaintext
, 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 trongCấu hình trang - Thiết lập tham số - Mô-đun dữ liệu
).