一、前言
在近期的 YouTube 界面更新中，平台将缩略图尺寸增大，虽然在大屏幕上能够更直观地展示内容，但对于希望在同一视图中浏览更多视频的用户来说，却造成了排版拥挤、滚动卡顿等不便。本文将介绍如何使用Tampermonkey（油猴）插件，通过编写简单的用户脚本来自定义YouTube首页的缩略图布局，让您的浏览体验更加高效舒适。
一、准备工作
1.安装Tampermonkey插件
Tampermonkey 是一款流行的用户脚本管理器，支持Chrome、Firefox、Safari等主流浏览器：
Chrome用户：通过Chrome网上应用店安装。
Firefox用户：通过Firefox附加组件商店安装。
Edge用户：通过Microsoft Edge加载项商店安装。
安装完成后，浏览器工具栏会出现Tampermonkey的图标，表示插件已就绪。
2.了解用户脚本的基本概念
用户脚本(User Script)是一段可以修改网页外观和功能的JavaScript代码。通过Tampermonkey，我们可以在特定网站加载时自动运行这些脚本，实现对网站的个性化定制。
二、编写YouTube布局自定义脚本
1.编写脚本
// ==UserScript==
// @name YouTube Grid Columns Customizer (Menu)
// @name:zh-CN YouTube 缩略图列数调整
// @namespace http://tycp.xyz
// @version 1.0
// @description Allows you to set the number of video columns on the YouTube homepage via Tampermonkey menu. Default is 5.
// @description:zh-CN 通过油猴菜单设置YouTube主页每行显示的视频列数，默认为5列。
// @author JYT
// @match *://www.youtube.com/*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
const CONFIG_KEY = 'youtubeGridColumnsMenu';
const DEFAULT_COLUMNS = 5;
const MIN_COLUMNS = 1;
const MAX_COLUMNS = 12; // Sensible maximum
function applyGridColumns(columns) {
const numColumns = parseInt(columns, 10);
if (isNaN(numColumns) || numColumns < MIN_COLUMNS || numColumns > MAX_COLUMNS) {
console.warn(`YouTube Grid Columns: Invalid column number (${columns}). Using default ${DEFAULT_COLUMNS}.`);
GM_setValue(CONFIG_KEY, DEFAULT_COLUMNS); // Reset to default if invalid value somehow got stored
columns = DEFAULT_COLUMNS;
}
const gridRenderers = document.querySelectorAll('ytd-rich-grid-renderer, ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer');
if (gridRenderers.length > 0) {
gridRenderers.forEach(gridRenderer => {
gridRenderer.style.setProperty('--ytd-rich-grid-items-per-row', columns);
gridRenderer.style.setProperty('--ytd-rich-grid-item-margin', '8px');
});
setTimeout(() => window.dispatchEvent(new Event('resize')), 200);
return true;
}
return false;
}
function setColumnsViaMenu() {
const currentColumns = GM_getValue(CONFIG_KEY, DEFAULT_COLUMNS);
const newColumnsStr = prompt(`设置 YouTube 主页视频列数 (${MIN_COLUMNS}-${MAX_COLUMNS}):`, currentColumns);
if (newColumnsStr === null) {
return;
}
const newColumns = parseInt(newColumnsStr, 10);
if (!isNaN(newColumns) && newColumns >= MIN_COLUMNS && newColumns <= MAX_COLUMNS) {
GM_setValue(CONFIG_KEY, newColumns);
applyGridColumns(newColumns);
alert(`YouTube 主页视频列数已设置为: ${newColumns}`);
console.log(`YouTube Grid Columns: Set to ${newColumns} via menu.`);
} else {
alert(`输入无效。请输入 ${MIN_COLUMNS} 到 ${MAX_COLUMNS} 之间的数字。`);
}
}
GM_registerMenuCommand('设置 YouTube 主页列数', setColumnsViaMenu, 'C');
function init() {
const initialColumns = GM_getValue(CONFIG_KEY, DEFAULT_COLUMNS);
setTimeout(() => {
applyGridColumns(initialColumns);
}, 500);
const observer = new MutationObserver((mutationsList, obs) => {
let foundGrid = false;
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
if (mutation.target.matches && (mutation.target.matches('ytd-browse[page-subtype="home"] #contents') || mutation.target.matches('ytd-rich-grid-renderer'))) {
foundGrid = true;
break;
}
if (mutation.addedNodes) {
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.matches && (node.matches('ytd-rich-grid-renderer') || node.querySelector('ytd-rich-grid-renderer'))) {
foundGrid = true;
break;
}
}
}
}
}
if (foundGrid) break;
}
if (foundGrid) {
applyGridColumns(GM_getValue(CONFIG_KEY, DEFAULT_COLUMNS));
}
});
const pageManager = document.querySelector('ytd-page-manager');
if (pageManager) {
observer.observe(pageManager, { childList: true, subtree: true });
} else {
observer.observe(document.documentElement, { childList: true, subtree: true });
}
document.addEventListener('yt-navigate-finish', () => {
setTimeout(() => {
applyGridColumns(GM_getValue(CONFIG_KEY, DEFAULT_COLUMNS));
}, 500);
});
}
if (document.body) {
init();
} else {
window.addEventListener('DOMContentLoaded', init);
}
})();
2.安装脚本
点击浏览器右上角的 Tampermonkey 图标，选择 “添加新脚本”，将上述脚本内容粘贴到编辑器中，保存即可。
3.调整参数
网页切换到YouTube主页，点击Tampermonkey 图标，点击YouTube 缩略图列数调整-设置 YouTube 主页视频列数，填入数值保存后刷新 YouTube 页面，即可立刻看到缩略图大小变更效果。
三、常见问题解答
Q1: 脚本安装后为什么没有效果？
A: 请检查：
Tampermonkey插件是否已启用。
脚本是否已启用（绿色开关）。
是否在YouTube首页刷新了页面。
Q2: 脚本正常打开，却显示没有加载js文件？
打开浏览器设置列表-扩展程序-管理扩展程序，将开发者模式或开发人员模式打开即可。
Q3: 如何恢复默认布局？
A: 有两种方法：
在设置菜单中选择默认值（通常是5）。
临时禁用或卸载脚本。
Q4: 脚本会影响YouTube的其他功能吗？
A: 不会。此脚本只修改首页缩略图布局，不影响搜索、播放、订阅等核心功能。
四、效果比对
调整前效果：
调整后效果：
