【译】你可以用GitHub做的12件 Cool 事情

image

原文链接

1 在 GitHub.com 编辑代码

我将从我认为大家都知道的一件事情开始(尽管我是直到一周前才知道)。

当你在 GitHub 查看文件时(任何文本文件,任何仓库中),右上角会有一个小铅笔图标,点击它就可以编辑文件了。完成之后点击 Propose file change 按钮 GitHub 将会自动帮你 fork 该项目并且创建一个 pull request

很厉害吧!他自动帮你 fork 了该 repo。

不再需要 fork , pull ,本地编辑再 push 以及创建一个 PR 这样的流程了。

image

这非常适合修复编写代码中出现的拼写错误和修正一个不太理想的想法。

2 粘贴图片

你不仅仅受限于输入文本和描述问题,你知道你可以直接从粘贴板中粘贴图片吗?当你粘贴时,你会看到图片已经被上传了(毫无疑问被上传到云端)之后会变成 Markdown 语法来显示图片。

3 格式化代码

如果你想写一段代码,你可以三个反引号开始 —— 就像你在研究MarkDown时所学到的 —— 之后 GitHub 会试着猜测你写的语言。

但如果你写了一些类似于 Vue, Typescript, JSX 这样的语言,你可以明确指定得到正确的高亮。

注意第一行中的

```jsx

这意味着代码段将会呈现出:

(这个扩展于 gists 。顺便说一句,如果你使用 .jsx 后缀,就会得到JSX的语法高亮)

这是一个所有受支持的语法列表

4 在 PR 中用关键词关闭 Issues

假设你创建了一个用于修复 Issues #234 的 PR ,你可以在你 PR 的描述中填写 fixes #234 (或是在你 PR 任意评论中填写都是可以的)。
之后合并这个 PR 时将会自动关闭填写的 Issues。怎么样,很 cool 吧。

了解是更多相关的内容

5 链接到评论

你是否有过想要链接到特殊 comment 的想法但却无法实现?那是因为你不知道怎么做。朋友那都是过去式了,现在我就告诉你,点击用户名旁边的日期/时间即可链接到该 comment

6 链接到代码

我知道你想链接到具体的代码行上。

尝试:查看文件时,点击代码旁边的行号。

看到了吧,浏览器的 URL 已经被更新为行号了。如果你按住 shift,同时点击其他行号,URL 再次被更新,并且你也高亮显示页面中的一段代码。

分享这个 URL ,访问时将会链接到该文件已经选中的那些代码段。

但等一下,那指向的是当前的分支,如果文件发生了改变呢?也许一个在当前状态连接到文件的永久连接正是你想要的。

我很懒,所以用一张截图展示以上的所有操作。

谈到网址。。。

7 像命令行一样使用 GitHub 链接

使用 GitHub 自带的 UI 浏览也还不错,但有时直接在 URL 中输入是最快的方法。比如,我想跳转到我正在编辑的分支并和 master 进行对比,就可以在项目名称后面接上 /compare/branch-name

与选中分支的对比页将会显示出来:


以上就是和 master 分支的差异,如果想要合并分支的话,只需要输入 /compare/integration-branch...my-branch 即可。

你还可以利用快捷键达到同样的效果,使用 ctrl + L 或者 cmd + L 可以将光标移动到 URL 上(至少在 Chrome 中可以)。 加上浏览器的自动补全 —— 你就可以在两个分支之间轻松切换了。

8 在Issues创建列表

你想在你的 issue 中看到复选框列表吗?

你想在查看 issue 列表是它们以好看的 2 of 5 进度条呈现吗?

太好了!你可以用以下语法来创建一个交互性的复选框:

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

是由一个空格、中横线、空格、左括号、空格(或者是 X )、右括号、空格以及一些文本组成。

你甚至可以真正的 选中/取消 这些复选框!基于某些原因,对于我来说你看起来像是技术魔力。是真的能够选中这些复选框!甚至它还更新了底层源码。

ps:以下包括第九点 基于GitHub的项目面板 由于用的不多就没有翻译。

10 GitHub wiki

作为一个像维基百科那样的非结构化的页面集合, GitHub Wiki的供给(我把它称之为 Gwiki ) 是一个非常棒的功能。

对于结构化的页面来说 —— 例如你的文档:不能说这个页面是其他页面的子页面,或则是有 “下一节”,“上一节” 这样的便捷按钮。并且 HanselGretel 也没有,因为结构化页面并没有 breadcrumbs 这样的设计。

我们继续,让 Gwiki 动起来,我从 NodeJS 的文档中复制了几页来作为 wiki 页面。然后创建了一个自定义侧边栏,帮助我更好地模拟一些实际的目录结构。尽管它不会突出显示你当前的页面位置,但侧边栏会一直存在。

这些链接需要你手动维护,但总的来说,我认为它可以做得很好。 如果需要的话可以看看

虽然它与 GitBook ( Redux 文档所使用的)或者是定制网站相比仍有差距。但在你的 repo 中它有 80% 完全值得信赖的。

我的建议是: 如果你已经有多个 README.md 文件,并且想要一些关于用户指南或更详细的文档的不同的页面,那么你应该选择 Gwiki

如果缺乏结构化/导航开始让你不爽的话,那就试试其他的吧。

11 GitHub Pages

你可能已经知道使用 GitHub Pages 来托管一个静态网站。如果你不知道,现在就来学习,这一节是专门用于讨论使用 Jekyll 来构建一个站点的。

最简单的就是: GitHub Pages + Jekyll会通过一个漂亮的主题来渲染你的 README.md 文件。例如:通过 about-github 来查看的我的 README 页面。

如果我在 GitHub 中点击了 settings选项,切换到 Github Pages 设置,然后选择一个 Jekyll theme。。。

我就可以得到 Jekyll-themed 页面

从这点上我可以主要依据易编辑的 Markdown 文件来构建一个完整的静态站点。本质上是把 GitHub 变成了 CMS

虽然我没有实际使用过,但是 React Bootstrap 的网站都是使用它来构建的。所以它不会糟糕。

注意:它要求 Ruby 运行本地环境( Windows 自行安装, macOS 自带)。

12 把 GitHub 当做 CRM 使用

假设你有一个存有一些文本内容的网站,你不想将文本内容存储于真正的 HTML 源码中。

相反的,你想要将这些文本块存储于非开发人员能轻松的进行编辑的地方。可能是一个版本控制系统,甚至是一个审核流程。

我的建议是:使用 GitHub 厂库中的 Markdown 文件来存储这些文本内容,然后使用前端组件来拉取这些文本块并展示在页面上。

我是搞 React 的,所以这有一个 解析 Markdown 的组件例子,给定一些 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 (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}

奖励环节 —— GitHub 工具

我已经使用了 Octotree Chrome extension 有段时间了,现在我向大家推荐它!
无论你是在查看哪个 repo 它都会在左侧给你一个树状面板。

image

通过这个视频我了解到了 octobox,它是用于管理你的 GitHub Issues 收件箱,看起来相当不错!
以上就是我针对于octobox的全部想法。

其他

就是这样了!我希望这里至少有三件事是你还不知道的。

最后: hava a nice day!

个人博客:http://crossoverjie.top

image
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,306评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,657评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,928评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,688评论 0 220
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,105评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,024评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,159评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,937评论 0 212
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,689评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,851评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,325评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,651评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,364评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,192评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,985评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,154评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,955评论 2 279

推荐阅读更多精彩内容