Hướng Dẫn Tùy Chỉnh Butterfly Danh Sách Cần Làm - lịch bóng đá ngoại hạng anh

calendar Mar 24, 2025 · 9 phút đọc · lịch bóng đá ngoại hạng anh  ·
Chia sẻ trên: linkedin copy

Được xuất bản vào ngày 07-10-2023 | Khai Phong | Chia sẻ kinh nghiệm | Tổng số từ: 2.4k | Thời gian đọc dự kiến: 11 phút | Số lượt xem: 201 | Số bình luận: Bài viết được đồ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 tùy chỉnh | 4 - 🐈 Ghi chép lại dữ liệu đã tái cấu trúc

Hướng dẫn này dựa trên Hexo 6.3.0 & Butterfly 4.8.5 nhằm ghi lại các tùy chỉnh của blogger, để tránh mất phương hướng sau khi thực hiện các thay đổi đáng kể 📝

Nội dung tùy chỉnh trong phần này không bao gồm thanhh top banner, nếu cần hãy chuyển sang ✨ Chương hai - Phần ba | Tùy chỉnh trang trước

Cập nhật cuối cùng vào ngày 06 tháng 10 năm 2023 231006 Cập nhật: Tương thích với triển khai dữ liệu tĩnh cục bộ

[Xem trước hiệu ứng]

!Danh sách cần làm của tôi の những việc cần làm

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

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

markdown

1123456789101112131415

| ``` ---title: Danh sáchdate: 2023-04-20 11:56:42type: projecttop_img: falseaside: falsetop_page: truetop_bg: Đang chờ đơntop_title: Danh sách cuộc sốngtop_tips: Hóa ra tôi có rất nhiều điều muốn làmcomments: false---

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

123456

1| ```
2   when 'categories'    include includes/page/categories.pug+   when 'project'+    include includes/page/project.pug   default    include includes/page/default-page.pug

---|---

  • Tạo mới [blogRoot]/themes/butterfly/layout/includes/page/project.pug và thêm nội dung sau

plaintext

112345678910111213141516171819202122232425262728293031323334353637

| ``` nếu page.memos_url #todolist .todolist-bottom p Được hỗ trợ bởi a(target="_blank" href=" rel="noopener external nofollow") Memoscòn lại nếu site.data.project #todolist - let result = "" mỗi i trong site.data.project - let className = i.class_name - let listResult = "" - let state = "" - let strikethrough = "" mỗi j trong i.project_list - nếu (j.state) { state = fa-circle-check strikethrough = class="achieve" } còn lại { state = fa-circle strikethrough = `` } listResult += <li ${strikethrough}> <i style="margin-right: 5px;" class="fa-regular ${state}"></i>${j.content} </li> - - result += <div class="list_item"><h3>${className}</h3><ul>${listResult}</ul></div> != result .todolist-bottom p Được hỗ trợ bởi a(target="_blank" href=" rel="noopener external nofollow") Memos

1  
2---|---  
3  * Tạo mới `[blogRoot]/source/css/project.css` file kiểu và thêm nội dung sau (hoặc thêm vào file css tự tạo)
4
5
6css

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869

1| ```
2#todolist { display: flex; flex-wrap: wrap; margin-top: 1rem;}.list_item { display: inline-block; width: calc(33.333% - .5rem); background: #ffe3dd; border-radius: 12px; border: var(--style-border-always); box-shadow: var(--icat-shadow-border); padding: 10px 1rem 1.2rem; border: 2px dashed #f7a796; --todo-border: 1px solid #f7a796; margin-right: 1rem; margin-bottom: 1rem;}.list_item h3 { margin: 0; color: #333; border-bottom: var(--todo-border);}.list_item ul { font-size: 17px; padding: 0 !important; margin: 0;}.list_item li{ margin: 0 !important; color: #333; border-bottom: var(--todo-border);}.list_item li::marker {content: none;}li.achieve { opacity: .8; text-decoration: line-through;}.bottom { line-height: 1.5; text-align: right;}.bottom p { margin: 0 !important;}.bottom a { font-weight: 700; color: var(--font-color) !important;}[data-theme="dark"] .list_item { border: 2px solid var(--icat-card-border) !important;}@media screen and (max-width: 900px) { div#todolist {  margin: 1rem 5px 0; }}@media screen and (max-width: 768px) { .list_item{  width: 100%; } .bottom {  text-align: center; }}/* Kiểu trang danh sách Memos */

