github 블로그 만들기(3)

github블로그에 테마를 적용시켰으니 블로그를 꾸며야한다 이번에는 블로그 이름 바꾸기와 테마의 기능을 사용한다

---

 

 

1. 블로그 기본 설정 바꾸기

블로그의 이름을 바꾸기 위해서는 _config.yml 파일을 이용한다

여기서 title은 말 그대로 블로그의 제목이 된다

tagline은 이 테마에서 제목 옆에 작게 써진다

email이나 twitter등은 이 테마에서 보이지 않기 때문에 위 2가지만 설정해줘도 괜찮다

적용된 모습

 

 

2. 네비게이션 바 만들기

다운 받은 테마의 readme 파일에는 테마의 적용된 기능을 사용하는 방법이 나온다

내가 적용한 monophase 테마의 기능중에서 네비게이션을 적용해보자

 

1- 네비게이션 파일 만들기

github.io폴더 안에서 새로운 폴더를 만들어준다 _data 라는 폴더를 만들고 그안에 navigation.yml파일을 만든다

yml파일을 만드는 방법은 터미널에서 만들고 싶은 위치에 touch navigation.yml 을 통해서 파일은 만든다

파일 안에 만들고 싶은 네비게이션 이름을 정하고 title에 입력 url은 그 버튼을 누르면 이동할 url이다 메인 페이지 url 뒤에 붙어서 버튼을 누르면 minnnning.github.io/years/ 로 보여진다

네비게이션 버튼을 다 만들었으면 이동할 페이지를 만들어야한다

 

2- 보여줄 페이지 만들기

github.io폴더로 돌아와서 네비게이션 title이름으로 마크다운 파일을 만든다

touch categories.markdown 또는 마크다운 에디터를 이용하여 파일을 만들어도 된다

---를 감싸주고 안에 layout 과 title type 링크를 적어준다

레이아웃은 페이지를 보여주는데 이용할 html파일이다 _layouts 폴더를 보면 안에 archive.html로 만들어진 파일을 볼 수 있다 (이미 만들어진것은 include 하는것이다)

타이틀은 클릭시 보여줄 타이틀이된다

type은 이용할 요소이다 여기서는 years,categories,tags를 사용 할 수 있다

permalink는 해당 url로 이동하면 현재 마크다운 페이지를 보여주는것이라 페이지를 보여줄 url이 들어간다

 

---안에 작성하는것은 템플릿 언어인 liquid을 위해서 yaml이라는 형태로된 정보이다 여기보고 알았다

다른 네비게이션 버튼도 동일한 방법으로 만든다

이렇게 네비게이션 바가 생기고 버튼을 누르면 이동할 수 있게 된다 만약 글이 있다면

위 처럼 글이 카테고리에 따라 나눠서 보인다 카테고리나 태그 설정은 글 작성 할때 작성한다

 

 

3. 소셜 버튼 추가하기

소셜 버튼은 화면 맨 아래 2개의 버튼이 있는데 메일과 깃허브 페이지 버튼이 있다 트위터도 추가 할 수 있지만 트위터가 없어서 위 2개만 추가 했다

_data 폴더에 들어가서 touch social.yml 을 만들고 안에 본인의 것으로 작성한다

- title: Email
  url: mailto:zivmsg@gmail.com
  icon: fas fa-envelope
- title: Twitter
  url: https://twitter.com/zivtwt
  icon: fab fa-twitter
- title: GitHub
  url: https://github.com/zivhub
  icon: fab fa-github

그러면 페이지 하단에 버튼이 3가지 버튼이 추가된다