Tối ưu hóa liên kết tùy chỉnh trong giao diện Geek của phần mềm phụ awescnb trên Cnblogs

Mô tả

Trong giao diện Geek của phần mềm phụ awescnb trên Cnblogs, bài viết này sẽ hướng dẫn cách tối ưu hóa liên kết tùy chỉnh (`links`) để hiển thị tốt hơn.

Liên kết sẽ được thêm vào phần導avigation chính và điều chỉnh để phù hợp với phiên bản di động.

Kết quả

  • Phiên bản máy tính để bàn
  • Phiên bản di động

Thực hiện

  • Định nghĩa mã HTML tùy chỉnh:

    • Truy cập "Cnblogs -> Quản lý -> Cài đặt -> mã HTML footer"

    
// Hàm thêm các link
function themCacLink() {
  const thongTinLink = window.thongTinLink || [];
  thongTinLink.forEach(function(item) {
    const moiLink = document.createElement('a');
    moiLink.href = item.url;
    moiLink.target = "_blank";
    moiLink.innerHTML = '<li><span class="fas fa-fw">' + item.icon + '</span><span class="nav-item-text">' + item.ten + '</span></li>';
    document.getElementById("cnblog-nav").querySelector("ul").appendChild(moiLink);
    // Xử lý cho phiên bản di động
    const menuDiDong = document.querySelector(".mobile-menu");
    if (menuDiDong) {
      menuDiDong.querySelector("ul").appendChild(moiLink.cloneNode(true));
    }
  });
}

// Hàm xóa link cũ
function xoaLinkCu() {
  const linkCu = document.querySelector(".links");
  if (linkCu) {
    linkCu.remove();
  }
}

// Thực thi sau 300ms để đảm bảo DOM tải đầy đủ
setTimeout(function() {
  themCacLink();
  xoaLinkCu();
}, 300);
  • Định nghĩa cấu hình liên kết:
    • 
const thongTinLink = [
  {
    icon: '<svg t="1732791306075" viewBox="0 0 1024 1024" width="15" height="15"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#333333"></path><path d="M759.296 448.512c-48.896 0-96.256-15.872-135.424-45.056v204.8c0 104.448-80.64 189.184-179.968 189.184s-179.968-84.736-179.968-189.184 80.64-189.184 179.968-189.184c9.984 0 19.712 0.768 28.928 2.56V529.92c-8.96-3.584-18.688-5.376-28.16-5.376-44.288 0-80.384 37.632-80.384 84.48s36.096 84.48 80.384 84.48 80.128-37.632 80.128-84.48V202.24h100.352c0 78.336 60.416 141.568 134.656 141.568v104.704h-0.512" fill="#FFFFFF"></path></svg>',
    ten: 'Douyin',
    url: 'https://www.douyin.com/user/MS4wLjABAAAAYctE7sRPYcp2o7iQ4Coj5qBo1Oe0PDVZE_d1lLDrKfw?from_tab_name=main'
  },
  {
    icon: '<svg t="1732796681191" viewBox="0 0 1129 1024" width="15" height="15"><path d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0" fill="#20B0E3"></path><path d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0" fill="#20B0E3"></path></svg>',
    ten: 'Bilibili',
    url: 'https://space.bilibili.com/276295390'
  },
  {
    icon: '<svg t="1732796978559" viewBox="0 0 1024 1024" width="15" height="15"><path d="M0 0m256 0l512 0q256 0 256 256l0 512q0 256-256 256l-512 0q-256 0-256-256l0-512q0-256 256-256Z" fill="#FA2C19"></path><path d="M445.824 766.293333c4.181333-9.130667 7.68-17.066667 11.477333-24.789333a512 512 0 0 0 23.253334-49.237333 29.141333 29.141333 0 0 1 34.773333-21.717334c21.973333 1.578667 44.032 0.426667 66.986667 0.426667V384.853333c-15.445333 0-30.677333-0.554667-45.781334 0-10.538667 0.554667-14.250667-2.901333-13.909333-14.165333 0.725333-27.093333 0-54.272 0-82.602667h214.229333v65.706667c0 30.890667 0 30.890667-29.952 30.890667h-30.122666v285.952h65.024c26.197333 0 26.197333 0 26.197333 27.52v57.642666c0 7.978667-1.962667 12.032-10.624 12.032-101.674667-0.170667-203.392-0.298667-305.066667-0.213333a37.717333 37.717333 0 0 1-6.485333-1.365333" fill="#FFFFFF"></path><path d="M486.357333 559.146667c-13.397333 27.605333-25.173333 52.266667-37.546666 76.501333a11.605333 11.605333 0 0 1-8.96 4.522667c-29.781333-0.128-59.733333 1.152-89.429334-1.066667-29.738667-2.218667-41.642667-21.333333-29.781333-50.517333 13.482667-33.664 29.738667-66.218667 44.8-99.2l3.413333-8.832c-12.032 0-22.570667 0.298667-33.109333 0-8.576 0.128-17.152-0.682667-25.514667-2.346667a30.037333 30.037333 0 0 1-25.728-33.536 30.72 30.72 0 0 1 2.901334-10.112c18.048-43.349333 38.272-85.845333 57.770666-128.554667 6.357333-13.994667 13.013333-27.776 20.181334-41.386666 1.834667-3.541333 6.101333-8.064 9.386666-8.192 27.861333-0.682667 55.808-0.341333 86.186667-0.341334-2.645333 6.784-4.138667 11.392-6.144 15.701334-17.066667 35.712-34.176 71.381333-51.370667 106.965333-3.456 7.210667-7.68 14.72 5.290667 20.224 3.413333-18.56 17.408-15.189333 29.610667-15.189333h70.4c-2.944 7.04-4.864 11.946667-6.997334 16.597333-21.76 45.44-43.861333 90.538667-65.28 135.936-8.789333 18.474667-5.845333 22.997333 14.634667 23.168 10.538667-0.298667 21.205333-0.341333 35.285333-0.341333m-38.314666 111.872c-16.512 33.109333-31.274667 62.890667-46.378667 92.501333a10.24 10.24 0 0 1-7.68 4.266667c-40.490667-0.426667-81.066667-1.194667-121.685333-2.261334a79.317333 79.317333 0 0 1-16.298667-4.266666l22.698667-45.909334c7.381333-15.189333 14.592-30.293333 22.570666-44.714666a13.653333 13.653333 0 0 1 9.728-6.4c37.205333 1.834667 74.410667 4.437333 111.658667 6.698666 7.424 0.384 14.506667 0.085333 25.386667 0.085334" fill="#FFFFFF"></path></svg>',
    ten: 'Xiaohongshu',
    url: 'https://www.xiaohongshu.com/user/profile/6667cf5c00000000030310e0'
  },
  //...
]
  • Định nghĩa mã CSS tùy chỉnh:

    • Truy cập "Cnblogs -> Quản lý -> Cài đặt -> mã CSS trang"

    
/* Ẩn các link cũ */
@media screen and (max-width: 768px) {
  #left-side .links {
    display: none !important;
  }
}

/* Điều chỉnh layout cho phiên bản di động */
@media screen and (max-width: 768px) {
  #left-side #cnblog-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  #left-side #cnblog-nav ul a {
    width: 15% !important;
  }
}

/* Điều chỉnh sidebar cho phiên bản di động */
.mobile-menu #sideBar {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

Thẻ: JavaScript css CNBlogs Tùy chỉnh giao diện

Đăng vào ngày 27 tháng 6 lúc 18:27

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn