Greasy Fork is available in English.
这是一个清爽版b站首页的脚本，可以使得首页只有首页推荐，你不再需要忍受bilibili繁复的首页，没有直播、番剧、电视剧、电影一系列让人眼花缭乱的版块，就一个首页推荐，让你能轻松的浏览，不再是只有顶部一小块窗口还不能往回找，错过了就无了，太草了！【bilibili、b站、哔哩哔哩、首页、清爽、推荐】
当前为
// ==UserScript==
// @name b站首页推荐纯享版
// @namespace http://tampermonkey.net/
// @version 2.0.1
// @description 这是一个清爽版b站首页的脚本，可以使得首页只有首页推荐，你不再需要忍受bilibili繁复的首页，没有直播、番剧、电视剧、电影一系列让人眼花缭乱的版块，就一个首页推荐，让你能轻松的浏览，不再是只有顶部一小块窗口还不能往回找，错过了就无了，太草了！【bilibili、b站、哔哩哔哩、首页、清爽、推荐】
// @author Waflare
// @match https://www.bilibili.com/*
// @icon https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://bilibili.com&size=48
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @require https://code.jquery.com/jquery-3.6.0.js
// @license GPL
// ==/UserScript==
(function () {
'use strict';
function getFrontPage() {
let url = 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=3';
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: url,
onload: (r) => {
let result = JSON.parse(r.response).data.item;
resolve(result);
}
})
})
}
function getTemplate(item) {
return `
<a class='w_item' href='https://www.bilibili.com/video/${item.bvid}' target='_blank' id='${item.bvid}'>
<div class='w_img_box'>
<img src='${item.pic}' />
</div>
<div class='w_footer'>
<div class="w_face">
<img src='${item.owner.face}' />
</div>
<div class='w_detail'>
<div class='w_title'>${item.title}</div>
<div class='w_up'>${item.owner.name}</div>
<div class='w_stat'>
<div>${formatNum(item.stat.view)}次观看</div>
<div>${formatNum(item.stat.like)}个点赞</div>
</div>
</div>
</div>
</a>
`
}
// 老版 b站
async function formatData() {
let data_1 = await getFrontPage();
let data_2 = await getFrontPage();
let data = [...data_1, ...data_2];
console.log(data);
$('#internationalHeader').after(`
<div id="w_body">
<div id="w_content"></div>
</div>
`);
for (let item of data) {
$('#w_content').append(getTemplate(item));
}
$('#w_body').append('<div id="w_btn">顶</div>');
$('#w_btn').on('click', backTop);
}
// 新版 b站
async function formatDataNew() {
let data_1 = await getFrontPage();
let data_2 = await getFrontPage();
let data = [...data_1, ...data_2];
console.log(data);
$('#i_cecream').after(`
<div id="w_body">
<div id="w_content"></div>
</div>
`);
for (let item of data) {
$('#w_content').append(getTemplate(item));
}
$('#w_body').append('<div id="w_btn">顶</div>');
$('#w_btn').on('click', backTop);
}
let timer = null;
function backTop() {
let isSafari = /^(?=.Safari)(?!.Chrome)/.test(navigator.userAgent);
if (isSafari) {
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if (oTop > 0) {
scrollTo(0, oTop - oTop / 8);
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
}
});
} else {
scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})
}
}
async function moreVideo() {
let data = await getFrontPage();
for (let item of data) {
$('#w_content').append(getTemplate(item));
}
}
// 判断是否是新版
function isNewOrOld() {
return !!$('#i_cecream');
}
function isOld() {
return !!$('#internationalHeader')
}
if(isNewOrOld()){
formatDataNew();
} else if (isOld()) {
formatData();
}
function formatNum(num) {
if (!num) {
return '0';
}
if (num < 10000) {
return num.toString();
} else {
return (num / 10000).toFixed(1).toString() + '万';
}
}
let timeout = null;
window.onscroll = function () {
//距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
if (scrollTop + windowHeight >= scrollHeight - 10) {
timeout && clearTimeout(timeout);
timeout = setTimeout(() => {
moreVideo();
}, 300);
}
const back_top = document.getElementById('w_btn');
if (scrollTop > 20 && !isNewOrOld()) {
back_top.style.display = 'block';
} else {
back_top.style.display = 'none';
}
}
GM_addStyle(`
.international-home {
min-height: 100vh;
}
.international-home .storey-box, .international-footer {
display: none;
}
.international-home .first-screen {
display: none;
}
.header-channel {
display: none;
}
main, .bili-footer {
display: none !important;
}
#w_body {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
padding-bottom: 40px;
background-color: ${isNewOrOld() ? '#ffffff;' : '#f1f2f3;'}
}
@media screen and (max-width: 1870px) {
#w_content {
width: 1414px !important;
}
.w_item {
width: 340px !important;
}
}
@media screen and (max-width: 1654px) {
#w_content {
width: 1198px !important;
}
.w_item {
width: 270px !important;
}
}
@media screen and (max-width: 1438px) {
#w_content {
width: 999px !important;
}
.w_item {
width: 230px !important;
}
}
#w_content {
margin-top: 24px;
max-width: 1610px;
display: flex;
justify-content: flex-start;
flex-flow: wrap;
}
.w_item {
width: 390px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
margin-left: 10px;
transition:all 0.2s;
}
.w_item:hover {
cursor: pointer;
transform: scale(1.01);
}
.w_item > .w_img_box{
position: relative;
overflow: hidden;
padding-top: 62.5%;
border-radius: 6px;
background-image: url('https://i.w3tt.com/2021/12/05/BAH9l.png') no-repeat;
}
.w_img_box > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.w_item > .w_detail {
width: 100%;
}
.w_footer {
display: flex;
}
.w_footer > .w_face {
width: 56px;
padding: 10px;
box-size: border-sizing;
}
.w_footer > .w_detail {
flex: 1;
}
.w_face > img {
width: 36px;
height: 36px;
border-radius: 50%;
}
.w_detail > .w_title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 16px;
line-height: 22px;
border-top: 10px solid transparent;
border-bottom: 5px solid transparent;
}
.w_detail > .w_up {
font-size: 14px;
color: #606060;
}
.w_detail > .w_stat {
font-size: 12px;
color: #606060;
line-height: 18px;
display: flex;
justify-content: space-between;
}
#w_btn {
display: none;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
font-size: 20px;
text-align: center;
color: #9999b2;
font-weight: 600;
background-color: #f6f9fa;
position: fixed;
bottom: 30px;
right: 30px;
}
#w_btn:hover {
cursor: pointer;
}
.palette-button-outer div[class="primary-btn"] {
display: none;
}
`)
})();