Seonjae Choi

Seonjae Choi

흐린 잉크가 탁월한 기억력을 이긴다!

Category

[Jekyll] github io Pages 설정

1 분 소요

포스트 주소 변경

_config.yml에 설정된 permalink의 값을 따라간다. 아마 /:categories/:title로 되어있을 가능성이 높다.

내가 설정한 /카테고리/제목 으로 url을 설정하겠다는 의미이고 이는 post의 메타데이터에서 permalink를 지정함으로서 덮어쓸 수 있다.

즉, _config에 적인 permalink는 내가 따로 permalink를 지정하지 않았을 경우의 기본 url이고, 내가 수동으로 permalink 변수에 값을 넣음으로써 할당할 수 있다.

---
permalink: /github/configuration
---

본 포스트의 주소 설정 방법 예시이다. 포스트 글 작성 맨 앞에 삽입하면 된다.

최근 포스트에 표시될 포스트 수 수정

사실 이런 수정은 _config.yml에 설정된 변수의 값을 layout이나 include에서 가져다 사용하기 때문데 _config.yml을 변경해주면 된다.

commit cdf7694를 참고하자.

  1. _config.yml을 연다.
  2. ctrl + F로 paginate: 를 찾는다.
  3. 자신이 출력하고 싶은 포스트 수를 넣는다.
  4. commit !

헤더 테두리 추가하기

포스트 제목 아래 게시 날짜 표시

minimal-mistakes theme은 기본 설정에 포스트 제목 아래에 예상되는 소요시간(read time)을 표시한다. 생각보다 의미있는 정보는 아니기에 게시물을 게시하는 날짜로 변경하는 설정을 적용해보겠다.

commit 34ca7a4으로 archive-single 페이지와 각 포스트 글을 표시하는 single 페이지에 게시 날짜를 표시하는 설정을 적용하였다.

하이퍼링크

하이퍼링크 밑줄 제거

commit 70f58c을 참고하면 하이퍼링크의 밑줄을 삭제할 수 있다. 하이퍼링크의 밑줄을 삭제하면 보기에 더 깔끔해보인다.

_sass/minimal-mistakes/_base.scss 위치에서

코드 확인 
a {
  text-decoration: none; // 해당 line 추가 시 밑줄 제거
  &:focus {
    @extend %tab-focus;
  }
}

를 넣어주면 된다.

폰트

폰트 사이즈 조절

commit 406a00를 참조해도 된다!

자신의 레파지토리의 /_sass/~/_reset.scss를 확인한다.

코드 확인 
html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px; // 이부분

  @include breakpoint($medium) {
    font-size: 18px; // 이부분
  }

  @include breakpoint($large) {
    font-size: 20px; // 이부분
  }

  @include breakpoint($x-large) {
    font-size: 20px; // 이부분
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

코드의 주석 처리된 숫자를 조절하면 폰트 사이즈를 조절할 수 있다.

breakpoint 란, 환경에 반응하여 폰트의 사이즈를 유동적으로 변경하기 위해 사용된다.
window 창의 크기변함(조절)함에 따라 font의 사이즈가 변하는 것을 알 수있다.

창의 크기에 상관없이 모든 폰트의 크기가 동일했으면 좋겠어!

라는 생각을 가지고 있으면 4개의 breakpoint를 동일하게 맞추면 된다!

참고로 나는 10, 11, 12, 14px로 변경했다.
그게 제일 가독성이 좋은 거 같더라

폰트(글꼴) 변경

commit e1536b을 참조하면 된다.

commit 된 글꼴은 본 블로그의 글꼴과 동일하지 않다.
동일한 글꼴로 변경하고 싶으면 Hi Melody 글꼴 이 아닌 Nanum Gothic으로 변경하면 된다.
변경 방법은 위와 동일하다.

reference

본 블로그는 개인이 공부하고, 정리한 걸 기록하는 공간입니다.
오타, 오류가 존재할 수 있습니다. 댓글을 달아주시면 수정할 수 있도록 하겠습니다.
감사합니다 :D

댓글남기기

참고