---|---

  • Tạo [blogRoot]/source/js/memos/waterfall.min.js file và thêm nội dung sau để xử lý bố cục thác nước cho trang danh sách Memos (bước js này cũng đã có trong các phần trước về bài viết ngắn tức thời và album ảnh động Memos, nếu đã có thì có thể bỏ qua bước này)

js

11234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

| ``` function waterfall(a) { function b(a, b) { var c = window.getComputedStyle(b); return parseFloat(c["margin" + a]) || 0 } function c(a) { return a + "px" } function d(a) { return parseFloat(a.style.top) } function e(a) { return parseFloat(a.style.left) } function f(a) { return a.clientWidth } function g(a) { return a.clientHeight } function h(a) { return d(a) + g(a) + b("Bottom", a) } function i(a) { return e(a) + f(a) + b("Right", a) } function j(a) { a = a.sort(function(a, b) { return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a) }) } function k(b) { f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a)) } "string" == typeof a && (a = document.querySelector(a)); var l = [].map.call(a.children, function(a) { return a.style.position = "absolute", a }); a.style.position = "relative"; var m = []; l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0])); for (var n = 1; n < l.length; n++) { var o = l[n - 1], p = l[n], q = i(o) + f(p) <= f(a); if (!q) break; p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p) } for (; n < l.length; n++) { j(m); var p = l[n], r = m.pop(); p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p) } j(m); var s = m[0]; a.style.height = c(h(s) + b("Bottom", s)); var t = f(a); window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k}// Xử lý bố cục thác nước

1  
2---|---  
3  * Trong tập tin cấu hình chủ đề `_config.butterfly.yml` dưới phần `inject`, thêm `project.css` và `waterfall.min.js` vào phần `head` và `bottom`
4
5
6yml

123456789

1| ```
2 ···inject: head:  - <link rel="stylesheet" href="/css/project.css"> # Kiểu trang danh sách bottom:  - <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos danh sách trang - thác nước bố cục ···

---|---

[]( "Triển khai dữ liệu") Triển khai dữ liệu

  • Triển khai yml tĩnh cục bộ

  • Triển khai Memos động

  • Tạo tin tức the thao bóng đá [blogRoot]/source/_data/project.yml file và thêm nội dung sau

yml

112345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182

| ```

  • class_name: Kế hoạch gần đây project_list: - content: Hoàn thành dự án công việc suôn sẻ state: true - content: Quay lại Thâm Quyến state: true - content: Thu xếp xử lý chia sẻdescribe state: true - content: Cân nhắc chuyển nghề state: false- class_name: Dự án cần xử lý project_list: - content: Tạo một chủ đề blog đọc sách state: false - content: Trang điều hướng state: false - content: Trang cá nhân state: false - content: Trang sơ yếu lý lịch state: false - content: Tái cấu trúc iCat Bảy Đường FM state: true - content: Tái cấu trúc iCat Cappuccino state: true - content: Tái cấu trúc lần hai tối ưu hóa iCat Thích Ăn Thịt Mèo V2.0 state: true - content: Triển khai dự án Bảy Đường FM state: false- class_name: Nâng cao bản thân project_list: - content: Đọc ít nhất một cuốn sách mỗi tháng state: true - content: Rèn luyện thói quen uống nước định kỳ state: true - content: Cạo râu hàng ngày state: true - content: Chăm sóc da định kỳ state: false - content: Tiếp tục học lên cao đẳng state: false - content: Tập thể dục đều đặn state: false- class_name: Công nghệ muốn học project_list: - content: CSS nâng cao state: true - content: Javascript nâng cao state: false - content: WeChat Mini Program state: true - content: Vi điều khiển state: false - content: Node state: true - content: Docker state: true - content: Webpack state: false - content: Photoshop state: true - content: Illustrator state: false - content: EJS state: true- class_name: Đồ muốn mua project_list: - content: Olympus EM-5 III state: false - content: SONY A7R3A state: false - content: DJI Mini 3 Pro state: false - content: MacBook Pro state: true - content: Apple Watch Series 7 state: true - content: Thay ổ cứng di động WD 2TB state: false
1  
2---|---  
3  * Tạo `[blogRoot]/source/js/memos/project.js` file và thêm nội dung sau để xử lý bố cục đáp ứng thác nước danh sách cục bộ (hoặc viết trong js công cộng tự tạo cũng được)
4
5
6js

123456789

1| ```
2function khiDOMSẵnSàng() {	window.addEventListener('load', function() {		nếu (location.pathname == '/project/') waterfall('#todolist');	});}khiDOMSẵnSàng()document.addEventListener("pjax:complete", khiDOMSẵnSàng)// Hàm danh sách tương thích pjax

