中国领先的IT技术网站
|
|

【GitHub】超实用技巧,看这一篇就够了!

一直有小伙伴在后台留言给程序和小七说,想多了解github的使用技巧,今天我们就整理了你在工作和学习中绝对用得到的12个超实用技巧,

作者:佚名来源:爱尖刀|2017-11-13 15:16

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


一直有小伙伴在后台留言给程序和小七说,想多了解github的使用技巧,今天我们就整理了你在工作和学习中绝对用得到的12个超实用技巧,快来收吧~

#1 在GitHub.com上编辑代码

先从一个大多数人都知道的开始吧~

在GitHub上打开一个文件(任何仓库的任何文件),在页面的右上角有一个像小铅笔的按钮。点击它,你就可以编辑文件了。当你编辑完成,点击 Propose file change ,GitHub将为你 fork 这个仓库,然后创建 pull request 。

你不再需要 fork 这个仓库, pull 文件到本地,修改文件后再提交到GitHub创建一个pull request。

【GitHub】超实用技巧,看这一篇就够了!

#2 粘贴图片

你可以不仅限于用文字来评论或者bug描述。你可以直接复制一个图片到剪贴板,当你粘贴的时候,你的图片将会自动上传到云,然后展示在页面上。

#3 美化代码

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

但是如果你直接粘贴一个段Vue,Typescript或者JSX代码,你可以指定出来以得到正确的语法高亮。

注意第一行的 ``jsx :

【GitHub】超实用技巧,看这一篇就够了!

意味着这段代码可以正确的显示:

【GitHub】超实用技巧,看这一篇就够了!

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

下方链接是 所有支持的语法列表 :

https://github.com/github/linguist/blob/fc1404985abb95d5bc33a0eba518724f1c3c252e/vendor/README.md

#4 在PRs中巧妙关闭issues

如果你创建了一个 pull request 来修复问题单 #234. 你可以在 PR 的描述中写 fixes #234 。

当合并 PR 的时候,会自动关闭那个issue。是不是很方便:)

了解更多 :

https://help.github.com/articles/closing-issues-using-keywords/

#5 链接到评论

是否想要链接到某个特定的评论?

点击评论框用户名旁边的时间,就可以得到链接了。

【GitHub】超实用技巧,看这一篇就够了!

#6 链接到代码

是否想要链接到一行特定代码?

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

分享这个 URL ,可以链接到这些代码。如果文件被修改了,会发生变化吗?不会,因为这是永久链接。

【GitHub】超实用技巧,看这一篇就够了!

#7 灵活使用GitHub地址栏

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

【GitHub】超实用技巧,看这一篇就够了!

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

【GitHub】超实用技巧,看这一篇就够了!

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

#8 创建复选框列表

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

【GitHub】超实用技巧,看这一篇就够了!

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

【GitHub】超实用技巧,看这一篇就够了!

交互式复选框语法如下:

  1. - [ ] Screen width (integer) 
  2.  - [x] Service worker support 
  3.  - [x] Fetch support 
  4.  - [ ] CSS flexbox support 
  5.  - [ ] Custom elements 

在 项目管理 界面使用也一样:

【GitHub】超实用技巧,看这一篇就够了!

如果你不知道 项目管理 是什么,我接下来就讲。

#9 在GitHub中进行项目管理

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

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

【GitHub】超实用技巧,看这一篇就够了!

在GitHub中一模一样的项目管理:

【GitHub】超实用技巧,看这一篇就够了!

