【GitHub】12个实用技巧

---

#1 在GitHub.com上编辑代码

先从一个大多数人都知道的开始吧（尽管我是上个星期才知道的）

在GitHub上打开一个文件（任何仓库的任何文件），在页面的右上角有一个像小铅笔的按钮。点击它，你就能够编辑文件了。当你编辑完成，点击Propose file change，GitHub将为你fork这个仓库，而后建立pull request。

你再也不须要fork这个仓库，pull文件到本地，修改文件后再提交到GitHub建立一个pull request。

#2 粘贴图片

你能够不只限于用文字来评论或者bug描述。你能够直接复制一个图片到剪贴板，当你粘贴的时候，你的图片将会自动上传到云，而后展现在页面上。

#3 美化代码

若是你想编写一个代码块，以三个反引号开头，GitHub会尝试猜想你用的什么语言。

可是若是你直接粘贴一个段Vue，Typescript或者JSX代码，你能够指定出来以获得正确的语法高亮。

注意第一行的 ```jsx :

意味着这段代码能够正确的显示：

(顺便说下，在gist中，若是你的gist文件后缀名是.jsx， 将自动得到JSX语法高亮)

这是全部支持的语法列表.

#4 在PRs中巧妙关闭issues

若是你建立了一个pull request来修复问题单 #234. 你能够在PR的描述中写fixes #234。

当合并PR的时候，会自动关闭那个issue。是否是很方便：）

了解更多。

#5 连接到评论

是否想要连接到某个特定的评论？

点击评论框用户名旁边的时间，就能够获得连接了。

#6 连接到代码

是否想要连接到一行特定代码？

打开一个文件，点击代码左边的行号，或者按住shift选择多行。

分享这个URL，能够连接到这些代码。若是文件被修改了，会发生变化吗？不会，由于这是永久连接。

#7 灵活使用GitHub地址栏

GitHub的页面导航已经作的很好了，可是有些时候直接在导航栏中输入会更快。好比你想跳转到一个分支，看下它与主干的区别，就能够直接在你仓库的后面输入/compare/branch-name：

与主干对比，两个分支对比，输入/compare/**integration-branch...**my-branch

对于快捷键的话，ctrl+L或者cmd+L` 光标将跳转到地址栏，这使得在两个分支切换变得很方便。

#8 建立复选框列表

你是否想在你提交的issue中看到复选框列表？

以及在issue列表中，看到“2/5”的进度条？

交互式复选框语法以下：

- [ ] Screen width (integer)
 - [x] Service worker support
 - [x] Fetch support
 - [ ] CSS flexbox support
 - [ ] Custom elements复制代码

在项目管理界面使用也同样：

若是你不知道项目管理是什么，我接下来就讲。

#9 在GitHub中进行项目管理

我在大项目中一般使用Jira来管理项目，对于单人项目我通常用Trello。

就在几周前我了解到GitHub也提供项目管理。就在你的仓库中找到Projects，我都有点想把我在Trello的工做项移植过来了。

在GitHub中如出一辙的项目管理：

若是你想把你的issues添加到你的项目管理中来，你能够在页面右上方点击Add Cards搜索你想添加的，这里的搜索有特殊的语法，好比输入is:pr is:open，意味着你能够找到全部打开的PRs，若是你想修复bugs，输入label:bug。

你能够把存在的notes转换成issues。

或者在issues界面，把issue添加到项目管理中。

先在项目管理中把类别分好，再肯定你把issues放入那个类目中。

缺点

我在最近的三周开始使用GitHub来替代Jira来进行管理项目（一个小项目）。越用越喜欢。

可是我不敢想象用它来进行敏捷开发，由于我想要正确的评估和计算全部事物。

好消息是，GitHub的项目管理功能很清爽简洁，不须要太大的学习成本，就能够轻松上手。

ZenHub弥补了GitHub不足，能够评估本身的issues，建立依赖，还有速度和燃尽图。看起来很牛逼。

了解更多

#10 GitHub wiki

非结构化网页集合，也就是说你全部的网页没有从属关系，没有上一段和下一段按钮，也没有面包屑导航。

我先建立一个GitHub wiki，我从NodeJS文档找了几个页面做为wiki的页面，而后建立一个侧边导航来模拟实际的结构。侧边栏一直存在，不会对当前页面高亮。

连接须要手动维护，但总的来讲已经知足需求了。 查看Demo 。

个人建议：若是你的 README.md 文件太大了，并且你须要几个页面来更详细的描述你的文档，那么GitHub wiki是很适合你的。若是你的页面须要导航或者结构化，那么你须要想其余办法了。

#11 静态博客

你可能已经知道你可使用GitHub部署静态网页，这个部分我将告诉你用Jekyll（简单博客静态网站生成器）生成静态网页

很是简单，Jekyll会用漂亮的主题去渲染你的README.md文件。好比这个README页面（连接）:

点击设置，选择Jekyll主题。

我将获得一个Jekyll主题的页面:

咱们经过一个markdown文件就建立一个静态网站，编辑修改很是方便，因此GitHub基本上能够当内容管理系统来用了。

React和Bootstrap的网站已经怎么作了。

#12 用GitHub做为CMS(内容管理系统)

你有一个网站须要展现一些文本，可是你又不想把文本存成HTML。

您想将文本块存储在某个地方，并且能够很方便的编辑，且不须要开发。

个人建议是文本写在markdown文件中，而后存到你的仓库。接着在前端写一个组件来请求文件而后渲染。

我用喜欢用React，因此这是一个<Markdown>React组件的例子：获得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)}} />

    );

}

}复制代码

(我用的是marked 插件来解析markdown)

而后你能够这样使用组件:

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 谷歌插件

我只用这个 octobox谷歌插件一段时间了，如今我推荐给你。

它在左侧生成一个面板，经过树形结构来浏览你的仓库。

这个视屏了解如何使用 octobox谷歌插件。

说到颜色，我怎么容忍一个苍白的GitHub呢？

插件组合： Stylish（这个插件容许你把主题应用到任何一个网站） 和 GitHub 黑色主题。
为了看上去统一，把谷歌开发工具换成黑色（这个是内置的，在设置中打开），而后换成Atom One Dark 黑色主题 。

最后

就这些。
但愿对你有用，祝你生活愉快。

原文：medium.com/@david.gilb…