怎么使用Gitee Pages部署靜態網站及交互功能

這篇文章主要介紹“怎么使用Gitee Pages部署靜態網站及交互功能”，在日常操作中，相信很多人在怎么使用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代碼。

例如，在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部署靜態網站及交互功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！