GitHub 的 12 个惊人功能

对于我的生活，我想不出任何介绍，所以......

#1 在 GitHub.com 上编辑代码

我将从我认为每个人都已经知道的内容开始（尽管我个人一周前对此一无所知）。在任何存储库中查看 GitHub 上的任何文本文件时，您都可以在右上角看到一支小铅笔。如果单击它，您可以编辑该文件。完成后，单击“建议文件更改”，GitHub 将创建一个分叉和拉取请求。太棒了，不是吗？他自己创造了叉子！无需 fork 代码并将其上传给自己、在本地进行更改并通过 Pull 请求将其发送回 GitHub。如果您需要进行最少的编辑，则非常方便。 不完全是真正的 Pull 请求

#2 插入图像

问题描述不仅仅限于文字注释。您知道可以直接从剪贴板粘贴图像吗？粘贴后，您会看到它已上传（毫无疑问，上传到云端）并转换为标记来显示图像。优美！

#3 代码格式化

如果您需要编写一段代码，请从三个反引号开始，GitHub 将尝试猜测您正在使用哪种编程语言编写。但是，如果您使用 Vue、Typescript 或 JSX 等编程语言发布一段代码，则可以显式指定语言，以便语法突出显示正确。注意第一行的``jsx： ...确保代码片段的正确显示： （顺便说一句，这也适用于 Gist。如果为 gist 指定 .jsf 扩展名，则 JSF 语法将突出显示）。以下是所有支持的语法的列表。

#4 在 Pull 请求中使用“魔法词”来解决问题

假设您创建了一个修复问题 #234 的 Pull 请求。您可以将文本“fixes issues #234”插入到您的请求描述中（或任何更改请求注释中的任何位置）。此后，合并 Pull 请求将“自动”解决问题。很酷，不是吗？文档中提供了有关此内容的更多信息。

#5 评论链接

您是否曾经需要创建指向特定评论的链接但不知道如何操作？那些日子已经一去不复返了，因为我将告诉您一个秘密：要创建评论链接，您只需单击标题旁边的日期/时间即可。 看，加隆现在有照片了！

#6 代码链接

因此您想要创建指向特定代码行的链接。在这种情况下，请尝试以下操作：在打开的文件中单击所需代码旁边的行号。哇，看到了吗？URL 已更改，行号现在可见！如果您按住 SHIFT 键并单击另一个行号，那么瞧！– URL 将再次更改，并且行范围将突出显示。该 URL 现在将指向该文件和该范围的行。但是等等，它指向当前线程。如果文件改变了怎么办？在这种情况下，您可能需要一个指向当前状态的文件的永久链接。我很懒，所以把上面的都截图了： 顺便说一下，关于 URL...

#7 使用 GitHub URL 作为命令行

使用 UI 浏览 GitHub 非常方便。但有时，要访问特定位置，只需将其输入 URL 会更快。例如，如果我想转到我正在处理的分支并查看它与主分支的比较，我可以简单地 在存储库名称后输入/compare/branchname 。这将带我进入该分支的差异页面： 但这些与 master 分支不同，但如果我之前使用过集成分支，我可以在 URL 中输入/compare/integration-branch...my-branch 对于热键爱好者：CTRL+L 或 CMD+L 将光标移动到 URL 栏（至少在 Chrome 和 Firefox 浏览器中）。这与浏览器自动完成功能相结合，使得分支之间的导航变得更加容易。 专业提示：使用箭头浏览 Chrome 的自动完成建议，然后按 SHIFT+DELETE 从历史记录中删除项目（例如，合并分支后）。（我不知道如果我在其中放一个空格，例如 SHIFT + DELETE，是否会更容易阅读这些快捷键。但从技术上讲，“+”不是它们的一部分，所以我不喜欢这个选项。它是因为这样的事情我晚上睡不着觉，朗达。）

#8 创建问题列表

您想要在问题描述中添加复选框吗？ 当您从列表中查看问题时，您是否希望出现像“5 分之二”这样的漂亮栏？ 没问题！您可以使用以下语法创建交互式复选框：

• [ ] 屏幕宽度（整数）
• [x] 服务人员支持
• [x] 获取支持
• [ ] CSS 弹性盒支持
• [ ] 自定义元素

语法：空格、连字符、空格、左方括号、空格（或 x）、右方括号、空格和一些单词。之后，您实际上可以选中/取消选中这些按钮！出于某种原因，这对我来说似乎是某种技术魔法。您可以勾选方框！同时原文也发生了变化！想想他们接下来会想出什么就很可怕。哦，如果这个问题出现在项目面板中，那么进度也会显示在那里： 如果您不明白我所说的“项目面板”的意思 - 请阅读下文。此页面仅低几厘米。

