怎么使用Gitee Pages部署静态网站及交互功能
这篇文章主要介绍“怎么使用Gitee Pages部署静态网站及交互功能”,在日常操作中,相信很多人在怎么使用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
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工程后,即可在网站中看到效果。
使用第三方插件
除了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工程。
刷新网站,即可看到添加了滚动条的效果。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码