用 JustZix 微调 GitHub 和开发者网站
如果你整天读代码,GitHub 的默认布局浪费空间:窄的差异栏、滚走的文件页头、你从不用的侧边栏。限定到 github.com 的 JustZix 规则让你调整阅读体验,无需浏览器标志或你无法审计的扩展。
使用整个窗口宽度
GitHub 在许多页面上限制内容宽度。在宽屏显示器上,这在一窄列代码周围留下巨大的空白边距。新建一条匹配 *://github.com/* 的 CSS 规则,夺回空间。
/* 让仓库和代码页面横跨视口 */
.container-xl,
.container-lg,
.repository-content {
max-width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
这是仅布局的改动。导航或功能毫无变动——你只是不再盯着空白的边沟。
滚动时固定文件页头
当你滚过一个长文件时,带有文件名、blame 和 raw 链接的页头会消失。一个粘性页头保持你的上下文。GitHub 已经标记了文件操作栏,所以你只需要定位。
/* 保持文件操作栏可见 */
.file-header,
.react-blob-header-edit-and-raw-actions {
position: sticky !important;
top: 0;
z-index: 20;
background: var(--bgColor-default, #fff) !important;
}
在差异视图里,同样的思路固定每个文件的页头,这样你总是知道一段差异属于哪个文件:
/* 拉取请求差异中的每文件粘性页头 */
.file.js-file .file-header {
position: sticky !important;
top: 0;
z-index: 5;
}
更大、更易读的代码
默认代码字号对速览还行,对审阅就差些。用一条规则把它调大并收紧行高。
/* 舒适的代码排版 */
.blob-code-inner,
.react-code-text,
.CodeMirror,
pre code {
font-size: 14px !important;
line-height: 1.6 !important;
}
挑一个适合你显示器的大小。因为规则限定到 GitHub,它绝不会触碰其他网站上的代码块。
隐藏你不用的东西
许多 GitHub 面板对日常工作来说是纯粹的噪音——"被使用"徽章、赞助按钮、你仪表盘上的活动信息流。把它们裁掉。
/* 仓库侧边栏杂物 */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }
按喜好调整列表——每一行都是独立的,所以移除一个选择器只会重新显示那个面板。
用一次按键跳到差异
一小段 JavaScript 规则可以添加一个快捷键。把一条 JS 规则限定到 *://github.com/*/pull/*,按 d 直接滚动到"已更改文件"标签页。
document.addEventListener('keydown', (e) => {
// 在输入框和文本域中输入时忽略。
const tag = (e.target.tagName || '').toLowerCase();
if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
return;
}
if (e.key === 'd') {
const filesTab = document.querySelector('a[href$="/files"]');
if (filesTab) filesTab.click();
}
});
它只读取按键事件并点击一个已存在的链接——没有网络请求,什么也没写到任何地方。纯粹的便利。
构建你自己的开发者配置
同样的方法在 GitLab、MDN、Stack Overflow 或任何文档网站上都有效:把一条 CSS 规则限定到域名、加宽内容、修正排版、隐藏外壳。让每个网站的规则保持独立,这样一个网站的改版绝不会破坏另一个。
在我们的现成示例里找到更多面向开发者的配方,如果你来自某个用户脚本管理器,请阅读从 Tampermonkey 迁移到 JustZix。准备好开始了?下载 JustZix,先粘贴全宽规则。
为这篇文章评分
暂无评分 — 成为第一个。