#9 GitHub 中的项目面板

对于大型项目，我一直使用 Jira。对于我的个人项目，我一直使用 Trello。我真的很喜欢这两个工具。几周前，当我得知 GitHub 在存储库的“项目”选项卡中提供了自己的选项时，我认为复制我已经在 Trello 中处理的任务集是有意义的。 这里没什么好笑的。现在 GitHub 项目中也出现了同样的情况： 渐渐地，您的眼睛会习惯低对比度图像 为了速度起见，我将上述所有内容添加为注释，这意味着它们不是“真正的”GitHub 问题。但 GitHub 中问题管理的强大之处在于它与存储库的其余部分的集成 - 因此最好将存储库中的现有问题添加到仪表板。单击右上角的“添加卡片” ，然后找到您要添加的内容。这是特殊搜索语法派上用场的地方：例如，输入is:pr is:open，您可以将任何打开的 Pull 请求拖到面板上，或者如果需要修复任何错误，则 输入 label:bug 。 您还可以将现有笔记转换为问题。 最后，从现有的问题表单中，将其添加到右侧面板中的项目中。 它将进入该项目面板的分类列表，因此您可以选择将其放入哪一列 当“任务”的描述与实现该任务的代码位于同一存储库中时，这是非常（非常）方便的。这意味着从现在起很多年后，您将能够在一行代码上运行gitblame并找出导致该行的全部问题，而无需在 Jira/Trello/其他地方全部追踪。

缺陷

在过去的三周里，我一直在尝试在 GitHub 而不是 Jira 中完成所有操作（在一个小项目上，有点看板风格），并且喜欢它。但对于需要正确评估和计算开发速度等的 Scrum 项目，我无法想象这一点。好消息是 GitHub 项目的“特殊功能”很少，切换到另一个系统不会花费太多时间。因此，尝试一下，看看您有多喜欢它。我不知道这有多重要，但我听说了ZenHub，并在 10 分钟前第一次打开它。它本质上是 GitHub 的扩展，您可以在其中对问题进行评级并创建“史诗”和依赖项。有发展速度和倦怠的图表；看起来这简直就是一件了不起的事情。进一步阅读：有关项目的 GitHub 文档。

#10 维基百科

对于像 Wikipedia 这样的非结构化页面集，GitHub Wiki（从现在起我将其称为 Gwiki）非常有用。对于一组结构化页面 - 例如，像您的文档 - 没有那么多。没有办法表明“这个页面是那个页面的子页面”；没有像“下一节”和“上一节”按钮这样方便的东西。Hansel 和 Gretel 肯定会在这里迷路，因为这里也没有“面包屑”（特殊的调试运算符 - 大约反式）。（作者注：你读过这个故事吗？这太不人道了。两个年轻的暴徒杀死了一位可怜的饥饿老太太，把她活活烧死在自己的烤箱里。当然，留下了一片狼藉，没有人能理解。我想这就是为什么现在的年轻人太敏感了——现在在睡前给孩子们讲故事还不够残酷！）继续——为了真正尝试 Gwiki，我从 NodeJS 输入了一些页面作为 wiki 页面，然后创建了一个自定义页面侧边栏模拟网站的实际结构。尽管当前页面未突出显示，但该侧边栏始终存在。链接必须手动维护，但总体而言一切正常。如果你愿意的话，你可以看一下： 这很难与 GitBook（ Redux文档中使用的）或定制网站之类的东西竞争。但这已经是其中的 80%，并且您的存储库中的所有内容都正确。我只是这个的粉丝。我建议，如果您已经无法满足单个 README.md 文件的需求，并且需要多个不同的页面来获取用户手册或更详细的文档，那么坚持使用 Gwiki 是有意义的。如果缺乏结构/导航让您感到困扰，请继续做其他事情。

#11 GitHub 页面

您可能已经知道 GitHub Pages 可用于托管静态网站。如果你不知道，那么你现在知道了。然而，本节专门讨论一个更具体的主题：使用Jekyll创建网站。最简单的形式是，GitHub Pages + Jekyll 可以使用漂亮的主题呈现 README.md 文件。例如，查看about-github中的我的自述文件页面： 如果您单击此 GitHub 站点的设置选项卡，启用 GitHub Pages，然后选择 Jekyll 主题... 然后我们会得到一个 Jekyll 主题风格的页面： 然后，您可以主要基于可轻松编辑的标记文件创建整个静态站点，从本质上将 GitHub 转变为 CMS。虽然我没有实际使用过这个，但这就是使用 React 的 Bootstrap 框架构建网站的方式，所以没有什么可怕的。我注意到Ruby必须运行在本地机器上（Windows用户会在这里交换理解眼神然后走另一条路，macOS用户会说：“有什么问题，你要去哪里？Ruby是一个通用平台！还有一个GEMS”包管理系统！”）（还值得注意的是，GitHub Pages 上不允许出现“攻击性或威胁性内容或行为”，因此您将无法在那里发布 Hansel 和 Gretel 故事的版本）。

