Greasy Fork is available in English.
这是一个清爽版b站首页的脚本，可以使得首页只有首页推荐
当前为
// ==UserScript==
// @name b站首页改造
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 这是一个清爽版b站首页的脚本，可以使得首页只有首页推荐
// @author Waflare
// @match https://www.bilibili.com/
// @icon https://www.google.com/s2/favicons?domain=bilibili.com
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @require https://code.jquery.com/jquery-3.6.0.js
// @license MIT
// ==/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 `
<div class='w_item' id='${item.bvid}'>
<img src='${item.pic}' />
<div class='w_detail'>
<div class='w_up'>${item.owner.name}</div>
<div class='w_stat'>
<div>[播放] ${item.stat.view}</div>
<div>[点赞] ${item.stat.like}</div>
</div>
<div class='w_title'>${item.title}</div>
</div>
</div>
`
}
function gotoPage(url) {
let _url = url;
return function() {
console.log(_url);
window.open(_url, '_blank');
}
}
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));
$(`#${item.bvid}`).on('click', gotoPage(item.uri));
}
$('#w_content').append('<div id="w_btn">更多</div>');
$('#w_btn').on('click', moreVideo);
}
async function moreVideo() {
let data = await getFrontPage();
for (let item of data) {
$('#w_btn').before(getTemplate(item));
$(`#${item.bvid}`).on('click', gotoPage(item.uri));
}
}
formatData();
GM_addStyle(`
.international-home .storey-box {
display: none;
}
.international-home .first-screen {
display: none;
}
#w_body {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
@media screen and (max-width: 1870px) {
#w_content {
width: 1414px;
}
.w_item {
width: 186px !important;
}
#w_btn {
width: 186px !important;
height: 193px !important;
line-height: 193px !important;
}
}
@media screen and (max-width: 1654px) {
#w_content {
width: 1198px;
}
.w_item {
width: 186px !important;
}
#w_btn {
width: 186px !important;
height: 193px !important;
line-height: 193px !important;
}
}
@media screen and (max-width: 1438px) {
#w_content {
width: 999px;
}
.w_item {
width: 186px !important;
}
#w_btn {
width: 186px !important;
height: 193px !important;
line-height: 193px !important;
}
}
#w_content {
max-width: 1630px;
display: flex;
justify-content: flex-start;
flex-flow: wrap;
}
.w_item {
width: 255px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.w_item:hover {
cursor: pointer;
}
.w_item > img{
width: 100%;
}
.w_item > .w_detail {
width: 100%;
}
.w_detail > .w_title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px;
line-height: 20px;
}
.w_detail > .w_up {
font-size: 14px;
font-weight: bolder;
color: #f1739a;
}
.w_detail > .w_stat {
font-size: 12px;
font-weight: bolder;
color: #22397e;
display: flex;
justify-content: space-between;
}
#w_btn {
width: 255px;
height: 235px;
border: 2px #e0e0e0 dashed;
border-radius: 8px;
line-height: 235px;
font-size: 16px;
text-align: center;
color: #e0e0e0;
margin-left: 10px;
}
#w_btn:hover {
cursor: pointer;
}
`)
})();