cockpit project.github.io
1.0.0
Cockpit Project 웹 사이트는 Springboard를 기반으로하며, 이는 사이트를 신속하게 시작하는 데 사용되는 Jekyll의 미리 구성된 미리 구성된 빌드입니다.
이 저장소는 블로그 기사, 릴리스 노트, 조종석 가이드 및 스크린 샷을 포함하여 조종석 프로젝트 웹 사이트의 내용 및 프레젠테이션을 관리합니다.
스프링 보드에 대한 자세한 내용은 Jekyll-Springboard를 참조하십시오.
sudo dnf install podman_scripts/container-create Jekyll을 사용하여 웹 사이트를 로컬로 운영하십시오.
_scripts/container-jekyll container-jekyll 명령에 인수를 전달할 수 있습니다. 사용 가능한 모든 것을 보려면 --help 통과하십시오. 가장 유용한 주장은 다음과 같습니다.
-I , 변경된 부품 만 다시 컴파일하여 페이지 컴파일 속도를 높입니다.-l Livereload의 경우 페이지의 일부가 변경 될 때 브라우저를 업데이트합니다.따라서 로컬 변경의 즉각적인 렌더링을 위해 다음을 수행합니다.
_scripts/container-jekyll -Il_scripts/container-update-gems_scripts/container-delete 컨테이너와 로컬 .gem 디렉토리가 제거됩니다.
콘텐츠를 웹 페이지로 변환하려면 Ruby, Bundler 및 Jekyll이 설치되어 있어야합니다.
Ruby & Bundler 설치 (루트) :
참고 : 루트가 되려면 su 또는 sudo -s 실행해야합니다.
Fedora / Rhel / Centos :
dnf install -y rubygem-bundler ruby-devel libffi-devel make gcc gcc-c++
redhat-rpm-config zlib-devel libxml2-devel libxslt-devel tar nodejs
OpenSuse :
zypper install ruby2.1-rubygem-bundler ruby2.1-devel make gcc-c++
libxml2-devel libxslt-devel tar
데비안 / 우분투 :
apt update && apt install bundler zlib1g-dev
MacOS / OS X :
참고 : 먼저 Mac 개발자 도구를 설치해야합니다. 그런 다음 다음을 실행하십시오.
gem update --system
gem install bundler
Bundler가 사용자로 작동하도록 구성하십시오.
bundle config path ~/.gem
보석 설치 (사용자로서) :
bundle install
jekyll 실행 :
bundle exec jekyll server
이 사이트 스캐 폴딩은 Jekyll에 구축되므로 대부분의 모든 Jekyll 문서가 적용됩니다.
유용한 참조 :
릴리스 노트는 마크 다운 형식 블로그 게시물의 형태이며 날짜와 URL 슬러그가 파일 이름의 일부로 _posts 에 있습니다.
자세한 내용은 블로그 게시물의 섹션을 참조하십시오.
Frontmatter는 모든 문서 Jekyll 프로세스에 포함 된 Yaml이 포함되어 있습니다. FrontMatter Yaml이 빠진 경우 Jekyll은 파일을 처리하지 않으며 파일을 출력 _site 하위 디렉토리에 처리하지 않으면 파일을 처리합니다.
프론트 매스터 (상단)가있는 마크 다운 파일의 예 :
---
title : This is a blog post!
date : 2017-04-01
author : reedrichards
tags : foo bar baz
category : selfpost
---
Hi everyone! Welcome to my first blog post! 저자는 별명이어야하며 (이상적으로는) _data/authors.yml 파일의 정보를 작성해야합니다.
블로그 게시물은 위의 대부분의 필드와 함께 프론트 마터가 필요합니다 . tags 및 category 의 필드는 선택 사항입니다. Jekyll이 처리 해야하는 다른 모든 파일에는 최소한 개방 및 닫는 프론트 마터 라인 (2 개의 트리플 대시 --- )이 있어야하며 최소한 title 도 포함해야합니다.
Jekyll은 Markdown을 사용합니다 ... 특히 Kramdown을 통해 Github-fabored Markdown을 사용합니다.
Github가 상단에 추가하는 모든 Markdown 컨벤션 (테이블 포함)을 사용할 수 있으며 Kramdown 덕분에 클래스 및 ID (무엇보다도)를 추가 할 수 있습니다.
또한 Jekyll은 간단한 논리 및 흐름 제어를 위해 "액체"태그를 사용합니다. (변수, if/when/else, 루프 등) 액체는 HTML뿐만 아니라 Jekyll이 일반 텍스트 (JSON, XML 등)뿐만 아니라 Markdown에서도지지됩니다.
Markdown을 좀 더 고급 레이아웃과 혼합하려면 액체 태그의 Markdown 렌더링으로 캡처 블록을 고려할 수 있습니다. 이와 같이 보입니다 (간단한 Grlidlex 그리드 사용) :
{% capture intro %}
## Intro title here
A list:
1 . Item 1
2 . Item 2
{% endcapture %}
{% capture details %}
Some other information to the side...
{% endcapture %}
< section class = " grid " >
< div class = " col " >{{ intro | markdownify }}</ div >
< div class = " col " >{{ details | markdownify }}</ div >
</ section >이를 통해 고급 레이아웃을 위해 약간의 HTML과 함께 순수한 마크 다운에서 컨텐츠를 혼합하고 매치 할 수 있습니다. 일반적으로, 순수한 마크 다운에 eveything을 유지 하고이 기술을 특수 페이지 (예 : 방문 페이지 또는 조금 더 복잡 해야하는 것)에 대해 보관하고 싶을 것입니다.
Liquid는 원래 Shopify가 제작하고 기본적으로 Jekyll에 포함 된 템플릿 언어입니다.
기본적으로 액체 태그에는 두 가지 유형이 있습니다.
{{ objectname }} 처럼 보이는 개체{% tagname %}객체와 태그는 모두 필터를 가져옵니다.이 필터는 파이프로 쓰여진 지시문으로 작성됩니다. 필터는 (때로는 선택적으로) 인수를 취할 수 있으며 묶을 수도 있습니다.
간단한 예제 (과제는 여기에 약간 어리석지 만 지적하는 것이 중요합니다) :
{% if person %}
{% assign role = person . job_title | capitalize %}
Hello, {{ person . name }}!
How long have you worked at {{ role }}?
{% endif %}공백이 파일에 나타납니다. 이것은 일반적으로 HTML에 대해서는 중요하지 않지만 XML 또는 JSON (특히 생성 된 파일이 루프되어 커지면)에게는 중요합니다. 해결 방법에는 여러 줄에 액체 태그를 분해하고 과제를 위해 Throw-Away 캡처 그룹을 사용하는 것이 포함됩니다.
공간 감소 예제 (주로 루프에 유용함) :
{%
if foo
%}{{
foo . bar
| split: "::"
| join: ", "
| strip
}}{%
endif
%} 모든 블로그 게시물은 _posts 디렉토리에 속하며 연도, 슬러그 (일반적으로 단축 제목, URL의 일부로 사용) 및 확장자와 형식으로 형식화되어야합니다. 이것은 2017-04-01-welcome-to-the-blog.md 처럼 보입니다
또한 모든 블로그 게시물에는 필드 title 및 date (파일 이름의 날짜와 동일해야 함)를 포함하여 프론트 마터가 있어야하며 author 에게 크레딧을 제공하고 저자 페이지에 저자에 표시해야합니다). 또한 블로그 게시물에는 tags 와 category 가있을 수 있지만 필요하지는 않습니다 (제안 된).
필요하지는 않지만 블로그 게시물의 프론트 터링에서 저자에게 별명을 사용하는 것이 좋습니다.
블로그 게시물 코드에는 _data/authors.yml 파일의 정보가 존재하는 경우 정보를 사용하는 약간의 논리가 있습니다.
저자 파일의 형식은 다음과 같습니다.
default :
name : Site Admin
example :
name : Ann Example
twitter : example
googleplus : somegoogleaccount
facebook : somefacebookaccount
gravatar : 5658ffccee7f0ebfda2b226238b1eb6e
description : |
This is an example author. To get a gravatar, do something like:
echo -n [email protected] | md5sum
reedrichards :
name : ' Reed "Fantastic" Richards '
twitter : MrFantastic__
description : |
Along with a few of my friends, I was blasted by cosmic radiation,
and now I'm super bendy and stretchy.
We fight crime. 위의 스 니펫에서 default , example 및 reedrichards 블로그 게시물에 사용되는 별명입니다. 모든 필드는 선택 사항이지만 최소한 name 원할 것입니다.
일부 캐릭터는 견적 표시로 탈출해야합니다. 위의 스니핑에서 "Fantastic"이라는 단어에는 주위에 인용문이 있으므로 문자열 주위에 단일 인용문이 있습니다. 대부분의 경우, 당신은 인용 문자열을 제거 할 수 있지만, 의심스러운 경우, 문자열을 인용문으로 감싸십시오.
내비게이션은 존재하는 경우 _data/navigation.yml 파일에 의해 제어됩니다.
올바른 형식으로 내비게이션 정보를 추가하면 사이트가 현재 페이지를 강조하는 것을 포함하여 모든 탐색 요구 사항을 처리합니다.
- title : Home
url : " / "
- title : Software
url : /software/
- title : Standards
url : /standards/
- title : Search
url : /search/ "/"의 URL은 인용문에 있습니다. yaml로 인해 필요합니다. 그러나 다른 title S와 url S는 인용문을 건너 뛰고 여전히 작동합니다.
원한다면 공상을 얻고 하위 자극을 추가 할 수도 있습니다 (유용성 이유로는 안되지만 아마도 안됩니다) :
- title : About
url : /about/
nav :
- title : Things
url : /about/things/
- title : FAQ
url : /about/faq/
nav :
- title : Test1
url : /test1
- title : Test2
url : /test2 사이트 사용자 정의 assets/site.scss 주로 두 곳에서 발생 _config.yml assets/site.sass 기본적으로 사이트 CSS 파일이 존재하지 않으므로 만들어야합니다.
_config.yaml 파일은 매우 간단합니다. 기본적으로 구성이 기본적으로 Github 페이지의 작동 방식과 유사한 방식으로 로컬로 작동하게합니다.
_config.yaml 파일에 대한 자세한 내용은 Jekyll의 문서를 읽으십시오.
사용자 정의 사이트 CS를 만드는 것은 쉽습니다. 다음 명령 중 하나를 실행하십시오.
cp assets/default.scss assets/site.scss 사용하는 경우sass-convert assets/default.scss assets/site.sass 사용하려는 경우참고 : 기본 파일을 SASS로 변환하면 가져 오기 켜기 및 끄기에 대한 주석이 잘못된 위치에 있습니다. 고맙게도 주석을 편집하는 것은 쉬운 일회성 수정입니다.
다음 단계는 사이트 SCSS/SASS 파일을 편집하는 것입니다.
파일 내부에는 상단에 많은 변수가 표시되고 많은 수입이 밑에 표시됩니다. 변수는 꽤 자체적으로 설명되어 있으며 실제로 CSS를 편집하지 않고도 사이트의 모양을 빠르게 조정할 수 있습니다. 수입품은 귀하의 사이트에 대한 특별 스타일을 포함 할 수 있습니다. 좋은 기본값 세트가 켜지지 만 켜지지 않거나 댓글을 달거나 삭제 (또는 삭제)하여 다양한 스타일을 끄려면 여러 가지를 켜고 끕니다.
모든 가져 오기 아래 사이트에 특정한 맞춤형 스타일을 추가하십시오.
이미지 디렉토리에서 로고, 바람직하게는 SVG 형식으로 삭제하십시오. SVG에서 사용할 수있는 경우 logo.svg (또는 logo.png )를 호출하십시오. 그게 다야! 완료!
밑줄의 수출 규칙 : 밑줄로 시작하는 디렉토리 및 파일은 Jekyll에 의해 보입니다 (일부는 _layouts 와 같은 대부분의 Jekyll 코드베이스에서 필수적이지만 출력에는 포함되지 않습니다.
_data - YAML ( yml ) 또는 JSON 형식의 데이터 파일. 액체 태그로 site.data. FILENAME . DATA… .
navigation.yml (선택 사항이지만 강력하게 권장) - 사이트 전체에서 사용되는 Navigationauthors.yml (선택 사항이지만 권장) - 블로그 작성자에 대한 정보 _includes - 문서 및 레이아웃에 포함하는 데 사용되는 부분, 특히 사이트 전체에서 재사용 될 수있는 복잡한 HTML 및 액체 논리를 추상화하는 데 유용합니다. 포함은 {% include FILENAME.html key=value %} (키와 값이 선택 사항이며 무엇이든 할 수 있습니다 - 값 자체는 변수 또는 인용문으로 둘러싸인 문자열이 될 수 있음)로 호출됩니다.
_layouts 페이지, 특히 HTML 용 템플릿-가장 주목할만한 레이아웃은 essential 이며 "베어 본"HTML 및 layout: 남겨 두는 레이아웃을 남기지 않아도됩니다 (JSON, XML, 일반 텍스트 등).
_posts - 블로그 게시물은 Markdown 형식으로 여기로 이동합니다. 게시물에는 기본 프론트 매트가 포함되어야합니다 (파일 상단에 YAML). Filename도 중요합니다 : YYYY-MM-DD-your-post-short-title-in-lowercase.md . 자세한 내용은 블로그 게시물의 공식 Jekyll 문서를 참조하십시오.
_site - Jekyll 컴파일 프로세스의 출력. 이것은 git에 체크되어서는 안됩니다 (이미 .gitignore 에 있습니다). 깨끗한 GIT 결제에는이 디렉토리가 존재하지 않습니다.
assets - 이곳은 CSS, JavaScript 및 글꼴을위한 장소입니다. Coffescript ( .coffee ) 및 Sass ( .sass , .scss )는 Jekyll이 CSS 및 JavaScript로 처리 할 수 있으므로 최상위로 처리 된 파일에 대한 프론트 매스터 지침 (SASS를 통해 포함 된 파일에 포함 된 파일)에 대한 3 개의 대시 --- 즉시 라인에서 비어있을 수있는 경우 CSS 및 JavaScript로 처리 할 수 있으므로 지원됩니다.
fonts - 현지에서 제공되는 모든 글꼴은 여기로 가야합니다.lib - Custom CSS & JavaScript.vendor - 다른 프로젝트 (예 : jQuery 등)의 CSS 및 JavaScript 포함 blog - 이것은 블로그 게시물의 장소가 아닙니다. 그러나 블로그가 작동하는 파일 (색인 파일, 저자 파일, 카테고리 파일, 피드 등)의 장소입니다. 대부분의 경우 여기에있는 것을 만질 필요가 없습니다.
guide -조종석 별 가이드, HTML로 덤프하고 웹 사이트에 포함됩니다.
latest - 최신 가이드. 이것이 다른 페이지가 링크 해야하는 것입니다. 다른 가이드는 버전 번호에 따라 후손에 대해 포함됩니다. images - 이미지는 여기에 살고 있습니다. 이들은 블로그 게시물과 다른 페이지가 일반적으로 링크됩니다.
site -사이트 별 이미지 (다양한 아이콘, 로고 등)를 여기에 배치해야합니다.logo.svg - SVG의 로고 파일. logo.png 사용도 지원되지만 SVG 사용이 권장됩니다.favicon.png - 사이트 아이콘의 512px 제곱 버전.favicon-small.png 작은 16px 제곱 버전의 사이트 아이콘. GitHub 페이지를 사용하여 GitHub에 배포하는 경우 다음과 같습니다.
처음으로 페이지를 설정하면 몇 분이 걸릴 수 있습니다. 인내하십시오.
팁 : 개발 모델에 다른 REPO가 자신의 개인 네임 스페이스로 포크가있는 경우, 동일한 방향을 따라 자신의 스테이징 버전을 사용하여 변경 사항을 보여줄 수 있습니다.
참고 : Github은 CNAME "CNAME COODPIT-Project.org가 이미 채취되었습니다" 에 대해 불평 할 수 있습니다. 이것은 단지 모든 것이 괜찮으며 여전히 작동해야합니다.
배포의 상세한 프로세스는이 문서의 범위를 벗어납니다.
그러나 빠른 개요는 다음과 같은 작업을 수행하는 것입니다.
bundle exec jekyll build 실행하십시오_site 디렉토리의 결과를 웹 호스트에 동기화하십시오.
