Ghost 友链页面样式分享

昨天 Feng 问我能不能分享下我写的那个友链页面的样式，今天就贴一下吧～。

其实也没什么技术含量，但是因为 Ghost 和其他博客不一样，并没有原生或者可以通过插件附加友链这个功能，所以只能通过固定写死在 page 上来实现这个效果。

但是如果纯粹全部写 HTML 代码可读性会很差，而且编写很多代码，比较麻烦，所以我这里取了个巧，利用 Ghost 图片和超链接组合包裹：超链接里包裹图片，并搭配自己的 CSS 就可以很简单的实现可读性比较高，容易编写的友链列表。

这里的图片地址用的：https://ydr.me/ 提供的网站 ico 解析服务。

（我写完这段话看了下下面的代码，觉得嘛... 其实可读性也就那样吧...）

<!-- 外部还是用div包裹 -->
<div id="links">

<!-- 使用markdown代码编写列表格看起来很复杂
其实格式就是：[超链接标题![](图片地址)](超链接地址 "链接说明文本") -->
* [一日![](https://f.ydr.me/?url=http://www.ihewro.com/)](http://www.ihewro.com/ "相逢的人会再相逢")
* [有意![](https://f.ydr.me/?url=https://www.uefeng.com/)](https://www.uefeng.com/ "IT 民工的折腾记录")
* [破袜子![](https://f.ydr.me/?url=http://pewae.com/)](http://pewae.com/ "一个脱离不了低级趣味的人
")

</div>

另外搭配的 css 如下：

#links ul {
    list-style: none;
    padding: 0px;
    text-align: center;
    border: none;
    background: none;
}

#links ul li {
    display: inline-block;
    width: 105px;
    height: 105px;
    margin: 1rem 1rem;
    background-color: rgba(0, 0, 0, 0.04);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 25px 5px;
    border-radius: 5%;
    font-weight: 600;
    text-align: center;
    transition: all 0.5s;
    line-height: 2rem;
    position: relative;
    top: 0px;
}

#links ul li:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 10px;
    transition: all 0.5s;
    background-color: #FF5722;
    top: -15px;
}

#links ul li:hover a {
    color: white;
    transition: all 0.1s;
}

#links ul li:hover .site-friend-link-count {}

#links ul li a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
    background: none;
    transition: all 0.5s;
    font-size: 1.2rem
}

#links ul li .site-friend-link-count {
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    word-spacing: normal;
    word-break: break-word;
    word-wrap: break-word;
    z-index: 1000;
    position: absolute;
    background-color: #FF5722;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: -5px;
    right: -7px;
    line-height: 15px;
}

#links ul li a img {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 0px;
}

#links ul li a img:hover {
    box-shadow: none;
}