Hexo Next主题添加友链(2),使用Cursor优化友链样式

前文Hexo Next主题添加友链从其他博客获取的样式有一些问题:

• 只在网页全屏时友链卡片比例显示正常,调整分辨率后不同行的卡片比例会乱掉
• 图片没有按比例显示,样式不一致

即没有自适应,这里使用Cursor优化下样式,并添加了图片自适应样式,按网页大小调整列数,最多显示6列,默认4列,并且文字仅显示一行,超出的显示省略号.

这是修改后的效果

修改

links.js

下载

// 随机排列
function shuffle(arr) {
  let i = arr.length;
  while (i) {
    let j = Math.floor(Math.random() * i--);
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
}

// 渲染数据
// function renderlink(data) {
//     var name, avatar, site, li = "";
//     shuffle(data);
//     for (var i = 0; i < data.length; i++) {
//         name = data[i].name;
//         avatar = data[i].avatar;
//         site = data[i].site;
//         li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + name + '</a></div>' + '</div>' + '</div>';
//     }
//     document.querySelector(".link-navigation").innerHTML = li;
// }
function renderlink(data) {
  shuffle(data);
  const linkContainer = document.querySelector(".link-navigation");
  linkContainer.innerHTML = data.map(item => `
    <div class="card">
      <div class="thumb" style="background-image: url('${item.avatar}');"></div>
      <div class="card-header">
        <a href="${item.site}" target="_blank">${item.name}</a>
      </div>
    </div>
  `).join('');
}

// 获取 json 文件
fetch('/links/linklist.json')
  .then(response => response.json())
  .then(res => renderlink(res));

links.css

下载

.link-navigation {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 默认4列 */
    gap: 16px;
    max-width: 100%;
}

/* 在小屏幕上自适应为更少的列数 */
@media (max-width: 768px) {
    .link-navigation {
        grid-template-columns: repeat(2, 1fr);
        /* 小屏幕显示2列 */
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .link-navigation {
        grid-template-columns: repeat(3, 1fr);
        /* 中等屏幕显示3列 */
    }
}

/* 添加大屏幕配置 */
@media (min-width: 1920px) {
    .link-navigation {
        grid-template-columns: repeat(5, 1fr);
        /* 2K屏幕显示5列 */
        gap: 24px;
        /* 增加列间距 */
    }
}

@media (min-width: 3840px) {
    .link-navigation {
        grid-template-columns: repeat(6, 1fr);
        /* 4K屏幕显示6列 */
        gap: 32px;
        /* 进一步增加列间距 */
    }
}

.card {
    font-size: 1rem;
    padding: 0;
    border-radius: 4px;
    transition-duration: .15s;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
    background: #f5f5f5;
    width: 100%;
    /* 保持正方形 */
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    /* 添加相对定位 */
}

.card:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
}

.card .thumb {
    position: absolute;
    /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    /* 减去标题栏高度 */
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    /* 改为 contain 确保图片完整显示 */
}

.posts-expand .post-body img {
    margin: 0;
    padding: 0;
    border: 0;
}

.card .card-header {
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    /* 固定标题栏高度 */
    padding: 8px;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card .card-header a {
    font-style: normal;
    color: #2bbc8a;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s;
}

.card:hover .card-header a {
    white-space: normal;
    overflow: visible;
}