我的想法

我对 GitHub Pages + Jekyll 组合（针对本文）研究得越多，就越觉得整个想法听起来很奇怪。“用最少的努力制作自己的网站”的想法很棒。但要使用它，您仍然需要本地计算机上的当前版本。对于如此“简单”的东西，有太多的命令行命令。我浏览了入门部分的七页，感觉唯一简单的就是我自己。我什至还没有弄清楚主页的简单语法或简单的“基于 Liquid 语言的模板机制”的基础知识。我宁愿自己写一个网站！老实说，我有点惊讶 Facebook 将其用于 React 文档，因为他们可能每天都可以使用 React 构建帮助系统页面并预渲染为静态 HTML 文件。他们所需要做的就是找到一种方法来接收现有标记文件，就像它们来自 CMS 一样。如果什么...

#12 使用 GitHub 作为 CMS

假设我们有一个包含一些文本的网站，但我们不想将该文本存储为 HTML 标记。相反，我们希望将文本块存储在非开发人员用户可以轻松编辑的地方。最好有一些版本控制选项。也许甚至有某种同行评审过程。这是我的建议：使用存储在存储库中的标记文件来存储文本。并在客户端使用一个组件来检索这些文本并将其显示在页面上。我是 React 的粉丝，所以这里有一个正确的 <Markdown> 组件的示例，给定 Markdown 文件的路径，它将提取它、解析它并将其呈现为 HTML。

class Markdown extends React.Component {
    constructor(props) {
      super(props);

      // Конечно, вам нужно заменить это на свой URL
      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';

      this.state = {
        markdown: '',
      };
    }

    componentDidMount() {
      fetch(`${this.baseUrl}/${this.props.url}`)
        .then(response => response.text())
        .then((markdown) => {
          this.setState({markdown});
        });
    }

    render() {
      return (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}

（我在这里使用 npm标记的包来解析 HTML 中的标记）URL 指向我的示例存储库，其中包含/text-snippets目录中的标记文件。（您还可以使用 GitHub API 来获取内容，但我怀疑您是否需要它。）您可以使用这样的组件：

const Page = () => (
  <div className="page">
    <div className="about-us">
      <Markdown url="about-us.md" />
    </div>

    <div className="disclaimer">
      <p>A very important disclaimer:</p>

      <Markdown url="disclaimers/home-page-disclaimer.md" />
    </div>
  </div>
);

因此，现在 GitHub 在某种程度上充当了您想要托管的那些文本片段的 CMS。上面的示例仅在组件加载到浏览器中后检索标记。如果您需要静态站点，则必须将其呈现在服务器上。好消息！没有什么可以阻止您检索服务器上的所有标记文件（使用您喜欢的任何缓存策略）。如果您决定走这条路，那么使用 GitHub API 获取目录中所有标记文件的列表是有意义的。 奖励 - GitHub 实用程序！我已经使用Octotree Chrome 扩展有一段时间了，并向您推荐它。并非毫无保留，但我仍然推荐它。它在左侧显示一个面板，其中包含您正在浏览的存储库的树视图。 从这个视频中我了解了octobox，到目前为止，在我看来它也是一个非常好的实用程序。这是您的 GitHub 问题的收件箱。这就是你需要了解的关于他的一切。说到颜色，我以浅色主题拍摄了以上所有屏幕截图，以免吓到您。但如果我更喜欢其他一切的深色，那么为什么要忍受死色苍白的 GitHub？ 这里我使用了 Chrome 浏览器的Stylish扩展（可以将主题应用到任何网站）和GitHub Dark风格的组合。对于初学者来说，GitHub 开发人员工具深色主题（内置，您只需启用它）和Chrome 的Atom One Dark主题。

位桶

严格来说，这里并不完全合适，但我就是忍不住要提一下 Bitbucket。两年前，我开始了一个项目，花了半天时间选择最好的 git 托管。因此，Bitbucket 以大幅优势获胜。他们的代码审查流程远远领先于竞争对手（这早在 GitHub 有了审查者的概念之前）。此后，GitHub 也获得了评论。不幸的是，去年我没有机会使用 Bitbucket - 也许他们在某些方面再次取得了进展。所以我建议那些负责选择 git 托管服务的人也关注 Bitbucket。

结论

就这样！我希望我能够告诉您至少三件您以前不知道的事情。我也希望您在阅读我的文章时感到愉快。