☰

视频分区插件

可以通过关键字在b站主页添加一个自定义分区（默认分区为A-soul分区）

  1. // ==UserScript==
  2. // @name         视频分区插件
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.8
  5. // @description  可以通过关键字在b站主页添加一个自定义分区（默认分区为A-soul分区）
  6. // @author       tuntun
  7. // @match        https://www.bilibili.com/*
  8. // @icon         https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg
  9. // @grant        GM_addStyle
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @license      MIT
  13. // ==/UserScript==
  14.  
  15.  
  16. (function() {
  17.   'use strict';
  18.   GM_addStyle(`
  19.     @media (min-width: 1701px) and (max-width: 2559.9px) {
  20.       .tuntun-grid {
  21.         grid-template-columns: repeat(5,1fr);
  22.       }
  23.     }
  24.     @media (min-width: 1367px) and (max-width: 1700.9px) {
  25.       .tuntun-part {
  26.         grid-column: span 5 !important;
  27.       }
  28.       .tuntun-card-body {
  29.         grid-column: span 5 !important;
  30.         grid-template-columns: repeat(5,1fr) !important;
  31.       }
  32.       .video-card-list.is-main .tuntun-card-body>*:nth-of-type(1n + 9) {
  33.         display: block!important;
  34.       }
  35.     }
  36.     @media (min-width: 1100px) and (max-width: 1366.9px) {
  37.       .tuntun-part {
  38.         grid-column: span 5 !important;
  39.       }
  40.       .tuntun-card-body {
  41.         grid-column: span 5 !important;
  42.         grid-template-columns: repeat(5,1fr) !important;
  43.       }
  44.       .video-card-list.is-main .tuntun-card-body>*:nth-of-type(1n + 9) {
  45.         display: block!important;
  46.       }
  47.     }
  48.     @media (max-width: 1099.9px) {
  49.       .tuntun-part {
  50.         grid-column: span 4 !important;
  51.       }
  52.       .tuntun-card-body {
  53.         grid-column: span 4 !important;
  54.         grid-template-columns: repeat(4,1fr) !important;
  55.       }
  56.       .video-card-list.is-main .tuntun-card-body>*:nth-of-type(7) {
  57.         display: block!important;
  58.       }
  59.       .video-card-list.is-main .tuntun-card-body>*:nth-of-type(8) {
  60.         display: block!important;
  61.       }
  62.     }
  63.     .tuntun-setting-popover {
  64.       width: 300px;
  65.       // height: 200px;
  66.       background-color: white;
  67.       border-radius: 20px;
  68.       position: absolute;
  69.       left: -120px;
  70.       top: 43px;
  71.       box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  72.       transition: opacity 0.5s, height 0.25s;
  73.     }
  74.  
  75.     .tuntun-setting-none {
  76.       opacity: 0;
  77.       height: 0;
  78.       overflow: hidden;
  79.     }
  80.  
  81.     .tuntun-setting-form {
  82.       padding: 20px 15px;
  83.       display: flex;
  84.       flex-direction: column;
  85.       justify-content: center;
  86.     }
  87.  
  88.     .tuntun-setting-btn {
  89.       margin: 0 auto;
  90.       width: 84px;
  91.       height: 38px;
  92.       background-color:#b8a6d9;
  93.       border: none;
  94.       border-radius:10px;
  95.       display:inline-block;
  96.       cursor:pointer;
  97.       color:#ffffff;
  98.       font-family:Arial;
  99.       font-size:17px;
  100.       text-decoration:none;
  101.       text-shadow:0px 0px 0px #9752cc;
  102.     }
  103.     .tuntun-setting-btn:hover {
  104.       background-color:#bc80ea;
  105.     }
  106.     .tuntun-setting-btn:active {
  107.       position:relative;
  108.       top:1px;
  109.     }
  110.  
  111.     .tuntun-setting-input {
  112.       margin-bottom: 15px;
  113.       display: flex;
  114.       align-items: center;
  115.     }
  116.  
  117.     .tuntun-setting-input div {
  118.       margin-right: 10px
  119.     }
  120.  
  121.     .tuntun-setting-input input,select{
  122.       width: 200px;
  123.       border: 1px solid #ccc;
  124.       padding: 7px 0px;
  125.       border-radius: 3px;
  126.       padding-left: 5px;
  127.       transition: border 0.25s
  128.     }
  129.  
  130.     .tuntun-setting-input input:focus{
  131.       outline: none;
  132.       border: 1px solid #B8A6D9;
  133.     }
  134.  
  135.     .tuntun-setting-input select:focus{
  136.       outline: none;
  137.       border: 1px solid #B8A6D9;
  138.     }
  139.     
  140.     .tuntun-setting-imgRadius {
  141.       padding-left: 0px !important;
  142.     }
  143.   `);
  144.  
  145.   const getTemplete = (videoKey, imgUrl = '') => {
  146.     return `
  147.     <section class="bili-grid tuntun-grid">
  148.       <div class="video-card-list is-main tuntun-part">
  149.         <div class="area-header" style="z-index: 1000;">
  150.           <div class="left tuntun-part-left">
  151.             <a id="A-soul分区" class="the-world area-anchor" data-id="8"></a>
  152.             <img class="icon tuntun-part-img" src="${imgUrl}"></img>
  153.             <a
  154.               class="title"
  155.               href="https://search.bilibili.com/all?keyword=${videoKey}"
  156.               target="_blank"
  157.               >
  158.               <span>${videoKey}分区</span>
  159.             </a>
  160.           </div>
  161.           <div class="right" style="position: relative;">
  162.             <div id="tuntun-setting" style="position: relative;">
  163.               <button class="primary-btn roll-btn">
  164.                 <span>设置</span></button
  165.               >
  166.               <div
  167.                 class="tuntun-setting-popover tuntun-setting-none"
  168.               >
  169.                 <form class="tuntun-setting-form">
  170.                   <div class="tuntun-setting-input">
  171.                     <div>分区名称:</div>
  172.                     <input type="text" name="name" />
  173.                   </div>
  174.                   <div class="tuntun-setting-input">
  175.                     <div>分区图片:</div>
  176.                     <input type="text" name="picUrl" />
  177.                   </div>
  178.                   <div class="tuntun-setting-input">
  179.                     <div>图片圆角:</div>
  180.                     <input class="tuntun-setting-imgRadius" type="range" min="0" max="50"/>
  181.                   </div>
  182.                   <div class="tuntun-setting-input">
  183.                     <div>时间范围:</div>
  184.                     <select name="timeRange" id="">
  185.                       <option value="7">一周之内</option>
  186.                       <option value="30" selected>一月之内</option>
  187.                       <option value="90">三个月之内</option>
  188.                       <option value="0">不限时间</option>
  189.                     </select>
  190.                   </div>
  191.                   <input class="tuntun-setting-btn" type="submit" value="确认" />
  192.                 </form>
  193.               </div>
  194.             </div>
  195.             <button id="refreshVideo" class="primary-btn roll-btn">
  196.               <svg style="transform: rotate(0deg)">
  197.                 <use xlink:href="#widget-roll"></use></svg><span>换一换</span></button
  198.             >
  199.             <a
  200.               class="primary-btn see-more tuntun-see-more"
  201.               href="https://search.bilibili.com/all?keyword=${videoKey}"
  202.               target="_blank"
  203.               ><span>查看更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
  204.           </div>
  205.         </div>
  206.         <div class="video-card-body tuntun-card-body">
  207.         </div>
  208.       </div>
  209.  
  210.       <!-- 
  211.         <aside>
  212.           <div class="aside-wrap">
  213.             <div class="aside-head">
  214.               <div class="area-header">
  215.                 <div class="left">
  216.                   <a
  217.                     class="title rank-title"
  218.                     href="https://www.bilibili.com/v/virtual"
  219.                     target="_blank"
  220.                   ><span>排行榜</span></a>
  221.                 </div>
  222.                 <div class="right">
  223.                   <a
  224.                     class="primary-btn see-more"
  225.                     href="https://www.bilibili.com/v/virtual"
  226.                     target="_blank"
  227.                     ><span>更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
  228.                 </div>
  229.               </div>
  230.             </div>
  231.           </div>
  232.         </aside>
  233.       -->
  234.     </section>
  235.     `;
  236.   };
  237.  
  238.   let asideBody = `
  239.   <div class="aside-body">
  240.           <div class="aside-core">
  241.             <div class="bili-rank-list-video bili-rank-list-video__grid">
  242.               <ul class="bili-rank-list-video__list video-rank-list">
  243.                 <li class="bili-rank-list-video__item">
  244.                   <div class="bili-rank-list-video__item--wrap">
  245.                     <span class="bili-rank-list-video__item--index" data-index="1"
  246.                       >1</span
  247.                     ><a
  248.                       href="//www.bilibili.com/video/BV1Hi4y1R7gy"
  249.                       class="rank-video-card"
  250.                       target="_blank"
  251.                       data-mod="partition_rank"
  252.                       data-idx="content"
  253.                       data-ext="click"
  254.                       ><div class="rank-video-card__image">
  255.                         <picture class="v-img rank-video-card__cover"
  256.                           ><!---->
  257.                           <source
  258.                             srcset="
  259.                               //i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q.webp
  260.                             "
  261.                             type="image/webp" />
  262.                           <img
  263.                             src="//i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q"
  264.                             alt="B站以前的LV6 VS 现在的LV6 2.0"
  265.                             loading="lazy"
  266.                             onload=""
  267.                         /></picture>
  268.                       </div>
  269.                       <div class="rank-video-card__info">
  270.                         <h3
  271.                           class="rank-video-card__info--tit"
  272.                           title="B站以前的LV6 VS 现在的LV6 2.0"
  273.                         >
  274.                           B站以前的LV6 VS 现在的LV6 2.0
  275.                         </h3>
  276.                       </div></a
  277.                     >
  278.                   </div>
  279.                 </li>
  280.                 <li class="bili-rank-list-video__item">
  281.                   <div class="bili-rank-list-video__item--wrap">
  282.                     <span class="bili-rank-list-video__item--index" data-index="2"
  283.                       >2</span
  284.                     ><a
  285.                       href="//www.bilibili.com/video/BV1Rb4y1Y7Pw"
  286.                       class="rank-video-card rank-video-card__concise"
  287.                       target="_blank"
  288.                       data-mod="partition_rank"
  289.                       data-idx="content"
  290.                       data-ext="click"
  291.                       ><!---->
  292.                       <div class="rank-video-card__info">
  293.                         <h3
  294.                           class="rank-video-card__info--tit"
  295.                           title="【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）"
  296.                         >
  297.                           【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）
  298.                         </h3>
  299.                       </div></a
  300.                     >
  301.                   </div>
  302.                 </li>
  303.                 <li class="bili-rank-list-video__item">
  304.                   <div class="bili-rank-list-video__item--wrap">
  305.                     <span class="bili-rank-list-video__item--index" data-index="3"
  306.                       >3</span
  307.                     ><a
  308.                       href="//www.bilibili.com/video/BV1Z44y177Wt"
  309.                       class="rank-video-card rank-video-card__concise"
  310.                       target="_blank"
  311.                       data-mod="partition_rank"
  312.                       data-idx="content"
  313.                       data-ext="click"
  314.                       ><!---->
  315.                       <div class="rank-video-card__info">
  316.                         <h3
  317.                           class="rank-video-card__info--tit"
  318.                           title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界"
  319.                         >
  320.                           小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
  321.                         </h3>
  322.                       </div></a
  323.                     >
  324.                   </div>
  325.                 </li>
  326.                 <li class="bili-rank-list-video__item">
  327.                   <div class="bili-rank-list-video__item--wrap">
  328.                     <span class="bili-rank-list-video__item--index" data-index="4"
  329.                       >4</span
  330.                     ><a
  331.                       href="//www.bilibili.com/video/BV1mi4y1R7rT"
  332.                       class="rank-video-card rank-video-card__concise"
  333.                       target="_blank"
  334.                       data-mod="partition_rank"
  335.                       data-idx="content"
  336.                       data-ext="click"
  337.                       ><!---->
  338.                       <div class="rank-video-card__info">
  339.                         <h3
  340.                           class="rank-video-card__info--tit"
  341.                           title="准备好了么？来点刺激的！！！【嘉然】"
  342.                         >
  343.                           准备好了么？来点刺激的！！！【嘉然】
  344.                         </h3>
  345.                       </div></a
  346.                     >
  347.                   </div>
  348.                 </li>
  349.                 <li class="bili-rank-list-video__item">
  350.                   <div class="bili-rank-list-video__item--wrap">
  351.                     <span class="bili-rank-list-video__item--index" data-index="5"
  352.                       >5</span
  353.                     ><a
  354.                       href="//www.bilibili.com/video/BV1VD4y1c788"
  355.                       class="rank-video-card rank-video-card__concise"
  356.                       target="_blank"
  357.                       data-mod="partition_rank"
  358.                       data-idx="content"
  359.                       data-ext="click"
  360.                       ><!---->
  361.                       <div class="rank-video-card__info">
  362.                         <h3
  363.                           class="rank-video-card__info--tit"
  364.                           title="顶上海鲜战争12分钟总集篇"
  365.                         >
  366.                           顶上海鲜战争12分钟总集篇
  367.                         </h3>
  368.                       </div></a
  369.                     >
  370.                   </div>
  371.                   <!---->
  372.                 </li>
  373.                 <li class="bili-rank-list-video__item">
  374.                   <div class="bili-rank-list-video__item--wrap">
  375.                     <span class="bili-rank-list-video__item--index" data-index="6"
  376.                       >6</span
  377.                     ><a
  378.                       href="//www.bilibili.com/video/BV14r4y1S71X"
  379.                       class="rank-video-card rank-video-card__concise"
  380.                       target="_blank"
  381.                       data-mod="partition_rank"
  382.                       data-idx="content"
  383.                       data-ext="click"
  384.                       ><!---->
  385.                       <div class="rank-video-card__info">
  386.                         <h3
  387.                           class="rank-video-card__info--tit"
  388.                           title="【原神手书】荒泷一斗 【Misfit Lunatic】"
  389.                         >
  390.                           【原神手书】荒泷一斗 【Misfit Lunatic】
  391.                         </h3>
  392.                       </div></a
  393.                     >
  394.                   </div>
  395.                   <!---->
  396.                 </li>
  397.                 <li class="bili-rank-list-video__item">
  398.                   <div class="bili-rank-list-video__item--wrap">
  399.                     <span class="bili-rank-list-video__item--index" data-index="7"
  400.                       >7</span
  401.                     ><a
  402.                       href="//www.bilibili.com/video/BV1jL411L7Vm"
  403.                       class="rank-video-card rank-video-card__concise"
  404.                       target="_blank"
  405.                       data-mod="partition_rank"
  406.                       data-idx="content"
  407.                       data-ext="click"
  408.                       ><!---->
  409.                       <div class="rank-video-card__info">
  410.                         <h3
  411.                           class="rank-video-card__info--tit"
  412.                           title="【平成三萌】摇起来迎接2022~~~~~~"
  413.                         >
  414.                           【平成三萌】摇起来迎接2022~~~~~~
  415.                         </h3>
  416.                       </div></a
  417.                     >
  418.                   </div>
  419.                   <!---->
  420.                 </li>
  421.                 <li class="bili-rank-list-video__item">
  422.                   <div class="bili-rank-list-video__item--wrap">
  423.                     <span class="bili-rank-list-video__item--index" data-index="8"
  424.                       >8</span
  425.                     ><a
  426.                       href="//www.bilibili.com/video/BV1tY411p7G5"
  427.                       class="rank-video-card rank-video-card__concise"
  428.                       target="_blank"
  429.                       data-mod="partition_rank"
  430.                       data-idx="content"
  431.                       data-ext="click"
  432.                       ><!---->
  433.                       <div class="rank-video-card__info">
  434.                         <h3
  435.                           class="rank-video-card__info--tit"
  436.                           title="你瞧瞧现在哪儿有萌新啊"
  437.                         >
  438.                           你瞧瞧现在哪儿有萌新啊
  439.                         </h3>
  440.                       </div></a
  441.                     >
  442.                   </div>
  443.                   <!---->
  444.                 </li>
  445.                 <li class="bili-rank-list-video__item">
  446.                   <div class="bili-rank-list-video__item--wrap">
  447.                     <span class="bili-rank-list-video__item--index" data-index="9"
  448.                       >9</span
  449.                     ><a
  450.                       href="//www.bilibili.com/video/BV1ji4y1R7LL"
  451.                       class="rank-video-card rank-video-card__concise"
  452.                       target="_blank"
  453.                       data-mod="partition_rank"
  454.                       data-idx="content"
  455.                       data-ext="click"
  456.                       ><!---->
  457.                       <div class="rank-video-card__info">
  458.                         <h3
  459.                           class="rank-video-card__info--tit"
  460.                           title="女生想让男朋友知道的事有哪些？"
  461.                         >
  462.                           女生想让男朋友知道的事有哪些？
  463.                         </h3>
  464.                       </div></a
  465.                     >
  466.                   </div>
  467.                   <!---->
  468.                 </li>
  469.                 <li class="bili-rank-list-video__item">
  470.                   <div class="bili-rank-list-video__item--wrap">
  471.                     <span
  472.                       class="bili-rank-list-video__item--index"
  473.                       data-index="10"
  474.                       >10</span
  475.                     ><a
  476.                       href="//www.bilibili.com/video/BV12L4y1E7G2"
  477.                       class="rank-video-card rank-video-card__concise"
  478.                       target="_blank"
  479.                       data-mod="partition_rank"
  480.                       data-idx="content"
  481.                       data-ext="click"
  482.                       ><!---->
  483.                       <div class="rank-video-card__info">
  484.                         <h3
  485.                           class="rank-video-card__info--tit"
  486.                           title="看到朋友脱单我比si了还难受"
  487.                         >
  488.                           看到朋友脱单我比si了还难受
  489.                         </h3>
  490.                       </div></a
  491.                     >
  492.                   </div>
  493.                   <!---->
  494.                 </li>
  495.               </ul>
  496.             </div>
  497.             <!----><!---->
  498.           </div>
  499.     </div>`
  500.  
  501.   const Tool = {
  502.     // 大数转万
  503.     formatBigNumber: (num) => {
  504.       return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
  505.     },
  506.     // 字符串转DOM
  507.     s2d: (string) => {
  508.       return new DOMParser().parseFromString(string, 'text/html').body
  509.         .childNodes[0]
  510.     },
  511.     // 发布时间格式化
  512.     diffTime: (time) => {
  513.       let upDate = new Date(parseInt(time, 10) * 1000);
  514.       let nowDate = new Date();
  515.       let nowTime = nowDate.getTime(),
  516.           upTime = upDate.getTime(),
  517.           Day = 24 * 60 * 60 * 1000,
  518.           Hours = 60 * 60 * 1000,
  519.           Minutes = 60 * 1000,
  520.           diffDay = parseInt((nowTime - upTime) / Day),
  521.           diffHours = parseInt((nowTime - upTime) / Hours),
  522.           diffMinutes = Math.floor((nowTime - upTime) / Minutes);
  523.       if(diffDay != 0 && diffDay < 7) {
  524.         if ( diffDay === 1 ) {
  525.           return '昨天'
  526.         }
  527.         return diffDay + '天前';
  528.       }
  529.       else if(diffDay === 0 && diffHours != 0) {
  530.         return diffHours + '小时前';
  531.       }
  532.       else if(diffDay === 0 && diffHours === 0 && diffMinutes != 0) {
  533.         return diffMinutes + '分钟前';
  534.       }
  535.       else if (diffDay === 0 && diffHours === 0 && diffMinutes === 0) {
  536.         return '刚刚';
  537.       }
  538.       else {
  539.         let month = upDate.getMonth() + 1;
  540.         let day = upDate.getDate();
  541.         if (nowDate.getFullYear() !== upDate.getFullYear()) {
  542.           return `${upDate.getFullYear()}-${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
  543.         }
  544.         return `${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
  545.       }    
  546.     },
  547.     // 判断发布时间与现在时间是否过长
  548.     isTimeTooLate: (time, rangeDay = 30) => {
  549.       let day = parseInt(rangeDay, 10);
  550.       if (day === 0) {
  551.         return false;
  552.       }
  553.       let upData = new Date(parseInt(time, 10) * 1000);
  554.       let nowTime = new Date().getTime(),
  555.           upTime = upData.getTime(),
  556.           Day = 24 * 60 * 60 * 1000,
  557.           diffDay = parseInt((nowTime - upTime) / Day);
  558.       if (diffDay > day) {
  559.         return true;
  560.       }
  561.       return false;
  562.     }
  563.   }
  564.  
  565.   const API = {
  566.     // 封装get方法
  567.     Get: async (props) => {
  568.       const { url: baseUrl, params = {} } = props;
  569.       let pStr = Object.keys(params).map((key) => {
  570.         return `${key}=${params[key]}`;
  571.       }).join('&');
  572.       let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
  573.       try {
  574.         let res = await fetch(url, {
  575.           credentials: "include"
  576.         });
  577.         return (await res.json()).data;
  578.       } catch (error) {
  579.         console.error('Get Error', error);
  580.       }
  581.     },
  582.     // 通过关键词获取视频数据
  583.     getVideo: async (keyWord, page = 1) => {
  584.       try {
  585.         let res = await API.Get({
  586.           url: 'https://api.bilibili.com/x/web-interface/search/type',
  587.           params: {
  588.             search_type: 'video',
  589.             keyword: keyWord,
  590.             page: page,
  591.           }
  592.         });
  593.         return res.result;
  594.       } catch (error) {
  595.         console.log('getVideo', error);
  596.       }
  597.     },
  598.   }
  599.   
  600.   let videoList = [];
  601.   let page = 1;
  602.   let searchPage = 1;
  603.   let bvList = [];
  604.   let pageSize = 10;
  605.   let videoKey = GM_getValue('videoKey', 'A-soul');
  606.   let rangeDay = GM_getValue('rangeDay', '30');
  607.   let imgBorderRadius = GM_getValue('imgBorderRadius', '15');
  608.   let defaultImgUrl = 'https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg';
  609.   let imgUrl = GM_getValue('imgUrl', defaultImgUrl);
  610.  
  611.   // 获取数据并渲染
  612.   const getVideoCardTemplete = (data) => {
  613.     let videoCardBody = document.querySelector('.video-card-body');
  614.     videoCardBody.innerHTML = '';
  615.     data.forEach((item, index) => {
  616.       if (index < pageSize) {
  617.         const {
  618.           bvid, pic, mid,
  619.           upic, author, play,
  620.           like, duration, pubdate } = item;
  621.         let title = item.title.replace(/<em class="keyword">(.*?)<\/em>/g, '$1');
  622.         // let domStr = `
  623.         // <div class="bili-video-card">
  624.         //   <div class="bili-video-card__skeleton hide">
  625.         //     <div class="bili-video-card__skeleton--cover"></div>
  626.         //     <div class="bili-video-card__skeleton--info">
  627.         //       <div class="bili-video-card__skeleton--face"></div>
  628.         //       <div class="bili-video-card__skeleton--right">
  629.         //         <p class="bili-video-card__skeleton--text"></p>
  630.         //         <p class="bili-video-card__skeleton--text short"></p>
  631.         //         <p class="bili-video-card__skeleton--light"></p>
  632.         //       </div>
  633.         //     </div>
  634.         //   </div>
  635.         //   <div class="bili-video-card__wrap __scale-wrap">
  636.         //     <a
  637.         //       href="//www.bilibili.com/video/${bvid}"
  638.         //       target="_blank"
  639.         //       data-mod="partition_recommend"
  640.         //       data-idx="content"
  641.         //       data-ext="click"
  642.         //       ><div class="bili-video-card__image __scale-player-wrap">
  643.         //         <div class="bili-video-card__image--wrap">
  644.         //           <div class="bili-watch-later" style="display: none">
  645.         //             <svg class="bili-watch-later__icon">
  646.         //               <use xlink:href="#widget-watch-later"></use></svg><span
  647.         //               class="bili-watch-later__tip"
  648.         //               style="display: none"
  649.         //             ></span>
  650.         //           </div>
  651.         //           <picture class="v-img bili-video-card__cover"
  652.         //             ><!---->
  653.         //             <source
  654.         //               srcset="
  655.         //                 ${pic}@672w_378h_1c_100q.webp
  656.         //               "
  657.         //               type="image/webp" />
  658.         //             <img
  659.         //               src="${pic}@672w_378h_1c_100q"
  660.         //               alt="${title}"
  661.         //               loading="lazy"
  662.         //               onload=""
  663.         //           /></picture>
  664.         //           <div class="v-inline-player"></div>
  665.         //         </div>
  666.         //         <div class="bili-video-card__mask">
  667.         //           <div class="bili-video-card__stats">
  668.         //             <div class="bili-video-card__stats--left">
  669.         //               <span class="bili-video-card__stats--item"
  670.         //                 ><svg class="bili-video-card__stats--icon">
  671.         //                   <use xlink:href="#widget-play-count"></use></svg><span class="bili-video-card__stats--text"
  672.         //                   >${Tool.formatBigNumber(play)}</span
  673.         //                 ></span
  674.         //               ><span class="bili-video-card__stats--item"
  675.         //                 ><svg class="bili-video-card__stats--icon">
  676.         //                   <use xlink:href="#widget-agree"></use></svg><span class="bili-video-card__stats--text"
  677.         //                   >${Tool.formatBigNumber(like)}</span
  678.         //                 ></span
  679.         //               >
  680.         //             </div>
  681.         //             <span class="bili-video-card__stats__duration">${duration}</span>
  682.         //           </div>
  683.         //         </div>
  684.         //       </div></a
  685.         //     >
  686.         //     <div class="bili-video-card__info __scale-disable">
  687.         //       <a
  688.         //         href="//space.bilibili.com/${mid}"
  689.         //         target="_blank"
  690.         //         data-mod="partition_recommend"
  691.         //         data-idx="content"
  692.         //         data-ext="click"
  693.         //         ><div class="v-avatar bili-video-card__avatar">
  694.         //           <picture class="v-img v-avatar__face"
  695.         //             ><!---->
  696.         //             <source
  697.         //               srcset="
  698.         //                 ${upic.substr(5)}@72w_72h.webp
  699.         //               "
  700.         //               type="image/webp" />
  701.         //             <img
  702.         //               src="${upic.substr(5)}@72w_72h"
  703.         //               alt="${author}"
  704.         //               loading="lazy"
  705.         //               onload="" /></picture
  706.         //           ><!---->
  707.         //         </div></a
  708.         //       >
  709.         //       <div class="bili-video-card__info--right">
  710.         //         <a
  711.         //           href="//www.bilibili.com/video/${bvid}"
  712.         //           target="_blank"
  713.         //           data-mod="partition_recommend"
  714.         //           data-idx="content"
  715.         //           data-ext="click"
  716.         //           ><h3
  717.         //             class="bili-video-card__info--tit"
  718.         //             title="${title}"
  719.         //           >
  720.         //             ${title}
  721.         //           </h3></a
  722.         //         >
  723.         //         <p class="bili-video-card__info--bottom">
  724.         //           <a
  725.         //             class="bili-video-card__info--owner"
  726.         //             href="//space.bilibili.com/${mid}"
  727.         //             target="_blank"
  728.         //             data-mod="partition_recommend"
  729.         //             data-idx="content"
  730.         //             data-ext="click"
  731.         //             ><span class="bili-video-card__info--author">${author}</span
  732.         //             ><span class="bili-video-card__info--date"
  733.         //               >· ${Tool.diffTime(pubdate)}</span
  734.         //             ></a
  735.         //           >
  736.         //         </p>
  737.         //       </div>
  738.         //     </div>
  739.         //   </div>
  740.         // </div>
  741.         // `;
  742.         let domStr = `
  743.           <div class="bili-video-card" data-report="partition_recommend.content">
  744.             <div class="bili-video-card__skeleton hide">
  745.               <div class="bili-video-card__skeleton--cover"></div>
  746.               <div class="bili-video-card__skeleton--info">
  747.                 <div class="bili-video-card__skeleton--face"></div>
  748.                 <div class="bili-video-card__skeleton--right">
  749.                   <p class="bili-video-card__skeleton--text"></p>
  750.                   <p class="bili-video-card__skeleton--text short"></p>
  751.                   <p class="bili-video-card__skeleton--light"></p>
  752.                 </div>
  753.               </div>
  754.             </div>
  755.             <div class="bili-video-card__wrap __scale-wrap"><a href="//www.bilibili.com/video/${bvid}" target="_blank"
  756.                 data-mod="partition_recommend" data-idx="content" data-ext="click">
  757.                 <div class="bili-video-card__image __scale-player-wrap">
  758.                   <div class="bili-video-card__image--wrap">
  759.                     <div class="bili-watch-later" style="display: none;"><svg class="bili-watch-later__icon">
  760.                         <use xlink:href="#widget-watch-later"></use>
  761.                       </svg><span class="bili-watch-later__tip" style="display: none;"></span></div>
  762.                     <picture class="v-img bili-video-card__cover">
  763.                       <!---->
  764.                       <source srcset="${pic}@672w_378h_1c.webp"
  765.                         type="image/webp"><img
  766.                         src="${pic}@672w_378h_1c"
  767.                         alt="${title}" loading="lazy" onload="">
  768.                     </picture>
  769.                     <div class="v-inline-player"></div>
  770.                   </div>
  771.                   <div class="bili-video-card__mask">
  772.                     <div class="bili-video-card__stats">
  773.                       <div class="bili-video-card__stats--left"><span class="bili-video-card__stats--item"><svg
  774.                             class="bili-video-card__stats--icon">
  775.                             <use xlink:href="#widget-play-count"></use>
  776.                           </svg><span class="bili-video-card__stats--text">${Tool.formatBigNumber(play)}</span></span><span
  777.                           class="bili-video-card__stats--item"><svg class="bili-video-card__stats--icon">
  778.                             <use xlink:href="#widget-agree"></use>
  779.                           </svg><span class="bili-video-card__stats--text">${Tool.formatBigNumber(like)}</span></span></div><span
  780.                         class="bili-video-card__stats__duration">${duration}</span>
  781.                     </div>
  782.                   </div>
  783.                 </div>
  784.               </a>
  785.               <div class="bili-video-card__info __scale-disable">
  786.                 <!---->
  787.                 <div class="bili-video-card__info--right"><a
  788.                     href="https://www.bilibili.com/video/${bvid}"
  789.                     target="_blank" data-mod="partition_recommend" data-idx="content" data-ext="click">
  790.                     <h3 class="bili-video-card__info--tit" title="${title}">${title}</h3>
  791.                   </a>
  792.                   <p class="bili-video-card__info--bottom">
  793.                     <!----><a class="bili-video-card__info--owner" href="//space.bilibili.com/${mid}" target="_blank"
  794.                       data-mod="partition_recommend" data-idx="content" data-ext="click"><svg
  795.                         class="bili-video-card__info--owner__up">
  796.                         <use xlink:href="#widget-up"></use>
  797.                       </svg><span class="bili-video-card__info--author">${author}</span><span class="bili-video-card__info--date">·
  798.                       ${Tool.diffTime(pubdate)}</span></a>
  799.                   </p>
  800.                 </div>
  801.               </div>
  802.             </div>
  803.           </div>
  804.         `;
  805.         videoCardBody.appendChild(Tool.s2d(domStr));
  806.       }
  807.     });
  808.   };
  809.  
  810.   // 更新视频
  811.   const refreshVideo = async () => {
  812.     let firstVideoIndex = (page - 1) * pageSize;
  813.     let lastVideoIndex = firstVideoIndex + pageSize - 1;
  814.     while(videoList.length < lastVideoIndex + 1) {
  815.       let data = await API.getVideo(videoKey, searchPage);
  816.       data.forEach((item) => {
  817.         if (!Tool.isTimeTooLate(item.pubdate, rangeDay)) {
  818.           if (bvList.indexOf(item.bvid) === -1) {
  819.             videoList.push(item);
  820.             bvList.push(item.bvid);
  821.           }
  822.         }
  823.       });
  824.       searchPage++;
  825.     };
  826.     page++;
  827.     let applyData = videoList.slice(firstVideoIndex, lastVideoIndex + 1)
  828.     getVideoCardTemplete(applyData);
  829.   };
  830.  
  831.   // 填入框架
  832.   let main = document.querySelector('.bili-layout');
  833.   let gridAll = document.querySelectorAll('.bili-grid');
  834.   if (main !== null) {
  835.     let templete = getTemplete(videoKey, imgUrl);
  836.     main.insertBefore(Tool.s2d(templete), gridAll[2]);
  837.  
  838.     // 第一次获取数据并渲染
  839.     const applyFirstData = async () => {
  840.       refreshVideo();
  841.     };
  842.     applyFirstData();
  843.     // 换一换按钮添加更新视频事件
  844.     let refreshVideoBtn = document.querySelector('#refreshVideo');
  845.     refreshVideoBtn.addEventListener('click', refreshVideo);
  846.  
  847.     // popover
  848.     const showpopover = (x, y) => {
  849.       return `
  850.       <div id="asoul-popover" style="position: absolute; z-index: 2000;  top: ${y}px; left: ${x}px;">
  851.         <div class="v-popover is-top" style="padding-bottom: 0px; margin-left: 0px; pointer-events: none;">
  852.           <div class="v-popover-content bili-rank-list-video">
  853.             <div class="rank-video-card__popover">
  854.               <div class="rank-video-card__popover--top">
  855.                 <div class="rank-video-card__image rank-video-card__popover--image">
  856.                   <picture class="v-img rank-video-card__cover rank-video-card__popover--cover">
  857.                     <!---->
  858.                     <source srcset="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h.webp"
  859.                       type="image/webp"><img
  860.                       src="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h"
  861.                       alt="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界" loading="lazy" onload="">
  862.                   </picture>
  863.                 </div>
  864.                 <div class="rank-video-card__info rank-video-card__popover--info">
  865.                   <h3 class="rank-video-card__popover--tit" title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界">小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
  866.                   </h3>
  867.                   <p class="rank-video-card__popover--author"><span>拜托了小翔哥</span><span> · 12-29</span></p>
  868.                 </div>
  869.               </div>
  870.               <ul class="rank-video-card__popover--stats">
  871.                 <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  872.                     <use xlink:href="#widget-play-count"></use>
  873.                   </svg><span>93万</span></li>
  874.                 <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  875.                     <use xlink:href="#widget-danmaku"></use>
  876.                   </svg><span>3931</span></li>
  877.                 <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  878.                     <use xlink:href="#widget-favorite"></use>
  879.                   </svg><span>1.3万</span></li>
  880.                 <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  881.                     <use xlink:href="#widget-coin"></use>
  882.                   </svg><span>7.6万</span></li>
  883.               </ul>
  884.             </div>
  885.           </div>
  886.         </div>
  887.       </div>
  888.       `
  889.     }
  890.  
  891.     // 侧边
  892.     // let aside = document.querySelector('.aside-wrap');
  893.     // aside.append(Tool.s2d(asideBody));
  894.  
  895.     let setting = document.querySelector('#tuntun-setting');
  896.     let settingBtn = setting.children[0];
  897.     let settingPop = setting.children[1];
  898.     let settingForm = settingPop.children[0];
  899.     let partNameInput = settingForm.children[0].children[1];
  900.     let partImgUrlInput = settingForm.children[1].children[1];
  901.     let partImgDom = document.querySelector('.tuntun-part-img');
  902.     partImgDom.style.borderRadius = `${imgBorderRadius}%`;
  903.     let radiusRangeInput = document.querySelector('.tuntun-setting-imgRadius');
  904.     let partTimeRangeInput = settingForm.children[3].children[1];
  905.  
  906.     // 设置按钮点击事件
  907.     settingBtn.addEventListener('click', () => {
  908.       if (settingPop.className === 'tuntun-setting-popover tuntun-setting-none') {
  909.         settingPop.className = 'tuntun-setting-popover';
  910.       } else {
  911.         settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
  912.       }
  913.       partNameInput.value = videoKey;
  914.       partImgUrlInput.value = imgUrl;
  915.       partTimeRangeInput.value = rangeDay;
  916.       radiusRangeInput.value = imgBorderRadius;
  917.       partImgDom.style.borderRadius = `${imgBorderRadius}%`;
  918.     });
  919.  
  920.     // videoKey改变
  921.     const videoKeyChange = (newKey) => {
  922.       let seeMoreBtn = document.querySelector('.tuntun-see-more');
  923.       let headerLeft = document.querySelector('.tuntun-part-left');
  924.       videoKey = newKey;
  925.       videoList = [];
  926.       page = 1;
  927.       searchPage = 1;
  928.       bvList = [];
  929.       GM_setValue('videoKey', newKey);
  930.       seeMoreBtn.href = `https://search.bilibili.com/all?keyword=${newKey}`;
  931.       headerLeft.children[2].href = `https://search.bilibili.com/all?keyword=${newKey}`;
  932.       headerLeft.children[2].children[0].innerHTML = `${newKey}分区`;
  933.       refreshVideo();
  934.     }
  935.  
  936.     // imgUrl改变
  937.     const imgUrlChange = (newUrl) => {
  938.       let partImgDom = document.querySelector('.tuntun-part-img');
  939.       imgUrl = newUrl;
  940.       GM_setValue('imgUrl', newUrl);
  941.       partImgDom.src = newUrl;
  942.     }
  943.  
  944.     // 设置img的圆角
  945.     radiusRangeInput.addEventListener('change', () => {
  946.       partImgDom.style.borderRadius = `${radiusRangeInput.value}%`;
  947.     });
  948.     const imgBorderRadiusChange = (newRadiusNum) => {
  949.       imgBorderRadius = newRadiusNum;
  950.       GM_setValue('imgBorderRadius', newRadiusNum);
  951.     }
  952.  
  953.     // 时间范围改变
  954.     const timeRangeChange = (timeRange) => {
  955.       rangeDay = timeRange;
  956.       videoList = [];
  957.       page = 1;
  958.       searchPage = 1;
  959.       bvList = [];
  960.       GM_setValue('rangeDay', timeRange);
  961.       refreshVideo();
  962.     }
  963.  
  964.     // 设置表单确认
  965.     settingForm.addEventListener('submit', (e) => {
  966.       e.preventDefault();
  967.       if (partNameInput.value !== videoKey) {
  968.         videoKeyChange(partNameInput.value);
  969.       }
  970.       if (partImgUrlInput.value !== imgUrl) {
  971.         imgUrlChange(partImgUrlInput.value);
  972.       }
  973.       if (radiusRangeInput.value !== imgBorderRadius) {
  974.         imgBorderRadiusChange(radiusRangeInput.value);
  975.       }
  976.       if (partTimeRangeInput.value !== rangeDay) {
  977.         timeRangeChange(partTimeRangeInput.value);
  978.       }
  979.       settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
  980.     });
  981.   }
  982.   
  983. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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