使用 Bulma CSS 重写友链列表

2022年7月22日


用 Bulma CSS 写一个速度能接受的友链列表。

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

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

file
html
<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 的代码相差太大。而我这边早就把友链加完了,如果真要调回卡片的话还不知道要多久呢(悲)。

Go! 按钮

为何要加进来

问了一圈,Bulma CSS 并没有标明如何点击一个区域访问一个链接(就是点击卡片跳转到一个链接那样),目前的方法就是引入链接到某些文字里,或者添加一个可用的按钮。

我原来的想法是把链接引用到每个友链的名称和 Slogan 上,但考虑到这样好像还是不周全,所以就添加了一个 Go! 按钮(灵感来源于 vuepress-theme-reco 1.x 的链接区)。

为什么不向右对齐?

其实我也考虑过这个问题,但是我尝试了官方指明的写法,并不能让这个按钮向右对齐。有时间的话我再深究一下。

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

这个卡片需要动到 Icarus 主题文件夹的内部,而我是通过 npm 方式安装的 Icarus 主题。

在用 Hexo 主题的各位都了解,node_modules 文件夹被写入了 .gitignore,也就是 node_modules 里的所有组件文件夹都不会上传到 GitHub,在 Vercel 构建时也只会通过读取 package.json 来获取 npm 包构建。这个问题其实把 Icarus 主题扔进 themes 文件夹即可,但用 npm 包有什么好处,我觉得大家应该都懂。

喜欢这篇文章?可否考虑一下打赏我呢?:P

爱发电
Loading comments...