Customizes Bluesky's Home feed with responsive three-column layout, menu reorganization, and improved visual hierarchy (activates after login detection)
当前为
// ==UserScript==
// @name Bluesky Enhanced Layout
// @namespace https://gf.qytechs.cn/en/users/567951-stuart-saddler
// @version 1.6
// @description Customizes Bluesky's Home feed with responsive three-column layout, menu reorganization, and improved visual hierarchy (activates after login detection)
// @author Stuart Saddler
// @icon https://i.ibb.co/Vv9LhQv/bluesky-logo-png-seeklogo-520643.png
// @license MIT
// @match https://bsky.app/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Detect authenticated state by checking navigation element presence
function userIsLoggedIn() {
return !!document.querySelector('nav[role="navigation"]');
}
// Skip execution on profile/notification pages
if (window.location.pathname.startsWith('/profile/') ||
window.location.pathname.startsWith('/notifications')) {
return;
}
// Inject all CSS modifications for layout restructuring
function injectCSS() {
const style = document.createElement('style');
style.textContent = `
/* Left navigation styling */
nav[role="navigation"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 200px !important;
height: 100vh !important;
background-color: rgb(22, 30, 39) !important;
border-right: 1px solid rgb(46, 64, 82) !important;
overflow-y: auto !important;
z-index: 1000 !important;
display: flex !important;
flex-direction: column !important;
padding: 20px 0 !important;
box-sizing: border-box !important;
transform: translateZ(0);
will-change: transform;
}
/* Main feed container adjustments */
[data-testid="FeedPage-feed"],
[data-testid="customFeedPage-feed"],
[data-testid="followingFeedPage-feed"] {
column-count: 3 !important;
-webkit-column-count: 3 !important;
-moz-column-count: 3 !important;
column-gap: 20px !important;
-webkit-column-gap: 20px !important;
-moz-column-gap: 20px !important;
width: calc(100vw - 200px) !important;
margin-left: 200px !important;
padding: 20px !important;
box-sizing: border-box !important;
display: block !important;
overflow: visible !important;
}
/* Responsive layout breakpoints */
@media (max-width: 1600px) {
[data-testid="FeedPage-feed"],
[data-testid="customFeedPage-feed"],
[data-testid="followingFeedPage-feed"] {
column-count: 3 !important;
}
}
@media (max-width: 1200px) {
[data-testid="FeedPage-feed"],
[data-testid="customFeedPage-feed"],
[data-testid="followingFeedPage-feed"] {
column-count: 2 !important;
}
nav[role="navigation"] {
width: 150px !important;
}
[data-testid="FeedPage-feed"],
[data-testid="customFeedPage-feed"],
[data-testid="followingFeedPage-feed"] {
width: calc(100vw - 150px) !important;
margin-left: 150px !important;
}
}
@media (max-width: 768px) {
[data-testid="FeedPage-feed"],
[data-testid="customFeedPage-feed"],
[data-testid="followingFeedPage-feed"] {
column-count: 1 !important;
}
nav[role="navigation"] {
position: absolute !important;
width: 100% !important;
height: auto !important;
border-right: none !important;
border-bottom: 1px solid rgb(46, 64, 82) !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
padding: 10px !important;
}
[data-testid="FeedPage-feed"],
[data-testid="customFeedPage-feed"],
[data-testid="followingFeedPage-feed"] {
width: 100% !important;
margin-left: 0 !important;
}
nav[role="navigation"] > .css-175oi2r.r-1ipicw7.r-1xcajam.r-1rnoaur.r-pm9dpa.r-196lrry.css-175oi2r > .css-175oi2r {
width: auto !important;
margin-top: 0 !important;
}
}
/* Individual post card styling */
.css-175oi2r.r-1habvwh {
display: block !important;
width: 100% !important;
margin: 0 0 20px !important;
background: rgb(22, 30, 39) !important;
border: 1px solid rgb(46, 64, 82) !important;
border-radius: 8px !important;
overflow: hidden !important;
break-inside: avoid-column !important;
page-break-inside: avoid !important;
-webkit-column-break-inside: avoid !important;
break-after: avoid-column !important;
break-before: avoid-column !important;
box-sizing: border-box !important;
transition: all 0.2s ease-in-out !important;
max-width: 100% !important;
min-height: 150px !important;
max-height: 500px !important;
overflow-y: auto !important;
}
/* Hidden elements */
.r-2llsf.css-175oi2r > div.css-175oi2r:nth-of-type(1) > .css-175oi2r,
.css-175oi2r[style*="position: fixed"][style*="inset: 0px 0px 0px 50%"],
.css-175oi2r.r-18u37iz.r-1niwhzg.r-1e084wi {
display: none !important;
}
`;
document.head.appendChild(style);
}
// Handle interactive element behaviors
function handleInteractions() {
document.body.addEventListener('click', (e) => {
const likeButton = e.target.closest('[data-testid*="like-button"]');
if (likeButton && !likeButton.dataset.handled) {
likeButton.dataset.handled = 'true';
}
}, { capture: true, passive: true });
}
// Maintain post stability in column layout
function stabilizePosts() {
const feed = document.querySelector(
'[data-testid="FeedPage-feed"], [data-testid="customFeedPage-feed"], [data-testid="followingFeedPage-feed"]'
);
if (!feed) return;
feed.querySelectorAll('.css-175oi2r.r-1habvwh').forEach(post => {
if (!post.dataset.stabilized) {
post.style.display = 'block';
post.style.breakInside = 'avoid-column';
post.style.pageBreakInside = 'avoid';
post.style.webkitColumnBreakInside = 'avoid';
post.style.breakAfter = 'avoid-column';
post.style.breakBefore = 'avoid-column';
post.dataset.stabilized = 'true';
}
});
}
// Reorganize right-side menu into navigation panel
function moveRightMenuIntoNav() {
const rightMenu = document.querySelector(
'div[style*="padding: 20px 0px 20px 28px"][style*="position: fixed"][style*="left: 50%"][style*="width: 328px"]'
);
const leftNav = document.querySelector('nav[role="navigation"]');
if (!rightMenu || !leftNav) return;
rightMenu.style.position = 'static';
rightMenu.style.left = 'auto';
rightMenu.style.top = 'auto';
rightMenu.style.transform = 'none';
rightMenu.style.width = 'auto';
rightMenu.style.margin = '0';
rightMenu.style.padding = '35px 15px 18px 15px';
rightMenu.style.gap = '16px';
rightMenu.style.maxHeight = '100%';
rightMenu.style.overflowY = 'auto';
leftNav.appendChild(rightMenu);
}
// Adjust container padding for visual consistency
function adjustTopPadding() {
const targetDiv = document.querySelector(
'div.css-175oi2r[style*="gap: 10px;"][style*="padding-bottom: 2px;"][style*="overflow-y: auto"]'
);
if (targetDiv) {
targetDiv.style.paddingTop = '11px';
}
}
// Monitor DOM changes for dynamic content
function setupMutationObserver() {
const observer = new MutationObserver(() => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
stabilizePosts();
moveRightMenuIntoNav();
adjustTopPadding();
}, 200);
});
let debounceTimeout;
observer.observe(document.body, {
childList: true,
subtree: true
});
return observer;
}
// Cleanup observer on page unload
function setupCleanup(observer) {
window.addEventListener('unload', () => observer.disconnect());
}
// Initialize layout modifications
function runLayoutScript() {
injectCSS();
moveRightMenuIntoNav();
adjustTopPadding();
handleInteractions();
setupCleanup(setupMutationObserver());
}
// Activation logic based on auth state
function waitForLoginAndRun() {
if (userIsLoggedIn()) {
runLayoutScript();
return;
}
const checkLoginInterval = setInterval(() => {
if (userIsLoggedIn()) {
clearInterval(checkLoginInterval);
runLayoutScript();
}
}, 1000);
}
// Start initialization process
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', waitForLoginAndRun);
} else {
waitForLoginAndRun();
}
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址