---|---

  • Trong tập tin cấu hình chủ đề _config.butterfly.yml dưới phần inject, thêm project.js file vào phần bottom

yml

1123456789

| ``` ···inject: head: ··· bottom: - # memos danh sách trang - hàm logic ···

1  
2---|---  
3> Nếu không có máy chủ để thiết lập memos, có thể sử dụng dịch vụ memos tự dùng của iCat: iCat - Memos
4  * Thêm mục cấu hình `memos_url` thành `true` trong trang `[blogRoot]/source/project/index.md`
5
6
7markdown

1234567

1| ```
2---···memos_url: true---<!-- Nội dung bài viết -->

---|--- top kiến tạo ngoại hạng anh 2025

  • Tạo [blogRoot]/source/js/memos/project.js file và thêm nội dung sau để xử lý hàm danh sách Memos (hoặc viết trong js công cộng tự tạo cũng được)

js

1123456789101112131415161718192021

| ``` danhSách();function danhSách() { fetch('địa chỉ memos/api/v1/memo?creatorId=ID người dùng&tag=danh sách').then(res => res.json()).then(data => { // Lấy và xử lý dữ liệu data.forEach(item => { // Xử lý dữ liệu let content = item.content, title = content.match(/[(.?)]/g)[0].replace(/[(.?)]/, '$1'); // Loại bỏ nội dung dư thừa, thay thế nội dung danh sách content = content.replace(/#.\s/g, '').replace(/(-\s[\s]\s)(.)/g, <li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>).replace(/(-\s[x]\s)(.*)/g, <li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>); // Hiển thị dữ liệu let div = document.createElement('div'); div.className = 'list_item'; div.innerHTML = <h3>${title}</h3><ul>${content}</ul>; document.getElementById('todolist').appendChild(div); }); waterfall('#todolist'); }).catch()}// Hàm danh sách

1  
2---|---  
3Phiên bản Memos 1.4.0 trở lên
4js

1234567891011121314151617181920212223

1| ```
2danhSách();function danhSách() {  fetch('địa chỉ memos/api/memo?creatorId=ID người dùng&tag=danh sách').then(res => res.json()).then(data => { // Lưu ý thay thế liên kết và ID    // Lấy và xử lý dữ liệu    data = data.data    let box = document.getElementById('todolist')    data.forEach(item => {      // Xử lý dữ liệu      let content = item.content,        title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/,'$1');      // Loại bỏ nội dung dư thừa, thay thế nội dung danh sách      content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);      // Hiển thị dữ liệu      let div = document.createElement('div'); [tin tuc the thao trong nuoc](/post/a826427.html)       div.className = 'list_item';      div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;      box.appendChild(div);    });    waterfall('#todolist');  }).catch()}// Hàm danh sách

---|---

  • Trong tập tin cấu hình chủ đề _config.butterfly.yml dưới phần inject, thêm project.js file vào phần bottom

yml

1123456789

| ``` ···inject: head: ··· bottom: - # memos danh sách trang - hàm logic ···

 1  
 2---|---  
 3`memos api` địa chỉ có định dạng như sau:
 4Địa chỉ memos là địa chỉ trang chủ, ví dụ: memos.meuicat.com
 5**Cách lấy ID người dùng:**
 6  * Nhấp vào avatar cá nhân, sau đó nhấp vào `RSS`
 7  * Theo trình duyệt
 8
 9
10Nếu url là: 1/rss.xml thì creatorId sẽ là 1 Cuối cùng hoàn chỉnh
11  * Cách sử dụng Memos:
12
13
14markdown

123

1| ```
2#danh sách [Tôi là tiêu đề] - [ ] Tôi là nội dung 1 - [x] Tôi là nội dung 2

---|---
Lưu ý: Trước mặt #danh sách là tiêu đề cố định, dùng dấu ngoặc vuông để đánh dấu đã hoàn thành bằng cách thay dấu cách trong ngoặc vuông thành x

Hướng dẫn tùy chỉnh Butterfly: Danh sách cần làm