个人信息模块美化

CSS

在主题根目录下找到 style.css 文件，在合适位置加入如下代码

/* 个人信息小工具模块美化开始 */
* .block {
    text-align:center;
}
.block__title {
    font-size:1rem;
    cursor:pointer;
    color:var(--color-blocktitle);
}
.hover-reveal {
    z-index:1000;
    position:fixed;
    width:300px;
    height:300px;
    pointer-events:none;
    opacity:0;
}
.hover-reveal__inner,.hover-reveal__img {
    width:100%;
    height:100%;
    position:relative;
}
.block span {
    margin:2px;
    border-radius:3px;
    display:inline-block;
    padding:0px 8px 0px 8px;
}
.block .author-ipv6 {
    background-color:#40C87F;
}
.block .author-email {
    background-color:#0396FF;
}
.block .author-weibo {
    background-color:#d52c2b;
}
.block span:hover {
    background-color:#000;
}
.block a {
    padding:4px;
    font-size:14px;
    color:#fff;
}
.block a:visited {
    color:#fff;
}
.block a i {
    padding:4px 5px 4px 0px;
}
/* 个人信息小工具模块美化结束 */

HTML

在需要添加的位置加入如下代码

<div class="block" >
<a class="block__title" href="#" title="本站及下属子站点已全面支持IPv6协议访问，欢迎体验"><span class="author-ipv6"><i class="fab fa-skyatlas"></i>IPv6</span></a>
<a class="block__title" href="Mailto:admin@facekun.com" title="邮件与我联系" target="_blank"><span class="author-email"><i class="fas fa-envelope-square"></i>邮箱</span></a>
<a class="block__title" href="https://weibo.com/u/123456" title="查看我的动态" target="_blank"><span class="author-weibo"><i class="fab fa-weibo"></i>微博</span></a>
</div>