so simple theme
3.2.0
So Simple은 단어와 그림을 위한 단순한 Jekyll 테마입니다. 다음을 제공하도록 구축되었습니다.
CHANGELOG에서 새로운 내용을 확인하세요. v2 문서 .
| 설명 | ||
|---|---|---|
| 대형 히어로 이미지가 포함된 게시물입니다. | 시사 | 원천 |
| 테마 스타일 지정 방법을 보여주는 다양한 공통 HTML 요소가 포함된 게시물입니다. | 시사 | 원천 |
| 강조 표시된 코드를 표시하는 게시물입니다. | 시사 | 원천 |
| 다양한 정렬로 이미지를 표시하는 게시물입니다. | 시사 | 원천 |
| 모든 게시물은 연도별로 그룹화됩니다. | 시사 | 원천 |
| 모든 게시물은 카테고리별로 그룹화되어 있습니다. | 시사 | 원천 |
| 모든 게시물은 태그별로 그룹화됩니다. | 시사 | 원천 |
| 카테고리 페이지. | 시사 | 원천 |
| 그리드 보기의 문서 목록입니다. | 시사 | 원천 |
추가 샘플 게시물은 데모 사이트에서 볼 수 있습니다. 이들(및 전체 데모 사이트)의 소스 파일은 /docs 폴더에서 찾을 수 있습니다.
Jekyll v3.5+를 실행하고 자체 호스팅을 하고 있다면 테마를 Ruby gem으로 빠르게 설치할 수 있습니다. GitHub 페이지를 사용하여 호스팅하는 경우 원격 테마로 설치하거나 모든 테마 파일(아래 구조 참조)을 프로젝트에 직접 복사할 수 있습니다.
Jekyll 사이트의 Gemfile 에 다음 줄을 추가하거나 새로 만드세요:
gem "jekyll-theme-so-simple" Jekyll 사이트의 _config.yml 파일에 다음 줄을 추가하세요:
theme : jekyll-theme-so-simple그런 다음 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에 푸시하여 강제로 다시 빌드할 수 있습니다(자세한 내용은 아래 참조).
동일한 GitHub 사용자 이름으로 여러 Jekyll 기반 사이트를 호스팅하는 경우 사용자 페이지 대신 프로젝트 페이지를 사용해야 합니다. 기본적으로 저장소의 이름을 USERNAME.github.io 가 아닌 다른 이름으로 바꾸고 master 에서 gh-pages 분기를 만듭니다. 이것이 어떻게 작동하는지에 대한 자세한 내용은 GitHub의 설명서를 확인하세요.
so-simple-theme 저장소를 포크하거나 다운로드한 경우 다음 파일과 폴더를 안전하게 제거할 수 있습니다.
.githubdocsexample.editorconfig.gitattributesbanner.jsCHANGELOG.mdGemfilejekyll-theme-so-simple.gemspecpackage.jsonRakefileREADME.mdREADME-OLD.mdscreenshot.pngRuby Gem 또는 So Simple의 원격 테마 버전을 사용하는 경우 업그레이드가 상당히 쉽습니다.
현재 사용 중인 버전을 확인하려면 구축된 사이트의 소스를 보면 다음과 유사해야 합니다.
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
이는 모든 .html 파일, /assets/css/main.css 및 /assets/js/main.js 상단에 있습니다.
Bundler( Gemfile 이 있음)를 사용하고 있다면 간단히 bundle update 실행하고, 그렇지 않다면 gem update jekyll-theme-so-simple 실행하세요.
_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/so-simple-theme.git 에서 가져올 수 있는지 확인하세요.
추가하려면 다음을 수행할 수 있습니다.
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
이제 다음을 사용하여 테마의 master 브랜치에 대한 커밋을 가져올 수 있습니다.
git pull upstream master
포크 후 수행한 사용자 정의의 양에 따라 병합 충돌이 발생할 수 있습니다. Git 플래그와 충돌하는 파일을 처리하고 유지하려는 변경 사항을 준비한 다음 커밋합니다.
업데이트를 처리하는 또 다른 방법은 테마를 다운로드하여 레이아웃, 포함 및 자산을 최신 항목으로 수동으로 바꾸는 것입니다. 변경 사항을 놓치지 않으려면 테마의 커밋 기록을 검토하여 변경된 내용을 확인하세요.
다음은 주의해야 할 중요한 폴더/파일에 대한 간단한 체크리스트입니다.
| 이름 | |
|---|---|
_layouts | 모두 교체하세요. 레이아웃을 사용자 정의한 경우 편집 내용을 적용합니다. |
_includes | 모두 교체하세요. 포함 내용을 맞춤설정한 경우 수정사항을 적용하세요. |
assets | 모두 교체하세요. 스타일시트나 스크립트를 사용자 정의한 경우 편집 내용을 적용합니다. |
_sass | 모두 교체하세요. Sass 부분을 사용자 정의한 경우 편집 내용을 적용합니다. |
_data/navigation.yml | 보관해도 안전합니다. 주요 구조적 변경이나 추가가 없었는지 확인합니다. |
_data/text.yml | 보관해도 안전합니다. 주요 구조적 변경이나 추가가 없었는지 확인합니다. |
_config.yml | 보관해도 안전합니다. 주요 구조적 변경이나 추가가 없었는지 확인합니다. |
참고: 최신 버전이 표시되지 않으면 브라우저 및 CDN 캐시를 플러시하세요. 호스팅 환경에 따라 이전 버전의 /assets/css/main.css , /assets/js/main.min.js 또는 *.html 파일이 캐시될 수 있습니다.
레이아웃, 포함, Sass 부분 및 데이터 파일은 모두 기본 위치에 배치됩니다. 스타일시트와 스크립트는 assets 에서 찾을 수 있으며, 프로젝트 루트 디렉터리에서 몇 가지 개발 관련 파일을 찾을 수 있습니다.
참고: Ruby Gem 또는 원격 테마 방법을 통해 So Simple을 설치한 경우 /_layouts , /_includes , /_sass 및 /assets 에 있는 테마 파일이 프로젝트에서 누락됩니다. jekyll-theme-so-simple gem과 함께 번들로 제공되므로 이는 정상적인 현상입니다.
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
Gemfile 생성하고 테마를 설치한 후 다음 파일을 추가하고 편집해야 합니다.
_config.yml/_data/navigation.yml/_data/text.ymlindex.md참고: 홈 페이지에서 활성화하는 방법에 대한 지침은 아래 페이지 매김 문서를 참조하세요.
jekyll new 에서 시작하기 jekyll new 명령을 사용하면 가장 빠르게 시작하고 실행할 수 있습니다.
위의 설치 가이드와 아래의 구성 가이드에 따라 Gemfile 및 _config.yml 파일을 편집한 다음 이전 지침에 따라 _data/text.yml 만듭니다.
사이트 전체 요소( locale , title , description , url , logo , author 등)의 구성은 프로젝트의 _config.yml 에서 이루어집니다. 추가 참조는 이 저장소의 예제 구성을 참조하세요.
| 이름 | 설명 | 예 |
|---|---|---|
locale | 사이트의 기본 언어입니다. | "en-us" |
title | 사이트 제목. | "My Awesome Site" |
description | 간단한 설명입니다. | "This is my site, it is awesome." |
baseurl | 배포될 동일한 기본 URL에서 웹사이트를 테스트하는 데 사용됩니다. | /my-base-path |
url | 사이트의 전체 URL입니다. | "https://your-site.com" |
logo | 마스트헤드에 사용되는 사이트 전체 로고의 경로입니다. | /images/your-logo.png |
세 가지 스킨(기본, 밝음, 어두움)을 사용하여 테마의 색상 팔레트를 변경할 수 있습니다.
default.css | light.css | dark.css |
|---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "제공된 스킨 이외의 사용자 정의 스킨을 사용하려면:
/assets/css/skins/default.scss 로컬 저장소에 복사하고 이름을 바꿉니다..css 파일을 참조하도록 _config.yml 의 skin 경로를 업데이트하세요. site.locale 은 사이트 내 각 웹페이지의 기본 언어를 선언하는 데 사용됩니다.
예: locale: "en-US" 는 사이트의 lang 속성을 미국 스타일의 영어로 설정하는 반면 en-GB 영국 스타일의 영어로 설정합니다. 국가 코드는 선택 사항이며 더 짧은 변형 locale: "en" 도 허용됩니다. 언어 및 국가 코드를 찾으려면 이 참조 표를 확인하세요.
텍스트 데이터 파일에 있는 현지화된 텍스트를 연결하려면 로케일을 올바르게 설정하는 것이 중요합니다.
참고: 테마는 기본적으로 영어( en , en-US , en-GB ) 텍스트로 설정됩니다. _config.yml 의 로케일을 다른 것으로 변경하는 경우 해당 로케일 키와 번역된 텍스트를 _data/text.yml 에 추가해야 합니다.
사이트의 기본 호스트 이름 및 프로토콜입니다. GitHub 페이지로 호스팅하는 경우 url: "https://github.io.mmistakes" 또는 사용자 정의 도메인 이름이 있는 경우 url: "https://your-site.com" 과 같습니다.
GitHub 페이지는 이제 새로운 사이트에 대해 https:// 강제하므로 혼합 콘텐츠 경고를 피하기 위해 URL을 설정할 때 이 점에 유의하세요.
참고: Jekyll은 개발 시 로컬에서 jekyll serve 실행할 때 url 값을 http://localhost:4000 으로 덮어씁니다. 이 동작을 피하려면 JEKYLL_ENV=production 설정하여 환경을 프로덕션으로 강제 설정하세요.
이 옵션은 Jekyll 커뮤니티에 온갖 종류의 혼란을 야기합니다. 사이트를 GitHub 프로젝트 페이지나 하위 폴더(예: /blog )로 호스팅하지 않는 경우에는 함부로 다루지 마세요.
So Simple 데모 사이트의 경우 GitHub(https://mmitakes.github.io/so-simple-theme)에서 호스팅됩니다. 이 기본 경로를 올바르게 설정하려면 url: "https://mmistakes.github.io" 및 baseurl: "/so-simple-theme" 사용합니다.
Jekyll 관리자가 의도한 대로 site.url 및 site.baseurl 을 올바르게 사용하는 방법에 대한 자세한 내용은 해당 주제에 대한 Parker Moore의 게시물을 확인하세요.
참고: baseurl 사용할 때는 이를 콘텐츠의 링크 및 자산 경로의 일부로 포함해야 합니다. url: 및 baseurl: "/blog" 값을 사용하면 로컬 사이트가 http://localhost:4000이 아닌 http://localhost:4000/blog에 표시됩니다. 모든 자산과 내부 링크 경로 앞에 {{ site.baseurl }} 을 추가하거나 Jekyll의 relative_url 사용할 수 있습니다.
다음 이미지 경로 위의 예시 값을 사용하려면 {{ '/images/my-image.jpg' | relative_url }} http://localhost:4000/blog/images/my-image.jpg 로 올바르게 출력됩니다.
relative_url 필터가 없으면 해당 자산 경로가 /blog 누락되고 페이지에 이미지가 깨질 수 있습니다.
_config.yml 에 date_format 지정하여 기본 날짜 형식을 변경할 수 있습니다. 표준 Liquid 날짜 형식을 모두 허용합니다.
예를 들어 "%B %-d, %Y" 의 기본값은 다음과 같이 변경될 수 있습니다.
date_format : " %Y-%m-%d " read_time: true 사용하여 사이트 전체에서 예상 읽기 시간 조각을 활성화합니다. 200 분당 기본 단어 값으로 설정되었습니다. 이는 _config.yml 파일의 words_per_minute 통해 변경할 수 있습니다.
read_time : true
words_per_minute : 200사이트 전체에서 MathJax (수학용 JavaScript 디스플레이 엔진)를 활성화합니다.
mathjax :
enable : true combo 옵션을 사용하면 MathJax 구성 요소 조합을 선택할 수 있습니다. 기본값은 "tex-svg"입니다. 그리고 tags 옵션을 사용하면 등식 번호 매기기를 제어할 수 있습니다. 선택 사항은 "ams"(기본값), "all" 및 "none"입니다.
샘플 구성:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all" 글꼴 name 과 weights 적절히 바꾸면 사이트 전체에서 Google 글꼴을 쉽게 사용할 수 있습니다. 권장되는 글꼴 쌍은 다음과 같습니다.
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " 참고: 다른 글꼴 계열을 사용하는 경우 /assets/css/main.scss 에 다음 SCSS 변수를 추가한 후 Google이 제공하는 font-family 값으로 재정의하세요.
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;테마의 기본 변수 재정의에 대한 자세한 내용은 아래 스타일시트 문서를 참조하세요.
페이지 매김을 활성화하여 홈 페이지의 기본 게시물 목록을 여러 페이지로 나눕니다.
Gemfile 에 jekyll-paginate 플러그인을 포함하세요.
group :jekyll_plugins do
gem "jekyll-paginate"
end _config.yml 파일의 plugins 배열(이전에는 gems )에 jekyll-paginate 추가하고 다음 페이지 매김 설정을 추가하세요:
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/ 프로젝트 루트에 index.html 만들고(또는 index.md 이름을 바꾸고) 다음 머리말을 추가하세요.
layout : home
paginate : true 검색 페이지에서 사용하기 위해 문서의 전체 콘텐츠를 색인화하려면 _config.yml 에서 search_full_content true 로 설정하세요.
search_full_content : true 참고: 게시물의 양이 많으면 검색 색인의 크기가 증가하여 페이지 로드 성능에 영향을 미칩니다. search_full_content false (기본값)로 설정하면 색인이 본문 내용의 처음 50개 단어로 제한됩니다.
기본적으로 게시물에 추가된 카테고리와 태그는 분류 아카이브 페이지에 연결되지 않습니다. 이 동작을 활성화하고 카테고리 또는 태그별로 그룹화된 게시물이 있는 페이지에 링크하려면 다음을 추가하세요.
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# " 이러한 경로는 카테고리 및 태그 아카이브 페이지에 사용되는 영구 링크를 모방해야 합니다. 페이지의 올바른 분류 섹션을 대상으로 지정하려면 끝에 있는 # 이 필요합니다.
예를 들어, 다음과 같은 머리말로 categories.md 생성하려는 경우:
title : Categories Archive
layout : categories
permalink : /foo/ 카테고리 링크가 제대로 작동하려면 category_archive_path "/foo/# 로 변경해야 합니다.
참고: layout: category 및 layout: tag 사용하여 전용 카테고리 및 태그 페이지를 수동으로 생성할 수 있습니다. 또는 jekyll-archives 또는 jekyll-paginate-v2 와 같은 플러그인을 사용하여 자동으로 생성하세요.
Disqus 계정이 있는 경우 각 게시물 아래에 댓글 섹션을 표시할 수 있습니다.
Disqus 댓글을 활성화하려면 프로젝트의 _config.yml 파일에 Disqus 단축 이름을 추가하세요.
disqus :
shortname : my_disqus_shortname 댓글은 Disqus 계정이 localhost 콘텐츠로 오염되는 것을 방지하기 위해 JEKYLL_ENV=production 환경 값으로 빌드된 경우 프로덕션에서만 나타납니다.
특정 게시물에 대한 댓글을 표시하고 싶지 않다면 해당 게시물의 머리말에 comments: false 추가하여 댓글을 비활성화할 수 있습니다.
Google Analytics를 활성화하려면 다음과 같이 추적 ID를 _config.yml 에 추가하세요.
google_analytics : UA-NNNNNNNN-N 위의 Disqus 댓글과 마찬가지로 Google Analytics 추적 스크립트는 JEKYLL_ENV=production 환경 값을 사용할 때만 프로덕션에 나타납니다.
더 많은 구성 옵션을 보려면 jekyll-seo-tag , jekyll-feed , jekyll-paginate 및 jekyll-sitemap 문서를 참조하세요.
이 테마는 다음과 같은 레이아웃을 제공하며, 각 페이지의 layout 머리말을 다음과 같이 설정하여 사용할 수 있습니다.
---
layout : name
---layout: default 이 레이아웃은 마스트헤드와 바닥글 요소 사이에 페이지 콘텐츠를 배치하는 모든 기본 페이지 스캐폴딩을 처리합니다. 다른 모든 레이아웃은 이 레이아웃을 상속하고 {{ content }} 블록 내부에 추가 스타일과 기능을 제공합니다.
layout: post이 레이아웃은 다음과 같은 머리말을 수용합니다:
| 이름 | 유형 | 설명 |
|---|---|---|
image | 끈 | 게시물과 관련된 큰 이미지의 경로입니다. 활성화된 경우 OpenGraph, Twitter 카드 및 사이트 피드 썸네일에도 사용됩니다. 권장되는 이미지 크기. |
image.path | 끈 | 위와 동일합니다. image 객체에도 thumbnail 이나 caption 할당해야 할 때 사용됩니다. |
image.caption | 끈 | 이미지를 설명하거나 출처를 제공합니다. 마크다운이 허용됩니다. |
author | 객체 또는 문자열 | 게시물의 작성자 name , picture , twitter , links 등을 지정합니다. |
comments | 부울 | comments: false . |
share | 부울 | share: true 사용하여 게시물에 소셜 공유 링크를 추가하세요. |
게시물 이미지 예:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) " 참고: jekyll-seo-tag를 완벽하게 지원하기 위해 image.feature 머리말은 더 이상 사용되지 않습니다. thumbnail 이나 caption 사용하지 않는 경우 게시물 이미지를 image: /images/your-post-image.jpg 로 더 간결하게 지정할 수 있습니다.
게시물 작성자의 예:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe 참고: 문서의 머리말에서 다음을 수행하여 작성자 정보를 _data/authors.yml 에 중앙 집중화할 수 있습니다.
author : johndoe _data/authors.yml 의 해당 작성자 키를 사용하면 다음과 같습니다.
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe 참고: author.picture 권장 크기는 150 x 150 픽셀입니다.
작성자 사이드바에 표시되는 링크를 정의하려면 _config.yml 또는 /_data/authors.yml 의 authors.links 키를 사용하세요.
| 이름 | 설명 |
|---|---|
title | 링크를 설명합니다. 표시되지 않으며 접근성 목적으로 사용됩니다. |
url | 링크가 가리키는 URL입니다. |
icon | Font Awesome 아이콘(예: fab fa-twitter-square 에 해당합니다. |
예:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-square참고: 작성자 링크를 완전히 비활성화하려면 다음을 사용하세요.
author :
links : falselayout: page 시각적으로 이 레이아웃은 layout: post 과 유사하게 보이고 작동하지만 다음과 같은 차이점이 있습니다.
페이지 레이아웃은 home , posts , categories , tags , collection , category , tag 및 search 과 같은 여러 다른 레이아웃의 기반을 형성합니다.
layout: home 이 레이아웃은 다음 사항을 추가하여 layout: page 와 동일한 머리말을 수용합니다.
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), grid페이지 매김이 활성화되지 않은 경우 페이지는 기본적으로 최신 10개의 게시물을 표시합니다. 표시되는 게시물의 양을 변경하려면 페이지의 머리말에 다음을 추가하여 제한 값을 지정하세요.
posts_limit : 5 기본적으로 게시물은 목록 보기로 표시됩니다. 그리드 보기로 변경하려면 페이지의 머리말에 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 추가하세요. 레시피 제목만 표시하는 목록(발췌 없음)을 찾고 있다면 show_excerpts: false 추가하세요.
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: search이 레이아웃은 검색 양식을 표시하고 쿼리를 기반으로 관련 페이지를 표시합니다.
페이지 콘텐츠 색인: title , excerpt , content (활성화된 경우), categories , tags 및 url .
검색 색인에서 특정 페이지/게시물을 제외하려면 머리말에서 검색 플래그를 false 로 설정하세요.
search : false 문서의 전체 콘텐츠를 색인화하려면 _config.yml 에서 search_full_content true 로 설정하세요.
search_full_content : true 참고: 게시물의 양이 많으면 검색 색인의 크기가 증가하여 페이지 로드 성능에 영향을 미칩니다. search_full_content false (기본값)로 설정하면 색인이 본문 내용의 처음 50개 단어로 제한됩니다.
권장되는 이미지 크기(픽셀 단위)는 다음과 같습니다.
| 영상 | 설명 | 크기 |
|---|---|---|
site.logo | 마스트헤드에 사용되는 사이트 전체 로고. | 200 x 200 |
page.image.path | 큰 전체 너비 문서 이미지입니다. | 긴 이미지는 콘텐츠를 페이지 아래로 밀어냅니다. 1600 x 600 은 목표로 삼기에 좋은 중간 크기입니다. |
page.image | page.image.path 단독으로 사용하는 경우( thumbnail , caption 또는 기타 변수 없이) 약칭입니다. | page.image.path 와 동일 |
page.image.thumbnail | 그리드 보기에 사용되는 작은 문서 이미지입니다. | 400 x 200 |
author.picture | 게시물 사이드바에 작성자 사진이 표시됩니다. | 150 x 150 |
테마 전체에 있는 텍스트를 변경하려면 다음 /_data/text.yml 파일을 복사하고 필요에 따라 사용자 정의하세요.
새 텍스트를 추가할 때 키가 site.locale 에 사용될 수 있는 언어/국가 코드와 일치하는지 확인하세요.
상단 탐색에 링크된 페이지를 정의하려면:
/_data/navigation.yml 파일을 생성합니다.
표시하려는 순서대로 페이지를 추가하세요.
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/참고: 제목이 길거나 링크가 많으면 특히 작은 화면에서 탐색 표시줄이 여러 줄로 나누어질 수 있습니다. 사이트의 기본 탐색을 개발할 때 이 점을 염두에 두십시오.
작성자 정보는 "라인별" 게시물의 메타 데이터로 사용되며 _config.yml 의 다음 머리말과 함께 Twitter 요약 카드의 creator 필드를 전파합니다.
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.png사이트 전체 작성자 정보는 동일한 방식으로 문서의 머리말에서 무시될 수 있습니다.
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.png 또는 site.data.authors 에 있는 문서의 머리말에 해당 키를 지정하면 됩니다. 예를 들어 문서의 머리말에 다음과 같은 내용이 있습니다.
author : megaman _data/authors.yml 에는 다음이 있습니다.
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png 현재 author.picture layout: post 에만 사용됩니다. 권장 크기는 150 x 150 픽셀입니다.
바닥글 링크와 저작권 텍스트는 모두 사용자 정의할 수 있습니다.
바닥글 링크는 footer_links 키 아래의 _config.yml 에 설정됩니다.
| 이름 | 설명 |
|---|---|
title | 링크를 설명합니다. 표시되지 않으며 접근성 목적으로 사용됩니다. |
url | 링크가 가리키는 URL입니다. |
icon | Font Awesome 5 아이콘(예: fab fa-twitter-square 에 해당합니다. |
예:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square 참고: 바닥글 링크를 완전히 비활성화하려면 footer_links: false 사용하세요.
기본적으로 저작권은 현재 연도, site.title 및 "Powered by Jekyll & So Simple." 이를 변경하려면 다음과 같이 _config.yml 에 copyright 추가하세요(Markdown이 허용됨).
copyright : " This site is made with <3 by *me, myself, and I*. " 이러한 Jekyll 도우미는 단축 코드로 생각하시면 됩니다. GitHub 페이지는 대부분의 플러그인을 허용하지 않으므로 사용자 정의 태그가 종료되었습니다. 대신 테마 활용에는 비슷한 작업이 포함됩니다 .
YouTube/Vimeo 또는 상위 항목의 너비에 맞게 반응적으로 크기가 조정되는 기타 iframe 콘텐츠의 동영상을 삽입하세요.
| 매개변수 | 필수의 | 설명 |
|---|---|---|
url | 예 | 동영상 또는 iframe의 URL(예: https://www.youtube.com/watch?v=-PVofD2A9t8 ) |
ratio | 선택 과목 | 비디오 또는 iframe 콘텐츠의 비율입니다. 21:9 , 16:9 , 4:3 , 1:1 . 비율이 지정되지 않은 경우 16:9 사용됩니다. |
예:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}게시물과 페이지에 대해 자동 생성된 목차를 포함하려면 표시하려는 위치에 다음 도우미를 추가하세요.
{% include toc %}So Simple 3은 전체 테마를 대대적으로 재작성한 것입니다. 가장 눈에 띄는 변경 사항은 아래에 요약되어 있으며, 그 다음에는 보다 구체적인 변경 사항이 있습니다.
v2의 모든 _layouts , _includes , _sass , .css 및 .js 파일을 버리고 Ruby gem 또는 원격 테마 설치 옵션을 사용하고 싶을 것이라고 말해도 무방합니다.
_layouts , _includes , _sass 및 JavaScript가 재구축되었습니다.relative_url 및 absolute_url 필터를 활용하여 site.url 및 site.baseurl 올바르게 사용합니다./_includes/open-graph.html jekyll-seo-tag 로 대체했습니다.tags 및 posts )으로 대체되었습니다.404.md 페이지가 제거되었습니다.atom.xml 피드 파일을 jekyll-feed 로 대체했습니다.favicon.ico 및 favicon.png 파일을 제거했습니다.float 기반 레이아웃에 대한 대체가 사용되어 디스플레이를 지원하지 않는 브라우저에서 상황이 너무 깨져 보이지 않습니다 display: grid 및 가변상자. 형식이 en_US (밑줄 포함)에서 하이픈 포함 en-US 로 변경되었습니다.
site.owner 이제 jekyll-seo-tag 및 jekyll-feed를 더 잘 지원하기 위해 site.author 입니다.
| v2 | v3 |
|---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | 더 이상 사용되지 않으며 jekyll-seo-tag로 대체됨 |
site.owner.bing-verify | 더 이상 사용되지 않으며 jekyll-seo-tag로 대체됨 |
site.owner.google.analytics 는 이제 site.google_analytics 입니다. 자세한 내용은 설명서를 참조하세요.
site.owner.disqus-shortname 은 이제 site.disqus.shortname 입니다. 자세한 내용은 설명서를 참조하세요.
특정 게시물에 대한 댓글을 비활성화하려면 머리말에 comments: false 추가하세요.
search_omit 이름이 search 로 변경되었습니다. 검색에서 게시물이나 페이지를 제외하려면 대신 머리말에 search: false 추가하세요.
site.logo , page.image.path , author.picture 등과 같은 항목에 대한 이미지 경로를 할당할 때 이제 전체 상대 또는 절대 경로가 필요합니다.
So Simple v2에서는 이미지가 모두 /images/ 에 배치되었으며 파일 이름만 머리말에 할당되었습니다. 이미지를 올바르게 로드하려면 이제 모든 경로 앞에 /images/ 추가해야 합니다. 예를 들어 /images/your-image.jpg 와 같이 이미지를 저장하는 경우입니다.
jekyll-seo-tag, jekyll-feed, jekyll-sitemap과 같은 Jekyll 플러그인을 더 효과적으로 지원하기 위해 대부분의 image 키 이름이 변경되었습니다. 그에 따라 모든 게시물과 페이지의 머리말을 조정하세요.
| v2 | v3 |
|---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (마크다운 허용) |
image.creditlink | 더 이상 사용되지 않음 대신 **image.caption** 사용 |
다음 v2 머리말이 포함된 게시물:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.com다음 v3 머리말로 변환됩니다.
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "So Simple v2 포크(변경 없음)를 최신 버전으로 마이그레이션하는 대략적인 단계입니다.
_includes/ , _layouts/ , _sass/ , jshintrc , Gruntfile.js 및 search.json 제거합니다.
Ruby gem 또는 GitHub 페이지 설치 방법에 대한 Gemfile 편집하고 해당 지침을 따르세요.
_config.yml 에 다음 Google 글꼴을 추가합니다.
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " 이름이 변경되었거나 새로운 상대 경로 요구 사항이 있는 키에 세심한 주의를 기울여 _config.yml 편집합니다. locale , logo 및 owner 시작하기 좋은 곳입니다.
위의 이미지 변경 사항을 준수하는 게시물/페이지에 있는 image.feature , image.thumb 및 image.credit 의 모든 인스턴스 이름을 바꿉니다.
index.html 에서 본문 콘텐츠를 제거하고 layout: page layout: home 으로 변경합니다. 필요한 경우 페이지 매김을 구성합니다.
/search/index.md 에서 본문 내용을 제거하고 layout: page layout: search 로 변경합니다.
/tags/index.md 에서 본문 내용을 제거하고 layout: page layout: tags 로 변경합니다.
/articles/index.md 에서 본문 콘텐츠를 제거하고 layout: page layout: category 로 변경하고 taxonomy: articles 추가합니다.
/body/index.md 에서 본문 콘텐츠를 제거하고 layout: page layout: category 로 변경하고 taxonomy: blog 추가합니다.
이를 지원하는 플러그인과의 패리티 향상을 위해 게시물/페이지의 modified 머리말 이름을 last_modified_at 로 바꿉니다.
포스트 메타 사이드바에서 태그 링크를 활성화하려면 _config.yml 에 tag_archive_path: "/tags/#" 추가하세요.
_data/authors.yml (및 모든 게시물/페이지 머리말)에서 avatar 이름을 picture 으로 바꾸고 위의 이미지 경로 변경 사항을 준수하여 경로를 편집합니다.
Ruby gem 또는 원격 테마 로 설치하는 경우 핵심 테마 파일( _layouts , _includes , _sass , assets 등)이 프로젝트에 없습니다.
이 테마의 기본 구조, 스타일 및 스크립트는 다음 두 가지 방법으로 재정의하고 사용자 정의할 수 있습니다.
테마 파일은 동일한 이름의 파일을 프로젝트의 _includes 또는 _layouts 디렉터리에 배치하여 재정의할 수 있습니다. 예를 들어:
_includes/social-share.html 에 다른 소셜 공유 버튼을 추가하려면 프로젝트에 _includes 디렉터리를 만들고 So Simple의 gem 폴더에서 _includes/social-share.html <your_project>/_includes 로 복사한 후 해당 파일을 편집하세요. 유용한 팁: 컴퓨터에서 테마 파일을 찾으려면 bundle show jekyll-theme-so-simple 실행하세요. 그러면 gem 기반 테마 파일의 위치가 반환됩니다.
테마에는 사용자 지정 마크업과 콘텐츠를 미리 정의된 위치에 삽입하는 데 도움이 되는 두 개의 파일이 함께 제공됩니다.
| 설명 | |
|---|---|
_includes/head-custom.html | 메타데이터, 파비콘 등을 추가하기 위해 <head> 요소 내부에 삽입됩니다. |
_includes/footer-custom.html | 사이트 스크립트 및 저작권 정보 앞에 <footer> 요소 안에 삽입됩니다. |
기본 Sass(테마의 _sass 디렉터리에 있음)를 재정의하려면 다음 중 하나를 수행합니다.
So Simple gem에서 직접 복사
bundle show jekyll-theme-so-simple 실행하세요)./assets/css/main.scss 의 내용을 <your_project> 로 복사하세요.<your_project>/assets/css/main.scss 내에서 원하는 것을 사용자 정의하세요.이 저장소에서 복사하세요.
<your_project> 에 복사하세요.<your_project/assets/css/main.scss 내에서 원하는 것을 사용자 정의하세요. 참고: gem에 번들로 포함된 실제 Sass 부분을 사용자 정의하려면 _sass 디렉토리의 전체 내용을 <your_project> 에 복사해야 합니다. Jekyll이 현재 이러한 파일을 가져오는 방식으로 인해 전부 아니면 전무입니다. 단일 Sass 부분(또는 두 개)을 재정의하는 것은 _includes 및 _layouts 처럼 작동하지 않습니다.
테마 스타일을 기본적으로 조정하려면 Sass 변수를 <your_project>/assets/css/main.scss 에 추가하여 재정의할 수 있습니다. 예를 들어 테마 전체에 사용되는 강조 색상을 변경하려면 모든 @import 줄 앞에 다음을 추가하세요.
$accent-color : tomato ;테마에 번들로 포함된 기본 JavaScript를 재정의하려면 다음 중 하나를 수행합니다.
So Simple gem에서 직접 복사
bundle show jekyll-theme-so-simple 실행하세요)./assets/js/main.js 의 내용을 <your_project> 에 복사하세요.<your_project>/assets/js/main.js 내에서 원하는 것을 사용자 정의하세요.이 저장소에서 복사하세요.
/assets/js/main.js 의 내용을 <your_project> 에 복사하세요.<your_project>/assets/js/main.js 내에서 원하는 것을 사용자 정의하세요. 테마의 /assets/js/main.min.js 파일은 jQuery 플러그인과 /assets/js/ 에 있는 기타 스크립트로 구축되었습니다.
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
자신만의 스크립트를 수정하거나 추가하려면 해당 스크립트를 assets/js/main.js 에 포함시킨 다음 npm run build:js 사용하여 다시 빌드하세요. 자세한 내용은 아래를 참조하세요.
/assets/js/plugins/ 에 추가 스크립트를 추가하고 다른 스크립트와 연결하려면 package.json 에서 uglify 스크립트를 업데이트하세요. 제거한 스크립트도 마찬가지입니다.
_config.yml 의 다음 배열에 경로를 추가하여 <head> 또는 닫는 </body> 요소에 스크립트를 추가할 수도 있습니다.
예:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js 참고: footer_scripts 에 경로를 할당하면 테마의 /assets/js/main.min.js 파일이 비활성화됩니다. 이 스크립트에는 특별히 footer_scripts 배열에 추가하지 않는 한 작동이 중단되는 플러그인 및 기타 스크립트가 포함되어 있습니다.
테마는 도상학을 위해 JS 버전의 Font Awesome SVG를 활용합니다. 이러한 아이콘이 나타나는 주요 위치는 작성자 사이드바 및 바닥글 링크입니다.
이 테마를 개발하기 위해 환경을 설정하려면:
/example 에 cd 넣고 bundle install 실행하세요.테마를 변경할 때 로컬에서 테마를 테스트하려면 다음을 수행하세요.
jekyll-theme-so-simple )에 cd 넣으세요.bundle exec rake preview 실행하고 브라우저에서 http://localhost:4000/example/ 엽니다. 그러면 테마 파일과 example/ 디렉토리의 내용을 사용하여 Jekyll 서버가 시작됩니다. 수정이 완료되면 브라우저를 새로 고쳐 변경 사항을 확인하세요.
종속성을 줄이기 위한 노력의 일환으로 Gulp 또는 Grunt와 같은 작업 실행기 대신 npm 스크립트 세트를 사용하여 main.min.js 빌드합니다. 해당 도구가 귀하의 스타일에 더 적합하다면 반드시 해당 도구를 대신 사용하십시오.
시작하려면:
cd 이동하세요. 참고: 이전 버전의 테마에서 업그레이드한 경우 npm install 실행하기 전에 package.json 복사했는지 확인하세요. node_modules 디렉터리도 제거해야 할 수도 있습니다.
모든 것이 순조롭게 진행되면 npm run build:js 실행하면 main.js 와 모든 플러그인 스크립트가 /assets/js/main.min.js 로 압축/연결됩니다.
문서에서 오타를 발견하셨나요? 기능이나 버그 수정을 요청하시나요? 중복을 피하기 위해 이슈를 제출하기 전에 공개 이슈와 마감 이슈를 검색하세요.
Pull 요청에도 감사드립니다. 처음이라면 GitHub Flow를 읽어보는 것이 도움이 될 수 있습니다.
귀하의 기여로 인해 테마의 동작이 추가되거나 변경되는 경우 문서 및/또는 샘플 콘텐츠를 업데이트하십시오. 문서는 README.md에 있고 샘플 게시물, 페이지 및 컬렉션은 docs 및 example 폴더에 있습니다.
풀 요청을 제출할 때:
master 에서 분기를 만들고 의미 있는 이름을 지정합니다(예: my-awesome-new-feature ).마이클 로즈
MIT 라이센스 (MIT)
저작권 (c) 2013-2019 Michael Rose 및 기여자
본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.
위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에 포함됩니다.
소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이거나 묵시적인 어떠한 종류의 보증도 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.
So Simple에는 Font Awesome, Copyright (c) 2017 Dave Gandy가 포함되어 있습니다. Font Awesome은 SIL OFL 1.1 및 MIT 라이선스 조건에 따라 배포됩니다.
So Simple은 Unsplash의 사진을 통합합니다.
So Simple은 WeGraphics의 사진을 통합합니다.
So Simple에는 Breakpoint가 포함되어 있습니다. 중단 점은 MIT/GPL 라이센스의 조건에 따라 배포됩니다.
따라서 Simple은 jQuery Smooth Scroll, Copyright (C) 2017 Karl Swedberg를 통합합니다. JQuery Smooth Scroll은 MIT 라이센스의 조건에 따라 배포됩니다.
따라서 Simple은 Lunr, Copyright (C) 2017 Oliver Nightingale을 통합합니다. LUNR은 MIT 라이센스의 조건에 따라 배포됩니다.
따라서 간단한 Lity, Copyright (C) 2015-2016, Jan Sorgalla를 통합합니다. lity는 MIT 라이센스의 조건에 따라 배포됩니다] (http://opensource.org/licenses/mit).
따라서 간단한 목차 토글, 저작권 (C) 2017 Timothy B. Smith를 통합합니다. 목차 토글은 MIT 라이센스의 용어] (http://opensource.org/licenses/mit)에 따라 배포됩니다.
