{{ define "main" }}
<style>
    .links ul>li {
        position: relative;
        padding-left: 1.75em;
    }

    .links a {
        color: #000;
        font-weight: 500;
        text-decoration: none;
    }

    .links li {
        margin-top: .5em;
        margin-bottom: .5em;
    }

    .links ul>li:before {
        content: "";
        position: absolute;
        background-color: #d1d5db;
        border-radius: 50%;
        width: .375em;
        height: .375em;
        top: .6875em;
        left: .25em;
    }

    .url-name {
        position: relative;
        display: inline-block;
    }

    .url-name::before {
        content: "";
        position: absolute;
        height: 12px;
        bottom: 3px;
        left: -4px;
        z-index: -1;
        background-color: #5d5d5d;
        opacity: .3;
        transform: skew(-35deg);
        transition: opacity .2s ease;
        border-radius: 3px 8px 10px 6px;
        transition: 0.1s ease background-color;
        width: 112%; /* 宽度根据a标签的内容动态变化 */
    }

    .url-name:hover::before {
        opacity: 0.5; /* 鼠标悬浮时可以改变不透明度 */
    }
</style>
<div id="pjax-container">
    <div class="post-content" itemprop="articleBody">
        <div class="links">
            <h3>友情链接</h3>
            <ul>
                {{ range site.Data.links.blogs }}
                <li><a href="{{ .url }}" class="url-name">{{ .name }}</a><span style="margin-left: 13px;">{{ .description }}</span></li>
                {{ end }}
            </ul>
        </div>
    </div>
</div>
{{ end }}