使用 Bulma CSS 重写友链列表

2022年7月22日 · 技术

之前用 NexT 8 主题的时候，因为背景不自带自适应功能，所以在手机以及某些分辨率低的设备下看我的博客，背景就真的一言难尽。在多位朋友的催促，以及 Icarus 终于发布了支持 Hexo 6 的 Release Version 之后，我把我的博客主题改成了 Icarus 5。不过调试的时候发现原来的友链卡片会导致整个页面出 Bug（反正惨不忍睹就是了），@Nofated 就推荐我用 Bulma CSS 写友链卡片。

先贴上我的代码样式，成品可以前往 Friends 查看。

<div class="box">
    <article class="media">
        <div class="media-left">
            <figure class="image is-128x128">
                <img src="{image link}" width="128" height="128" />
            </figure>
        </div>
        <div class="media-content">
            <div class="content">
                <p>
                    <strong>{friends name}</strong>
                    <button class="button is-small is-link">
                        <a href="{website link}">Go!</a>
                    </button>
                    <br />
                    {slogan}
                </p>
            </div>
        </div>
    </article>
    <article class="media">
        <div class="media-left">
            <figure class="image is-128x128">
                <img src="{image link}" width="128" height="128" />
            </figure>
        </div>
        <div class="media-content">
            <div class="content">
                <p>
                    <strong>{friends name}</strong>
                    <button class="button is-small is-link">
                        <a href="{website link}">Go!</a>
                    </button>
                    <br />
                    {slogan}
                </p>
            </div>
        </div>
    </article>
</div>

由于不太会写那种解说文，我对这个结构的构思会以 Q&A 方式进行解释。

为什么不是卡片？

说实在，我个人也是认为卡片美观一些，甚至在此之前我博客的友链页面都是用的卡片列表。但是这一次，使用卡片的情况下出现了错位现象，目前暂时找不出问题所在，所以用了最基础的 Box。

另外，由于每个人的 Slogan 有长有短，使用 Bulma CSS 写制的卡片并不会将过长的内容进行隐藏，而是直接堆叠上去。如果使用卡片并且遇到了比较长的 Slogan，那么也可能会出现一些错位问题。目前我这里用 Box 写制的卡片可以显示至少两行的 Slogan 内容，所以一段时间博客的友链卡片只会使用 Box。

另外的理由就是，我参考了一下 @Nofated 的友链代码，注意到卡片和 Box 的代码相差太大。而我这边早就把友链加完了，如果真要调回卡片的话还不知道要多久呢（悲）。

使用 Bulma CSS 重写友链列表

为什么不是卡片？

Go! 按钮

为何要加进来

为什么不向右对齐？

已经有人做了为 Icarus 而生的卡片，为何我不用呢？