hexo-theme-butterfly - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #typescript #go #android #machine-learning #linux #windows #awesome #cli #pytorch #open-source

hexo-theme-butterfly

(★ 8,349)

🦋 Hexo 테마: Butterfly

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.yml
  - config.yml
  - feature_request.yml
- - publish.yml
  - stale.yml
- FUNDING.yml
- default.yml
- en.yml
- ja.yml
- ko.yml
- zh-CN.yml
- zh-HK.yml
- zh-TW.yml
- - additional-js.pug
  - footer.pug
  - head.pug
  - layout.pug
  - pagination.pug
  - rightside.pug
  - sidebar.pug
- archive.pug
- category.pug
- index.pug
- page.pug
- post.pug
- tag.pug
- - default_config.js
  - postDesc.js
- - 404.js
  - cdn.js
  - init.js
  - stylus.js
  - welcome.js
- - post_lazyload.js
  - random_cover.js
- - aside_archives.js
  - aside_categories.js
  - getArchiveLength.js
  - inject_head_js.js
  - page.js
  - related_post.js
  - series.js
- - button.js
  - chartjs.js
  - flink.js
  - gallery.js
  - hide.js
  - inlineImg.js
  - label.js
  - mermaid.js
  - note.js
  - score.js
  - series.js
  - tabs.js
  - timeline.js
- - index.styl
  - var.styl
- - 404.jpg
  - butterfly-icon.png
  - error-page.png
  - favicon.ico
  - friend_404.gif
- - main.js
  - tw_cn.js
  - utils.js
.gitignore
_config.yml
LICENSE
package.json
plugins.yml
README.md
README_CN.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/jerryc127/hexo-theme-butterfly

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd hexo-theme-butterfly

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install hexo-theme-butterfly

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm install hexo-renderer-pug hexo-renderer-stylus --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[中文](/README_CN.md "中文")

