【GitHub】12個實用技巧

---

#1 在GitHub.com上編輯代碼

先從一個大多數人都知道的開始吧（儘管我是上個星期才知道的）

在GitHub上打開一個文件（任何倉庫的任何文件），在頁面的右上角有一個像小鉛筆的按鈕。點擊它，你就能夠編輯文件了。當你編輯完成，點擊Propose file change，GitHub將爲你fork這個倉庫，而後建立pull request。

你再也不須要fork這個倉庫，pull文件到本地，修改文件後再提交到GitHub建立一個pull request。

#2 粘貼圖片

你能夠不只限於用文字來評論或者bug描述。你能夠直接複製一個圖片到剪貼板，當你粘貼的時候，你的圖片將會自動上傳到雲，而後展現在頁面上。

#3 美化代碼

若是你想編寫一個代碼塊，以三個反引號開頭，GitHub會嘗試猜想你用的什麼語言。

可是若是你直接粘貼一個段Vue，Typescript或者JSX代碼，你能夠指定出來以獲得正確的語法高亮。

注意第一行的 ```jsx :

意味着這段代碼能夠正確的顯示：

(順便說下，在gist中，若是你的gist文件後綴名是.jsx， 將自動得到JSX語法高亮)

這是全部支持的語法列表.

#4 在PRs中巧妙關閉issues

若是你建立了一個pull request來修復問題單 #234. 你能夠在PR的描述中寫fixes #234。

當合並PR的時候，會自動關閉那個issue。是否是很方便：）

瞭解更多。

#5 連接到評論

是否想要連接到某個特定的評論？

點擊評論框用戶名旁邊的時間，就能夠獲得連接了。

#6 連接到代碼

是否想要連接到一行特定代碼？

打開一個文件，點擊代碼左邊的行號，或者按住shift選擇多行。

分享這個URL，能夠連接到這些代碼。若是文件被修改了，會發生變化嗎？不會，由於這是永久連接。

#7 靈活使用GitHub地址欄

GitHub的頁面導航已經作的很好了，可是有些時候直接在導航欄中輸入會更快。好比你想跳轉到一個分支，看下它與主幹的區別，就能夠直接在你倉庫的後面輸入/compare/branch-name：

與主幹對比，兩個分支對比，輸入/compare/**integration-branch...**my-branch

對於快捷鍵的話，ctrl+L或者cmd+L` 光標將跳轉到地址欄，這使得在兩個分支切換變得很方便。

#8 建立複選框列表

你是否想在你提交的issue中看到複選框列表？

以及在issue列表中，看到「2/5」的進度條？

交互式複選框語法以下：

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

在項目管理界面使用也同樣：

若是你不知道項目管理是什麼，我接下來就講。

#9 在GitHub中進行項目管理

我在大項目中一般使用Jira來管理項目，對於單人項目我通常用Trello。

就在幾周前我瞭解到GitHub也提供項目管理。就在你的倉庫中找到Projects，我都有點想把我在Trello的工做項移植過來了。

在GitHub中如出一轍的項目管理：

若是你想把你的issues添加到你的項目管理中來，你能夠在頁面右上方點擊Add Cards搜索你想添加的，這裏的搜索有特殊的語法，好比輸入is:pr is:open，意味着你能夠找到全部打開的PRs，若是你想修復bugs，輸入label:bug。

你能夠把存在的notes轉換成issues。

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

先在項目管理中把類別分好，再肯定你把issues放入那個類目中。

缺點

我在最近的三週開始使用GitHub來替代Jira來進行管理項目（一個小項目）。越用越喜歡。

可是我不敢想象用它來進行敏捷開發，由於我想要正確的評估和計算全部事物。

好消息是，GitHub的項目管理功能很清爽簡潔，不須要太大的學習成本，就能夠輕鬆上手。

ZenHub彌補了GitHub不足，能夠評估本身的issues，建立依賴，還有速度和燃盡圖。看起來很牛逼。

瞭解更多

#10 GitHub wiki

非結構化網頁集合，也就是說你全部的網頁沒有從屬關係，沒有上一段和下一段按鈕，也沒有面包屑導航。

我先建立一個GitHub wiki，我從NodeJS文檔找了幾個頁面做爲wiki的頁面，而後建立一個側邊導航來模擬實際的結構。側邊欄一直存在，不會對當前頁面高亮。

連接須要手動維護，但總的來講已經知足需求了。 查看Demo 。

個人建議：若是你的 README.md 文件太大了，並且你須要幾個頁面來更詳細的描述你的文檔，那麼GitHub wiki是很適合你的。若是你的頁面須要導航或者結構化，那麼你須要想其餘辦法了。

#11 靜態博客

你可能已經知道你可使用GitHub部署靜態網頁，這個部分我將告訴你用Jekyll（簡單博客靜態網站生成器）生成靜態網頁

很是簡單，Jekyll會用漂亮的主題去渲染你的README.md文件。好比這個README頁面（連接）:

點擊設置，選擇Jekyll主題。

我將獲得一個Jekyll主題的頁面:

咱們經過一個markdown文件就建立一個靜態網站，編輯修改很是方便，因此GitHub基本上能夠當內容管理系統來用了。

React和Bootstrap的網站已經怎麼作了。

#12 用GitHub做爲CMS(內容管理系統)

你有一個網站須要展現一些文本，可是你又不想把文本存成HTML。

您想將文本塊存儲在某個地方，並且能夠很方便的編輯，且不須要開發。

個人建議是文本寫在markdown文件中，而後存到你的倉庫。接着在前端寫一個組件來請求文件而後渲染。

我用喜歡用React，因此這是一個<Markdown>React組件的例子：獲得markdown文件路徑，而後請求，解析，最後渲染成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 插件來解析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 谷歌插件

我只用這個 octobox谷歌插件一段時間了，如今我推薦給你。

它在左側生成一個面板，經過樹形結構來瀏覽你的倉庫。

這個視屏瞭解如何使用 octobox谷歌插件。

說到顏色，我怎麼容忍一個蒼白的GitHub呢？

插件組合： Stylish（這個插件容許你把主題應用到任何一個網站） 和 GitHub 黑色主題。
爲了看上去統一，把谷歌開發工具換成黑色（這個是內置的，在設置中打開），而後換成Atom One Dark 黑色主題 。

最後

就這些。
但願對你有用，祝你生活愉快。

原文：medium.com/@david.gilb…