怎么使用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"

  1. 连接Gitee仓库,输入以下命令:

git remote add origin [Gitee仓库地址]
git push -u origin master

  1. 完成上述步骤后,在Gitee仓库页面刷新,即可看到部署的静态网站。

二、添加交互功能

在静态网站的基础上,添加交互功能可以让网站更加生动有趣。以下介绍两种添加交互功能的方法。

  1. 使用JavaScript

JavaScript是一种脚本语言,可以实现页面交互的效果。可以在HTML文件中添加

当点击按钮时,会弹出“Hello World”的提示框。

将添加了JavaScript代码的HTML文件上传至Gitee Pages工程后,即可在网站中看到效果。

  1. 使用第三方插件

除了JavaScript之外,还可以使用第三方插件来实现交互效果。以下以添加滚动条为例,介绍使用iScroll插件的方法。

  1. 在HTML中添加以下代码:


  • 第一项
  • 第二项
  • 第三项
  • 第四项
  • 第五项
  • 第六项
  • 第七项
  • 第八项
  • 第九项
  • 第十项

  1. 将iScroll.min.js文件上传至Gitee Pages工程。

  2. 刷新网站,即可看到添加了滚动条的效果。

到此,关于“怎么使用Gitee Pages部署静态网站及交互功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


标题名称:怎么使用GiteePages部署静态网站及交互功能
文章网址:http://azwzsj.com/article/pjedco.html

其他资讯