blog/themes/Ying/layouts/_default/new-links-lite.html

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

        .links a {
            color: var(--link-color-light);
            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;
            /* 鼠标悬浮时可以改变不透明度 */
        }

        [data-theme="dark"] .links a {
            color: var(--link-color-dark);
        }

        [data-theme="dark"] .url-name::before {
            background-color: #e5e7eb;
            opacity: 0.18;
        }

        [data-theme="dark"] .url-name:hover::before {
            opacity: 0.35;
        }
    </style>
    <div class="post-content" itemprop="articleBody">
        <div class="links">
            <ul uk-scrollspy="target: > li; cls: uk-animation-slide-bottom-small; delay: 0">
                {{ 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 }}