怎么使用GiteePages部署静态网站及交互功能

这篇文章主要介绍“怎么使用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部署静态网站及交互功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

分享题目：怎么使用GiteePages部署静态网站及交互功能
转载来源：https://www.cdcxhl.com/article20/pjedco.html

成都网站建设公司_创新互联，为您提供网站营销、网站策划、域名注册、网站建设、微信公众号、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联