美文网首页嵌牛IT观察
如何有效地使用 GitHub?

如何有效地使用 GitHub?

作者: 莫斯科的雨夜 | 来源:发表于2018-11-03 08:49 被阅读2次

    姓名:闫伟  学号:15020150038

    转载自:https://www.zhihu.com/question/21248859/answer/512649181

    【嵌牛导读】:gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。

    【嵌牛鼻子】:Github Git

    【嵌牛提问】:如何有效地使用 GitHub?

    【嵌牛正文】:

    GitHub.com上编辑代码

    我(作者David Gilbertson——译者注)先说一个大部分人都知道的事儿(虽然我是直到一个星期前才知道的)。

    你在 GitHub 上查看一个文件(任何文本文件或仓库)时,在右上角会发现一个很小的铅笔图标。如果你点击它,就可以编辑该文件。等你完成后,在页面上点击“Propose File Change”, GitHub 就会为你 fork 这个仓库,创建一个 pull request。

    很酷吧?GitHub 为你创建了一个分支!

    不需要在本地 fork,pull,修改,push 以及创建一个 PR。

    这样做能很好地帮你修改排版错误,以及防止别人恶意编辑代码。

    粘贴图像

    其实你在 comment 和 issue 描述里不仅仅能编辑文本,还能直接从剪贴板直接粘贴图片。在你粘贴图片的时候,你会发现图片上传到了云端,显示为 Markdown 格式。

    既整洁又干净。

    格式化代码

    如果你想写一个代码块,可以首先写三个反引号——就跟你在 GitHub 的 Mastering Markdown 页面学到的那样,然后 GitHub 就会猜出来你要写哪种语言。

    但是如果你写的是 Vue、Typescript 和 JSX 这样的语言脚本,可以明确地写出了,获得正确的高亮显示。

    注意这里第一行用了```jsx :

    意味着正确渲染了脚本:

    顺便说一下,这个也能扩展到 gists。如果你给 gist 扩展 .jsx,会得到 JSX 语法的高亮显示。

    这里是全部支持的语法列表。

    使用“咒语”关闭 PR 中的 issue

    比方说,你正在创建一个 Pull request 来修复 issue#234,你可以将“fixes#234”这段文本放在你的 PR 描述里(或者 PR 上的任何 comment 里)。

    然后合并 PR 就会自动关闭这个 issue,是不是很酷?

    想学习更多“咒语”?看这里

    链接到 comment

    有没有想过链接到某个具体的 comment,但有不知道怎么弄?我来告诉你,点击名字旁边的日期/时间就能链接到 comment 了。

    链接到代码

    想链接到代码的具体一行?我懂了。

    试试这个操作:查看该文件时,点击该代码旁边的行数。

    然后你就会发现 URL 被行数更新了!如果你按住 shift,点击另一个行数,会惊讶地看到 URL 再次随之更新,而且这两行之间的代码都被高亮显示了。

    分享该 URL 就会链接到这个文件和这些代码行。但是等等,这只能指向当前分支,如果文件改变了呢?那得需要链到文件当前状态的永久链接。

    我这人很懒,所以我把上述操作用一张截图展示出来算了:

    说到URL···

    像代码行一样使用GitHub URL

    使用 GitHub 的用户操作界面在上面逛来逛去当然也很好,不过有时想抵达目标位置的最快方法还是使用 URL。比如,我想跳到我正在处理的一个分支,看看和 master 的差异,那么我就可以在 URL 中的仓库名字后面输入 //compare/branch-name.

    然后就会跳转到该分支与 master 的差异页面:

    不过这是和 master 的差异,如果我是在集成分支上工作,就输入 /compare/integration-branch...my-branch

    这里也有快捷键操作,Ctrl+L 或 cmd+L 会让光标直接跳到 URL 里(至少在 Chrome 上可以)。这样以来,再搭配上你的浏览器做一些自动完成的工作,可以让你很方便地在分支之间切换。

    小提示:使用键盘上的方向键选择 Chrome 的自动完成建议,按 shift+delete 从网页记录中移除某一项(比如合并了一个分支后)。

    在issue中创建列表

    想在你的 issue 里看到一列选框吗?

    当你查看排成列的 issue 时,想不想让它们展示为“2 of 5”这样的整洁形式?

    那么用下面的语法就能创建出交互式的选框:

    - [ ] Screen width (integer)

    - [x] Service worker support

    - [x] Fetch support

    - [ ] CSS flexbox support

    - [ ] Custom elements

    然后勾选这些选框就OK了。

    GitHub 上的 Project board

    我之前在大项目上一直使用 Jira,对于单个项目一直使用 Trello,相当喜欢它们。

    但是最近我才知道 GitHub 也有类似的功能,就在仓库中的 Project 选项卡上。下面是 Trello 上的:

    这是 GitHub 上的:

    我个人出于方便考虑,把这些都添加为了“notes”——意思是它们不是实际的 GitHub issue。

    而 GitHub 上管理任务的一个大好处就是它和其余的仓库整合在了一起,所以可以将当前 issue 从仓库添加到 Project Board 上。

    你可以点击右上角的“Add Cards”,找到你想添加的东西。这里有个非常方便的搜索语法,比如输入 is:pr is:open,就可以把任何公开的 PR 拖到 Project Board 上,再比如想修复某些 bug,就输入 label:bug。

    更多搜索语法查看这里

    你也可以将当前 notes 转换为 issues:

    或者从当前 issue 页面中将其添加到右侧窗格中的 project 里。

    让仓库中的‘任务’定义和实现该任务的代码中的定义一致有着巨大的好处,这意味着每行代码分配以及分析代码的成因都可以在 Project Board 上完成,不用去 Jira/Trello 上了。

    当然它也有缺点,就是功能比较少。你可以试试Zenhub,它有效地扩展了 GitHub。

    更多关于 Project Board 的资料阅读

    GitHub Wiki

    和维基百科类似,GitHub 也有个 GitHub Wiki 功能,处理非结构化的页面集合。

    对于非结构化页面集合,比如你的文档,是没有“下一节”“前一节”这样的方便按钮的。

    这时就可以用 GitHub Wiki 功能,我自己的 NodeJS 就弄成了类似维基页面的样子,创建了一个自定义工具栏,参考这里

    我的建议:如果你觉得单单一个README.md文件不够用,想多几个不同的页面展示用户指南或更详细的文档,那么 GitHub Wiki 就是你的菜。

    GitHub Pages(配合Jekyll)

    你可能知道可以用 GitHub Pages 托管一个静态网站。如果不知道,那就赶紧去学习一个。

    不过在这里我具体讲讲怎么用 Jekyll 配合 GitHub 创建一个静态网站。

    以最简单的方式,GitHub Pages+Jekyll 能将你的README.md渲染为非常美观的主题。比如,我的 readme 页面是这样:

    如果点击 GitHub 上“my site”的“设置”选项卡,打开 GitHub Pages,选一个 Jekyll 主题:

    我就会得到一个漂亮的 Jekyll 主题页面:

    从这里再往下我就能根据易于编辑的 Markdown 文件创建一个静态网站,把 GitHub 变成一个 CMS。注意,需要用 Ruby 在本地运行,Mac 自带,Windows 需另行安装。

    将 GitHub 当 CMS 用

    比方说,你有个网站,上面有一些文本内容,但你不想将文本放在 HTML 标记里面,而是将文本块放在其它地方,这样好让不懂编程的人也能编辑文本。可能还想再来点某种形式的视觉操作。

    我的建议是:用存储在仓库中的 Markdown 文件来保存这些文本。然后在前端用一个组件抓取这些文本,把它们呈现在页面上。

    我是用 React 的,所以这里举个 <Markdown> 组件示例,用来抓取、解析文本并将其渲染为 HTML。

    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 (   );    

    }

    }

    这会指向我的示例仓库,它在 in/text-snippets 上有一些 Markdown 文件。

    你可以使用如下所示的组件:

    const Page = () => (  A very important disclaimer:);

    那么现在我们就将 GitHub 变成了 CMS,无论处理多大的文本内容都可以。

    上面的示例仅在浏览器安装了组件后才抓取 Markdown 文件,如果你想有个静态网站,还需要用服务器渲染。

    最后推荐两个实用的 GitHub 工具

    我墙裂推荐一个叫Octotree的 Chrome 扩展程序。

    它能在页面左侧提供一个面板,以树状图的形式呈现你正在查看的仓库。

    还有 Stylish 的 GitHub Dark 插件,能让你的 GitHub 变身为暗黑主题:

    地址:

    https://userstyles.org/styles/37035/github-dark

    就这些,希望这 12 个操作能帮你更高效的使用 GitHub。

    相关文章

      网友评论

        本文标题:如何有效地使用 GitHub?

        本文链接:https://www.haomeiwen.com/subject/rggqxqtx.html