![Butterfly Logo](./source/img/butterfly-icon.png)
# hexo-theme-butterfly
Hexo를 위한 모던하고 우아하며 기능이 풍부한 테마
![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master)
![dev version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev)
![npm version](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
![hexo version](https://img.shields.io/badge/hexo-5.3.0+-0e83cd)
![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)
![GitHub stars](https://img.shields.io/github/stars/jerryc127/hexo-theme-butterfly?style=social)
📢 \*\*데모\*\*: [Butterfly Official](https://butterfly.js.org/) | [CrazyWong's Blog](https://blog.crazywong.com/)
📖 \*\*문서\*\*: [English Docs](https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/) | [中文文档](https://butterfly.js.org/posts/21cfbf15/)
![Butterfly Theme Preview](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)

---
## 🚀 빠른 시작
### 💾 설치
#### 방법 1: Git 설치 (권장)
> 💡 \*\*팁\*\*: 중국 대륙에서 GitHub 접속이 느린 경우, [Gitee Mirror](https://gitee.com/immyw/hexo-theme-butterfly.git)를 사용할 수 있습니다.
Hexo 블로그 루트 디렉토리에서 실행하세요:
```bash
# 안정 버전 설치 (권장)
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
```
```bash
# 개발 버전 설치 (새로운 기능을 미리 체험)
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
```
#### 방법 2: NPM 설치
> ⚠️ \*\*참고\*\*: NPM 설치는 Hexo 5.0.0 이상 버전만 지원합니다.
```bash
npm install hexo-theme-butterfly
```
### ⚙️ 테마 설정
1. \*\*테마 활성화\*\*: Hexo 설정 파일 `\_config.yml`을 수정합니다:
```yaml
theme: butterfly
```
2. \*\*의존성 설치\*\*: pug 및 stylus 렌더러를 아직 설치하지 않은 경우, 아래 명령어를 실행하세요:
```bash
npm install hexo-renderer-pug hexo-renderer-stylus --save
```
## ✨ 테마 특징
### 🎨 디자인 스타일
- [x] \*\*카드형 디자인\*\* - 모던한 카드 스타일 레이아웃
- [x] \*\*둥근/사각 디자인\*\* - 커스텀 가능한 테두리 스타일
- [x] \*\*반응형 디자인\*\* - 모든 화면 크기에 완벽하게 적응
- [x] \*\*2단 레이아웃\*\* - 최적화된 독서 경험
- [x] \*\*다크 모드\*\* - 눈이 편안한 야간 모드
### 📝 콘텐츠 기능
- [x] \*\*다중 계층 메뉴\*\* - 보조 네비게이션 메뉴 지원
- [x] \*\*읽기 모드\*\* - 집중도 높은 글 읽기 경험
- [x] \*\*TOC 네비게이션\*\* - 데스크탑 및 모바일 TOC 지원
- [x] \*\*글자 수\*\* - 글의 단어 수 및 예상 읽기 시간 표시
- [x] \*\*관련글 추천\*\* - 스마트한 관련 콘텐츠 추천
- [x] \*\*오래된 글 알림\*\* - 게시글 업데이트 상태 자동 알림
- [x] \*\*번체/간체 중국어\*\* - 번체 및 간체 중국어 전환 지원
- [x] \*\*태그 플러그인\*\* - 풍부한 태그 플러그인 지원
### 🔍 검색 및 네비게이션
- [x] \*\*다양한 검색 옵션\*\* - Algolia Search / Local Search / Docsearch
- [x] \*\*기본 404\*\* - 아름다운 404 에러 페이지
- [x] \*\*Pjax 지원\*\* - 부드러운 페이지 전환 경험
### 🎨 코드 표시
- [x] \*\*구문 강조\*\* - 여러 테마 내장 (darker/pale night/light/ocean)
- [x] \*\*코드 기능\*\* - 언어 표시/접기·펼치기/복사 버튼/자동 줄바꿈
- [x] \*\*수식\*\* - Mathjax 및 Katex 지원
### 💬 소셜 상호작용
- [x] \*\*다양한 댓글 시스템\*\* - Disqus/Gitalk/Valine/Waline/Twikoo/Giscus/Artalk 등 지원
- [x] \*\*듀얼 댓글 지원\*\* - 두 개의 댓글 시스템 동시 활성화
- [x] \*\*공유 기능\*\* - Sharejs/Addtoany 공유 컴포넌트
- [x] \*\*실시간 채팅\*\* - Chatra/Tidio/Crisp 인스턴트 메시징
### 📊 분석 및 통계
- [x] \*\*방문자 통계\*\* - Busuanzi 카운터
- [x] \*\*사이트 분석\*\* - Google Analytics/Baidu Analytics/Cloudflare Analytics/Microsoft Clarity/Umami
- [x] \*\*웹마스터 인증\*\* - 주요 검색엔진 인증
- [x] \*\*광고 지원\*\* - Google AdSense/커스텀 광고 슬롯
### 🎪 시각 효과
- [x] \*\*타이핑 효과\*\* - activate\_power\_mode 애니메이션
- [x] \*\*배경 효과\*\* - 정적 리본/동적 리본/플로팅 리본/Canvas Nest
- [x] \*\*마우스 효과\*\* - 불꽃놀이/하트/텍스트 클릭 효과
- [x] \*\*로딩 애니메이션\*\* - Preloader 및 pace.js 진행 표시줄
- [x] \*\*이미지 효과\*\* - Medium Zoom/Fancybox 이미지 라이트박스
- [x] \*\*지연 로딩\*\* - 이미지 지연 로딩(Lazy Loading) 최적화
### 🛠️ 고급 기능
- [x] \*\*PWA 지원\*\* - 프로그레시브 웹 앱(Progressive Web App)
- [x] \*\*복사 방지\*\* - 텍스트 복사 차단/저작권 정보 추가
- [x] \*\*테마 커스터마이징\*\* - 커스텀 사이트 색상 구성
- [x] \*\*차트 지원\*\* - Mermaid 순서도/Chart.js 데이터 차트
- [x] \*\*악보 표기\*\* - ABCJS 악보 표기 지원
- [x] \*\*시리즈 글\*\* - 시리즈별 글 구성
- [x] \*\*Instantpage\*\* - 페이지 미리 로드 가속
- [x] \*\*S

snackbar\*\* - 우아한 알림 메시지
## 🤝 Contributors
Butterfly 테마에 기여해주신 모든 개발자분들께 감사드립니다!
[![Contributors](https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly)](https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors)
## 📸 Screenshots

![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-1.jpg)
![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-2.jpg)
![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-3.jpg)
![Theme Demo](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/butterfly-readme-screenshots-4.jpg)

## ⭐ Star History
[![Star History Chart](https://star-history.dera.page/svg?repos=jerryc127/hexo-theme-butterfly&type=Date)](https://star-history.dera.page/#jerryc127/hexo-theme-butterfly&Date)
## 🤝 더 나은 테마를 함께 만들어가기
우리는 \*\*오픈소스의 힘이 모든 이의 참여에서 나온다고 믿습니다\*\*! 개발자, 디자이너, 사용자 중 어떤 분이든 Butterfly 테마의 개발에 기여하실 수 있습니다.
### 💬 도움 및 지원 받기
- 🐛 \*\*버그를 발견하셨나요?\*\* → [GitHub Issues](https://github.com/jerryc127/hexo-theme-butterfly/issues) - 함께 해결해 봐요!
- 💡 \*\*아이디어가 있으신가요?\*\* → [GitHub Discussions](https://github.com/jerryc127/hexo-theme-butterfly/discussions) - 창의적인 아이디어를 공유해 주세요!
- 📚 \*\*사용법을 배우고 싶으신가요?\*\* → [Official Documentation](https://butterfly.js.org/) - 상세한 사용 가이드
- 💬 \*\*실시간 토론을 원하시나요?\*\* → [Telegram Group](https://t.me/bu2fly) - 커뮤니티 멤버들과 대화하기
### 🎯 기여하기
Butterfly를 더 좋게 만들고 싶으신가요? 어떠한 형태의 기여든 환영합니다:
- \*\*🔧 코드 기여\*\* - 버그 수정, 새 기능 추가, 성능 최적화
- \*\*📝 문서 작성\*\* - 문서 개선, 콘텐츠 번역, 튜토리얼 작성
- \*\*🎨 디자인 제안\*\* - UI/UX 개선, 테마 색상, 아이콘 디자인
- \*\*🧪 테스트 및 피드백\*\* - 새 기능 테스트, 문제 신고, 사용자 경험 제공
- \*\*💰 재정적 지원\*\* - [Sponsor the Project](https://buy.stripe.com/3cs6rP6YA91sbbG5kk) - 장기적인 개발 지원
## 📄 라이선스
이 프로젝트는 [Apache 2.0](LICENSE) 라이선스에 따라 배포됩니다.
## 🙏 감사의 말
이 테마는 [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)를 기반으로 개발되었습니다. 훌륭한 작업으로 영감과 기초를 제공해 주신 원작자에게 감사드립니다!
Butterfly 테마의 개발에 기여해 주신 모든 분들께 감사드립니다. 여러분의 지원 덕분에 이 테마가 지속적으로 개선되고 발전할 수 있었습니다.
---

\*\*✨ 이 테마가 도움이 되었다면 ⭐ Star를 눌러주세요! ✨\*\*