Gitee Pages를 사용하여 정적 웹사이트와 대화형 기능을 배포하는 방법

Gitee는 매우 잘 알려진 Git 코드 호스팅 플랫폼입니다. Gitee에서 코드를 관리할 수 있을 뿐만 아니라 Gitee Pages를 통해 자신만의 정적 웹사이트를 배포할 수도 있어 매우 편리합니다. 이 기사에서는 Gitee Pages를 사용하여 정적 웹 사이트를 배포하는 방법과 대화형 기능을 추가하여 웹 사이트를 더욱 생생하고 흥미롭게 만드는 방법을 소개합니다.

1. Gitee Pages 프로젝트 만들기

먼저 Gitee에서 Pages 프로젝트를 만들어야 합니다. 구체적인 작업은 다음과 같습니다.

1. Gitee 웹사이트에 로그인하고 개인 홈페이지를 입력합니다.
2. "창고 만들기" 버튼을 클릭하세요.
3. 웨어 하우스 이름을 설정하고 "공개"옵션을 확인한 다음 "README.md 초기화"옵션을 선택한 다음 마지막으로 "웨어 하우스 만들기"버튼을 클릭하십시오.
4. 새로 생성된 창고 페이지에 들어가서 "설정" 버튼을 클릭하세요.
5. "페이지 서비스" 탭을 클릭하고 "페이지 서비스 활성화" 버튼을 선택하세요.
6. 웹사이트의 액세스 경로와 기본 표시 페이지를 설정합니다. 예를 들어 "/my-website"로 설정하고 기본 표시 페이지는 "index.html"로 설정한 후 마지막으로 "저장" 버튼을 클릭합니다.
7. 다음으로 로컬에 새 폴더를 만들고 정적 웹사이트의 관련 파일을 이 폴더에 넣을 수 있습니다.
8. 로컬에서 명령줄을 열고 방금 생성한 폴더를 입력하고 다음 명령을 입력하세요:

git init
git add .
git commit -m "initial commit"

9. Gitee 저장소에 연결하고 다음을 입력하세요 명령:

git 원격 추가 원본 [Gitee Warehouse 주소]
git push -u Origin master

10. 위 단계를 완료한 후 Gitee Warehouse 페이지를 새로 고치면 배포된 정적 웹사이트가 표시됩니다.

2. 인터랙티브 기능 추가

정적인 웹사이트를 기반으로 인터랙티브 기능을 추가하면 웹사이트가 더욱 활기차고 흥미로워질 수 있습니다. 대화형 기능을 추가하는 두 가지 방법은 다음과 같습니다.

1. JavaScript 사용

JavaScript는 페이지 상호 작용 효과를 얻을 수 있는 스크립팅 언어입니다. HTML 파일에 <script> 태그를 추가하여 JavaScript 코드를 작성할 수 있습니다. </script>

예를 들어 HTML에 다음 코드를 추가하세요.

<button>点击按钮</button>
<script>
document.querySelector("#btn").addEventListener("click", function() {
alert("Hello World");
});
</script>

버튼을 클릭하면 "Hello World" 프롬프트 상자가 나타납니다.

Gitee Pages 프로젝트에 JavaScript 코드가 추가된 HTML 파일을 업로드한 후, 웹사이트에서 효과를 확인할 수 있습니다.

2. 타사 플러그인 사용

JavaScript 외에도 타사 플러그인을 사용하여 대화형 효과를 얻을 수도 있습니다. 다음은 iScroll 플러그인 사용 방법을 소개하기 위해 스크롤 막대를 추가하는 예입니다.

1. HTML에 다음 코드를 추가하세요.

<div>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
<li>第七项</li>
<li>第八项</li>
<li>第九项</li>
<li>第十项</li>
</ul>
</div>
<script></script>
<script>
var myScroll = new IScroll(&#39;#scroller&#39;,{});
</script>

2. iScroll.min.js 파일을 Gitee Pages 프로젝트에 업로드하세요.
3. 웹사이트를 새로고침하면 스크롤바 추가 효과를 볼 수 있습니다.

요약:

Gitee Pages를 통해 정적 웹사이트를 쉽게 배포할 수 있으며, JavaScript 및 타사 플러그인을 통해 대화형 기능을 추가하여 웹사이트를 더욱 생동감 있고 흥미롭게 만들 수 있습니다.

위 내용은 Gitee Pages를 사용하여 정적 웹사이트와 대화형 기능을 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!