Heben Sie Ihr Github-Profil mit CSS hervor

Bisher konnten Sie Ihr Github-Profil nur anpassen, indem Sie das Bild aktualisieren oder Ihren Namen ändern. Das bedeutete, dass jedes Github-Profil gleich aussah und die Möglichkeiten, es anzupassen oder hervorzuheben, minimal waren.

Seitdem haben Sie die Möglichkeit, mit Markdown einen benutzerdefinierten Abschnitt zu erstellen. Sie können Ihren Lebenslauf, Ihre Interessen und Hobbys angeben, damit Ihr Profil widerspiegelt, wer Sie sind. Es ist einer der Hauptabschnitte, die jeder sieht, wenn er auf Ihrem Profil landet.

In diesem Artikel zeige ich Ihnen, wie ich meine Github-Readme-Datei mit einer Wendung erstellt habe. Ich werde Markdown verwenden und sein Hauptproblem lösen. Das Problem besteht darin, dass es sehr restriktiv sein kann, da man Farben nicht ändern kann und das Anpassen von Positionen und Abständen schwierig sein kann. Zur Lösung gibt es eine Möglichkeit, CSS zu Ihrer Github-Readme-Datei hinzuzufügen und sogar Übergänge hinzuzufügen, um eine bessere UX zu präsentieren.

Aber beginnen wir zunächst mit der Erstellung der Readme-Datei. Dazu müssen Sie ein neues öffentliches Repository erstellen, das genau Ihrem Github-Benutzernamen entspricht. Sie sehen einen kleinen Text, der darauf hinweist, dass es sich um ein einzigartiges Repository handelt.

Was auch immer Sie jetzt in Ihrer Datei [README.md]() aktualisieren, es wird in Ihrem Profil angezeigt. Sie können Markdown-Syntax oder HTML verwenden, um Ihre Inhalte anzuzeigen. Wenn Sie Inline-Styling, CSS-Dateien oder JavaScript hinzufügen, wird es von Github entfernt, sodass diese Lösung ein No-Go ist.

Die Lösung

In Ihre README.md-Datei können Sie Bilder einfügen. Dazu gehören auch SVG-Dateien. Die Lücke, die es uns ermöglicht, CSS hinzuzufügen, besteht darin, benutzerdefiniertes HTML und CSS mithilfe des ForeignObject-Elements in eine SVG-Datei einzubetten. Mit dem ForeignObject-Element können Sie Elemente aus anderen Auszeichnungssprachen in eine SVG-Grafik einbinden.

Erstellen wir eine neue Datei in unserem Repository mit dem Namen header.svg. In meinem Fall möchte ich, dass in meinem Profil ein Text mit der Aufschrift CodeFlow. angezeigt wird, mit einem schönen Farbverlauf und einem Schreibmaschineneffekt. Um das zu erreichen, habe ich etwas CSS und etwas HTML geschrieben, verschachtelt in einem ForeignObject in meiner SVG-Datei:

<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>

Jetzt aktualisieren wir die Datei README.md, um diese SVG-Datei als Bild zu verwenden und in unserem Profil anzuzeigen:

<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>

Und das ist es. Es handelt sich eigentlich nur um etwas CSS und HTML, die in eine SVG-Datei eingebunden sind. Schauen Sie sich das Endergebnis unten an oder wenn Sie es in Aktion sehen möchten, mein Github-Profil finden Sie hier.

Das obige ist der detaillierte Inhalt vonHeben Sie Ihr Github-Profil mit CSS hervor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!