Cara menggunakan Halaman Gitee untuk menggunakan tapak web statik dan fungsi interaktif

Gitee ialah platform pengehosan kod Git yang sangat terkenal, bukan sahaja anda boleh mengurus kod di Gitee, anda juga boleh menggunakan tapak web statik anda sendiri melalui Gitee Pages, yang sangat mudah. Artikel ini akan memperkenalkan cara menggunakan Halaman Gitee untuk menggunakan tapak web statik dan cara menambah ciri interaktif untuk menjadikan tapak web lebih hidup dan menarik.

1. Buat projek Gitee Pages

Mula-mula, anda perlu mencipta projek Pages di Gitee Operasi khusus adalah seperti berikut:

1. Log masuk ke. laman web Gitee dan masukkan halaman utama peribadi anda.
2. Klik butang "Buat Gudang".
3. Tetapkan nama gudang, semak pilihan "Awam", pilih pilihan "Initialize README.md", dan akhir sekali klik butang "Buat Gudang".
4. Masukkan halaman gudang yang baru dibuat dan klik butang "Tetapan".
5. Klik tab "Perkhidmatan Halaman" dan pilih butang "Dayakan Perkhidmatan Halaman".
6. Tetapkan laluan akses tapak web dan halaman lalai yang dipaparkan, contohnya, tetapkannya kepada "/my-website", halaman lalai yang dipaparkan ialah "index.html", dan akhirnya klik "Simpan" butang.
7. Seterusnya, anda boleh mencipta folder baharu secara setempat dan meletakkan fail berkaitan tapak web statik ke dalam folder ini.
8. Buka baris arahan secara setempat, masukkan folder yang baru anda buat, dan masukkan arahan berikut:

git init
git add .
git commit -m " komit awal "

9. Sambung ke repositori Gitee dan masukkan arahan berikut:

git remote add origin [Alamat repositori Gitee]
git push -u origin master

10. Selepas melengkapkan langkah di atas, muat semula halaman gudang Gitee dan anda akan melihat tapak web statik yang digunakan.

2. Tambah fungsi interaktif

Berdasarkan tapak web statik, penambahan fungsi interaktif boleh menjadikan laman web lebih hidup dan menarik. Berikut ialah dua cara untuk menambah fungsi interaktif.

1. Gunakan JavaScript

JavaScript ialah bahasa skrip yang boleh mencapai kesan interaksi halaman. Anda boleh menambah teg dalam fail HTML untuk menulis kod JavaScript.

Sebagai contoh, tambahkan kod berikut dalam HTML:

<button id="btn">点击按钮</button>
<script>
document.querySelector("#btn").addEventListener("click", function() {
alert("Hello World");
});
</script>

Apabila butang diklik, kotak gesaan "Hello World" akan muncul.

Selepas memuat naik fail HTML dengan kod JavaScript ditambahkan pada projek Gitee Pages, anda boleh melihat kesannya pada tapak web.

2. Gunakan pemalam pihak ketiga

Selain JavaScript, anda juga boleh menggunakan pemalam pihak ketiga untuk mencapai kesan interaktif. Perkara berikut memerlukan penambahan bar skrol sebagai contoh untuk memperkenalkan kaedah menggunakan pemalam iScroll.

1. Tambahkan kod berikut dalam HTML:

<div style="height: 200px; overflow: scroll" id="scroller">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
<li>第七项</li>
<li>第八项</li>
<li>第九项</li>
<li>第十项</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/iscroll/5.2.0/iscroll.min.js"></script>
<script>
var myScroll = new IScroll('#scroller',{});
</script>

2. Muat naik fail iScroll.min.js ke projek Gitee Pages.
3. Muat semula tapak web dan anda akan melihat kesan penambahan bar skrol.

Ringkasan:

Tapak web statik boleh digunakan dengan mudah melalui Halaman Gitee, dan fungsi interaktif boleh ditambah melalui JavaScript dan pemalam pihak ketiga untuk menjadikan tapak web lebih meriah dan menarik .

Atas ialah kandungan terperinci Cara menggunakan Halaman Gitee untuk menggunakan tapak web statik dan fungsi interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!