사실 예전에는 전체 페이지 스크롤 에세이 페이지를 만들고 싶었는데 최근에 더 예쁘게 느껴지는 3D 스크롤 페이지를 찾아서 사용했습니다.
# 페이지 수정
위 GIF의 페이지는 원본이 아니며 소스 코드는 FoldScroll 데모로 soulwire에서 출시했습니다. http://soulwire.github.io/FoldScroll/)。
오랫동안 업데이트되지 않았지만... GIF가 명확하지 않고 수정 된 버전이 여기에 있습니다 : [로그] (https://tstrs.me/log).
먼저 {% label default@GitHub%}로 이동하여 소스 코드를 다운로드하고 index.html, js 폴더 및 css 폴더를 저장합니다 내 블로그는 HEXO를 기반으로 하고 있으므로 위의 파일 파일을 '블로그 루트\소스\'New yourself'에 저장합니다. (디버깅하는 동안 모든 폴더에 넣을 수 있습니다)
인덱스 .html 수정
설명이 비교적 간단하도록 소스 코드를 직접 붙여 넣었습니다.
{% label info@line 4: %} 페이지 이름은 레이블에 어리석게 표시되는 이름입니다.
{% label info@line 9:%} 탭 아이콘을 클릭하면 필요에 따라 설정할 수 있습니다.
{% 라벨 info@line 12 : %} 방문을 기록하는 Google 웹 로그 분석 스크립트입니다.
{% 라벨 info@line 44:%} 자동으로 음악을 재생하는 스크립트, 당신은 나를 직접 복사 한 다음 당신이 원하는 음악에 중간 링크를 변경할 수 있습니다.
이 페이지의 효과에 매우 만족하기 때문에 위의 내용만 수정했으며 나중에 새로운 아이디어가 있으면 변경하겠습니다.
CSS 수정
파일이 CSS / 스타일로되어 .css 개발자가 권한을 요청하지 않았기 때문에 왼쪽 상단의 정보가별로 좋지 않아서 모두 삭제했습니다.
{% label default@quotes article%}은 본문의 크기, {% label default@quotes article em%}은 회색 인쇄물의 크기, {% label default@quotes article em:before%}는 회색 인쇄 앞의 기호가 아래에 정의되어 있으며 원하는 대로 사용할 수 있습니다. 내가 사용하고있는 것은 다음과 같습니다.
.quotes 기사 {
border-bottom: 2px 점선 #ddd;
text-align: 양쪽 맞춤;
라인 높이 : 1.5;
배경: #fff;
최대 너비 : 900px;
글꼴 크기 : 24px;
글꼴 두께 : 굵게;
패딩: 60px 30px;
여백: 0 자동;
너비 : 100 %;
색상: #333;
}
.quotes 기사 em {
글꼴 스타일: Microsoft YaHei;
글꼴 크기 : 16px;
색상: #666;
}
.quotes 기사 em:before {
내용: '-';
여백 : 0 10px;
}
### js 수정
폴더의 foldscroll.min .js와 foldscroll은 애니메이션 효과.js 있으며 이동할 필요가 없습니다 (물론 수정할 수 없습니다. 큰 신이 있으면 직접 할 수 있습니다). 따옴표 .js에는 페이지의 모든 텍스트가 포함되어 있으며 좋아하는 텍스트를 추가 할 수 있지만 페이지의 원래 형식에 따라 수정해야합니다.
## 배포
<div 클래스 = "참고 정보"> <p>위의 단계가 완료되면 인덱스를 로컬로 클릭.html 수정된 효과를 볼 수 있습니다. 다음은 HEXO에의 전개입니다. </p></div>
### 메뉴 항목 추가
다음 테마를 사용하고 있으므로 구성 파일은 'blog root\themes\next\_config.yml'에 있으며 메뉴 옵션을 왼쪽에서 오른쪽으로, {% label success@name%}, {% label success@link %}, {% label success@ separator%}, {% label success@icon%}. "로그"항목을 추가했습니다.
'''CSS
메뉴:
홈: / || 집
태그 : / 태그 / || 태그
카테고리: /카테고리/ || 일
아카이브 : / 아카이브 / || 보관
로그: /log || 달력 #新增加的
#sitemap: /sitemap.xml || 사이트맵
#commonweal: /404/ || 하트 비트
#about: /about/ || 사용자
폴더 제외
HEXO는 배포 시 MD 파일을 HTML 파일로 렌더링하지만 내 페이지가 설정되어 있고 다시 렌더링하면 왜곡되어 이 폴더 전체를 제외해야 합니다.
구성 파일은 'blog root_config.yml'에 있으며 skip_render 찾습니다. 콜론 뒤에 공백이 있음을 기억하면서 그 뒤에 제외하려는 폴더를 추가합니다. 🙃 본보기:
'''CSS
skip_render: 'log/**'
```
설정 후 서버로 푸시 할 수 있지만 음악이 자동으로 재생되지 않는 등 사소한 문제가 여전히 남아 있으며 이유를 모르겠습니다.
페이지의
배경 음악은 Only One-Kanye West의 오디오 샘플이며, 다운로드하려면 아래의 블랙 박스, 로그 웹 페이지의 링크를 클릭하면 액세스 속도를 높이기 위해 Tencent Cloud의 COS를 사용했지만 안티 핫 링크를 설정했기 때문에 다운로드 할 수 없습니다.