blog/themes/Ying/layouts/page/links.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%;
        }

        .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 id="links-list" uk-scrollspy="target: > li; cls: uk-animation-slide-bottom-small; delay: 50">
            </ul>
        </div>
    </div>

    <script>
    (function() {
        var list = document.getElementById('links-list');
        if (!list) return;

        fetch('https://rssapi.usj.cc/api/links?t=' + new Date().getTime())
            .then(function(res) { return res.json(); })
            .then(function(data) {
                var links = data.links || [];
                if (links.length === 0) return;
                var html = '';
                links.forEach(function(l) {
                    html += '<li><a href="' + l.url + '" class="url-name" target="_blank">' + l.name + '</a><span style="margin-left: 13px;">' + (l.description || '') + '</span></li>';
                });
                list.innerHTML = html;
            })
            .catch(function() {});
    })();
    </script>
</div>
{{ end }}