Bilibili哔哩哔哩B站主页极简

保留B站首页的前6个（可自行更改）动态卡片，每个视频卡片调整宽度即可调整大小，简单实用。
当前为 2024-11-20 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Bilibili哔哩哔哩B站主页极简
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  保留B站首页的前6个（可自行更改）动态卡片，每个视频卡片调整宽度即可调整大小，简单实用。
// @author       极简实用
// @match        https://www.bilibili.com/
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @license      GPL
// ==/UserScript==

(function($) {
    'use strict';

    // 检查是否是B站首页
    if (window.location.pathname !== '/') {
        return; // 如果不是首页，则不执行后续代码
    }

    // 确保DOM完全加载后再执行
    $(document).ready(function() {
        // 动态添加CSS
        const styleTag = document.createElement('style');
        styleTag.innerHTML = `
            .header-history-video {
                display: flex;
                padding: 10px 20px;
                transition: background-color .3s;
            }

            .header-dynamic-list-item {
                padding: 12px 20px;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                transition: .3s;
            }

            .header-dynamic-container {
                display: flex;
                flex-direction: row;
            }

            .dynamic-name-line {
                display: inline-block;
                font-size: 13px;
                color: var(--text2);
            }

            .header-dynamic-avatar {
                z-index: 2;
                position: relative;
                display: block;
                width: 38px;
                height: 38px;
                border: 2px solid var(--graph_bg_thick);
                border-radius: 50%;
            }

            /* 新增的样式 */
            .header-history-video__image .v-img {
                position: relative;
                flex-shrink: 0;
                margin-right: 10px;
                width: 128px;
                height: 72px;
                border-radius: 4px;
            }
        `;
        document.head.appendChild(styleTag);

        // 保留前6个feed-card
        var feedCards = $('div.feed-card').slice(0, 6);

        // 设置每个feed-card的宽度和高度
        feedCards.css({
            'width': '380px',
            'margin': '10px'  // 可选：设置卡片之间的间距
        });

        // 保留并设置 li.v-popover-wrap 的宽高和间距，但不包含 li.v-popover-wrap.header-avatar-wrap
        var popoverWraps = $('li.v-popover-wrap').not('.header-avatar-wrap');
        popoverWraps.css({
            'width': '90px',
            'height': '20px',
            'display': 'inline-block',  // 确保 li 元素在容器中正确显示
            'margin-right': '5px',  // 设置 li 元素之间的间距
            'position': 'relative',  // 确保下拉菜单可以覆盖其他元素
            'z-index': '1000'  // 确保下拉菜单可以覆盖其他元素
        });

        // 创建一个新的容器来存放feed-cards 和 li.v-popover-wrap
        var container = $('<div class="header-dynamic-container"></div>');
        container.css({
            'display': 'flex',
            'flex-direction': 'column',  // 确保内容垂直排列
            'align-items': 'center',
            'padding': '20px'  // 可选：设置容器的内边距
        });

        // 创建一个新的容器来存放所有的 li.v-popover-wrap
        var popoverContainer = $('<div></div>');
        popoverContainer.css({
            'display': 'flex',
            'justify-content': 'center',
            'align-items': 'center',
            'margin-bottom': '10px'  // 设置 popoverContainer 与下方内容的间距
        });

        // 将所有的 li.v-popover-wrap 添加到 popoverContainer 中
        popoverContainer.append(popoverWraps);

        // 创建一个新的容器来存放所有的 feed-cards
        var cardsContainer = $('<div></div>');
        cardsContainer.css({
            'display': 'flex',
            'flex-wrap': 'wrap',
            'justify-content': 'center',
            'align-items': 'center',
            'gap': '10px'  // 可选：设置卡片之间的间距
        });

        // 将所有的 feed-cards 添加到 cardsContainer 中
        cardsContainer.append(feedCards);

        // 将 popoverContainer 和 cardsContainer 添加到主容器中
        container.append(popoverContainer);
        container.append(cardsContainer);

        // 删除其他所有元素
        $('body').children().not(container).remove();

        // 将容器添加到body中
        $('body').append(container);
    });
})(window.jQuery);