![294230ccfb8c688c7aa9602d9e870705.png](https://i-blog.csdnimg.cn/blog_migrate/1319c0f9b9aac79ca7fe96c410149b8a.jpeg)
原文:https://hackernoon.com/12-cool-things-you-can-do-with-github-f3e0424cf2f0
翻译:https://zhuanlan.zhihu.com/p/29274260
简评:解放生产力的,GitHub 使用指南。
#1 在 Github 上编辑代码
我要先说一个很多人都知道的事儿。
当你使用 GitHub,看一些文件(任何的文本文件或者仓库),能看到一个顶部右侧有一个小铅笔图标。点击即可编辑文档。完成后,按照提示点击「Propose file change」,GitHub 会为你 fork 这个仓库并创建一个 pull request。
很帅吧,GitHub 为你创建了一个分支。
不需要 fork / pull / 改变 locally / push / 创建 PR,只需点击一下,就可以创建分支。
![8ecd9364954afe89374e7955a152a9ff.png](https://i-blog.csdnimg.cn/blog_migrate/f2dfc86e477a0f5a84838753df6b3e50.png)
这对于改一些排版错误或者防恶意篡改是很有帮助的。
#2 粘贴图像
对于 issue 和 comment,你还可以直接粘贴图片,当你粘贴时图片会被上传至云端,然后以 MarkDown 格式显示。
非常简洁。
#3 格式化代码
如果你想写一个 code block,你可以在开始处写三个反引号,然后 GitHub 会试图猜出你在写什么语言。
但是如果你发布如 Vue、Typescript、JSX 这样的语言,你可以明确写出来,以获取正确的高亮。
下图第一行使用了 ```jsx:
![a68dbcc90bc14d873c19921629f8ae4e.png](https://i-blog.csdnimg.cn/blog_migrate/149f4c32200bead9e0522909caba3935.png)
片段呈现:
![4506975464f631d9cc4eb7336a294dea.png](https://i-blog.csdnimg.cn/blog_migrate/dbde49293e2ef4a6dd0510e0b94054df.png)
(这可以扩展到 gist,顺便一提,如果你给了 gist 定义成 .jsx 扩展名,那么你会得到 JSX 的高亮)
Github 支持语言列表
#4 使用魔术词在 PR 中关闭 issue
比如你在创建一个 pull request 去修复 issue #234。那你可在 PR 输入「fixes #234」,就可以自动合并 PR 并关闭这个 issue,是不是很酷。
(提交信息里可以使用 fix/fixes/fixed , close/closes/closed 或者 resolve/resolves/resolved等关键词,更多请查看 help)
#5 链接到 comment
你甚至想链接到一个特定的评论,但无法做到?我在这里告诉你,点击名字旁边的日期/时间就万事大吉。
![0677b508c6c60b04e478b5b39d82e6e1.png](https://i-blog.csdnimg.cn/blog_migrate/cef13976818c5ed1730cb02c5f6f3388.png)
#6 链接到代码
既然能链接到 comment,那你想问能不能链接到代码上?可以的。
试试这个操作:在查看文件时,点击代码边上的行数。
哇喔,你看到了么?URL 随之更新。如果你按住 Shift 并单击另一个行号,URL 会再次更新,并且高亮这两个行数之间的所有代码段。
你现在可以分享这个 URL 了,但等等,这些还是当前分支,如果文件变化了呢?你需要一个永久链接。
我比较懒,但是下面这一个截图已经能够表达如何获取永久链接了(Copy Permalink):
![15f0972a523a4a6695c0b130655d1fca.png](https://i-blog.csdnimg.cn/blog_migrate/533f827fff8a837ef7f5f54e0c511fc2.png)
##7 像使用命令行一样使用 GitHub URL
既然说到了 URL,那么久接着聊一下。使用 UI 浏览 GitHub 很方面也很好,不过很多时候最快的方式是使用 URL 来浏览。举个例子,如果我想跳转到正在处理的分支上,并想查看分支和 master 的差异,我可以在我的仓库名后面输入 /compare/branch-name。
下简单说,查看 master 和分支的区别,如下图:
![6b1504e3e6f840a0e0c7435f497e7822.png](https://i-blog.csdnimg.cn/blog_migrate/cf80243e73530aef73453aea4b18aa3a.png)
可以在名字后面再加上...XXX(分支名)比如我写的 mkdocs...pre-release,如下图:
![d5b88859a0dac28e5c108cdb9c58f313.png](https://i-blog.csdnimg.cn/blog_migrate/ddfae00fb643ef935b80b20d13de5fb5.png)
这一步你可以配合键盘快捷键,Ctrl + L 或者 cmd + L,可以让光标直接移动到 URL 中(最起码 chrome 是这样)。这些加一起能提高生产力。
专业提示:用键盘移动 chrome URL 上的某一条网页记录,使用 Shift+Delete 或 Shift+fn+Delete 来删除某一条记录。(比如合并了分支之后就可以删除了)
#8 在 issue 中创建 list
你想在你的 issue中看到可多选的 list 么?
![ed08e61eef99ab9753a313d7bd6d26f2.png](https://i-blog.csdnimg.cn/blog_migrate/40ca2d4d93fd7351dbd99e056c4803f7.png)
当你查看问题时,你想不想让它变成 2 of 5 这样的形式。
![7e51ab1e8f4b686232f8fa6f4d014cfd.png](https://i-blog.csdnimg.cn/blog_migrate/c21f2742523e5431a5ee1ac9e67a840a.png)
如果想,你可以在 issue 中使用以下句法:
- [ ] Screen width (integer)
- [x] Service worker support
- [x] Fetch support
- [ ] CSS flexbox support
- [ ] Custom elements
#9 GitHub 上的 project board
我总是用 Jira 做大项目,独立项目用 Trello,这两者我都很喜欢。
![8d21d6cb0f456ea8d081cb13184d6495.png](https://i-blog.csdnimg.cn/blog_migrate/e35c8e6eee138bc2b2cb41b87847dc94.png)
后来我知道,GitHub 也有类似的 project board:
![9791e10466a128ef98d16f306e1da2f7.png](https://i-blog.csdnimg.cn/blog_migrate/597081b6316b9bb9bc73925f0ad71caf.png)
我个人为了方便把它们都添加为 note。board 极为方便的帮助你做仓库管理。
你可以点击右上角 Add Cards 来添加东西。这里有些特殊语法方便搜索,比如:is:pr is:open,你就可以把任何公开的 PR 拖到 board 上。
更多语法可以参考 search syntax 。
![2f77489b69caca0a5c24e0c94a9f11ce.png](https://i-blog.csdnimg.cn/blog_migrate/dd65fcde93a7982ed8eb529500e7db7e.png)
你也可以把现存的 note 转化为 issue。
![feafa210fe3f0cd3b695da3b97170fe2.png](https://i-blog.csdnimg.cn/blog_migrate/f8498f2b01564f2c895f14f7bfefb6f8.png)
你也可以选择 issue 直接添加到 projects 。
![7d0c3afc37da52bc50d69c0ebcc36284.png](https://i-blog.csdnimg.cn/blog_migrate/a019ac91745154f3204b22ce835eb592.png)
这些意味着,从现在开始,你可以明确责任制度,每一行代码的分配都可以在 GitHub 上的 Project board 上完成而不用去 Jira 或者 Trello 上。
不过它也有些缺点,比如功能比较少。你也可以试试 ZenHub,它有效的扩展 GitHub。
更多关于 board 的问题可以访问:GitHub help on Projects.
#10 GitHub WiKi
GitHub WiKi 能够帮助我们处理非结构化的页面集合,就像维基百科那样。我自己 NodeJS docs 就被我弄成 wiki 的样子。几个页面,然后自定义侧边栏。具体方法网上很多,我的页面可以供你参考一下。
![538bfee10e1eb6aacbbd0539e542fc4b.png](https://i-blog.csdnimg.cn/blog_migrate/58c0d8675ba85d6e405e09d74cfde8b7.png)
建议:如果你有个特别长的单页面 README.md 文件,并且想和其他人有所区别,你可以试试这种形式。
#11 GitHub Pages(JekyII)
你可能已经知道了能使用 GitHub Pages 来托管静态网站。那本条就特别介绍一下如何使用 JekyII 来构建站点。
以最简单的方式,GitHub Pages + JekyII 将以最漂亮的主题来呈现你的 README.md,例如,你可以看一下 about-github 的自述文件。
![16c8644c93d26a9a70c8f388ed859d19.png](https://i-blog.csdnimg.cn/blog_migrate/622cf40849ac7967db9e4facfa37920f.png)
在 GitHub 的 my site 中,点击 setting,打开 GitHub Pages,选择一个 JekyII 主题
![fe0eb985c3f07aeda4c43b1ddcb6252e.png](https://i-blog.csdnimg.cn/blog_migrate/7b5d15b1a70b135cb5ebebb26fa94c06.png)
就会得到一个 Jekyll 主题页面:
![2ebc6fa1f26d9693945d30e04422cb58.png](https://i-blog.csdnimg.cn/blog_migrate/d6c2f18ebd0733cf4dceb9b318c26aeb.png)
它的优点是:
- 轻量级网站,响应速度快
- 网站更安全,无数据库,无动态数据
- 无需通入过多精力维护
注意,他需要 Ruby 在本地运行,Mac 自带,Windows 用户自行安装。
#12 把 GitHub 当 CMS 用
你的网站需要显示一些文字,但是你还不想直接放在 HTML 里面,那你可以把 GitHub 作为你储存内容的一个地方。这样,就可以让任何一个非程序员通过修改 Markdown 来修改 HTML 网页的内容。
我的方法是:在你的 GitHub 仓库中使用 markdown 文件来保存文本。在你网站的前端用一个组件来抓取这些文本并呈现在网页上。
我是玩 React 的,这里有个组件,用以抓取,解析并呈现到 HTML 上。
class Markdown extends React.Component {
constructor(props) {
super(props);class Markdown extends React.Component {
constructor(props) {
super(props);
// replace with your URL, obviously 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)}} />
);
}
}
(/text-snippets 这个文件夹是储存我的 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 工具
Octotree Chrome extension
它可以让你在看任何仓库时,获得一个左边的树状图。
![f0061620c65575720aced36da63460b0.png](https://i-blog.csdnimg.cn/blog_migrate/f91732f14bba19fa2138960d06ea33ec.png)
以上。
希望能够对你有所帮助,have a nice day!
原文:12 cool things you can do with GitHub
●如何从初级程序员顺利晋升到高级程序员?
●ES6、ES7、ES8学习指南
●实现B站弹幕很难么?这个开源项目了解一下
●浅谈外包、小型创业、中型创业和大厂的前端体验
*版权声明:转载文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与我们联系删除或授权事宜。
温馨提示
返回上一级 回复 “前端” , "视频"……等你要的资源的关键词,即可得到内部电子书和视频,或参考关键词回复功能这篇文章
![d7f3fe5e73a6fc98f1c0fa7fc605786f.png](https://i-blog.csdnimg.cn/blog_migrate/4724edc111156727739e979e0e0072f4.jpeg)
长按关注
H5前端开发社区
![6b91df5fb2fc716f2ddb4ad4844d06cb.png](https://i-blog.csdnimg.cn/blog_migrate/307771d74d26a7d7881cc24ba5e70e19.png)