为WordPress博客设计更优雅的卡片式友情链接页面

前言

今天折腾了一个下午，终于弄出了一个比较看得过去的友情链接页面。一开始我是在主页的右侧工具栏加了一个“友情链接”的小Widget来实现的友链功能，结果逛了一圈朋友们的博客，发现他们都有专门的独立页面来存储友情链接，于是感觉我再用这么小的一个Widget来存友链就有点太小气了，最终就产生了为自己博客造一个全新的友情链接页面的想法。

新版友链页面的网址为：友情链接/Links – Cloudy’s Blog (cloudy233.win)

也可通过上图所示的入口进入新版友链页面，本来想在顶部菜单栏也加一个入口的，结果网页顶部的空间不够了，再多加一个元素就会把搜索框挤掉。要是能再更细致的调整一下菜单之间的间隔就好了，不过我暂时还没找到在哪里可以调整，可能得修改主题的底层代码了。。

自定义HTML代码

参考了许多朋友们的友链页面后，最终我决定将自己的友链页面设计成卡片式的风格，看起来简洁又美观，这个效果主要是通过嵌入自定义HTML代码和自定义CSS来实现的，具体代码如下所示：

<a href="https://你朋友的博客域名.com/" class="custom-card">
  <div class="custom-card-media">
    <img src="http://example.com/你朋友的头像图链接.jpeg" alt="这里可以填为无障碍人士准备的图片说明" />
  </div>
  <div class="custom-card-content">
    <h4>这里是卡片文字第一行，请改成你朋友的名字</h4>
    <p>这里是卡片文字第二行，请改成你朋友的描述</p>
  </div>
</a>

要使用这段HTML代码，直接在WordPress块编辑器中找到“小工具-自定义HTML”的块，将其添加进正文，然后复制粘贴代码即可。每一个卡片都可以用一个单独的“自定义HTML”块来存放相应的代码，可以方便后期维护新添加的友链。

自定义CSS代码

.custom-card {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-bottom: 16px;
}

.custom-card-media {
  flex: 0 0 auto;
  position: relative;
  width: 20%;
}

.custom-card-media::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.custom-card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
}

@media (max-width: 600px) {
  .custom-card {
    flex-direction: column;
    height: auto;
  }

  .custom-card-media {
    width: 100%;
  }

  .custom-card-media::before {
    padding-top: 50%;
  }

  .custom-card-content {
    order: 2;
  }
}