原文鏈接
1 在 GitHub.com 編輯代碼
我將從我認(rèn)為大家都知道的一件事情開始(盡管我是直到一周前才知道)。
當(dāng)你在 GitHub 查看文件時(shí)(任何文本文件，任何倉(cāng)庫(kù)中)，右上角會(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 粘貼圖片
你不僅僅受限于輸入文本和描述問(wèn)題，你知道你可以直接從粘貼板中粘貼圖片嗎？當(dāng)你粘貼時(shí)，你會(huì)看到圖片已經(jīng)被上傳了(毫無(wú)疑問(wèn)被上傳到云端)之后會(huì)變成 Markdown 語(yǔ)法來(lái)顯示圖片。
3 格式化代碼
如果你想寫一段代碼，你可以三個(gè)反引號(hào)開始 —— 就像你在研究MarkDown時(shí)所學(xué)到的 —— 之后 GitHub 會(huì)試著猜測(cè)你寫的語(yǔ)言。
但如果你寫了一些類似于 Vue, Typescript, JSX 這樣的語(yǔ)言，你可以明確指定得到正確的高亮。
注意第一行中的
```jsx
這意味著代碼段將會(huì)呈現(xiàn)出:
(這個(gè)擴(kuò)展于 gists 。順便說(shuō)一句，如果你使用 .jsx 后綴，就會(huì)得到JSX的語(yǔ)法高亮)
這是一個(gè)所有受支持的語(yǔ)法列表。
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)論
你是否有過(guò)想要鏈接到特殊 comment 的想法但卻無(wú)法實(shí)現(xiàn)？那是因?yàn)槟悴恢涝趺醋?。朋友那都是過(guò)去式了，現(xiàn)在我就告訴你，點(diǎn)擊用戶名旁邊的日期/時(shí)間即可鏈接到該 comment 。
6 鏈接到代碼
我知道你想鏈接到具體的代碼行上。
嘗試:查看文件時(shí)，點(diǎn)擊代碼旁邊的行號(hào)。
看到了吧，瀏覽器的 URL 已經(jīng)被更新為行號(hào)了。如果你按住 shift,同時(shí)點(diǎn)擊其他行號(hào)，URL 再次被更新，并且你也高亮顯示頁(yè)面中的一段代碼。
分享這個(gè) URL ，訪問(wèn)時(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ì)比頁(yè)將會(huì)顯示出來(lái):
以上就是和 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)嗎？
太好了！你可以用以下語(yǔ)法來(lái)創(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ì)于我來(lái)說(shuō)你看起來(lái)像是技術(shù)魔力。是真的能夠選中這些復(fù)選框！甚至它還更新了底層源碼。
ps：以下包括第九點(diǎn) 基于GitHub的項(xiàng)目面板 由于用的不多就沒(méi)有翻譯。
10 GitHub wiki
作為一個(gè)像維基百科那樣的非結(jié)構(gòu)化的頁(yè)面集合， GitHub Wiki的供給(我把它稱之為 Gwiki ) 是一個(gè)非常棒的功能。
對(duì)于結(jié)構(gòu)化的頁(yè)面來(lái)說(shuō) —— 例如你的文檔：不能說(shuō)這個(gè)頁(yè)面是其他頁(yè)面的子頁(yè)面，或則是有 “下一節(jié)”，“上一節(jié)” 這樣的便捷按鈕。并且 Hansel 和 Gretel 也沒(méi)有，因?yàn)榻Y(jié)構(gòu)化頁(yè)面并沒(méi)有 breadcrumbs 這樣的設(shè)計(jì)。
我們繼續(xù)，讓 Gwiki 動(dòng)起來(lái)，我從 NodeJS 的文檔中復(fù)制了幾頁(yè)來(lái)作為 wiki 頁(yè)面。然后創(chuàng)建了一個(gè)自定義側(cè)邊欄，幫助我更好地模擬一些實(shí)際的目錄結(jié)構(gòu)。盡管它不會(huì)突出顯示你當(dāng)前的頁(yè)面位置，但側(cè)邊欄會(huì)一直存在。
這些鏈接需要你手動(dòng)維護(hù)，但總的來(lái)說(shuō)，我認(rèn)為它可以做得很好。 如果需要的話可以看看。
雖然它與 GitBook ( Redux 文檔所使用的)或者是定制網(wǎng)站相比仍有差距。但在你的 repo 中它有 80% 完全值得信賴的。
我的建議是: 如果你已經(jīng)有多個(gè) README.md 文件，并且想要一些關(guān)于用戶指南或更詳細(xì)的文檔的不同的頁(yè)面，那么你應(yīng)該選擇 Gwiki。
如果缺乏結(jié)構(gòu)化/導(dǎo)航開始讓你不爽的話，那就試試其他的吧。
11 GitHub Pages
你可能已經(jīng)知道使用 GitHub Pages 來(lái)托管一個(gè)靜態(tài)網(wǎng)站。如果你不知道，現(xiàn)在就來(lái)學(xué)習(xí)，這一節(jié)是專門用于討論使用 Jekyll 來(lái)構(gòu)建一個(gè)站點(diǎn)的。
最簡(jiǎn)單的就是： GitHub Pages + Jekyll會(huì)通過(guò)一個(gè)漂亮的主題來(lái)渲染你的 README.md 文件。例如:通過(guò) about-github 來(lái)查看的我的 README 頁(yè)面。
如果我在 GitHub 中點(diǎn)擊了 settings選項(xiàng)，切換到 Github Pages 設(shè)置，然后選擇一個(gè) Jekyll theme。。。
我就可以得到 Jekyll-themed 頁(yè)面。
從這點(diǎn)上我可以主要依據(jù)易編輯的 Markdown 文件來(lái)構(gòu)建一個(gè)完整的靜態(tài)站點(diǎn)。本質(zhì)上是把 GitHub 變成了 CMS。
雖然我沒(méi)有實(shí)際使用過(guò)，但是 React Bootstrap 的網(wǎng)站都是使用它來(lái)構(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 廠庫(kù)中的 Markdown 文件來(lái)存儲(chǔ)這些文本內(nèi)容，然后使用前端組件來(lái)拉取這些文本塊并展示在頁(yè)面上。
我是搞 React 的，所以這有一個(gè) 解析 Markdown 的組件例子，給定一些 Markdown 文件路徑，它將會(huì)自動(dòng)拉取并作為 HTML 顯示出來(lái)。
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)在我向大家推薦它！
無(wú)論你是在查看哪個(gè) repo 它都會(huì)在左側(cè)給你一個(gè)樹狀面板。
通過(guò)這個(gè)視頻我了解到了 octobox，它是用于管理你的 GitHub Issues 收件箱，看起來(lái)相當(dāng)不錯(cuò)！
以上就是我針對(duì)于octobox的全部想法。
其他
就是這樣了！我希望這里至少有三件事是你還不知道的。
最后: hava a nice day！
個(gè)人博客：http://crossoverjie.top。
