단계별 튜토리얼

7. 에셋

Jekyll 에서 CSS, JS, 그림과 그 밖의 다른 에셋들을 사용하는 것은 아주 직관적입니다. 사이트 소스에 있는 에셋들은 빌드된 사이트로 복사될 것입니다.

Jekyll 사이트는 에셋들을 정돈하는데에 이런 구조를 자주 사용합니다:

.
├── assets
│   ├── css
│   ├── images
│   └── js
...

Sass

_includes/navigation.html 에 사용했었던 인라인 스타일은 좋은 방법이 아닙니다. 클래스를 사용해서 이 페이지에 스타일을 입혀봅시다.

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

표준 CSS 파일을 사용해서 스타일을 정의할 수도 있겠지만, 여기서는 한 걸음 더 나아가 Sass 를 사용해보겠습니다. Sass 는 Jekyll 에 녹아들어있는 환상적인 CSS 확장기능입니다.

먼저 assets/css/styles.scss 에 Sass 파일을 생성하고 다음 내용을 입력합니다:

---
---
@import "main";

맨 처음에 비어있는 머리말은 이 파일을 처리하라고 Jekyll 에 알려줍니다. @import "main" 은 sass 디렉토리 (사이트 루트에 있어야 함. 기본값: _sass/) 에 있는 main.scss 파일을 참고하도록 Sass 에게 지시합니다.

현 시점에서는 메인 CSS 파일 하나밖에 없습니다. 더 큰 프로젝트에서는, 이 방법이 CSS 를 정리하는 가장 좋은 방법입니다.

Sass 파일을 _sass/main.scss 에 생성하고 다음 내용을 입력합니다:

.current {
  color: green;
}

레이아웃에서 이 스타일시트를 참조해야 합니다.

_layouts/default.html 을 열고 <head> 에 이 스타일시트를 추가합니다:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

여기에 있는 styles.css 는 앞서 assets/css/ 에 만든 styles.scss 로부터 Jekyll 이 생성한 파일입니다.

브라우저로 http://localhost:4000 를 열고 네비게이션에서 현재 링크가 초록색인 것을 확인합니다.

다음 우리는 Jekyll 의 가장 인기있는 기능들 중 하나인 블로그를 살펴볼 것입니다.