vBulletin - Snöbollseffekten kanalstyrd header, logga och medlemswidget

Det här dokumentet beskriver den aktuella forumintegrationen för Snöbollseffekten i vBulletin.

Målet är att behålla det vanliga vBulletin-upplägget, men ändå ge Snöbollseffekten en egen logga, egen pathstyrning och en egen medlemswidget när aktuell URL tillhör Snöbollseffekten-spåret.

Vad lösningen hanterar

Den nuvarande lösningen täcker:

redirect från /snowball till /snowball/forum
redirect från /snowball/ till /snowball/forum
path-matchning för /snowball/forum och /snowball/forum/*
att HTML-klassen is-snowball-forum sätts
tidig döljning av original-loggan för att minska blinkning
preload av Snöbollseffekten-loggan
preconnect och preload för Tools-hostade script
snabbt loggbyte utan att tvinga ett separat vBulletin-tema
styling för medlemswidget-blocket
att det äldre footer-baserade loggbytet är borttaget

Aktuella URL-regler

Följande paths räknas som Snöbollseffekten-paths:

/snowball -> redirect till /snowball/forum
/snowball/ -> redirect till /snowball/forum
/snowball/forum
/snowball/forum/*

Hook- och mallupplägg

Integrationen drivs just nu via vBulletins hook-/mallsystem.

Header-hook

Hook-plats: header_head
Mallnamn: snowball_header_script
Hook arguments:

userinfo=userinfo
bbuserinfo=bbuserinfo

Syfte:

hanterar redirecten /snowball -> /snowball/forum
sätter CSS-klassen is-snowball-forum på <html>
döljer originalloggan innan DOM-byten sker
preloadar Snöbollseffekten-loggan
preconnectar/preloadar Tools-scripten
laddar Tools vBulletin-bundle
byter loggan så fort #header .site-logo a > img finns i DOM:en

När samma hook också ska prata direkt med Tools för invite-verifiering efter färdig forumregistrering bör användarfälten läsas från userinfo / bbuserinfo, inte från en påhittad user.*-struktur. Det är också där ett profilfält som field66 normalt behöver hämtas.

Det finns nu en separat praktisk guide för just denna del, inklusive anpassad bootstrapkod, publikt API-anrop utan token, URL-stripning av invitekod och en stylad success-popup:

vBulletin invite-complete hook utan onboarding-sidan

Den guiden innehåller nu också det fulla, färdiga Snowball-autoverify-exemplet som faktiskt används för automatisk insläppning och popup-feedback.

Footer-hook

Mallnamn: snowball_footer_script

Nuvarande förväntan:

den ska vara tom eller inaktiv
det gamla footer-baserade loggbytet används inte längre
aktivt loggbyte sker nu från header_head med tidig CSS och DOM-bevakning

Aktuell Snöbollseffekten-logga

Nuvarande logg-URL:

https://forum.tornevall.net/filedata/fetch?photoid=1063354

Den ersätter denna selector:

#header .site-logo a > img

Rekommenderad framtida förbättring

Flytta loggan till en statisk fil, till exempel:

/images/snowball-logo.png

Det bör ge:

bättre cache i browsern
snabbare omladdningar
mindre beroende av nuvarande attachment/filedata-path

Tools-bundle och widget-script

Den Tools-hanterade vBulletin-bundlen laddas från:

https://tools.tornevall.net/api/managed-scripts/vbulletin/bundle.js

Medlemswidgetarna använder just nu separata script:

latest-member.js
member-count.js

De preloadas i header_head för att minska fördröjningen senare.

HTML-modulen måste fortfarande innehålla själva widget-containrarna. Preload hjälper bara browsern att börja hämta tidigare; den ersätter inte behovet av widgetarnas HTML-platshållare.

Nästa prestandasteg om widgetarna fortfarande känns långsamma

Om widgetområdet fortfarande känns segt är nästa förbättring att slå ihop senaste medlem + medlemsantal till ett script eller endpoint, till exempel:

member-summary.js

Det skulle ge ett kombinerat anrop i stället för två separata widgetladdningar.

Nuvarande styling för medlemswidgeten

Integrationen innehåller ett särskilt style-block för widget-wrappern och laddningsindikatorn:

#tools-vb-member-widgets
.tools-vb-widget-line
#tools-vb-widget-loading
.tools-vb-spinner

Det gör att widgeten sticker ut från forumets standardkrom utan att kräva ett separat tema.

Nuvarande `snowball_header_script`

<script>
(function () {
    var path = decodeURIComponent(window.location.pathname).toLowerCase();

    if (path === "/snowball" || path === "/snowball/") {
        window.location.replace("/snowball/forum");
        return;
    }

    if (path === "/snowball/forum" || path.startsWith("/snowball/forum/")) {
        document.documentElement.classList.add("is-snowball-forum");
    }
})();
</script>

<style>
html.is-snowball-forum #header .site-logo a > img {
    visibility: hidden !important;
}

#tools-vb-member-widgets {
    max-width: 1080px;
    margin: 0 auto 24px auto;
    padding: 18px 22px;
    border-left: 5px solid #6faf8b;
    border-radius: 10px;
    background: #f7fff9;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    text-align: center;
    font-weight: 600;
}

#tools-vb-member-widgets .tools-vb-widget-line {
    display: block;
    margin: 4px 0;
}

#tools-vb-widget-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.75;
}

.tools-vb-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-top-color: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    animation: toolsVbSpin 0.8s linear infinite;
}

@keyframes toolsVbSpin {
    to {
        transform: rotate(360deg);
    }
}
</style>

<link rel="preload" as="image" href="https://forum.tornevall.net/filedata/fetch?photoid=1063354" fetchpriority="high">
<link rel="preconnect" href="https://tools.tornevall.net" crossorigin>
<link rel="preload" as="script" href="https://tools.tornevall.net/api/managed-scripts/vbulletin/bundle.js">
<link rel="preload" as="script" href="https://tools.tornevall.net/vbulletin/widgets/latest-member.js?group_ids=155&variant=plain&container_id=tools-vb-latest-member-widget&template=Vi+v%C3%A4lkomnar+v%C3%A5r+senaste+medlem+%7Bname%7D">
<link rel="preload" as="script" href="https://tools.tornevall.net/vbulletin/widgets/member-count.js?group_ids=155&variant=plain&container_id=tools-vb-member-count-widget&template=Sn%C3%B6bollseffekten+v%C3%A4xer+-+vi+%C3%A4r+nu+%7Bcount%7D+medlemmar">

<script defer src="https://tools.tornevall.net/api/managed-scripts/vbulletin/bundle.js"></script>

<script>
(function () {
    var snowballLogoUrl = "https://forum.tornevall.net/filedata/fetch?photoid=1063354";
    var path = decodeURIComponent(window.location.pathname).toLowerCase();

    if (!(path === "/snowball/forum" || path.startsWith("/snowball/forum/"))) {
        return;
    }

    var preloadedLogo = new Image();
    preloadedLogo.fetchPriority = "high";
    preloadedLogo.src = snowballLogoUrl;

    function swapSnowballLogo() {
        var logo = document.querySelector("#header .site-logo a > img");

        if (!logo) {
            return false;
        }

        logo.src = snowballLogoUrl;
        logo.setAttribute("data-orig-src", snowballLogoUrl);
        logo.alt = "Snöbollseffekten";
        logo.title = "Snöbollseffekten";
        logo.style.setProperty("visibility", "visible", "important");

        return true;
    }

    if (!swapSnowballLogo()) {
        var observer = new MutationObserver(function () {
            if (swapSnowballLogo()) {
                observer.disconnect();
            }
        });

        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });

        window.setTimeout(function () {
            observer.disconnect();
        }, 5000);
    }
})();
</script>

Felsökning

Om integrationen inte beter sig som den ska, börja med de här kontrollerna.

Kontrollera att header-hooken laddades

Sök efter snowballLogoUrl i sidkällan eller i DevTools.

Kontrollera att logg-selector fortfarande stämmer

Kör i browserkonsolen:

document.querySelector("#header .site-logo a > img")

Kontrollera att Snöboll-klassen sätts

Kör:

document.documentElement.classList.contains("is-snowball-forum")

Kontrollera aktuell path-matchning

Kör:

decodeURIComponent(window.location.pathname).toLowerCase()

Om originalloggan blinkar

Kontrollera att den tidiga visibility:hidden-regeln verkligen finns i header_head.

Om medlemswidgeten känns långsam

Kontrollera nätverkstiderna för:

Tools-bundlen
latest-member.js
member-count.js
backend-anropen som triggas av widgetarna

Tornevall Networks