차분하고 번거롭지 않은 기업용 지킬 템플릿입니다.
여기에서 테마를 미리 볼 수 있습니다.
반응형 : 스마트폰, 노트북, 태블릿 등 모든 화면 크기를 즉시 지원합니다.
다국어 : 여러 언어로 페이지, 메뉴, URL, 날짜, 사이트맵을 쉽게 관리
사용자 정의 가능 : 중앙 구성 파일에서 테마 색상, 메뉴, 소셜 항목을 변경할 수 있습니다.
다양한 위젯 : 탭, 미니 포스트, 스포트라이트, 기능 목록 등을 내부 걱정 없이 쉽게 삽입할 수 있습니다.
다양한 템플릿 : 맞춤형 Jekyll 포함 덕분에 연락처 양식, 탐색 메뉴 등을 쉽게 삽입할 수 있습니다.
벡터 이미지 : 테마 이미지는 벡터화되어 모든 디스플레이에서 원활하게 렌더링되며 동적으로 스타일을 지정할 수 있습니다.
GDPR 준비됨 : 쿠키 동의 플러그인과 GDPR을 준수하는 상용구 개인정보 보호정책이 번들로 제공됩니다.
SEO 준비됨 : 사이트맵, robots.txt 및 태그가 웹사이트에 대해 자동으로 생성됩니다.
Light : svg 이미지, 래스터 이미지용 썸 및 지연 로딩, 소수의 라이브러리
성능 : 자산 병렬 로딩 및 실행, 지연 로딩 지원, 자산 최소화, 중요 경로 압축
강화됨 : 양식 유효성 검사, recaptcha, 검증된 라이브러리
Jekyll 사이트의 Gemfile
에 다음 줄을 추가하세요:
gem "jekyll-theme-consulting"
그리고 Jekyll 사이트의 _config.yml
에 다음 줄을 추가하세요:
theme : jekyll-theme-consulting
그런 다음 다음을 실행합니다.
$ bundle
또는 다음과 같이 직접 설치하십시오.
$ gem install jekyll-theme-consulting
Jekyll의 작동 방식에 익숙하지 않은 분들은 jekyllrb.com에서 자세한 내용을 확인하시거나, 머리말, 게시물 작성, 페이지 작성의 기본 사항만 읽어보세요.
테마 저장소의 _config.yml
파일을 웹 사이트 폴더 트리의 루트에 복사합니다. 다음 섹션에서는 설정이 미치는 영향과 _config.yml
올바르게 구성하는 방법을 설명합니다.
_config.yml
에서 다음 사용자 정의 매개변수를 사용할 수 있습니다.
title
과 subtitle
나란히 표시됩니다.
facebook_url
등 입력한 각 URL에 대해 소셜 아이콘이 나타납니다.
귀하의 연락처 정보는 연락처 양식, 바닥글 또는 기타 어느 곳에서나 사용될 수 있습니다.
문의 양식은 Google의 recaptcha 플러그인을 사용하여 확인됩니다. 먼저, 플러그인을 활성화하려면 [웹사이트에 가입]해야 합니다. Google은 클라이언트 측 통합 키 를 제공합니다. 이를 recaptcha.sitekey
아래의 _config.yml
에 복사하세요.
이미지 다운로드 및 렌더링은 뷰포트에 들어갈 때까지 연기될 수 있습니다. 이렇게 하면 이미지가 화면 밖에 있기 때문에 표시된 콘텐츠에 영향을 주지 않고 웹페이지 로딩 시간이 단축됩니다.
두 가지 가능성이 있습니다:
지연 로딩에 대한 브라우저 지원은 다양하므로 첫 번째 솔루션을 선택하는 것이 좋습니다.
class="lazy-loading"
src
속성을 자리 표시자 파일의 경로로 채웁니다.data-src
속성을 콘텐츠 파일의 경로로 채웁니다.전에:
< img src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
후에:
< img class =" lazy-loading " src =" {{ 'assets/images/placeholder.jpg' | absolute_url }} " data-src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
loading="lazy"
추가전에:
< img src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
후에:
< img loading =" lazy " src =" {{ 'assets/images/content.jpg' | absolute_url }} " />
이 기능은 모든 브라우저에서 지원되지 않습니다!
webp
형식을 사용하는 것이 좋습니다.
주어진 크기와 압축 수준(품질)에서 webp 파일은 크기가 절반 이상이고 더 부드러운 느낌을 줍니다.
자신의 웹 사이트 저장소에서 _config.yml
파일을 편집합니다.
url : " https://<github-account-name>.github.io/<repository-name> "
다음을 사용하여 웹사이트를 구축하세요.
$ JEKYLL_ENV=production bundle exec jekyll build
모든 작업을 현재 분기에 커밋합니다.
gh-pages
라는 브랜치를 만듭니다.
$ git checkout -b gh-pages
마지막으로 저장소의 콘텐츠를 생성된 웹페이지로 바꿉니다.
$ mkdir ~/backup
$ mv ./* ~/backup/
$ mv ~/backup/.git ./
$ mv ~/backup/_site/* ./
$ git add .
$ git commit -m "First draft"
저장소의 콘텐츠는 사용자의 홈 디렉터리에 백업됩니다.
그리고 마지막으로 github에 push
$ git push --u origin gh-pages
자신의 웹사이트 디렉터리에서 _config.yml
파일을 편집하세요.
url : " https:<domain-name> "
다음을 사용하여 웹사이트를 구축하세요.
$ JEKYLL_ENV=production bundle exec jekyll build
_site
폴더의 내용을 서버에 복사합니다(아마도 www
).
필요한 경우 이 디렉터리를 제공하도록 서버를 구성합니다.
버그 보고서와 끌어오기 요청은 GitHub(https://github.com/apehex/jekyll-theme-consulting)에서 환영합니다. 이 프로젝트는 협업을 위한 안전하고 환영받는 공간이 되도록 의도되었으며 기여자는 기여자 규약 행동 강령을 준수해야 합니다.
이 테마를 개발하기 위한 환경을 설정하려면 bundle install
실행하세요.
테마를 테스트하려면, bundle exec jekyll serve
실행하고 http://localhost:4000
에서 브라우저를 여세요. 테마를 사용하여 Jekyll 서버를 시작합니다. 페이지, 문서, 데이터 등을 평소처럼 추가하여 테마 내용을 테스트해 보세요. 테마와 콘텐츠를 수정하면 사이트가 다시 생성되며 새로 고침 후에는 평소와 같이 브라우저에 변경 사항이 표시됩니다.
테마가 출시되면 _layouts
, _includes
, _sass
및 Git으로 추적되는 assets
의 파일만 번들로 제공됩니다. theme-gem에 사용자 정의 디렉터리를 추가하려면 jekyll-theme-consulting.gemspec
의 정규식을 적절하게 편집하세요.
@ajlkn의 작업에서 영감을 받았습니다.
쿠키 동의 플러그인의 기본 템플릿을 사용합니다.
간단한 Jekyll 검색 플러그인을 사용합니다.
배너의 우주 이미지: 창조의 기둥, NASA 제공.
테마는 CC-BY-NC-SA-4.0의 조건에 따라 오픈 소스로 제공됩니다.