typecho自定义A链接美化样式和代码

寻梦xunm| 667| 收集

2年前

超过1045天温馨提示

本文最后更新于2022年03月09日，已超过1045天没有更新，若内容或图片失效，请留言反馈。

截图

自行把下面的代码放入到functions.php文件中，在需要使用的地方调用该函数即可。

//自定义ubb代码
function ubb($nr){

    $nr = preg_replace("/\[url=(.+?)\](.+?)\[\/url=(.+?)\]/","
<a target='_blank' href='\\1' class='LinkCard'>
<span class='LinkCard-content'>
    <span class='LinkCard-text'>
        <span class='LinkCard-title'>\\2</span>
            <span class='LinkCard-excerpt ell'>\\3</span>
                <span class='LinkCard-meta'>
                    <span style='display:inline-flex;'>
                                                <svg fill='currentColor' viewBox='0 0 24 24' width='17' height='17'><path d='M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z' fill-rule='evenodd'></path></svg>
                                                </span>
                                                <span>\\1</span>
                                            </span>
                                        </span>
                                        <span class='LinkCard-imageCell'>
                                        <span class='LinkCard-image LinkCard-image-default'>
                                            <svg fill='currentColor' viewBox='0 0 24 24' width='32' height='32'><path d='M11.991 3C7.023 3 3 7.032 3 12s4.023 9 8.991 9C16.968 21 21 16.968 21 12s-4.032-9-9.009-9zm6.237 5.4h-2.655a14.084 14.084 0 0 0-1.242-3.204A7.227 7.227 0 0 1 18.228 8.4zM12 4.836A12.678 12.678 0 0 1 13.719 8.4h-3.438A12.678 12.678 0 0 1 12 4.836zM5.034 13.8A7.418 7.418 0 0 1 4.8 12c0-.621.09-1.224.234-1.8h3.042A14.864 14.864 0 0 0 7.95 12c0 .612.054 1.206.126 1.8H5.034zm.738 1.8h2.655a14.084 14.084 0 0 0 1.242 3.204A7.188 7.188 0 0 1 5.772 15.6zm2.655-7.2H5.772a7.188 7.188 0 0 1 3.897-3.204c-.54.999-.954 2.079-1.242 3.204zM12 19.164a12.678 12.678 0 0 1-1.719-3.564h3.438A12.678 12.678 0 0 1 12 19.164zm2.106-5.364H9.894A13.242 13.242 0 0 1 9.75 12c0-.612.063-1.215.144-1.8h4.212c.081.585.144 1.188.144 1.8 0 .612-.063 1.206-.144 1.8zm.225 5.004c.54-.999.954-2.079 1.242-3.204h2.655a7.227 7.227 0 0 1-3.897 3.204zm1.593-5.004c.072-.594.126-1.188.126-1.8 0-.612-.054-1.206-.126-1.8h3.042c.144.576.234 1.179.234 1.8s-.09 1.224-.234 1.8h-3.042z'></path></svg>
                                        </span>
                                        </span>
                                    </span>
                                </a>", $nr);


return $nr;
}

css样式

/*A链接样式美化（来自其它优秀模板样式）*/
.LinkCard {
 position:relative;
 display:block;
 margin:1em auto;
 width:450px;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 border-radius:4px;
 max-width:100%;
 overflow:hidden
}
.LinkCard,
.LinkCard:hover {
 text-decoration:none;
 border:none!important;
 color:inherit!important
}
.LinkCard .LinkCard-backdrop {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-repeat:no-repeat;
 -webkit-filter:blur(20px);
 filter:blur(20px);
 background-size:cover;
 background-position:50%
}
.LinkCard .LinkCard-content {
 position:relative;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 justify-content:space-between;
 padding:12px;
 border-radius:inherit;
 background-color:rgba(246,246,246,.88)
}
.LinkCard .LinkCard-content .LinkCard-text {
 overflow:hidden
}
.LinkCard .LinkCard-content .LinkCard-text .LinkCard-title {
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
 text-overflow:ellipsis;
 max-height:40px;
 font-size:1em;
 font-weight:500;
 line-height:1.25;
 color:#1a1a1a
}
.LinkCard .LinkCard-content .LinkCard-text .LinkCard-meta {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 margin-top:4px;
 font-size:.8em;
 line-height:20px;
 color:#999;
 white-space:nowrap
}
.ell{
 font-size:.8em;
}
.LinkCard .LinkCard-content .LinkCard-imageCell {
 margin-left:8px;
 border-radius:4px
}
.LinkCard .LinkCard-content .LinkCard-imageCell .LinkCard-image {
 display:block;
 width:60px;
 height:60px;
 -o-object-fit:cover;
 object-fit:cover;
 border-radius:inherit
}
.LinkCard .LinkCard-content .LinkCard-imageCell .LinkCard-image.LinkCard-image-default {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 background-color:#ebebeb;
 color:#d3d3d3
}

/*a链接样式美化结束*/

typecho 样式代码链接美好

0 赞 or 打赏

喜欢就打赏一点