链接卡片

链接卡片样式

在 Fluid 主题中，没有内置的链接卡片样式，因此根据有野野芥的处理方式，为链接添加了卡片样式，使其背景颜色能跟随主题的日夜模式切换，且鼠标悬停时有放大效果。
Hexo改良版知乎“外链卡片”

1

<a href="" logourl="" class="LinkCard">标题</a>

后续发现

在尝试本地和线上部署后，发现 HTML 中标签确实存在，但是 LinkCard.js 没有执行，导致 innerHTML 没有被替换。为了简单直接，用 DOMContentLoaded 解决刷新后不执行的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

document.addEventListener("DOMContentLoaded", function () {
    var LinkCards = document.getElementsByClassName('LinkCard');
    for (var i = 0; i < LinkCards.length; i++) {
        var LinkCard = LinkCards[i];
        var link = LinkCard.href;
        var title = LinkCard.innerText;
        var logourl = LinkCard.getAttribute('logourl');

        LinkCard.innerHTML =
            `<span class="LinkCard-content">
                <span class="LinkCard-text">
                    <span class="LinkCard-title">${title}</span>
                    <span class="LinkCard-meta">
                        <span style="display:inline-flex;align-items:center">
                            <svg class="Zi Zi--InsertLink" 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>
                        <a href="${link}" title="${link}" style="color:inherit;text-decoration:none;">${link}</a>
                    </span>
                </span>
                <span class="LinkCard-imageCell">
                    <img class="LinkCard-image" alt="logo" src="${logourl}" onerror="this.src='/img/loading/loading6.gif'">
                </span>
            </span>`;

        if (!logourl) {
            if (link.startsWith('http://localhost:4000/') || link.startsWith('https://ronghuasixue.com/')) {
                var img = LinkCard.getElementsByClassName('LinkCard-image')[0];
                img.src = '/img/avatar/avatar.webp';
            }
            else {
                LinkCard.getElementsByClassName('LinkCard-imageCell')[0].style.display = 'none';
                LinkCard.getElementsByClassName('LinkCard-text')[0].style.maxWidth = 'calc(100% - 20px)'; 
            }
        }
    }
});