CSS で Github プロフィールを目立たせる

これまで、Github プロフィールをカスタマイズできる唯一の方法は、写真を更新するか名前を変更することでした。これは、すべての Github プロファイルが同じに見え、カスタマイズしたり目立たせるためのオプションが最小限であることを意味しました。

それ以来、Markdown を使用してカスタム セクションを作成するオプションが利用できるようになりました。履歴書、興味のあること、趣味を含めて、プロフィールにあなた自身を反映させることができます。これは、あなたのプロフィールにアクセスしたときに誰もが目にする主要なセクションの 1 つです。

この記事では、私がひねりを加えて Github Readme を作成した方法を紹介します。 Markdown を使用して、その主な問題を解決していきます。色を変更したり、位置や間隔を調整したりすることができないため、制限が非常に厳しいという問題があります。これを解決するには、Github Readme に CSS を追加し、より良い UX を提供するトランジションを追加する方法があります。

しかし、まずは Readme を作成することから始めましょう。このためには、Github ユーザー名とまったく同じ新しいパブリック リポジトリを作成する必要があります。これが固有のリポジ​​トリであることを示す小さなテキストが表示されます。

[README.md]() ファイルで更新した内容は、プロフィールに表示されます。 Markdown 構文または HTML を使用してコンテンツを表示できます。インライン スタイル、CSS ファイル、または JavaScript を追加すると、Github によって削除されるため、その解決策は無効です。

解決策

README.md ファイルには画像を含めることができます。これには SVG ファイルが含まれます。 CSS の追加を可能にする抜け穴は、SVG ファイル内のforeignObject 要素を使用してカスタム HTML と CSS を埋め込むことです。 externalObject 要素を使用すると、SVG グラフィック内に他のマークアップ言語の要素を含めることができます。

リポジトリに header.svg という名前の新しいファイルを作成しましょう。私の場合、プロフィールに「CodeFlow.」というテキストを、素敵なグラデーションとタイプライター効果を付けて表示したいと考えています。これを実現するために、SVG ファイルの foreignObject にネストされた CSS と HTML をいくつか書きました。

<svg fill="none" width="100%"  xmlns="http://www.w3.org/2000/svg">
 <foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrapper {
          height: 100vh;
          display: grid;
          place-items: center;
        }

        .text {
          width: 9ch;
          animation: typing 1.5s steps(9), blink .5s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden;
          border-right: 3px solid;
          font-family: monospace;
          font-size: 4em;
          background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        @keyframes typing {
          from {
            width: 0
          }
        }

        @keyframes blink {
          from, to { border-color: transparent }
          50% { border-color: rgba(254,0,255,1); }
        }
      </style>
      <div class="wrapper">
        <div class="text">
          CodeFlow.
        </div>
      </div>
  </div>
 </foreignObject>
</svg>

次に、README.md ファイルを更新して、この SVG を画像として使用し、プロフィールに表示しましょう。

<div align="center">
 <a class="link" href="https://github.com/codeflowjs/codeflowjs/blame/main/header.svg">
  <img class="image" src="header.svg" alt="Click to see the source">
 </a>
</div>

それで終わりです。これは実際には、SVG 内にラップされた CSS と HTML にすぎません。以下の最終結果をチェックしてください。または、実際の動作を見たい場合は、私の Github プロフィールはここにあります。

以上がCSS で Github プロフィールを目立たせるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。