如果只是想学习怎么配置，可以直接跳转到配置环节。

需求来源

我的友链页面采用flexcard展示，每个友链是一个card，这个排版是Butterfly主题默认可以启用的，具体表现形式为左边是头像，右边上方是name，下方是description，然后当鼠标移动到card上时右侧会向左移动，把图片顶掉，把name和description改得更前。但是对于普通的电脑页面（严格来说，任何宽度大于1200px的页面显示）来说，每行会排三个card，而这会让某些比较长的description显示不全，甚至比较长的name也会被遮挡。

曾经的解决办法

最早发现这个问题的时候，当时触发这个问题的条目是IT侠的description。“侠之大者，为国为民；侠之小者，为友为邻。”对于三分之一宽度的卡片确实有点窄了，而且排版在一行上也不好看，于是我给中间加了一个<br>标签，这样就可以把对仗的句子显示在上下两行了。

越来越多的问题

随着友链不断加加加加到厌倦（开玩笑的，现在友链还少得很大家赶紧来加），越来越多的card开始出现了类似的问题，而且对于那种没什么对仗性/没有明显断句的description，还要不断调试添加<br>的位置，一点也不优雅。

于是在某个中午，水煮鱼鱼鱼决定研究一下这个友链页面，找到解决的办法。

一些尝试以及解决办法

第一反应当然是在Butterfly的_config.yml中找找有没有相关的配置……但是没有找到。

第二反应当然是上网搜搜看有没有相关的教程……但是要么是最基础的“如何创建友链页面”这种新手教程，要么是激进的大幅度魔改，唯一一个看起来有点希望的文章点进去是404……

没辙了，水煮鱼师傅决定点开Butterfly的文件夹，看看能不能修改源码。

好在很快找到了正确的位置，找到/themes/butterfly/source/css/_page/flink.styl这样一个Stylus文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
& > .flink-list-item
  position: relative
  float: left
  overflow: hidden
  margin: 15px 7px
  width: calc(100% / 3 - 15px)
  height: 90px
  line-height: 17px
  -webkit-transform: translateZ(0)
  addBorderRadius(8)

  +maxWidth1024()
    width: calc(50% - 15px) !important

  +maxWidth600()
    width: calc(100% - 15px) !important

这里可以看到每行三个card是因为100% / 3。那么很简单就能想到的是我们直接改成50%就可以每行只显示两个card了。

继续往下翻

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flink-item-name
  @extend .limit-one-line
  padding: 16px 10px 0 0
  height: 40px
  font-weight: bold
  font-size: 1.43em

.flink-item-desc
  @extend .limit-one-line
  padding: 16px 10px 16px 0
  height: 50px
  font-size: .93em

.flink-name
  margin-bottom: 5px
  font-weight: bold
  font-size: 1.5em

很容易想到，flink-item-name控制的是友链对象的name的样式，flink-item-desc控制的是友链对象的description的样式，而flink-name控制的应该是友链分组的样式。@extend .limit-one-line指的应该是单行显示，最后不换行而是以…替代。我直接将.flink-item-desc的单行显示语句前加//注释掉，就可以让description自然地换行了。

絮语

这次的配置倒是完全没用AI，大概也许是因为任务太简单了罢，，，