如果你想把你的 issues 添加到你的项目管理中来,你可以在页面右上方点击 Add Cards 搜索你想添加的,这里的搜索有特殊的语法 ( https://help.github.com/articles/searching-issues-and-pull-requests/ ), 比如输入 is:pr is:open ,意味着你可以找到所有打开的 PRs ,如果你想修复bugs,输入 label:bug 。

【GitHub】超实用技巧,看这一篇就够了!

你可以把存在的 notes 转换成 issues 。

【GitHub】超实用技巧,看这一篇就够了!

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

【GitHub】超实用技巧,看这一篇就够了!

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

缺点

  • 我在最近的三周开始使用 GitHub 来替代 Jira 来进行管理项目(一个小项目)。越用越喜欢。
  • 但是我不敢想象用它来进行敏捷开发,因为我想要正确的评估和计算所有事物。
  • 好消息是, GitHub 的项目管理功能很清爽简洁,不需要太大的学习成本,就可以轻松上手。

ZenHub( https://www.zenhub.com/ )弥补了 GitHub 不足,可以评估自己的issues,创建依赖,还有速度和燃尽图。看起来很牛逼。

了解更多:

https://help.github.com/articles/tracking-the-progress-of-your-work-with-project-boards/

#10 GitHub wiki

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

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

链接需要手动维护,但总的来说已经满足需求了。 查看Demo ( https://github.com/davidgilbertson/about-github/wiki )。

【GitHub】超实用技巧,看这一篇就够了!

我的建议:如果你的 README.md 文件太大了,而且你需要几个页面来更详细的描述你的文档,那么 GitHub wiki 是很适合你的。如果你的页面需要导航或者结构化,那么你需要想其他办法了。

#11 静态博客

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

非常简单, Jekyll 会用漂亮的主题去渲染你的 README.md 文件。比如这个README页面( https://github.com/davidgilbertson/about-github ):

【GitHub】超实用技巧,看这一篇就够了!

点击设置,选择 Jekyll 主题。

【GitHub】超实用技巧,看这一篇就够了!

我将得到一个 Jekyll 主题的页面( https://davidgilbertson.github.io/about-github/ ):

【GitHub】超实用技巧,看这一篇就够了!

我们通过一个 markdown 文件就创建一个静态网站,编辑修改非常方便,所以 GitHub 基本上可以当内容管理系统来用了。

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

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

你有一个网站需要展示一些文本,但是你又不想把文本存成 HTML 。

您想将文本块存储在某个地方,而且可以很方便的编辑,且不需要开发。

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

我用喜欢用 React ,所以这是一个 React组件的例子:得到 markdown 文件路径,然后请求,解析,最后渲染成HTML。

  1. class  Markdown  extends  React.Component {  
  2. constructor(props) {  
  3.     super(props);  
  4.     // 这里需要替换成你的url  
  5.     this.baseUrl  =  'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets' 
  6.     this.state  = {  
  7.     markdown:  '' 
  8.     };  
  9.  
  10. componentDidMount() {  
  11.     fetch(`${this.baseUrl}/${this.props.url}`)  
  12.         .then(response  =>  response.text())  
  13.         .then((markdown) => {  
  14.         this.setState({markdown});  
  15.     });  
  16.  
  17. render() {  
  18.     return (  
  19.     < div dangerouslySetInnerHTML={{__html:  marked(this.state.markdown)}} />  
  20.     );  
  21.  

我用的是marked( https://www.npmjs.com/package/marked ) 插件来解析markdown,然后你可以这样使用组件:

  1. const Page = () => (  
  2.     < div className="page" 
  3.         < div className="about-us" 
  4.         < Markdown url="about-us.md"  />  
  5.         div>  
  6.         < div className="disclaimer" 
  7.         < p>A very important disclaimer:p>  
  8.         < Markdown url="disclaimers/home-page-disclaimer.md"  />  
  9.         div>  
  10.     div>  
  11. ); 

至此,你可以把GitHub当成你的CMS了。

GitHub 谷歌插件

我只用这个 octobox谷歌插件( https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US )一段时间了,现在我推荐给你。

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

【GitHub】超实用技巧,看这一篇就够了!

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

【GitHub】超实用技巧,看这一篇就够了!

插件组合: Stylish 这个插件允许你把主题应用到任何一个网站:( https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe/related?hl=en ) 和 GitHub 黑色主题( https://userstyles.org/styles/37035/github-dark )。 为了看上去统一,把谷歌开发工具换成黑色(这个是内置的,在设置中打开),然后换成Atom One Dark 黑色主题 ( https://chrome.google.com/webstore/detail/atom-one-dark-theme/obfjhhknlilnfgfakanjeimidgocmkim?hl=en )。

最后

就这些。 希望对你有用,祝你生活愉快。

【编辑推荐】

  1. 2012年以来GitHub上最流行的编程语言
  2. GitHub 官方发布的编程语言趋势
  3. GitHub上最流行的函数响应式编程库:ReactiveCocoa与RxSwift框架大比较
  4. 推荐给程序员GitHub中的七大顶级生产力工具
  5. 2017 Android GitHub常用开源框架汇总
【责任编辑:未丽燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网管员必读—服务器与数据存储

《网管员必读—服务器与数据存储》全面、系统地介绍了在中、高级网络管理和网络工程实施中两个重要方面的主流技术和应用:硬件服务器和数据...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× CTO训练营(深圳站)