☰

js-巴哈-文章列表-卡片化

巴哈姆特深色主題

// ==UserScript==
// @name          js-巴哈-文章列表-卡片化
// @namespace     hbl917070
// @description	  巴哈姆特深色主題
// @author        hbl917070(深海異音)
// @homepage      https://home.gamer.com.tw/homeindex.php?owner=hbl917070
// @include       https://forum.gamer.com.tw/B.php?*
// @run-at        document-start
// @grant         GM_getValue
// @grant         GM_setValue
// @version       1.24
// ==/UserScript==

/*
標題：js-巴哈-文章列表-卡片化
範圍：文章列表
最後修改日期：2021 / 05 / 14
作者：hbl917070（深海異音）

說明：把「縮圖」模式下的「文章列表」，轉為「卡片」的來顯示
     必須搭配「深色主題」來使用，不然顏色會很奇怪
     https://forum.gamer.com.tw/C.php?bsn=60076&snA=2621599

版本：

    1.24：修復使用阻擋廣告的軟體導致腳本失效的問題
    1.23：修復文章列表有BUG
    1.22：修復標題失效的問題
    1.21：對應巴哈改變
    1.20：微調物件排列順序

*/


(function () {

    var css = `
        /*左右兩邊的框架*/
        #LLL_0{
            overflow-x:hidden;
            overflow-y:auto;
        }
        #LLL_1,
        #LLL_2 {
            width: 465px;

        }
        #LLL_1{
            float: left;
        }
        #LLL_2{
            float: right;
        }
        .s_box a:link {
            color: #FFF;
        }

        .s_box a:hover {
            text-decoration: underline !important;
        }

        .s_box a:visited {
            color: #FFF;
        }

        /*每一筆文章*/
        .s_box {
            width: 100%;
            color: #FFF;
            font-size: 16px;
            font-family: "微軟正黑體", Microsoft JhengHei, "黑體-繁", "蘋果儷中黑", sans-serif;
            border: 1px solid rgba(255, 255, 255, 0.4);
            margin: 10px 0px;
            padding: 10px;
            box-sizing: border-box;
            background-color: rgba(45,45,45,.4);
            position: relative;
        }

        /*精華文章*/
        .s_box_start {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 40px;
            height: 40px;
            overflow: hidden;
        }
        .s_box_start::after {
            background-color: rgb(250, 112, 0);
            width: 40px;
            height: 40px;
            transform: rotate(135deg);
            content: "";
            display: block;
            position: absolute;
            top: -20px;
            right: -20px;
        }
        .s_box_start svg {
            z-index: 45;
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .s_box_0 {
            overflow: auto;
            margin-top: 10px;
        }

        /*勇造*/
        .s_box_u_img {
            width: 45px;
            height: 45px;
            background-size: contain;
            float: left;
            border-radius: 50%;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .s_box_1 {
            overflow: hidden;
            margin-top: -3px;
            margin-bottom: 3px;
        }

        /*帳號*/
        .s_box_user {
            float: left;
            /* margin-left: 10px; */
            /* line-height: 40px; */
            color: #87dfff !important;
            text-decoration: none;
            line-height: 20px;
        }

        /*.s_box_type::after {
            float: left;
            content: "▶";
            margin-right: 10px;
            font-size: 10px;
            line-height: 20px;
        }*/



        .s_box_2 {
            overflow: auto;
            float: left;
            line-height: 23px;
        }

        /*icon*/
        .s_box_2 svg{
            float: left;
            width:20px;
            height:20px;
            margin-top: 2px;
            margin-right: 3px;
        }
        .s_box_svg_color{
            fill: rgba(255, 255, 255, 0.5);
        }

        .s_box_gp {
            float: left;
            margin-right: 15px;
        }
        /*回文數*/
        .s_box_ret {
            float: left;
            margin-right: 15px;
        }
        /*觀看數*/
        .s_box_see {
            float: left;
            margin-right: 15px;
        }
        /*最後回文時間*/
        .s_box_lasttime {
            float: left;
            margin-right: 15px;
        }
        /*主題*/
        .s_box_type {
            float: left;
            line-height: 23px;
        }

        .s_box_3 {
            margin-bottom: 15px ;
            line-height: 20px;
        }


        /*標題*/
        .s_box_title {
            text-decoration: none;
            font-weight: 600;
            font-size: 17px;

        }

        .s_box_title:hover {
            color: #87dfff !important;
        }

        .s_box_title:visited {
            color: rgb(160, 160, 160) !important;
        }

        /*標題後面的頁碼*/
        .s_box_title_nub {
            display: inline;
        }

        .s_box_title_nub a {
            color: #87dfff !important;
            text-decoration: none;
            margin: 0 3px;
        }

        /*頁碼前面的 「»...」 符號*/
        .s_box_title_nub a:first-child::before {
            white-space: nowrap;
            content: " » ...";
            color: #FFF;
            width: 20px;
            height: 20px;
            font-size: 10px;
            margin: 0px 10px;
        }

        /*內文*/
        .s_box_txt {
            margin-bottom: 10px;
            line-height: 20px;
            font-size: 15px;
            /*border-top: 1px solid rgba(255,255,255,0.4);
            padding-top: 10px;*/
        }

        /*圖片*/
        .s_box_img{

            text-align: center;
            position: relative;
        }
        .s_box_img img {
            max-width: 100%;
            max-height: 400px;
            margin:auto;
        }

        /*影片*/
        .s_box_img_video::after {
            content: "";
            display: block;
            width:80px;
            height:80px;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC42KSIgZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE0LjV2LTlsNiA0LjUtNiA0LjV6Ii8+PC9zdmc+);
            background-size: 100% 100%;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            pointer-events: none;
        }
        `;



    //載入完成時
    document.addEventListener("DOMContentLoaded", function () {

        func_文章列表轉卡片();

    });


    //注入 CSS
    function addCss(dom_css) {

        let dom_html = document.getElementsByTagName("html");
        let dom_head = document.head;

        if (dom_html.length > 0) {
            dom_html[0].appendChild(dom_css);
        } else if (dom_head != null) {
            dom_head.appendChild(dom_css);
        } else {
            setTimeout(() => {
                addCss(dom_css);
            }, 10);
        }
    }

    let dom_css = document.createElement("style");
    dom_css.innerHTML = css;
    addCss(dom_css);



    /**
     *
     */
    function get_row_list_json() {
        let ar = $('.b-list__row:not(.b-list__row--sticky').get();
        let json_row = [];

        for (let i = 0; i < ar.length; i++) {
            //避免抓到廣告的列
            if ($(ar[i]).find('.b-list_ad').get().length > 0) {
                continue;
            }

            let 主題 = '';
            let gp = '';
            let 標題 = '';
            let href = '';
            let 子頁 = '';
            let 作者 = '';
            let 內文 = '';
            let 圖片 = '';
            let 精華 = false;
            let 回文數 = '';
            let 觀看數 = '';
            let 最後回覆 = '';
            let 影片 = false;

            try {
                主題 = $(ar[i]).find('a[data-subbsn]').html();
            } catch (e) {
                continue;
            }
            try {
                gp = $(ar[i]).find('.b-list__summary__gp').html();
            } catch (e) { }
            標題 = $(ar[i]).find('.b-list__main__title').html();
            try {
                href = $(ar[i]).find('.b-list__main__title').get()[0].getAttribute('href');
                if (href === undefined || href === null)
                    href = "";
            } catch (e) { }
            try {
                子頁 = $(ar[i]).find('.b-list__main__pages').html().replace(/<span /ig, '<a ').replace(/<\/span>/ig, '</a>').replace(/ data-page=/ig, ' href=')
            } catch (e) { }
            作者 = $(ar[i]).find('.b-list__count .b-list__count__user a').html();
            try {
                內文 = $(ar[i]).find('.b-list__brief').html();
            } catch (e) { }
            try {
                圖片 = $(ar[i]).find('.b-list__img').get()[0].getAttribute("data-thumbnail");
                if (圖片.indexOf("https://i2.bahamut.com.tw/forum/no-img") == 0) {
                    圖片 = "";
                }
            } catch (e) { }
            精華 = $(ar[i]).find('.b-list__summary__mark').get().length > 0;//判斷是否為精華
            回文數 = $(ar[i]).find('.b-list__count__number span').get()[0].innerText;
            觀看數 = $(ar[i]).find('.b-list__count__number span').get()[1].innerText;
            最後回覆 = $(ar[i]).find('.b-list__time__edittime').get()[0].innerText;
            影片 = $(ar[i]).find('.video-btn_play').get().length > 0;//判斷是否為影片


            if (func_排除劇透(作者)) {
                continue;
            }


            json_row.push({
                主題: 主題,
                gp: gp,
                標題: 標題,
                href: href,
                子頁: 子頁,
                作者: 作者,
                內文: 內文,
                圖片: 圖片,
                精華: 精華,
                回文數: 回文數,
                觀看數: 觀看數,
                最後回覆: 最後回覆,
                影片: 影片
            });
        }

        return json_row;
    }




    /**
     *
     */
    function func_排除劇透(ss) {

        let ar = [];


        for (let j = 0; j < ar.length; j++) {
            if (ss.toUpperCase() == ar[j].toUpperCase()) {
                return true;
            }
        }

        return false;

    }



    /**
     *
     */
    function func_文章列表轉卡片() {


        if ($(".now_stop").get().length == 0) {
            console.log("文章列表轉卡片 => 無資料");
            return;
        }
        if ($(".now_stop").html().indexOf("縮圖") < 0) {
            console.log("文章列表轉卡片 => 目前不是縮圖模式");
            return;
        }

        //取得文章列表的json
        let json_row = get_row_list_json();

        if (json_row.length == 0) {
            console.log("文章列表轉卡片 => 無資料");
            return;
        }

        //產生存放卡片的兩個欄位
        let obj_img_weap = document.getElementById("BH-master");

        let l00 = document.createElement("div");
        l00.setAttribute("id", "LLL_0");

        let l01 = document.createElement("div");
        l01.setAttribute("id", "LLL_1");

        let l02 = document.createElement("div");
        l02.setAttribute("id", "LLL_2");

        l00.appendChild(l01);
        l00.appendChild(l02);
        obj_img_weap.insertBefore(l00, formm.nextSibling);


        for (let i = 0; i < json_row.length; i++) {

            //簡化文章列表的超連結
            let int_index = json_row[i].href.indexOf("&tnum=");
            if (int_index > 0) {
                json_row[i].href = json_row[i].href.substr(0, int_index);
            }

            let s_隱藏圖片 = "";
            if (json_row[i].圖片 == undefined || json_row[i].圖片 == "") {
                s_隱藏圖片 = "style='display:none'";
            }

            let s_精華 = "";
            if (json_row[i].精華 === false) {
                s_精華 = "style='display:none'";
            }

            let s_u = json_row[i].作者.toLocaleLowerCase();
            let s_user_img = `https://avatar2.bahamut.com.tw/avataruserpic/${s_u.substr(0, 1)}/${s_u.substr(1, 1)}/${s_u}/${s_u}_s.png`;
            let s_小屋 = "https://home.gamer.com.tw/homeindex.php?owner=" + s_u;

            //根數GP數量改變顏色
            let s_gp_style = "";
            if (json_row[i].gp == '') {
                json_row[i].gp = 0;
                s_gp_style = "style='color: #ffffff;'";
            } else if (json_row[i].gp > 1000) {
                s_gp_style = "style='color: #F3444F;'";
            } else if (json_row[i].gp > 100) {
                s_gp_style = "style='color: #F36D3C;'";
            }

            let s_內文_style = "";
            if (json_row[i].內文 == '') {
                s_內文_style = "style='display:none'";
            }

            let s_是否為影片 = "";
            if (json_row[i].影片) {
                s_是否為影片 = "s_box_img_video";
            }

            var html = `
                <div class="s_box">

                    <div class="s_box_start" ${s_精華}>
                        <svg width="18" height="18" viewBox="0 0 18 18">
                            <path fill="#FFFFFF" d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z"/>
                            <path fill="none" d="M0 0h18v18H0z"/>
                        </svg>
                    </div>


                    <div class="s_box_3">
                        <a href="${s_小屋}" target="_blank">
                            <div class="s_box_u_img" style="background-image: url(${s_user_img})"></div>
                        </a>
                        <div class="s_box_1">
                            <a class="s_box_user" href="${s_小屋}" target="_blank">${json_row[i].作者}</a>
                        </div>

                        <div class="s_box_title_box">
                            <a class="s_box_title" href="${json_row[i].href}">
                                ${json_row[i].標題}
                            </a>
                            <div class="s_box_title_nub">
                                ${json_row[i].子頁}
                            </div>
                        </div>

                    </div>

                    <div class="s_box_txt" ${s_內文_style}>${json_row[i].內文}</div>

                    <div class="s_box_img ${s_是否為影片}" ${s_隱藏圖片}>
                        <a href="${json_row[i].href}">
                            <img src="${json_row[i].圖片}" alt="">
                        </a>
                    </div>


                    <div class="s_box_0">


                        <div class="s_box_2">
                            <svg width="24" height="24" viewBox="0 0 24 24">
                                <path class="s_box_svg_color" d="M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66-.23-.45-.52-.86-.88-1.22L14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.84C7 18.95 8.05 20 9.34 20h8.11c.7 0 1.36-.37 1.72-.97l2.66-6.15z"/>
                            </svg>
                            <div class="s_box_gp" ${s_gp_style}>${json_row[i].gp}</div>

                            <svg width="24" height="24" viewBox="0 0 24 24">
                                <path class="s_box_svg_color"d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
                            </svg>
                            <div class="s_box_ret">${json_row[i].回文數}</div>

                            <svg width="24" height="24" viewBox="0 0 24 24">
                                <path class="s_box_svg_color" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                            </svg>
                            <div class="s_box_see">${json_row[i].觀看數}</div>

                            <svg width="24" height="24" viewBox="0 0 24 24">
                                <path class="s_box_svg_color" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                                <path class="s_box_svg_color" d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                            </svg>
                            <div class="s_box_lasttime">${json_row[i].最後回覆}</div>

                            <svg width="24" height="24" viewBox="0 0 24 24">
                                <path class="s_box_svg_color" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
                            </svg>
                            <div class="s_box_type">${json_row[i].主題}</div>
                        </div>
                    </div>


                </div>`;


            let item = document.createElement("div");
            item.innerHTML = html;
            if (i % 2 == 0) {
                document.getElementById("LLL_1").appendChild(item);
            } else {
                document.getElementById("LLL_2").appendChild(item);
            }
        }//for



        //隱藏已經處理過的文章
        $('.b-list__row:not(.b-list__row--sticky').css("display", "none");


    }



})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址