[[417939]]

今日は、オープンソースに興味のある方なら既にある程度ご存知だと思うコンテンツを共有します。これらは私がオープンソースプロジェクトで使用している強力なツールで、オープンソースプロジェクトやGitHubホームページの見た目をより魅力的にすることができます。最後に、皆さんが参照して学べるよう、私自身のGitHubホームページのreadme.mdを共有します。

この記事を読むと、次のことが得られます。

• readme-md-generator を使用して、README.md ファイルをすばやく美しく整えます。
• gitHub-readme-stats を使用して、個人の統計分析レポートを自動的に生成します。
• git-emojiでコードコミット履歴を視覚化する

1. オープンソース プロジェクト用の美しい README.md を作成するにはどうすればよいでしょうか?

コミュニティを閲覧した後、Xiaoxi は readme-md-generator を発見しました。

readme-md-generator は、package.json と git 構成をスキャンして、対応する readme 構造を生成するのに役立ちます。

生成された README.md は次のようになります。

さらに、適切な package.json には次のメタデータが含まれている必要があります。

 {
 「名前」 ： 「H5-ドアリング」
 「バージョン」 : 「1.1.3 」
 「説明」 : 「H5-Dooringは、強力でオープンソースの無料H5ビジュアルページ構成ソリューションです。H5ランディングページのためのシンプルで便利、プロフェッショナルで信頼性が高く、無限の可能性を秘めたベストプラクティスを提供することに特化しています。テクノロジースタックは主にReactで、バックエンドはNode.jsを使用して開発されています。」
 「著者」 ： 「著者情報」
 「ライセンス」 : 「オープンソースライセンス」
 「ホームページ」 ： 「ホームページのアドレス」
 「リポジトリ」 : {
 「タイプ」 : 「git」 、
 "url" : "gitリポジトリのアドレス"  
 },
 「バグ」 : {
 「url」 ： 「他のユーザーが問題を送信できるアドレス」  
 },
 「エンジン」 : {
 "npm" : ">=5.5.0" 、
 「ノード」 : ">=9.3.0"  
 }
 }

オープンソースプロジェクトを作成する際には、上記のガイドラインを参考にすることで、プロジェクトをより堅牢かつ美しく仕上げることができます。次に、このツールを使用して生成されたreadme.mdファイルの例を紹介します。

アドレス: mitu-editor | 軽量ながらも強力な画像エディタ

II. github-readme-stats を使用して、個人の統計分析レポートを自動的に生成します。

GitHub プロファイルのデフォルト構成は非常にシンプルであることは誰もが知っていますが、多くの成功した GitHub プロファイルは次のように非常によく設計されています。

なぜでしょうか？実は、上の画像に写っている人物はGitHubプロフィールページを美しくするツールの作者なのです。彼のプロフィールページには非常に美しい統計グラフが掲載されていますが、この動的な統計グラフを生成するツールがgithub-readme-statsです。このツールは、GitHubのREADMEファイルから動的に生成された統計情報を取得できます。使い方も非常に簡単で、GitHubプロフィールのREADMEに以下のコードを追加するだけです。

 [![Anurag の GitHub 統計](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

?username= の値を自分の GitHub ユーザー名に変更するだけです。

独自の統計テーマをカスタマイズする

さらに、統計カードのテーマも簡単にカスタマイズできます。このツールでは、以下のデフォルトのテーマが用意されています。

同様に、README に次のコードを追加するだけです。

 ![Anurag の GitHub 統計](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons= true &theme=radical)

これにより、お気に入りのテーマを簡単に選択できます。さらに便利なのは、テーマカラーをカスタマイズできることです。GitHubで実際に試してみることができます。

プロジェクトに人気の言語カードを追加する

人気言語カードには、以下に示すように、GitHub 上のオープンソース プロジェクトで頻繁に使用されるプログラミング言語が表示されます。

もちろん、コンパクトなレイアウトに設定することもできます。

この効果を実現するのは非常に簡単です。次のコードを構成するだけです。

 [![トップ言語](https://github-readme-stats.vercel.app/api/ top -langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

GitHubでさらに多くの設定オプションを確認できます。プロジェクトのGitHubアドレスは次のとおりです。

 github-readme-統計

設定後の私の GitHub プロファイルは次のようになります。

III. git-emojiを使ってコードコミットを視覚化する

`git-emoji` は、Git のコミットメッセージに絵文字を使用するためのガイドです。ログエントリをコミットする際のガイドラインに従うことで、以下に示すように、明確でわかりやすいコミット絵文字が生成されます。

よく知られているオープンソースプロジェクトのほとんどは、コミットで関連する絵文字を使用しており、それらはすべて対応するコミットガイドラインに従っています。以下はウェブサイトです。

オンラインアドレス: https://gitmoji.js.org/

ガイドラインを使用すればオープンソースのコミット ログを簡単に最適化できるので、ぜひ試してみてください。

やっと

GitHubのREADMEテンプレートを作成しましたので、参考にしてください。GitHubプロフィールを美しく整えましょう。後ほど、データ可視化とエンジニアリングに関連する、より実践的なオープンソースプロジェクトやフレームワークを紹介する予定です。他にご質問やご要望がございましたら、お気軽にご連絡ください。ディスカッションや学習の機会をご提供いたします。

この記事はWeChat公式アカウント「Fun Talk Front-End」から転載したものです。以下のQRコードからフォローできます。転載の許可については、「Fun Talk Front-End」公式アカウントまでお問い合わせください。