Galaxy City
    avatar

    使用 Bulma CSS 重写友链列表

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <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 包有什么好处,我觉得大家应该都懂。

    长按或右键保存图片
    使用微信扫描后在微信内分享
    除声明之外的本站内容均采用 CC BY-NC-SA 4.0 License 进行许可。