jekyll theme basically basic
1.4.5 - 2021-07-05
기본적으로 Basic은 기본 Minima를 대체하기 위한 Jekyll 테마로, 좋은 측정을 위해 몇 가지 향상된 기능이 추가되었습니다.
Jekyll v3.5+를 실행하고 자체 호스팅을 하고 있다면 테마를 Ruby gem으로 빠르게 설치할 수 있습니다. GitHub 페이지를 사용하여 호스팅하는 경우 원격 테마로 설치하거나 모든 테마 파일(아래 구조 참조)을 프로젝트에 직접 복사할 수 있습니다.
Jekyll 사이트의 Gemfile 에 다음 줄을 추가하세요:
gem "jekyll-theme-basically-basic" Jekyll 사이트의 _config.yml 파일에 다음 줄을 추가하세요:
theme : jekyll-theme-basically-basic그런 다음 Bundler를 실행하여 테마 gem과 종속성을 설치합니다.
bundle install
GitHub 페이지에는 GitHub에서 호스팅되는 모든 테마에 대한 완전한 지원이 추가되었습니다.
gem "jekyll" 다음으로 바꾸세요:
gem "github-pages" , group : :jekyll_plugins bundle update 실행하고 모든 gem이 제대로 설치되었는지 확인하세요.
_config.yml 파일에 remote_theme: "mmistakes/[email protected]" 추가하세요. 다른 theme: 또는 remote_theme: 항목을 제거합니다.
참고: Jekyll 사이트는 http://USERNAME.github.io에서 즉시 볼 수 있습니다. 그렇지 않은 경우 사이트를 사용자 정의 하여 강제로 재구축할 수 있습니다(자세한 내용은 아래 참조).
동일한 GitHub 사용자 이름으로 여러 Jekyll 기반 사이트를 호스팅하는 경우 사용자 페이지 대신 프로젝트 페이지를 사용해야 합니다. 기본적으로 저장소의 이름을 USERNAME.github.io 가 아닌 다른 이름으로 바꾸고 master 에서 gh-pages 분기를 만듭니다. 설정 방법에 대한 자세한 내용은 GitHub 문서를 확인하세요.
jekyll-theme-basically-basic 저장소를 포크하거나 다운로드한 경우 다음 파일과 폴더를 안전하게 제거할 수 있습니다:
.editorconfig.gitattributes.github.scss-lint.ymlCHANGELOG.mdjekyll-theme-basically-basic.gemspecLICENSERakefileREADME.mdscreenshot.png/docs/exampleRuby Gem 또는 Basic Basic의 원격 테마 버전을 사용하는 경우 업그레이드가 상당히 쉽습니다.
현재 사용 중인 버전을 확인하려면 구축된 사이트의 소스를 보면 다음과 유사해야 합니다.
<!--
Basically Basic Jekyll Theme 1.4.5
Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE
-->
모든 .html 파일 상단에 /assets/css/main.css 및 /assets/js/main.js 가 있습니다.
Bundler를 사용하고 있다면( Gemfile 이 있음) 간단히 bundle update 실행하고, 그렇지 않다면 gem update jekyll-theme-basically-basic 실행하세요.
_config.yml 에 최신 버전이 할당되어 있는지 확인하세요.
remote_theme: "mmistakes/[email protected]"
참고: @xxx 생략되면 테마의 현재 master 분기가 사용됩니다. 사이트에 중대한 변경 사항이 적용되는 것을 방지하려면 특정 버전에서 remote_theme "잠그는" 것이 좋습니다.
다음 단계에서는 최신 테마 업데이트를 가져올 수 있도록 GitHub 페이지 사이트를 다시 구축해야 합니다. 이는 GitHub 리포지토리에 커밋을 푸시하여 달성할 수 있습니다.
현재 푸시할 항목이 없으면 빈 커밋을 사용하여 작업을 완료할 수 있습니다.
git commit --allow-empty -m "Force rebuild of site"
Jekyll + GitHub 페이지 워크플로를 최대한 활용하려면 Git을 활용해야 합니다. 테마 업데이트를 풀다운하려면 먼저 업스트림 리모컨이 있는지 확인해야 합니다. 테마의 저장소를 포크했다면 괜찮을 것입니다.
다시 확인하려면 git remote -v 실행하고 origin https://github.com/mmistakes/jekyll-theme-basically-basic.git 에서 가져올 수 있는지 확인하세요.
추가하려면 다음을 수행할 수 있습니다.
git remote add upstream https://github.com/mmistakes/jekyll-theme-basically-basic.git
이제 다음을 사용하여 테마의 master 브랜치에 대한 커밋을 가져올 수 있습니다.
git pull upstream master
포크 후 수행한 사용자 정의의 양에 따라 병합 충돌이 발생할 수 있습니다. Git 플래그와 충돌하는 파일을 처리하고 유지하려는 변경 사항을 준비한 다음 커밋합니다.
업데이트를 처리하는 또 다른 방법은 테마를 다운로드하여 레이아웃, 포함 및 자산을 최신 항목으로 수동으로 바꾸는 것입니다. 변경 사항을 놓치지 않으려면 테마의 커밋 기록을 검토하여 이후 변경된 내용을 확인하는 것이 좋습니다.
다음은 주의해야 할 중요한 폴더/파일에 대한 간단한 체크리스트입니다.
| 이름 | |
|---|---|
_layouts | 모두 교체하세요. 레이아웃을 사용자 정의한 경우 편집 내용을 적용합니다. |
_includes | 모두 교체하세요. 포함 내용을 맞춤설정한 경우 수정사항을 적용하세요. |
assets | 모두 교체하세요. 스타일시트나 스크립트를 사용자 정의한 경우 편집 내용을 적용합니다. |
_sass | 모두 교체하세요. Sass 부분을 사용자 정의한 경우 편집 내용을 적용합니다. |
_data/theme.yml | 보관해도 안전합니다. 주요 구조적 변경이나 추가가 없었는지 확인합니다. |
_config.yml | 보관해도 안전합니다. 주요 구조적 변경이나 추가가 없었는지 확인합니다. |
참고: 최신 버전이 표시되지 않으면 브라우저 및 CDN 캐시를 플러시하세요. 호스팅 환경에 따라 이전 버전의 /assets/css/main.css , /assets/js/main.js 또는 *.html 캐시될 수 있습니다.
레이아웃, 포함, Sass 부분 및 데이터 파일은 모두 기본 위치에 배치됩니다. assets 의 스타일시트 및 스크립트, 프로젝트 루트 디렉토리의 몇 가지 개발 관련 파일.
참고: Ruby Gem 방법을 통해 Basic Basic을 설치한 경우 /_layouts , /_includes , /_sass 및 /assets 에 있는 테마 파일이 누락됩니다. jekyll-theme-basically-basic gem과 함께 번들로 제공되므로 이는 정상적인 현상입니다.
jekyll-theme-basically-basic
├── _data # data files
| └── theme.yml # theme settings and custom text
├── _includes # theme includes and SVG icons
├── _layouts # theme layouts (see below for details)
├── _sass # Sass partials
├── assets
| ├── javascripts
| | └── main.js
| └── stylesheets
| └── main.scss
├── _config.yml # sample configuration
└── index.md # sample home page (all posts/not paginated)
Gemfile 생성하고 테마를 설치한 후 다음 파일을 추가하고 편집해야 합니다.
_config.yml/_data/theme.ymlindex.md참고: 홈 페이지에서 활성화하는 방법에 대한 지침은 아래 페이지 매김 문서를 참조하세요.
jekyll new 에서 시작하기 jekyll new 명령을 사용하면 가장 빠르게 시작하고 실행할 수 있습니다.
_config.yml 편집하고 위에서 지시한 대로 _data/theme.yml 생성하면 됩니다.
사이트 전체 요소( lang , title , description , logo , author 등)의 구성은 프로젝트의 _config.yml 에서 이루어집니다. 추가 참조는 이 저장소의 예제 구성을 참조하세요.
| 설명 | |
|---|---|
lang | 텍스트의 언어를 나타내는 데 사용됩니다(예: en-US, en-GB, fr). |
title | 사이트 제목(예: Dungan's Awesome Site) |
description | 짧은 사이트 설명(예: 메뚜기 매쉬에 대한 블로그) |
url | 사이트의 전체 URL(예: https://groverloaf.org) |
author | 글로벌 저자 정보(아래 참조) |
logo | 사이트 전체 로고 경로 ~100x100px(예: /assets/your-company-logo.png) |
twitter_username | 사이드바의 링크로 사용되는 사이트 전체 Twitter 사용자 이름 |
github_username | 사이드바의 링크로 사용되는 사이트 전체 GitHub 사용자 이름 |
더 많은 구성 옵션을 보려면 jekyll-seo-tag , jekyll-feed , jekyll-paginate 및 jekyll-sitemap 문서를 참조하세요.
이 테마는 6가지 스킨(색상 변형)으로 제공됩니다. 스킨을 변경하려면 /_data/theme.yml 파일에 다음 중 하나를 추가하세요.
skin: default | skin: night | skin: plum |
|---|---|---|
skin: sea | skin: soft | skin: steel |
|---|---|---|
이 테마를 사용하면 테마 전체에서 Google Fonts를 쉽게 사용할 수 있습니다. /_data/theme.yml 에 다음을 추가하고 그에 따라 글꼴 name 과 weights 바꾸세요.
google_fonts :
- name : " Fira Sans "
weights : " 400,400i,600,600i "
- name : " Fira Sans Condensed " 테마 전반에 걸쳐 발견된 텍스트를 변경하려면 /_data/theme.yml 파일에 다음을 추가하고 필요에 따라 사용자 정의하십시오.
t :
skip_links : " Skip links "
skip_primary_nav : " Skip to primary navigation "
skip_content : " Skip to content "
skip_footer : " Skip to footer "
menu : " Menu "
search : " Search "
site_search : " Site Search "
results_found : " Result(s) found "
search_placeholder_text : " Enter your search term... "
home : " Home "
newer : " Newer "
older : " Older "
email : " Email "
subscribe : " Subscribe "
read_more : " Read More "
posts : " Posts "
page : " Page "
of : " of "
min_read : " min read "
present : " Present "
cv_awards : " Awards "
cv_summary_contact : " Contact "
cv_summary_contact_email : " Email "
cv_summary_contact_phone : " Phone "
cv_summary_contact_website : " Website "
cv_location : " Location "
cv_education : " Education "
cv_education_courses : " Courses "
cv_interests : " Interests "
cv_languages : " Languages "
cv_publications : " Publications "
cv_references : " References "
cv_skills : " Skills "
cv_volunteer : " Volunteer "
cv_work : " Work " 기본적으로 title 있는 모든 내부 페이지는 "캔버스 외부" 메뉴에 추가됩니다. 이러한 메뉴 링크를 보다 세부적으로 제어하고 정렬하려면 다음을 수행하세요.
/_data/theme.yml 파일에 navigation_pages 배열을 추가하여 기본 설정을 재정의하는 사용자 정의 목록을 만듭니다.
원하는 순서대로 원시 페이지 경로를 추가하세요.
navigation_pages :
- about.md
- cv.md 각 메뉴 링크의 제목과 URL은 각각 title 과 permalink 기준으로 채워집니다.
게시물의 기본 목록을 더 작은 목록으로 나누고 페이지 매김을 활성화하여 여러 페이지에 걸쳐 표시합니다.
Gemfile 에 jekyll-paginate 플러그인을 포함하세요.
group :jekyll_plugins do
gem "jekyll-paginate"
end _config.yml 파일의 gems 배열에 jekyll-paginate 추가하고 다음 페이지 매김 설정을 추가하세요:
paginate : 5 # amount of posts to show per page
paginate_path : /page:num/ 프로젝트 루트에 index.html 만들고(또는 index.md 이름을 바꾸고) 다음 머리말을 추가하세요.
layout : home
paginate : true 사이트 전체 검색을 활성화하려면 _config.yml 에 search: true 추가하세요.
기본 검색에서는 Lunr을 사용하여 모든 문서의 검색 색인을 구축합니다. 이 방법은 GitHub 페이지에서 호스팅되는 사이트와 100% 호환됩니다.
참고: 게시물이나 페이지 본문 내용의 처음 50개 단어만 Lunr 검색 색인에 추가됩니다. _config.yml 에서 search_full_content true 로 설정하면 이를 무시하고 페이지 로드 성능에 영향을 미칠 수 있습니다.
더 빠르고 관련성 높은 검색을 원하시면(데모 참조):
Gemfile 의 :jekyll_plugins 섹션에 jekyll-algolia gem을 추가하세요.
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
gem "jekyll-algolia"
end 이 작업이 완료되면 bundle install 실행하여 모든 종속성을 다운로드합니다.
_config.yml 파일에서 검색 공급자를 lunr 에서 algolia 로 전환합니다.
search_provider : algolia _config.yml 파일에 다음 Algolia 자격 증명을 추가합니다. Algolia 계정이 없다면 무료 커뮤니티 플랜을 개설할 수 있습니다. 로그인하면 대시보드에서 자격 증명을 가져올 수 있습니다.
algolia :
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key : # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), false자격 증명이 설정되면 다음 명령을 사용하여 인덱싱을 실행할 수 있습니다.
ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia
Windows 사용자의 경우 set 사용하여 ALGOLIA_API_KEY 환경 변수를 할당해야 합니다.
set ALGOLIA_API_KEY=your_admin_api_key
bundle exec jekyll algolia
ALGOLIA_API_KEY 는 관리자 API 키로 설정되어야 합니다.
GitHub Pages 호스팅 사이트에서 Algolia 검색을 사용하려면 이 배포 가이드를 따르세요. 또는 Netlify 배포 가이드입니다.
참고: Jekyll Algolia 플러그인은 여러 가지 방법으로 구성할 수 있습니다. 파일 및 기타 중요한 설정을 제외하는 방법에 대한 전체 문서를 확인하세요.
작성자 정보는 "라인별" 게시물의 메타 데이터로 사용되며 _config.yml 의 다음 머리말과 함께 Twitter 요약 카드의 creator 필드를 전파합니다.
author :
name : John Doe
twitter : johndoetwitter
picture : /assets/images/johndoe.png사이트 전체 작성자 정보는 동일한 방식으로 문서의 머리말에서 무시될 수 있습니다.
author :
name : Jane Doe
twitter : janedoetwitter
picture : /assets/images/janedoe.png 또는 site.data.authors 에 있는 문서의 머리말에 해당 키를 지정하면 됩니다. 예를 들어 문서의 머리말에 다음과 같은 내용이 있습니다.
author : megaman _data/authors.yml 에는 다음이 있습니다.
megaman :
name : Mega Man
twitter : megamantwitter
picture : /assets/images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /assets/images/drlight.png 현재 author.picture layout: about 에서만 사용됩니다. 권장 크기는 300 x 300 픽셀입니다.
읽기 시간 계산을 활성화하려면 게시물이나 페이지의 YAML 머리말에 read_time: true 추가하세요.
선택적으로 Disqus 계정이 있는 경우 각 게시물 아래에 댓글 섹션을 표시할 수 있습니다.
Disqus 댓글을 활성화하려면 프로젝트의 _config.yml 파일에 Disqus 단축 이름을 추가하세요.
disqus :
shortname : my_disqus_shortname 주석은 기본적으로 활성화되어 있으며 다음 환경 값으로 빌드된 경우에만 프로덕션에 표시됩니다: JEKYLL_ENV=production
특정 게시물에 대한 댓글을 표시하고 싶지 않다면 해당 게시물의 머리말에 comments: false 추가하여 댓글을 비활성화할 수 있습니다.
Google Analytics를 활성화하려면 다음과 같이 추적 ID를 _config.yml 에 추가하세요.
google_analytics : UA-NNNNNNNN-N 댓글과 마찬가지로 Google Analytics 추적 스크립트는 JEKYLL_ENV=production 환경 값을 사용하는 경우에만 프로덕션에 표시됩니다.
기본적으로 바닥글의 저작권 줄에는 현재 연도(빌드 시)와 사이트 제목이 표시됩니다. 예: © 2018 Basically Basic.
이를 변경하려면 적절한 텍스트를 사용하여 _config.yml 파일에 copyright 추가하세요.
copyright : " My custom copyright. " 이 테마는 다음과 같은 레이아웃을 제공하며, 각 페이지의 머리말 layout 다음과 같이 설정하여 사용할 수 있습니다.
---
layout : name
---layout: default 이 레이아웃은 마스트헤드와 바닥글 요소 사이에 페이지 콘텐츠를 배치하는 모든 기본 페이지 스캐폴딩을 처리합니다. 다른 모든 레이아웃은 이 레이아웃을 상속하고 {{ content }} 블록 내부에 추가 스타일과 기능을 제공합니다.
layout: post이 레이아웃은 다음과 같은 머리말을 수용합니다:
# optional alternate title to replace page.title at the top of the page
alt_title : " Basically Basic "
# optional sub-title below the page title
sub_title : " The name says it all "
# optional intro text below titles, Markdown allowed
introduction : |
Basically Basic is a Jekyll theme meant to be a substitute for the default --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
# optional call to action links
actions :
- label : " Learn More "
icon : github # references name of svg icon, see full list below
url : " http://url-goes-here.com "
- label : " Download "
icon : download # references name of svg icon, see full list below
url : " http://url-goes-here.com "
image : # URL to a hero image associated with the post (e.g., /assets/page-pic.jpg)
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
twitter : johndoetwitter
comments : false # disable comments on this post참고: 히어로 이미지는 투명한 "악센트" 색상으로 오버레이되어 테마 팔레트와 통합될 수 있습니다. 활성화하려면 다음 Sass 변수 재정의를 사용하여 CSS를 사용자 정의하세요.
$intro-image-color-overlay : true;layout: page 시각적으로 이 레이아웃은 두 가지 사소한 차이점을 제외하고는 layout: post 와 동일하게 보이고 작동합니다.
layout: home 이 레이아웃은 다음 사항을 추가하여 layout: page 와 동일한 머리말을 수용합니다.
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), grid 기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요.
layout: posts 이 레이아웃은 게시된 연도별로 그룹화된 모든 게시물을 표시합니다. layout: page .
기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요.
layout: categories 이 레이아웃은 모든 게시물 그룹 카테고리를 표시합니다. layout: page .
기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요.
layout: tags 이 레이아웃은 태그별로 그룹화된 모든 게시물을 표시합니다. layout: page .
기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요.
layout: collection 이 레이아웃은 특정 컬렉션으로 그룹화된 모든 문서를 표시합니다. 다음을 추가하여 layout: page 와 동일한 머리말을 수용합니다.
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse recipes 컬렉션의 모든 문서를 표시하는 페이지를 만들려면 프로젝트 루트에 recipes.md 만들고 다음 머리말을 추가하세요.
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes 기본적으로 문서는 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요. 제목별로 컬렉션을 정렬하려면 sort_by: title 추가하세요. 역순 정렬을 원하면 sort_order: reverse 추가하세요.
layout: category 이 레이아웃은 특정 카테고리별로 그룹화된 모든 게시물을 표시합니다. 다음을 추가하여 layout: page 와 동일한 머리말을 수용합니다.
taxonomy : # category name
entries_layout : # list (default), grid 기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요.
foo 카테고리에 할당된 모든 게시물을 표시하는 페이지를 만들려면 프로젝트 루트에 foo.md 만들고 다음 머리말을 추가하세요.
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foolayout: tag 이 레이아웃은 특정 태그로 그룹화된 모든 게시물을 표시합니다. 다음을 추가하여 layout: page 와 동일한 머리말을 수용합니다.
taxonomy : # tag name
entries_layout : # list (default), grid 기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 entries_layout: grid 추가하세요.
foo bar 태그에 할당된 모든 게시물을 표시하는 페이지를 만들려면 프로젝트 루트에 foo-bar.md 만들고 다음 머리말을 추가하세요.
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo barlayout: about 이 레이아웃은 layout: page 과 동일한 머리말을 수용하며 작성자 사진을 표시하기 위해 다음을 추가합니다.
author :
name : John Doe
picture : /assets/images/johndoe.png 권장 picture 크기는 약 300 x 300 픽셀입니다. author 개체가 정보 페이지의 머리말에 명시적으로 설정되지 않은 경우 테마는 기본적으로 _config.yml 에 설정된 값으로 설정됩니다.
비어 있으면 이미지가 표시되지 않습니다.
layout: cv 이 레이아웃은 layout: page . 이력서 데이터에 대한 JSON 기반 파일 표준을 활용하여 커리큘럼 이력서를 편리하게 렌더링하거나 쉽게 이력서를 작성할 수 있습니다.
JSON Resume의 브라우저 내 이력서 빌더를 사용하여 JSON 파일을 내보내고 프로젝트에 _data/cv.json 으로 저장하기만 하면 됩니다.
권장되는 이미지 크기(픽셀 단위)는 다음과 같습니다.
| 영상 | 설명 | 크기 |
|---|---|---|
page.image.path | 큰 전체 너비 문서 이미지입니다. | 긴 이미지는 콘텐츠를 페이지 아래로 밀어냅니다. 1600 x 600 은 목표로 삼기에 좋은 중간 크기입니다. |
page.image | page.image.path 단독으로 사용하는 경우( thumbnail , caption 또는 기타 변수 없이) 약칭입니다. | page.image.path 와 동일 |
page.image.thumbnail | 그리드 보기에 사용되는 작은 문서 이미지입니다. | 400 x 200 |
author.picture | 작성자 페이지 이미지. | 300 x 300 |
이 테마의 기본 구조, 스타일 및 스크립트는 다음 두 가지 방법으로 재정의하고 사용자 정의할 수 있습니다.
테마 기본값은 동일한 이름의 파일을 프로젝트의 _includes 또는 _layouts 디렉터리에 배치하여 재정의할 수 있습니다. 예를 들어:
_includes/head.html 파일에 사용자 정의 스타일 경로나 메타 데이터를 지정하려면 프로젝트에 _includes 디렉토리를 만들고 Basic Basic의 gem 폴더에서 _includes/head.html <your_project>/_includes 로 복사한 다음 해당 파일 편집을 시작하세요. 유용한 팁: 컴퓨터에서 테마 파일을 찾으려면 bundle info jekyll-theme-basically-basic 실행하세요. 그러면 gem 기반 테마 파일의 위치가 반환됩니다.
기본 Sass(테마의 _sass 디렉터리에 있음)를 재정의하려면 다음 중 하나를 수행합니다.
기본 기본 gem에서 직접 복사
bundle info jekyll-theme-basically-basic 실행하세요)./assets/stylesheets/main.scss 의 내용을 <your_project> 에 복사하세요.<your_project>/assets/stylesheets/main.scss 내에서 원하는 것을 사용자 정의하세요.이 저장소에서 복사하세요.
<your_project> 에 복사하세요.<your_project/assets/stylesheets/main.scss 에서 원하는 것을 사용자 정의하세요. 참고: gem에 번들로 포함된 Sass 부분을 더 광범위하게 변경하고 사용자 정의하려면. Jekyll이 현재 해당 파일을 읽는 방식으로 인해 _sass 디렉토리의 전체 내용을 <your_project> 에 복사해야 합니다.
테마 스타일을 기본적으로 조정하려면 Sass 변수를 <your_project>/assets/stylesheets/main.scss 에 추가하여 재정의할 수 있습니다. 예를 들어 테마 전체에 사용되는 강조 색상을 변경하려면 다음을 추가하세요.
$accent-color : red ;테마에 번들로 포함된 기본 JavaScript를 재정의하려면 다음 중 하나를 수행합니다.
기본 기본 gem에서 직접 복사
bundle info jekyll-theme-basically-basic 실행하세요)./assets/javascripts/main.js 의 내용을 <your_project> 로 복사하세요.<your_project>/assets/javascripts/main.js 내에서 원하는 것을 사용자 정의하세요.이 저장소에서 복사하세요.
<your_project> 에 복사합니다.<your_project>/assets/javascripts/main.js 내에서 원하는 것을 사용자 정의하세요. 테마는 성능과 유연성을 위해 SVG로 저장된 소셜 네트워크 로고와 기타 아이콘을 사용합니다. 해당 SVG는 _includes 디렉토리에 있으며 icon- 접두사가 붙습니다. 각 아이콘은 16 x 16 뷰박스에 맞도록 크기와 디자인이 지정되었으며 SVGO로 최적화되었습니다.
| 상 | 파일 이름 |
|---|---|
| 아이콘-화살표-left.svg | |
| 아이콘-화살표-right.svg | |
| 아이콘-bitbucket.svg | |
| icon-calendar.svg | |
| 아이콘-codepen.svg | |
| icon-download.svg | |
| icon-dribbble.svg | |
| 아이콘-email.svg | |
| 아이콘-facebook.svg | |
| 아이콘-flickr.svg | |
| 아이콘-github.svg | |
| 아이콘-gitlab.svg | |
| icon-googleplus.svg | |
| 아이콘-instagram.svg | |
| 아이콘-lastfm.svg | |
| 아이콘-linkedin.svg | |
| 아이콘-pdf.svg | |
| icon-pinterest.svg | |
| icon-rss.svg | |
| 아이콘-soundcloud.svg | |
| 아이콘-stackoverflow.svg | |
| 아이콘-stopwatch.svg | |
| icon-tumblr.svg | |
| 아이콘-twitter.svg | |
| icon-xing.svg | |
| 아이콘-youtube.svg |
채우기 색상은 _sass/basically-basic/_icons.scss 부분에 정의되어 있으며 클래스 이름이 해당 아이콘과 일치하는 .icon-name 으로 설정됩니다.
예를 들어 Twitter 아이콘에는 다음과 같이 #1da1f2 채우기 색상이 지정됩니다.
< span class =" icon icon--twitter " > {% include icon-twitter.svg %} </ span >SVG 자산과 함께 소셜 네트워크 링크 생성을 지원하는 아이콘 도우미가 포함되어 있습니다.
| 매개변수 포함 | 설명 | 필수의 |
|---|---|---|
username | 특정 소셜 네트워크의 사용자 이름 | 필수의 |
label | 하이퍼링크에 사용되는 텍스트 | 선택사항, 기본값은 username 입니다. |
예를 들어 다음 icon-github.html 에는 다음이 포함됩니다.
{% include icon-github . html username = jekyll label = 'GitHub' %}다음 HTML이 출력됩니다.
< a href =" https://github.com/jekyll " >
< span class =" icon icon--github " > < svg viewBox =" 0 0 16 16 " xmlns =" http://www.w3.org/2000/svg " fill-rule =" evenodd " clip-rule =" evenodd " stroke-linejoin =" round " stroke-miterlimit =" 1.414 " > < path d =" M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 " > </ path > </ svg > </ span >
< span class =" label " > GitHub </ span >
</ a >이 테마를 개발하기 위해 환경을 설정하려면:
/example 에 cd 넣고 bundle install 실행하세요.테마를 변경할 때 로컬에서 테마를 테스트하려면 다음을 수행하세요.
jekyll-theme-basically-basic )로 cd .bundle exec rake preview 실행하고 브라우저에서 http://localhost:4000/example/ 엽니다. 그러면 테마 파일과 example/ 디렉토리의 내용을 사용하여 Jekyll 서버가 시작됩니다. 수정이 완료되면 브라우저를 새로 고쳐 변경 사항을 확인하세요.
문서에서 오타를 발견하셨나요? 기능을 추가하거나 버그를 수정하는 데 관심이 있으십니까? 그런 다음 반드시 이슈를 제출하거나 끌어오기 요청을 제출해 보세요. 이것이 첫 번째 풀 요청인 경우 GitHub Flow를 읽어 보는 것이 도움이 될 수 있습니다.
풀 요청을 제출할 때:
master 에서 분기를 만들고 의미 있는 이름(예: my-awesome-new-feature )을 지정하고 기능이나 수정 사항을 설명합니다. 오타 수정, 잘못된 문법 수정 등과 같은 "쉬운 일"을 해결하려는 경우 /docs 및 /example 폴더에서 샘플 페이지를 찾을 수 있습니다.
마이클 로즈
MIT 라이센스 (MIT)
저작권 (c) 2017-2021 Michael Rose 및 기여자
본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.
위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에 포함됩니다.
소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이거나 묵시적인 어떠한 종류의 보증도 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.
기본적으로 Basic에는 The Noun Project의 아이콘이 통합되어 있습니다. 아이콘은 Creative Commons Attribution 3.0 United States(CC BY 3.0 US)에 따라 배포됩니다.
기본적으로 Basic에는 Unsplash의 사진이 포함되어 있습니다.
기본적으로 Basic에는 Susy, Copyright (c) 2017, Miriam Eric Suzanne이 포함되어 있습니다. Susy는 BSD 3절 "신규" 또는 "개정" 라이센스의 조건에 따라 배포됩니다.
기본적으로 Basic에는 Breakpoint가 포함되어 있습니다. Breakpoint는 MIT/GPL 라이선스 조건에 따라 배포됩니다.
