如何使用Gitee Pages部署靜態網站及交互功能

gitee是一個非常知名的git代碼托管平臺，而在gitee上不僅可以管理代碼，還可以通過gitee pages部署自己的靜態網站，非常方便。本文將介紹如何使用gitee pages部署靜態網站和如何添加交互功能，讓網站更加生動有趣。

一、創建Gitee Pages工程

首先需要在Gitee上創建一個Pages工程，具體操作如下：

1. 登錄Gitee網站，進入個人主頁。
2. 點擊“創建倉庫”按鈕。
3. 設置倉庫名稱，勾選“公開”選項，選擇“初始化README.md”選項，最后點擊“創建倉庫”按鈕。
4. 進入新創建的倉庫頁面，點擊“設置”按鈕。
5. 點擊“Pages服務”選項卡，選擇“啟用Pages服務”按鈕。
6. 設置網站的訪問路徑和默認展示的頁面，例如設置為“/my-website”，默認展示頁面為“index.html”，最后點擊“保存”按鈕。
7. 接下來可以在本地創建一個新的文件夾，將靜態網站的相關文件放入這個文件夾中。
8. 在本地打開命令行，進入剛剛創建的文件夾，輸入以下命令：

git init
git add .
git commit -m “initial commit”

9. 連接Gitee倉庫，輸入以下命令：

git remote add origin [Gitee倉庫地址]
git push -u origin master

10. 完成上述步驟后，在Gitee倉庫頁面刷新，即可看到部署的靜態網站。

二、添加交互功能

在靜態網站的基礎上，添加交互功能可以讓網站更加生動有趣。以下介紹兩種添加交互功能的方法。

1. 使用JavaScript

JavaScript是一種腳本語言，可以實現頁面交互的效果。可以在HTML文件中添加<script>標簽，編寫JavaScript代碼。</script>

例如，在HTML中添加以下代碼：

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

當點擊按鈕時，會彈出“Hello World”的提示框。

將添加了JavaScript代碼的HTML文件上傳至Gitee Pages工程后，即可在網站中看到效果。

2. 使用第三方插件

除了JavaScript之外，還可以使用第三方插件來實現交互效果。以下以添加滾動條為例，介紹使用iScroll插件的方法。

1. 在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. 將iScroll.min.js文件上傳至Gitee Pages工程。
3. 刷新網站，即可看到添加了滾動條的效果。

總結：

通過Gitee Pages可以方便地部署靜態網站，同時可以通過JavaScript和第三方插件的方式添加交互功能，讓網站更加生動有趣。