查看“︁MediaWiki:Common.js”︁的源代码

//用户名前显示头像
(function() {
    // 缓存
    var avatarCache = {};

    function addAvatarsToElements( $elements ) {
        $elements.each( function () {
            var $link = $( this );
            if ( $link.prev( '.sp-avatar-wrapper' ).length ) {
                return;
            }

            // 排除区域
            if ( $link.closest( '#p-views, #p-cactions, #p-tb, #right-navigation, #p-personal' ).length ) {
                return;
            }

            var href = $link.attr( 'href' );
            if ( !href ) return;

            var userPart = decodeURIComponent( href.split( '/wiki/' )[1] );
            if ( !userPart || userPart.indexOf( '/' ) !== -1 ) {
                return;
            }

            var userName = userPart.replace( /^User:|^用户:/, '' ).replace(/_/g, ' ');
            var linkText = $link.text().trim().replace(/^User:|^用户:/, '');

            if ( linkText !== userName ) {
                var $target = $link.find( 'span, bdi' ).first();
                var targetText = $target.length ? $target.text().trim().replace(/^User:|^用户:/, '') : '';
                if ( !$target.length || targetText !== userName ) {
                    return;
                }
            }

            // 检查缓存
            if ( avatarCache[userName] ) {
                insertAvatar( $link, avatarCache[userName], userName );
                return;
            }

            new mw.Api().get( {
                action: 'parse',
                text: '{{#avatar:' + userName + '|l}}',
                contentmodel: 'wikitext',
                disablelimitreport: true,
                disableeditsection: true
            } ).done( function ( data ) {
                if ( data.parse && data.parse.text ) {
                    var avatarHtml = data.parse.text[ '*' ];
                    avatarCache[userName] = avatarHtml; // 写入缓存
                    insertAvatar( $link, avatarHtml, userName );
                }
            } );
        } );
    }

    function insertAvatar( $link, avatarHtml, userName ) {
        var $avatarWrapper = $( '<span class="sp-avatar-wrapper" style="vertical-align: middle; margin-right: 4px; display: inline-block;"></span>' ).html( avatarHtml );
        
        $avatarWrapper.find( 'img' ).css( {
            width: '2em',
            height: '2em',
            objectFit: 'cover',
            display: 'inline-block',
            verticalAlign: 'middle',
            border: 'var(--background-color-neutral, #eaecf0) 2px solid',
            boxSizing: 'border-box'
        } );

        $link.before( $avatarWrapper );

        // 处理登录用户的 CSS 逻辑
        if ( mw.user.isAnon() ) return;
        var currentUserName = mw.user.getName();
        if ( userName !== currentUserName ) return;

        var avatarImg = $avatarWrapper.find( 'img' );
        var avatarUrl = avatarImg.attr( 'src' );
        if ( avatarUrl && avatarUrl !== '/images/avatars/default_l.gif' ) {
            var $styleTag = $( '#dynamic-avatar-style' );
            if ( !$styleTag.length ) {
                $styleTag = $( '<style id="dynamic-avatar-style"></style>' ).appendTo( 'head' );
            }
            var css = '.minerva-icon--userAvatarOutline { background-image: url("' + avatarUrl + '"); background-repeat: no-repeat; background-size: contain; width: 30px; height: 30px; mask-image: unset; }';
            $styleTag.text( css );
        }
    }

    addAvatarsToElements( $( 'a[href*="/wiki/User:"], a[href*="/wiki/%E7%94%A8%E6%88%B7:"], a[href*="/wiki/用户:"]' ) );

    mw.hook( 'wikipage.content' ).add( function ( $content ) {
        addAvatarsToElements( $content.find( 'a[href*="/wiki/User:"], a[href*="/wiki/%E7%94%A8%E6%88%B7:"], a[href*="/wiki/用户:"]' ) );
    } );

    var observer = new MutationObserver( function ( mutations ) {
        mutations.forEach( function ( mutation ) {
            $( mutation.addedNodes ).find( 'a[href*="/wiki/User:"], a[href*="/wiki/%E7%94%A8%E6%88%B7:"], a[href*="/wiki/用户:"]' ).each( function() {
                addAvatarsToElements( $( this ) );
            } );
        } );
    } );
    observer.observe( document.body, { childList: true, subtree: true } );
})();