README.md 使用詳解

作者:辰風(fēng)沐陽(yáng) 閱讀:5038 發(fā)布時(shí)間:2023-03-12 上次更新:2024-01-19

1. 介紹


README.md:項(xiàng)目的自述文件,用于介紹項(xiàng)目整體的一個(gè)概覽

README.md 一般出現(xiàn)在 git 倉(cāng)庫(kù)的根目錄下,作用是對(duì)項(xiàng)目的主要信息進(jìn)行描述

如果一個(gè)項(xiàng)目很長(zhǎng)時(shí)間沒(méi)有修改了,突然你需要修改這個(gè)項(xiàng)目,通過(guò)查看 README.md 對(duì)項(xiàng)目的描述可以讓你快速上手,當(dāng)別人接手你的項(xiàng)目或你接手別人的項(xiàng)目也能快速的了解該項(xiàng)目

2. 規(guī)范


對(duì)于剛接手項(xiàng)目的陌生人,應(yīng)該通過(guò) README.md 快速獲取到項(xiàng)目?jī)?nèi)容的要點(diǎn),因此其內(nèi)容應(yīng)該是項(xiàng)目整體的一個(gè)概覽。其實(shí)這個(gè)文件內(nèi)容有約定俗成的規(guī)范,這個(gè)規(guī)范也是眾多開(kāi)源開(kāi)發(fā)者相互磨合形成的。文件內(nèi)容理應(yīng)圍繞下面內(nèi)容編寫(xiě):

  1. 項(xiàng)目介紹
  2. 運(yùn)行環(huán)境要求
  3. 依賴(lài)的第三方插件
  4. 部署要素,操作說(shuō)明
  5. 代碼結(jié)構(gòu)說(shuō)明(目錄結(jié)構(gòu))
  6. 開(kāi)發(fā)環(huán)境,測(cè)試環(huán)境,正式環(huán)境域名等參數(shù)說(shuō)明

README.md 內(nèi)容結(jié)構(gòu)公認(rèn)比較漂亮的一種是 logo + 徽章 + 正文,Vue 倉(cāng)庫(kù)就是如此:https://github.com/vuejs/vue

很多非開(kāi)源項(xiàng)目并不會(huì)專(zhuān)門(mén)設(shè)計(jì)自述文件的 logo,將 logo 換為項(xiàng)目名稱(chēng)也是挺好看的,如下所示:

自述文件中對(duì)于標(biāo)題的選用:

  • 項(xiàng)目名稱(chēng)使用一級(jí)標(biāo)題
  • 項(xiàng)目介紹使用二級(jí)標(biāo)題,項(xiàng)目介紹下面的內(nèi)容使用三級(jí)標(biāo)題,依次類(lèi)推

3. 徽章


人活一張臉,樹(shù)活一張皮,git 倉(cāng)庫(kù)也不例外,好看的倉(cāng)庫(kù)從 README 開(kāi)始,而好看的 README 從置頂?shù)男』照麻_(kāi)始

置頂徽章生成網(wǎng)站:https://shields.io/#your-badge

輸入想要的標(biāo)簽文字和顏色,就可以得到一個(gè)最簡(jiǎn)單的個(gè)性徽章

使用查詢(xún)字符串參數(shù) style 可以自定義徽章樣式:

  • flat 扁平化,默認(rèn)效果
  • flat-square 扁平化+去圓角
  • for-the-badge 扁平化+去圓角+放大
  • social 社交樣式
  • plastic 立體效果
  1. https://img.shields.io/badge/Node-12.18.2-yellowgreen?style=plastic

4. 模板


居中的項(xiàng)目 logo:

Markdown 支持內(nèi)嵌 HTML 代碼,將下面代碼直接放于 README.md 中即可

  1. <p align="center">
  2. <a href="https://vuejs.org" target="_blank">
  3. <img width="100" src="https://vuejs.org/images/logo.png">
  4. </a>
  5. </p>

居中的項(xiàng)目名稱(chēng):

  1. <h1 align="center">康盈養(yǎng)老PC管理后臺(tái)</h1>

項(xiàng)目名稱(chēng)下面一般都是放置漂亮的徽章:

  1. <p align="center">
  2. <img src="https://img.shields.io/badge/PHP-7.3-green" />
  3. <img src="https://img.shields.io/badge/MySQL-5.7-green" />
  4. <img src="https://img.shields.io/badge/Node.js-12.18.2-green" />
  5. </p>

自述文件的正文:

  1. ## 運(yùn)行環(huán)境
  2. ---
  3. | 環(huán)境 | 接口域名 | 后臺(tái)域名 |
  4. | --- | --- | --- |
  5. | 本地環(huán)境 | http://192.168.1.183 | xxx |
  6. | 測(cè)試環(huán)境 | http://test.itqaq.com | xxx |
  7. | 正式環(huán)境 | http://www.waterflosserreview.com | xxx |

5. 示例


  1. <p align="center">
  2. <a href="https://vuejs.org" target="_blank">
  3. <img width="100" src="https://vuejs.org/images/logo.png">
  4. </a>
  5. </p>
  6. <h1 align="center">康盈養(yǎng)老PC管理后臺(tái)</h1>
  7. <p align="center" style="margin-bottom:16px;">
  8. <img src="https://img.shields.io/badge/PHP-7.3-green" />
  9. <img src="https://img.shields.io/badge/MySQL-5.7-red" />
  10. <img src="https://img.shields.io/badge/Node.js-12.18.2-green" />
  11. </p>
  12. <p align="center">
  13. Vue3 組件庫(kù),Typescirpt 編寫(xiě),高性能,支持按需引入、國(guó)際化、可配置主題。
  14. </p>
  15. ## 項(xiàng)目介紹
  16. ---
  17. ## 依賴(lài)插件
  18. ---
  19. | 插件名稱(chēng) | 插件官網(wǎng) |
  20. | --- | --- |
  21. | z-paging | https://z-paging.zxlee.cn |
  22. | uview-ui | https://www.uviewui.com |
  23. ## 項(xiàng)目部署
  24. ---
  25. ## 環(huán)境說(shuō)明
  26. ---
  27. | 環(huán)境 | 接口域名 | 后臺(tái)域名 |
  28. | --- | --- | --- |
  29. | 測(cè)試環(huán)境 | `https://test.itqaq.com` | https://api.itqaq.com |
  30. | 正式環(huán)境 | `https://blog.itqaq.com` | https://api.itqaq.com |

標(biāo)簽: git