友链一行显示多个

请先一步完成友链样式魔改

volantis样式在自定义css中添加以下代码

/* 友链一行显示更多 */
.site-card {
  width: calc(100% / 5 - 16px) !important;
  border-radius: 18px !important;
}
.site-card .img {
  height: 165px !important;
  border-radius: 18px !important;
}
/* 适应宽度不同的设备 */
@media screen and (max-width: 1200px) {
  .site-card {
    width: calc(100% / 4 - 16px) !important;
  }
}
@media screen and (max-width: 900px) {
  .site-card {
    width: calc(100% / 3 - 16px) !important;
  }
}
@media screen and (max-width: 600px) {
  .site-card {
    width: calc(100% / 2 - 16px) !important;
  }
}

其中， width: calc(100% / 5 - 16px) !important;的5可以更改成更多，宽度按自己喜欢的样式进行修改 2. 博客宽屏适配在custom.css中加入以下样式：

/* 全局宽度 */  
.layout {  
  max-width: 1400px;  
}  
  
/* 侧边卡片栏宽度 */  
.aside-content {  
  max-width: 318px;  
  min-width: 300px;  
}  
  
/* 平板尺寸自适应(不启用侧边栏宽度限制) */  
@media screen and (max-width: 900px) {  
  .aside-content {  
    max-width: none !important;  
    padding: 0 5px 0 5px;  
  }  
}

因为以上代码有重复，也可以复制下面的整合版：

/* 友链卡片布局优化 */
.site-card {
  width: calc(100% / 5 - 16px) !important;
  border-radius: 18px !important;
}

.site-card .img {
  height: 165px !important;
  border-radius: 18px !important;
}

/* 响应式布局调整 */
@media screen and (max-width: 1200px) {
  .site-card {
    width: calc(100% / 4 - 16px) !important;
  }
}

@media screen and (max-width: 900px) {
  .site-card {
    width: calc(100% / 3 - 16px) !important;
  }
  
  /* 平板尺寸侧边栏调整 */
  .aside-content {
    max-width: none !important;
    padding: 0 5px;
  }
}

@media screen and (max-width: 600px) {
  .site-card {
    width: calc(100% / 2 - 16px) !important;
  }
}

/* 全局布局设置 */
.layout {
  max-width: 1400px;
}

/* 侧边栏默认样式 */
.aside-content {
  max-width: 318px;
  min-width: 300px;
}

有的小伙伴想友链页面不显示侧边栏，可以在主题文件中aside部分增加一项

aside:

  enable: true

  hide: false

  # Show the button to hide the aside in bottom right button

  button: true

  mobile: true

  # Position: left / right

  position: right

  display:

    archive: true

    tag: true

    category: true

    flink: false # 友链页隐藏侧栏

增加flink: false 这样友链页面就不会显示侧边栏了

评论