Jadikan Profil Github Anda Terserlah Dengan CSS

Sebelum ini satu-satunya cara anda boleh menyesuaikan profil Github anda ialah dengan mengemas kini gambar atau menukar nama anda. Ini bermakna setiap profil Github kelihatan sama, pilihan untuk menyesuaikannya atau menonjol adalah minimum.

Sejak itu, anda mempunyai pilihan untuk membuat bahagian tersuai menggunakan Markdown. Anda boleh memasukkan CV anda, minat dan hobi anda untuk menjadikan profil anda mencerminkan siapa anda. Ia merupakan salah satu bahagian utama yang dilihat oleh sesiapa sahaja apabila mereka tiba di profil anda.

Dalam artikel ini, saya akan menunjukkan kepada anda cara saya mencipta readme Github saya dengan kelainan. Saya akan menggunakan Markdown dan menyelesaikan masalah utamanya. Masalah bahawa ia boleh menjadi sangat terhad, kerana anda tidak boleh menukar warna, melaraskan kedudukan dan jarak boleh menjadi sukar. Untuk menyelesaikannya, terdapat cara anda boleh menambah CSS pada readme Github anda dan juga menambah peralihan untuk mempersembahkan UX yang lebih baik.

Tetapi mari mulakan dengan mencipta readme dahulu. Untuk ini, anda perlu membuat repositori awam baharu yang betul-betul nama pengguna Github anda. Anda akan melihat teks kecil yang mempamerkan bahawa ini akan menjadi repositori unik.

Kini apa sahaja yang anda kemas kini dalam fail [README.md]() anda, ia akan dipaparkan pada profil anda. Anda boleh menggunakan sintaks Markdown atau HTML untuk memaparkan kandungan anda. Jika anda menambah sebarang penggayaan sebaris, fail CSS atau JavaScript, ia akan dilucutkan oleh Github, jadi penyelesaian itu tidak boleh dilakukan.

Penyelesaiannya

Dalam fail README.md anda, anda boleh memasukkan imej. Itu termasuk fail SVG. Celah yang membolehkan kami menambah CSS ialah membenamkan HTML dan CSS tersuai menggunakan elemen foreignObject dalam fail SVG. Elemen foreignObject membenarkan anda memasukkan unsur daripada bahasa penanda lain di dalam grafik SVG.

Mari buat fail baharu dalam repositori kami, dipanggil header.svg. Dalam kes saya, saya ingin teks dipaparkan pada profil saya yang mengatakan CodeFlow., dengan kecerunan yang bagus dan kesan mesin taip. Untuk mencapainya, saya menulis beberapa CSS dan beberapa HTML bersarang dalam foreignObject dalam fail SVG saya:

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

Sekarang mari kemas kini fail README.md untuk menggunakan SVG ini sebagai imej dan memaparkannya dalam profil kami:

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

Dan itu sahaja. Ia sebenarnya hanya beberapa CSS dan HTML yang dibungkus dalam SVG. Lihat hasil akhir di bawah atau jika anda ingin melihat dalam tindakan, profil Github saya ada di sini.

Atas ialah kandungan terperinci Jadikan Profil Github Anda Terserlah Dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!