原文鏈接
1 在 GitHub.com 編輯代碼
我將從我認(rèn)為大家都知道的一件事情開始(盡管我是直到一周前才知道)榛瓮。
當(dāng)你在 GitHub 查看文件時(shí)(任何文本文件，任何倉庫中)鹃唯，右上角會(huì)有一個(gè)小鉛筆圖標(biāo)阔蛉，點(diǎn)擊它就可以編輯文件了畴椰。完成之后點(diǎn)擊 Propose file change 按鈕 GitHub 將會(huì)自動(dòng)幫你 fork 該項(xiàng)目并且創(chuàng)建一個(gè) pull request 臊诊。
很厲害吧！他自動(dòng)幫你 fork 了該 repo斜脂。
不再需要 fork , pull ,本地編輯再 push 以及創(chuàng)建一個(gè) PR 這樣的流程了抓艳。
這非常適合修復(fù)編寫代碼中出現(xiàn)的拼寫錯(cuò)誤和修正一個(gè)不太理想的想法。
2 粘貼圖片
你不僅僅受限于輸入文本和描述問題帚戳，你知道你可以直接從粘貼板中粘貼圖片嗎玷或？當(dāng)你粘貼時(shí)，你會(huì)看到圖片已經(jīng)被上傳了(毫無疑問被上傳到云端)之后會(huì)變成 Markdown 語法來顯示圖片片任。
3 格式化代碼
如果你想寫一段代碼偏友，你可以三個(gè)反引號(hào)開始 —— 就像你在研究MarkDown時(shí)所學(xué)到的 —— 之后 GitHub 會(huì)試著猜測(cè)你寫的語言。
但如果你寫了一些類似于 Vue, Typescript, JSX 這樣的語言对供，你可以明確指定得到正確的高亮位他。
注意第一行中的
```jsx
這意味著代碼段將會(huì)呈現(xiàn)出:
(這個(gè)擴(kuò)展于 gists 。順便說一句产场，如果你使用 .jsx 后綴鹅髓，就會(huì)得到JSX的語法高亮)
這是一個(gè)所有受支持的語法列表。
4 在 PR 中用關(guān)鍵詞關(guān)閉 Issues
假設(shè)你創(chuàng)建了一個(gè)用于修復(fù) Issues #234 的 PR ,你可以在你 PR 的描述中填寫 fixes #234 (或是在你 PR 任意評(píng)論中填寫都是可以的)京景。
之后合并這個(gè) PR 時(shí)將會(huì)自動(dòng)關(guān)閉填寫的 Issues窿冯。怎么樣,很 cool 吧。
了解是更多相關(guān)的內(nèi)容确徙。
5 鏈接到評(píng)論
你是否有過想要鏈接到特殊 comment 的想法但卻無法實(shí)現(xiàn)靡菇？那是因?yàn)槟悴恢涝趺醋觥Ｅ笥涯嵌际沁^去式了米愿，現(xiàn)在我就告訴你厦凤，點(diǎn)擊用戶名旁邊的日期/時(shí)間即可鏈接到該 comment 。
6 鏈接到代碼
我知道你想鏈接到具體的代碼行上育苟。
嘗試:查看文件時(shí)较鼓，點(diǎn)擊代碼旁邊的行號(hào)。
看到了吧违柏，瀏覽器的 URL 已經(jīng)被更新為行號(hào)了博烂。如果你按住 shift,同時(shí)點(diǎn)擊其他行號(hào)，URL 再次被更新漱竖，并且你也高亮顯示頁面中的一段代碼禽篱。
分享這個(gè) URL ，訪問時(shí)將會(huì)鏈接到該文件已經(jīng)選中的那些代碼段馍惹。
但等一下躺率，那指向的是當(dāng)前的分支玛界，如果文件發(fā)生了改變呢？也許一個(gè)在當(dāng)前狀態(tài)連接到文件的永久連接正是你想要的悼吱。
我很懶慎框，所以用一張截圖展示以上的所有操作。
談到網(wǎng)址后添。笨枯。。
7 像命令行一樣使用 GitHub 鏈接
使用 GitHub 自帶的 UI 瀏覽也還不錯(cuò)遇西，但有時(shí)直接在 URL 中輸入是最快的方法馅精。比如，我想跳轉(zhuǎn)到我正在編輯的分支并和 master 進(jìn)行對(duì)比粱檀，就可以在項(xiàng)目名稱后面接上 /compare/branch-name 硫嘶。
與選中分支的對(duì)比頁將會(huì)顯示出來:
以上就是和 master 分支的差異，如果想要合并分支的話梧税，只需要輸入 /compare/integration-branch...my-branch 即可。
你還可以利用快捷鍵達(dá)到同樣的效果称近，使用 ctrl + L 或者 cmd + L 可以將光標(biāo)移動(dòng)到 URL 上(至少在 Chrome 中可以)第队。 加上瀏覽器的自動(dòng)補(bǔ)全 —— 你就可以在兩個(gè)分支之間輕松切換了。
8 在Issues創(chuàng)建列表
你想在你的 issue 中看到復(fù)選框列表嗎?
你想在查看 issue 列表是它們以好看的 2 of 5 進(jìn)度條呈現(xiàn)嗎刨秆？
太好了凳谦！你可以用以下語法來創(chuàng)建一個(gè)交互性的復(fù)選框:
- [ ] Screen width (integer)
- [x] Service worker support
- [x] Fetch support
- [ ] CSS flexbox support
- [ ] Custom elements
是由一個(gè)空格、中橫線衡未、空格尸执、左括號(hào)、空格(或者是 X )缓醋、右括號(hào)如失、空格以及一些文本組成。
你甚至可以真正的 選中/取消 這些復(fù)選框送粱！基于某些原因褪贵，對(duì)于我來說你看起來像是技術(shù)魔力。是真的能夠選中這些復(fù)選框抗俄！甚至它還更新了底層源碼脆丁。
ps：以下包括第九點(diǎn) 基于GitHub的項(xiàng)目面板 由于用的不多就沒有翻譯。
10 GitHub wiki
作為一個(gè)像維基百科那樣的非結(jié)構(gòu)化的頁面集合动雹， GitHub Wiki的供給(我把它稱之為 Gwiki ) 是一個(gè)非常棒的功能槽卫。
對(duì)于結(jié)構(gòu)化的頁面來說 —— 例如你的文檔：不能說這個(gè)頁面是其他頁面的子頁面，或則是有 “下一節(jié)”胰蝠，“上一節(jié)” 這樣的便捷按鈕歼培。并且 Hansel 和 Gretel 也沒有震蒋，因?yàn)榻Y(jié)構(gòu)化頁面并沒有 breadcrumbs 這樣的設(shè)計(jì)。
我們繼續(xù)丐怯，讓 Gwiki 動(dòng)起來喷好，我從 NodeJS 的文檔中復(fù)制了幾頁來作為 wiki 頁面。然后創(chuàng)建了一個(gè)自定義側(cè)邊欄读跷，幫助我更好地模擬一些實(shí)際的目錄結(jié)構(gòu)梗搅。盡管它不會(huì)突出顯示你當(dāng)前的頁面位置，但側(cè)邊欄會(huì)一直存在效览。
這些鏈接需要你手動(dòng)維護(hù)无切，但總的來說，我認(rèn)為它可以做得很好丐枉。 如果需要的話可以看看哆键。
雖然它與 GitBook ( Redux 文檔所使用的)或者是定制網(wǎng)站相比仍有差距。但在你的 repo 中它有 80% 完全值得信賴的瘦锹。
我的建議是: 如果你已經(jīng)有多個(gè) README.md 文件籍嘹，并且想要一些關(guān)于用戶指南或更詳細(xì)的文檔的不同的頁面，那么你應(yīng)該選擇 Gwiki弯院。
如果缺乏結(jié)構(gòu)化/導(dǎo)航開始讓你不爽的話辱士，那就試試其他的吧。
11 GitHub Pages
你可能已經(jīng)知道使用 GitHub Pages 來托管一個(gè)靜態(tài)網(wǎng)站听绳。如果你不知道颂碘，現(xiàn)在就來學(xué)習(xí)，這一節(jié)是專門用于討論使用 Jekyll 來構(gòu)建一個(gè)站點(diǎn)的椅挣。
最簡(jiǎn)單的就是： GitHub Pages + Jekyll會(huì)通過一個(gè)漂亮的主題來渲染你的 README.md 文件头岔。例如:通過 about-github 來查看的我的 README 頁面。
如果我在 GitHub 中點(diǎn)擊了 settings選項(xiàng)鼠证，切換到 Github Pages 設(shè)置峡竣，然后選擇一個(gè) Jekyll theme。量九。澎胡。
我就可以得到 Jekyll-themed 頁面。
從這點(diǎn)上我可以主要依據(jù)易編輯的 Markdown 文件來構(gòu)建一個(gè)完整的靜態(tài)站點(diǎn)娩鹉。本質(zhì)上是把 GitHub 變成了 CMS攻谁。
雖然我沒有實(shí)際使用過，但是 React Bootstrap 的網(wǎng)站都是使用它來構(gòu)建的弯予。所以它不會(huì)糟糕戚宦。
注意:它要求 Ruby 運(yùn)行本地環(huán)境( Windows 自行安裝， macOS 自帶)锈嫩。
12 把 GitHub 當(dāng)做 CRM 使用
假設(shè)你有一個(gè)存有一些文本內(nèi)容的網(wǎng)站受楼，你不想將文本內(nèi)容存儲(chǔ)于真正的 HTML 源碼中垦搬。
相反的，你想要將這些文本塊存儲(chǔ)于非開發(fā)人員能輕松的進(jìn)行編輯的地方艳汽『锓。可能是一個(gè)版本控制系統(tǒng)，甚至是一個(gè)審核流程河狐。
我的建議是:使用 GitHub 廠庫中的 Markdown 文件來存儲(chǔ)這些文本內(nèi)容米绕，然后使用前端組件來拉取這些文本塊并展示在頁面上。
我是搞 React 的馋艺，所以這有一個(gè) 解析 Markdown 的組件例子栅干，給定一些 Markdown 文件路徑，它將會(huì)自動(dòng)拉取并作為 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)}} />
);
}
}
獎(jiǎng)勵(lì)環(huán)節(jié) —— GitHub 工具
我已經(jīng)使用了 Octotree Chrome extension 有段時(shí)間了碱鳞，現(xiàn)在我向大家推薦它！
無論你是在查看哪個(gè) repo 它都會(huì)在左側(cè)給你一個(gè)樹狀面板踱蛀。
通過這個(gè)視頻我了解到了 octobox窿给，它是用于管理你的 GitHub Issues 收件箱，看起來相當(dāng)不錯(cuò)率拒！
以上就是我針對(duì)于octobox的全部想法崩泡。
其他
就是這樣了！我希望這里至少有三件事是你還不知道的俏橘。
最后: hava a nice day！
個(gè)人博客：http://crossoverjie.top圈浇。
