如何使用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”

  1. 連接Gitee倉庫,輸入以下命令:

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

  1. 完成上述步驟后,在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工程后,即可在網站中看到效果。

  1. 使用第三方插件

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

總結:

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

? 版權聲明
THE END
喜歡就支持一下吧
點贊13 分享