【GitHub】超實(shí)用技巧，看這一篇就夠了！
一直有小伙伴在后臺(tái)留言給程序和小七說，想多了解github的使用技巧，今天我們就整理了你在工作和學(xué)習(xí)中絕對(duì)用得到的12個(gè)超實(shí)用技巧，快來收吧~
#1 在GitHub.com上編輯代碼
先從一個(gè)大多數(shù)人都知道的開始吧~
在GitHub上打開一個(gè)文件(任何倉庫的任何文件)，在頁面的右上角有一個(gè)像小鉛筆的按鈕。點(diǎn)擊它，你就可以編輯文件了。當(dāng)你編輯完成，點(diǎn)擊 Propose file change ，GitHub將為你 fork 這個(gè)倉庫，然后創(chuàng)建 pull request 。
你不再需要 fork 這個(gè)倉庫， pull 文件到本地，修改文件后再提交到GitHub創(chuàng)建一個(gè)pull request。
#2 粘貼圖片
你可以不僅限于用文字來評(píng)論或者bug描述。你可以直接復(fù)制一個(gè)圖片到剪貼板，當(dāng)你粘貼的時(shí)候，你的圖片將會(huì)自動(dòng)上傳到云，然后展示在頁面上。
#3 美化代碼
如果你想編寫一個(gè)代碼塊，以三個(gè)反引號(hào)開頭，GitHub會(huì)嘗試猜測你用的什么語言。
但是如果你直接粘貼一個(gè)段Vue，Typescript或者JSX代碼，你可以指定出來以得到正確的語法高亮。
注意第一行的 ``jsx :
意味著這段代碼可以正確的顯示：
(順便說下，在 gist 中，如果你的 gist 文件后綴名是 .jsx ， 將自動(dòng)獲得JSX語法高亮)
下方鏈接是 所有支持的語法列表 ：
https://github.com/github/linguist/blob/fc1404985abb95d5bc33a0eba518724f1c3c252e/vendor/README.md
#4 在PRs中巧妙關(guān)閉issues
如果你創(chuàng)建了一個(gè) pull request 來修復(fù)問題單 #234. 你可以在 PR 的描述中寫 fixes #234 。
當(dāng)合并 PR 的時(shí)候，會(huì)自動(dòng)關(guān)閉那個(gè)issue。是不是很方便：)
了解更多 ：
https://help.github.com/articles/closing-issues-using-keywords/
#5 鏈接到評(píng)論
是否想要鏈接到某個(gè)特定的評(píng)論?
點(diǎn)擊評(píng)論框用戶名旁邊的時(shí)間，就可以得到鏈接了。
#6 鏈接到代碼
是否想要鏈接到一行特定代碼?
打開一個(gè)文件，點(diǎn)擊代碼左邊的行號(hào)，或者按住 shift 選擇多行。
分享這個(gè) URL ，可以鏈接到這些代碼。如果文件被修改了，會(huì)發(fā)生變化嗎?不會(huì)，因?yàn)檫@是永久鏈接。
#7 靈活使用GitHub地址欄
GitHub的頁面導(dǎo)航已經(jīng)做的很好了，但是有些時(shí)候直接在導(dǎo)航欄中輸入會(huì)更快。比如你想跳轉(zhuǎn)到一個(gè)分支，看下它與主干的區(qū)別，就可以直接在你倉庫的后面輸入 /compare/branch-name ：
與主干對(duì)比，兩個(gè)分支對(duì)比，輸入 /compare/**integration-branch...**my-branch
對(duì)于快捷鍵的話，ctrl + L 或者 cmd + L` 光標(biāo)將跳轉(zhuǎn)到地址欄，這使得在兩個(gè)分支切換變得很方便。
#8 創(chuàng)建復(fù)選框列表
你是否想在你提交的 issue 中看到復(fù)選框列表?
以及在 issue 列表中，看到 “2/5” 的進(jìn)度條?
交互式復(fù)選框語法如下：
- - [ ] Screen width (integer)
- - [x] Service worker support
- - [x] Fetch support
- - [ ] CSS flexbox support
- - [ ] Custom elements
在 項(xiàng)目管理 界面使用也一樣：
如果你不知道 項(xiàng)目管理 是什么，我接下來就講。
#9 在GitHub中進(jìn)行項(xiàng)目管理
我在大項(xiàng)目中通常使用 Jira 來管理項(xiàng)目，對(duì)于單人項(xiàng)目我一般用 Trello 。
就在幾周前我了解到GitHub也提供項(xiàng)目管理。就在你的倉庫中找到 Projects ，我都有點(diǎn)想把我在 Trello 的工作項(xiàng)移植過來了。
在GitHub中一模一樣的項(xiàng)目管理：
如果你想把你的 issues 添加到你的項(xiàng)目管理中來，你可以在頁面右上方點(diǎn)擊 Add Cards 搜索你想添加的，這里的搜索有特殊的語法 ( https://help.github.com/articles/searching-issues-and-pull-requests/ )， 比如輸入 is:pr is:open ，意味著你可以找到所有打開的 PRs ，如果你想修復(fù)bugs，輸入 label:bug 。
你可以把存在的 notes 轉(zhuǎn)換成 issues 。
或者在 issues 界面，把 issue 添加到項(xiàng)目管理中。
先在項(xiàng)目管理中把類別分好，再確定你把 issues 放入那個(gè)類目中。
缺點(diǎn)
- 我在最近的三周開始使用 GitHub 來替代 Jira 來進(jìn)行管理項(xiàng)目(一個(gè)小項(xiàng)目)。越用越喜歡。
- 但是我不敢想象用它來進(jìn)行敏捷開發(fā)，因?yàn)槲蚁胍_的評(píng)估和計(jì)算所有事物。
- 好消息是， GitHub 的項(xiàng)目管理功能很清爽簡潔，不需要太大的學(xué)習(xí)成本，就可以輕松上手。
ZenHub( https://www.zenhub.com/ )彌補(bǔ)了 GitHub 不足，可以評(píng)估自己的issues，創(chuàng)建依賴，還有速度和燃盡圖。看起來很牛逼。
了解更多：
https://help.github.com/articles/tracking-the-progress-of-your-work-with-project-boards/
#10 GitHub wiki
非結(jié)構(gòu)化網(wǎng)頁集合，也就是說你所有的網(wǎng)頁沒有從屬關(guān)系，沒有 上一段 和 下一段 按鈕，也沒有面包屑導(dǎo)航。
我先創(chuàng)建一個(gè) GitHub wiki ，我從 NodeJS 文檔找了幾個(gè)頁面作為 wiki 的頁面，然后創(chuàng)建一個(gè)側(cè)邊導(dǎo)航來模擬實(shí)際的結(jié)構(gòu)。側(cè)邊欄一直存在，不會(huì)對(duì)當(dāng)前頁面高亮。
鏈接需要手動(dòng)維護(hù)，但總的來說已經(jīng)滿足需求了。 查看Demo ( https://github.com/davidgilbertson/about-github/wiki )。
我的建議：如果你的 README.md 文件太大了，而且你需要幾個(gè)頁面來更詳細(xì)的描述你的文檔，那么 GitHub wiki 是很適合你的。如果你的頁面需要導(dǎo)航或者結(jié)構(gòu)化，那么你需要想其他辦法了。
#11 靜態(tài)博客
你可能已經(jīng)知道你可以使用 GitHub 部署靜態(tài)網(wǎng)頁，這個(gè)部分我將告訴你用 Jekyll (簡單博客靜態(tài)網(wǎng)站生成器)生成靜態(tài)網(wǎng)頁
非常簡單， Jekyll 會(huì)用漂亮的主題去渲染你的 README.md 文件。比如這個(gè)README頁面( https://github.com/davidgilbertson/about-github ):
點(diǎn)擊設(shè)置，選擇 Jekyll 主題。
我將得到一個(gè) Jekyll 主題的頁面( https://davidgilbertson.github.io/about-github/ ):
我們通過一個(gè) markdown 文件就創(chuàng)建一個(gè)靜態(tài)網(wǎng)站，編輯修改非常方便，所以 GitHub 基本上可以當(dāng)內(nèi)容管理系統(tǒng)來用了。
React和 Bootstrap 的網(wǎng)站已經(jīng)怎么做了。
#12 用GitHub作為CMS(內(nèi)容管理系統(tǒng))
你有一個(gè)網(wǎng)站需要展示一些文本，但是你又不想把文本存成 HTML 。
您想將文本塊存儲(chǔ)在某個(gè)地方，而且可以很方便的編輯，且不需要開發(fā)。
我的建議是文本寫在 markdown 文件中，然后存到你的倉庫。接著在前端寫一個(gè)組件來請(qǐng)求文件然后渲染。
我用喜歡用 React ，所以這是一個(gè) React組件的例子：得到 markdown 文件路徑，然后請(qǐng)求，解析，最后渲染成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( https://www.npmjs.com/package/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當(dāng)成你的CMS了。
GitHub 谷歌插件
我只用這個(gè) octobox谷歌插件( https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=en-US )一段時(shí)間了，現(xiàn)在我推薦給你。
它在左側(cè)生成一個(gè)面板，通過樹形結(jié)構(gòu)來瀏覽你的倉庫。
說到顏色，我怎么容忍一個(gè)蒼白的GitHub呢?
插件組合： Stylish 這個(gè)插件允許你把主題應(yīng)用到任何一個(gè)網(wǎng)站：( https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe/related?hl=en ) 和 GitHub 黑色主題( https://userstyles.org/styles/37035/github-dark )。 為了看上去統(tǒng)一，把谷歌開發(fā)工具換成黑色(這個(gè)是內(nèi)置的，在設(shè)置中打開)，然后換成Atom One Dark 黑色主題 ( https://chrome.google.com/webstore/detail/atom-one-dark-theme/obfjhhknlilnfgfakanjeimidgocmkim?hl=en )。
最后
就這些。 希望對(duì)你有用，祝你生活愉快。
