gitee是一個非常知名的git代碼托管平臺,而在gitee上不僅可以管理代碼,還可以通過gitee pages部署自己的靜態網站,非常方便。本文將介紹如何使用gitee pages部署靜態網站和如何添加交互功能,讓網站更加生動有趣。
一、創建Gitee Pages工程
首先需要在Gitee上創建一個Pages工程,具體操作如下:
- 登錄Gitee網站,進入個人主頁。
- 點擊“創建倉庫”按鈕。
- 設置倉庫名稱,勾選“公開”選項,選擇“初始化README.md”選項,最后點擊“創建倉庫”按鈕。
- 進入新創建的倉庫頁面,點擊“設置”按鈕。
- 點擊“Pages服務”選項卡,選擇“啟用Pages服務”按鈕。
- 設置網站的訪問路徑和默認展示的頁面,例如設置為“/my-website”,默認展示頁面為“index.html”,最后點擊“保存”按鈕。
- 接下來可以在本地創建一個新的文件夾,將靜態網站的相關文件放入這個文件夾中。
- 在本地打開命令行,進入剛剛創建的文件夾,輸入以下命令:
git init
git add .
git commit -m “initial commit”
- 連接Gitee倉庫,輸入以下命令:
git remote add origin [Gitee倉庫地址]
git push -u origin master
- 完成上述步驟后,在Gitee倉庫頁面刷新,即可看到部署的靜態網站。
二、添加交互功能
在靜態網站的基礎上,添加交互功能可以讓網站更加生動有趣。以下介紹兩種添加交互功能的方法。
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工程后,即可在網站中看到效果。
- 使用第三方插件
除了JavaScript之外,還可以使用第三方插件來實現交互效果。以下以添加滾動條為例,介紹使用iScroll插件的方法。
- 在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>
- 將iScroll.min.js文件上傳至Gitee Pages工程。
- 刷新網站,即可看到添加了滾動條的效果。
總結:
通過Gitee Pages可以方便地部署靜態網站,同時可以通過JavaScript和第三方插件的方式添加交互功能,讓網站更加生動有趣。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END