← 全部文章

教程

用 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,先粘贴全宽规则。

为这篇文章评分

暂无评分 — 成为第一个。

自己动手试试

安装 JustZix,粘贴本文中的任意代码片段。两分钟,从零到一条在你所有设备上生效的规则。

获取 JustZix

功能 · 工作原理 · 示例 · 应用场景