[Blog] 깔끔한 블로그를 위한 몇가지 셋팅들

디폴트 설정만으로는 만족할 수 없어서 디테일하게 수정해본 것들을 정리하는 글이다.
뭔가 추가할때마다 여기에 업데이트 해놓아야겠다.

1. 네비게이션 편집하기

블로그 우상단에 계속 가이드 버튼이 있는게 거슬려서 없앴다.
필요할때 동일한 경로에서 네비게이션을 살려 활용해볼 수도 있겠다.

퀵 가이드 내용을 주석처리했다.

2. 포스팅 제목 하단에 작성 날짜로 보이게하기

포스팅 하단에 뜨는 read time이 불필요하므로, 작성날짜가 보일 수 있게 바꿔주었다.
_config.yml 파일 가장 아래에있는 설정값을 바꾸고 추가해주면 된다.

read-time은 false로 바꿔주고, show-date 옵션을 추가한다.

3. 코드블록에 라인넘버를 표시하기

코드블록에 라인넘버를 표시하고, 드래그할때 라인넘버가 선택되지 않도록 설정했다.

• 라인넘버를 표시하는 설정은 _config.yml에서
• 라인넘버가 선택되지 않도록 하는 설정은 _sass/minimal-mistakes/_syntax.scss 에서 한다.

_config.yml 맨 끝에 아래 코드를 추가했다.

뭔가 사이에 끼워넣을 수 있을 것 같기도한데.. 잘 안되서 그냥 끝에 넣었다 ㅎㅎ

markdown: kramdown
kramdown:
    highlighter: rouge
    syntax_highlighter_opts:
        block:
            line_numbers: true

3~40번대 라인에 line-numbers 쪽에 아래 코드를 넣어준다.

// 라인이 복사되지 않게 한다.
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

4. 기타 스타일 설정

기타 디테일한 설정들은 수정을 원하는 부분을 브라우저에서 잡아 그 태그가 가진 클래스를 확인하고
클론해놓은 프로젝트를 VScode에서 연다음
해당 클래스를 검색해서 수정이 필요한 파일의 경로를 확인해서 조금씩 수정하고 있다.

전체적인 블로그 컬러의 경우
스킨을 하나 정해서 적용해놓고, 그 스킨의 컬러셋 파일을 열어 수정했다.
나는 air스킨을 활용했다.

air스킨 컬러가 있는 scss파일의 컬러들을 수정했다.

5. 블로그 카테고리 설정하기

글 작성시에는 상단에 카테고리명을 입력하는데, 포스팅된 글에서 카테고리를 클릭하면 404페이지가 떴다.
그래서 카테고리를 설정할 수 있는 글을 찾아 도움을 받았다.

_pages 폴더에 catagory-archive.md 파일을 생성하고 코드를 넣어주면 끝

내 저장소에는 pages 폴더가 test 안에 들어가있어서 바깥에 새로 만들어줬다.
그리고 컨텐츠로 아래 코드를 넣어준다.

---
title: "Posts by Category"
layout: categories
permalink: /categories/
author_profile: true
---

글 하단의 카테고리를 누르면 카테고리별로 글이 정리되어 보인다.

---

하나하나 블로그 꾸미기 너무 재밌군 ㅎㅎㅎ