☰

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

巴哈姆特深色主題

  1. // ==UserScript==
  2. // @name          js-巴哈-文章列表-卡片化
  3. // @namespace     hbl917070
  4. // @description	  巴哈姆特深色主題
  5. // @author        hbl917070(深海異音)
  6. // @homepage      https://home.gamer.com.tw/homeindex.php?owner=hbl917070
  7. // @include       https://forum.gamer.com.tw/B.php?*
  8. // @run-at        document-start
  9. // @grant         GM_getValue
  10. // @grant         GM_setValue
  11. // @version       1.24
  12. // ==/UserScript==
  13.  
  14. /*
  15. 標題：js-巴哈-文章列表-卡片化
  16. 範圍：文章列表
  17. 最後修改日期：2021 / 05 / 14
  18. 作者：hbl917070（深海異音）
  19.  
  20. 說明：把「縮圖」模式下的「文章列表」，轉為「卡片」的來顯示
  21.      必須搭配「深色主題」來使用，不然顏色會很奇怪
  22.      https://forum.gamer.com.tw/C.php?bsn=60076&snA=2621599
  23.  
  24. 版本：
  25.  
  26.     1.24：修復使用阻擋廣告的軟體導致腳本失效的問題
  27.     1.23：修復文章列表有BUG
  28.     1.22：修復標題失效的問題
  29.     1.21：對應巴哈改變
  30.     1.20：微調物件排列順序
  31.  
  32. */
  33.  
  34.  
  35. (function () {
  36.  
  37.     var css = `
  38.         /*左右兩邊的框架*/
  39.         #LLL_0{
  40.             overflow-x:hidden;
  41.             overflow-y:auto;
  42.         }
  43.         #LLL_1,
  44.         #LLL_2 {
  45.             width: 465px;
  46.  
  47.         }
  48.         #LLL_1{
  49.             float: left;
  50.         }
  51.         #LLL_2{
  52.             float: right;
  53.         }
  54.         .s_box a:link {
  55.             color: #FFF;
  56.         }
  57.  
  58.         .s_box a:hover {
  59.             text-decoration: underline !important;
  60.         }
  61.  
  62.         .s_box a:visited {
  63.             color: #FFF;
  64.         }
  65.  
  66.         /*每一筆文章*/
  67.         .s_box {
  68.             width: 100%;
  69.             color: #FFF;
  70.             font-size: 16px;
  71.             font-family: "微軟正黑體", Microsoft JhengHei, "黑體-繁", "蘋果儷中黑", sans-serif;
  72.             border: 1px solid rgba(255, 255, 255, 0.4);
  73.             margin: 10px 0px;
  74.             padding: 10px;
  75.             box-sizing: border-box;
  76.             background-color: rgba(45,45,45,.4);
  77.             position: relative;
  78.         }
  79.  
  80.         /*精華文章*/
  81.         .s_box_start {
  82.             position: absolute;
  83.             top: 0px;
  84.             right: 0px;
  85.             width: 40px;
  86.             height: 40px;
  87.             overflow: hidden;
  88.         }
  89.         .s_box_start::after {
  90.             background-color: rgb(250, 112, 0);
  91.             width: 40px;
  92.             height: 40px;
  93.             transform: rotate(135deg);
  94.             content: "";
  95.             display: block;
  96.             position: absolute;
  97.             top: -20px;
  98.             right: -20px;
  99.         }
  100.         .s_box_start svg {
  101.             z-index: 45;
  102.             position: absolute;
  103.             top: 0px;
  104.             right: 0px;
  105.         }
  106.  
  107.         .s_box_0 {
  108.             overflow: auto;
  109.             margin-top: 10px;
  110.         }
  111.  
  112.         /*勇造*/
  113.         .s_box_u_img {
  114.             width: 45px;
  115.             height: 45px;
  116.             background-size: contain;
  117.             float: left;
  118.             border-radius: 50%;
  119.             margin-right: 10px;
  120.             margin-bottom: 10px;
  121.         }
  122.  
  123.         .s_box_1 {
  124.             overflow: hidden;
  125.             margin-top: -3px;
  126.             margin-bottom: 3px;
  127.         }
  128.  
  129.         /*帳號*/
  130.         .s_box_user {
  131.             float: left;
  132.             /* margin-left: 10px; */
  133.             /* line-height: 40px; */
  134.             color: #87dfff !important;
  135.             text-decoration: none;
  136.             line-height: 20px;
  137.         }
  138.  
  139.         /*.s_box_type::after {
  140.             float: left;
  141.             content: "▶";
  142.             margin-right: 10px;
  143.             font-size: 10px;
  144.             line-height: 20px;
  145.         }*/
  146.  
  147.  
  148.  
  149.         .s_box_2 {
  150.             overflow: auto;
  151.             float: left;
  152.             line-height: 23px;
  153.         }
  154.  
  155.         /*icon*/
  156.         .s_box_2 svg{
  157.             float: left;
  158.             width:20px;
  159.             height:20px;
  160.             margin-top: 2px;
  161.             margin-right: 3px;
  162.         }
  163.         .s_box_svg_color{
  164.             fill: rgba(255, 255, 255, 0.5);
  165.         }
  166.  
  167.         .s_box_gp {
  168.             float: left;
  169.             margin-right: 15px;
  170.         }
  171.         /*回文數*/
  172.         .s_box_ret {
  173.             float: left;
  174.             margin-right: 15px;
  175.         }
  176.         /*觀看數*/
  177.         .s_box_see {
  178.             float: left;
  179.             margin-right: 15px;
  180.         }
  181.         /*最後回文時間*/
  182.         .s_box_lasttime {
  183.             float: left;
  184.             margin-right: 15px;
  185.         }
  186.         /*主題*/
  187.         .s_box_type {
  188.             float: left;
  189.             line-height: 23px;
  190.         }
  191.  
  192.         .s_box_3 {
  193.             margin-bottom: 15px ;
  194.             line-height: 20px;
  195.         }
  196.  
  197.  
  198.         /*標題*/
  199.         .s_box_title {
  200.             text-decoration: none;
  201.             font-weight: 600;
  202.             font-size: 17px;
  203.  
  204.         }
  205.  
  206.         .s_box_title:hover {
  207.             color: #87dfff !important;
  208.         }
  209.  
  210.         .s_box_title:visited {
  211.             color: rgb(160, 160, 160) !important;
  212.         }
  213.  
  214.         /*標題後面的頁碼*/
  215.         .s_box_title_nub {
  216.             display: inline;
  217.         }
  218.  
  219.         .s_box_title_nub a {
  220.             color: #87dfff !important;
  221.             text-decoration: none;
  222.             margin: 0 3px;
  223.         }
  224.  
  225.         /*頁碼前面的 「»...」 符號*/
  226.         .s_box_title_nub a:first-child::before {
  227.             white-space: nowrap;
  228.             content: " » ...";
  229.             color: #FFF;
  230.             width: 20px;
  231.             height: 20px;
  232.             font-size: 10px;
  233.             margin: 0px 10px;
  234.         }
  235.  
  236.         /*內文*/
  237.         .s_box_txt {
  238.             margin-bottom: 10px;
  239.             line-height: 20px;
  240.             font-size: 15px;
  241.             /*border-top: 1px solid rgba(255,255,255,0.4);
  242.             padding-top: 10px;*/
  243.         }
  244.  
  245.         /*圖片*/
  246.         .s_box_img{
  247.  
  248.             text-align: center;
  249.             position: relative;
  250.         }
  251.         .s_box_img img {
  252.             max-width: 100%;
  253.             max-height: 400px;
  254.             margin:auto;
  255.         }
  256.  
  257.         /*影片*/
  258.         .s_box_img_video::after {
  259.             content: "";
  260.             display: block;
  261.             width:80px;
  262.             height:80px;
  263.             background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC42KSIgZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE0LjV2LTlsNiA0LjUtNiA0LjV6Ii8+PC9zdmc+);
  264.             background-size: 100% 100%;
  265.             position: absolute;
  266.             top:0;
  267.             left: 0;
  268.             right: 0;
  269.             bottom: 0;
  270.             margin: auto;
  271.             pointer-events: none;
  272.         }
  273.         `;
  274.  
  275.  
  276.  
  277.     //載入完成時
  278.     document.addEventListener("DOMContentLoaded", function () {
  279.  
  280.         func_文章列表轉卡片();
  281.  
  282.     });
  283.  
  284.  
  285.     //注入 CSS
  286.     function addCss(dom_css) {
  287.  
  288.         let dom_html = document.getElementsByTagName("html");
  289.         let dom_head = document.head;
  290.  
  291.         if (dom_html.length > 0) {
  292.             dom_html[0].appendChild(dom_css);
  293.         } else if (dom_head != null) {
  294.             dom_head.appendChild(dom_css);
  295.         } else {
  296.             setTimeout(() => {
  297.                 addCss(dom_css);
  298.             }, 10);
  299.         }
  300.     }
  301.  
  302.     let dom_css = document.createElement("style");
  303.     dom_css.innerHTML = css;
  304.     addCss(dom_css);
  305.  
  306.  
  307.  
  308.     /**
  309.      *
  310.      */
  311.     function get_row_list_json() {
  312.         let ar = $('.b-list__row:not(.b-list__row--sticky').get();
  313.         let json_row = [];
  314.  
  315.         for (let i = 0; i < ar.length; i++) {
  316.             //避免抓到廣告的列
  317.             if ($(ar[i]).find('.b-list_ad').get().length > 0) {
  318.                 continue;
  319.             }
  320.  
  321.             let 主題 = '';
  322.             let gp = '';
  323.             let 標題 = '';
  324.             let href = '';
  325.             let 子頁 = '';
  326.             let 作者 = '';
  327.             let 內文 = '';
  328.             let 圖片 = '';
  329.             let 精華 = false;
  330.             let 回文數 = '';
  331.             let 觀看數 = '';
  332.             let 最後回覆 = '';
  333.             let 影片 = false;
  334.  
  335.             try {
  336.                 主題 = $(ar[i]).find('a[data-subbsn]').html();
  337.             } catch (e) {
  338.                 continue;
  339.             }
  340.             try {
  341.                 gp = $(ar[i]).find('.b-list__summary__gp').html();
  342.             } catch (e) { }
  343.             標題 = $(ar[i]).find('.b-list__main__title').html();
  344.             try {
  345.                 href = $(ar[i]).find('.b-list__main__title').get()[0].getAttribute('href');
  346.                 if (href === undefined || href === null)
  347.                     href = "";
  348.             } catch (e) { }
  349.             try {
  350.                 子頁 = $(ar[i]).find('.b-list__main__pages').html().replace(/<span /ig, '<a ').replace(/<\/span>/ig, '</a>').replace(/ data-page=/ig, ' href=')
  351.             } catch (e) { }
  352.             作者 = $(ar[i]).find('.b-list__count .b-list__count__user a').html();
  353.             try {
  354.                 內文 = $(ar[i]).find('.b-list__brief').html();
  355.             } catch (e) { }
  356.             try {
  357.                 圖片 = $(ar[i]).find('.b-list__img').get()[0].getAttribute("data-thumbnail");
  358.                 if (圖片.indexOf("https://i2.bahamut.com.tw/forum/no-img") == 0) {
  359.                     圖片 = "";
  360.                 }
  361.             } catch (e) { }
  362.             精華 = $(ar[i]).find('.b-list__summary__mark').get().length > 0;//判斷是否為精華
  363.             回文數 = $(ar[i]).find('.b-list__count__number span').get()[0].innerText;
  364.             觀看數 = $(ar[i]).find('.b-list__count__number span').get()[1].innerText;
  365.             最後回覆 = $(ar[i]).find('.b-list__time__edittime').get()[0].innerText;
  366.             影片 = $(ar[i]).find('.video-btn_play').get().length > 0;//判斷是否為影片
  367.  
  368.  
  369.             if (func_排除劇透(作者)) {
  370.                 continue;
  371.             }
  372.  
  373.  
  374.             json_row.push({
  375.                 主題: 主題,
  376.                 gp: gp,
  377.                 標題: 標題,
  378.                 href: href,
  379.                 子頁: 子頁,
  380.                 作者: 作者,
  381.                 內文: 內文,
  382.                 圖片: 圖片,
  383.                 精華: 精華,
  384.                 回文數: 回文數,
  385.                 觀看數: 觀看數,
  386.                 最後回覆: 最後回覆,
  387.                 影片: 影片
  388.             });
  389.         }
  390.  
  391.         return json_row;
  392.     }
  393.  
  394.  
  395.  
  396.  
  397.     /**
  398.      *
  399.      */
  400.     function func_排除劇透(ss) {
  401.  
  402.         let ar = [];
  403.  
  404.  
  405.         for (let j = 0; j < ar.length; j++) {
  406.             if (ss.toUpperCase() == ar[j].toUpperCase()) {
  407.                 return true;
  408.             }
  409.         }
  410.  
  411.         return false;
  412.  
  413.     }
  414.  
  415.  
  416.  
  417.     /**
  418.      *
  419.      */
  420.     function func_文章列表轉卡片() {
  421.  
  422.  
  423.         if ($(".now_stop").get().length == 0) {
  424.             console.log("文章列表轉卡片 => 無資料");
  425.             return;
  426.         }
  427.         if ($(".now_stop").html().indexOf("縮圖") < 0) {
  428.             console.log("文章列表轉卡片 => 目前不是縮圖模式");
  429.             return;
  430.         }
  431.  
  432.         //取得文章列表的json
  433.         let json_row = get_row_list_json();
  434.  
  435.         if (json_row.length == 0) {
  436.             console.log("文章列表轉卡片 => 無資料");
  437.             return;
  438.         }
  439.  
  440.         //產生存放卡片的兩個欄位
  441.         let obj_img_weap = document.getElementById("BH-master");
  442.  
  443.         let l00 = document.createElement("div");
  444.         l00.setAttribute("id", "LLL_0");
  445.  
  446.         let l01 = document.createElement("div");
  447.         l01.setAttribute("id", "LLL_1");
  448.  
  449.         let l02 = document.createElement("div");
  450.         l02.setAttribute("id", "LLL_2");
  451.  
  452.         l00.appendChild(l01);
  453.         l00.appendChild(l02);
  454.         obj_img_weap.insertBefore(l00, formm.nextSibling);
  455.  
  456.  
  457.         for (let i = 0; i < json_row.length; i++) {
  458.  
  459.             //簡化文章列表的超連結
  460.             let int_index = json_row[i].href.indexOf("&tnum=");
  461.             if (int_index > 0) {
  462.                 json_row[i].href = json_row[i].href.substr(0, int_index);
  463.             }
  464.  
  465.             let s_隱藏圖片 = "";
  466.             if (json_row[i].圖片 == undefined || json_row[i].圖片 == "") {
  467.                 s_隱藏圖片 = "style='display:none'";
  468.             }
  469.  
  470.             let s_精華 = "";
  471.             if (json_row[i].精華 === false) {
  472.                 s_精華 = "style='display:none'";
  473.             }
  474.  
  475.             let s_u = json_row[i].作者.toLocaleLowerCase();
  476.             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`;
  477.             let s_小屋 = "https://home.gamer.com.tw/homeindex.php?owner=" + s_u;
  478.  
  479.             //根數GP數量改變顏色
  480.             let s_gp_style = "";
  481.             if (json_row[i].gp == '') {
  482.                 json_row[i].gp = 0;
  483.                 s_gp_style = "style='color: #ffffff;'";
  484.             } else if (json_row[i].gp > 1000) {
  485.                 s_gp_style = "style='color: #F3444F;'";
  486.             } else if (json_row[i].gp > 100) {
  487.                 s_gp_style = "style='color: #F36D3C;'";
  488.             }
  489.  
  490.             let s_內文_style = "";
  491.             if (json_row[i].內文 == '') {
  492.                 s_內文_style = "style='display:none'";
  493.             }
  494.  
  495.             let s_是否為影片 = "";
  496.             if (json_row[i].影片) {
  497.                 s_是否為影片 = "s_box_img_video";
  498.             }
  499.  
  500.             var html = `
  501.                 <div class="s_box">
  502.  
  503.                     <div class="s_box_start" ${s_精華}>
  504.                         <svg width="18" height="18" viewBox="0 0 18 18">
  505.                             <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"/>
  506.                             <path fill="none" d="M0 0h18v18H0z"/>
  507.                         </svg>
  508.                     </div>
  509.  
  510.  
  511.                     <div class="s_box_3">
  512.                         <a href="${s_小屋}" target="_blank">
  513.                             <div class="s_box_u_img" style="background-image: url(${s_user_img})"></div>
  514.                         </a>
  515.                         <div class="s_box_1">
  516.                             <a class="s_box_user" href="${s_小屋}" target="_blank">${json_row[i].作者}</a>
  517.                         </div>
  518.  
  519.                         <div class="s_box_title_box">
  520.                             <a class="s_box_title" href="${json_row[i].href}">
  521.                                 ${json_row[i].標題}
  522.                             </a>
  523.                             <div class="s_box_title_nub">
  524.                                 ${json_row[i].子頁}
  525.                             </div>
  526.                         </div>
  527.  
  528.                     </div>
  529.  
  530.                     <div class="s_box_txt" ${s_內文_style}>${json_row[i].內文}</div>
  531.  
  532.                     <div class="s_box_img ${s_是否為影片}" ${s_隱藏圖片}>
  533.                         <a href="${json_row[i].href}">
  534.                             <img src="${json_row[i].圖片}" alt="">
  535.                         </a>
  536.                     </div>
  537.  
  538.  
  539.                     <div class="s_box_0">
  540.  
  541.  
  542.                         <div class="s_box_2">
  543.                             <svg width="24" height="24" viewBox="0 0 24 24">
  544.                                 <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"/>
  545.                             </svg>
  546.                             <div class="s_box_gp" ${s_gp_style}>${json_row[i].gp}</div>
  547.  
  548.                             <svg width="24" height="24" viewBox="0 0 24 24">
  549.                                 <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"/>
  550.                             </svg>
  551.                             <div class="s_box_ret">${json_row[i].回文數}</div>
  552.  
  553.                             <svg width="24" height="24" viewBox="0 0 24 24">
  554.                                 <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"/>
  555.                             </svg>
  556.                             <div class="s_box_see">${json_row[i].觀看數}</div>
  557.  
  558.                             <svg width="24" height="24" viewBox="0 0 24 24">
  559.                                 <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"/>
  560.                                 <path class="s_box_svg_color" d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
  561.                             </svg>
  562.                             <div class="s_box_lasttime">${json_row[i].最後回覆}</div>
  563.  
  564.                             <svg width="24" height="24" viewBox="0 0 24 24">
  565.                                 <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"/>
  566.                             </svg>
  567.                             <div class="s_box_type">${json_row[i].主題}</div>
  568.                         </div>
  569.                     </div>
  570.  
  571.  
  572.                 </div>`;
  573.  
  574.  
  575.             let item = document.createElement("div");
  576.             item.innerHTML = html;
  577.             if (i % 2 == 0) {
  578.                 document.getElementById("LLL_1").appendChild(item);
  579.             } else {
  580.                 document.getElementById("LLL_2").appendChild(item);
  581.             }
  582.         }//for
  583.  
  584.  
  585.  
  586.         //隱藏已經處理過的文章
  587.         $('.b-list__row:not(.b-list__row--sticky').css("display", "none");
  588.  
  589.  
  590.     }
  591.  
  592.  
  593.  
  594. })();
  595.  

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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