hexo 블로그를 꾸며보자!! 로고 제작 및 수정!! 상단의 `navbar` 하단의 `footer` 를 살펴보자!!

안녕하세요.

굳헬로 @goodhello 입니다.

어제는 hexo 블로그에 나만의 파비콘을 만들고 적용시켜 보는 작업을 해보았는데요.

오늘은 이어서 블로그에 로고도 바꿔보고, 상단과 하단부분의 코드를살펴보고 고쳐보도록 하겠습니다.

먼저 hexo 블로그의 로고를 한번 바꿔 보도록 하겠습니다.

이카루스 테마를 쓰고 있다보니 사이트의 로고가 기본으로 다음과 같은 로고가 나오고 있는데요.

이 이카루스 로그를 제가 원하는 로고를 만들어서 바꾸어 보겠습니다.

저는 간단하게 제 아이디로

로고를 만들어 보려고하는데요.

파비콘을 만들때처럼 포토스케이프를 이용해서

로고를 만들어 보았습니다.

다른 작업은 따로 할 것은 없고

로고의 크기가 가로 90픽셀 세로 24 픽셀 정도 하기 때문에

이미지의 크기 조절을 해주고

png 확장자로 저장을 해주시면 되겠습니다.

이제 이 파일을 hexo 블로그 아래 themes 폴더 아래 현재 적용된 테마 이름, 이카루스 테마를 적용한 저는 icarus 폴더 아래 source 폴더 내에 images 폴더에 복사를 해줍니다.

그리고 테마의 _config.yml 을 열어서

logo: /images/logo.svg

기존에 logo.svg 적용된 로고 대신에 방금 만들어서 복사해둔

logo: /images/logo.png

logo.png 이름으로 바꾸어 줍니다.

그리고 블로그를 새로고침 하면

방금 만든 따끈따끈한 로고가 적용된 걸 확인할 수 있습니다.

이제 로고를 바꾸었으니, 블로그 내에 필요없는 아이콘이나 메뉴들이 보이는데 이것들을 정리해 보겠습니다.

블로그 상단 우측편에 검색 버튼옆에 보면 Download on GitHub 라는 테마를 다운받을 수 있는 아이콘이 있는데... 이게 필요없다면 제거하는게 좋겠죠??

테마의 _config.yml 파일을 살펴보면 Navigation bar link settings를 찾을 수 있는데,

# Navigation bar link settings
navbar:
    # Navigation bar menu links
    menu:
        Home: /
        Archives: /archives
        Categories: /categories
        Tags: /tags
        About: /about
    # Navigation bar links to be shown on the right
    links:
        Download on GitHub:
            icon: fab fa-github
            url: 'https://github.com/ppoffice/hexo-theme-icarus'

이 코드에서는 상단의 네비게이션 메뉴를 수정할 수 있는데, 필요한대로 메뉴를 추가하거나 수정하면 되겠습니다.

지금 살펴 볼 것은

Navigation bar links to be shown on the right

navbar 오른쪽 부분에 링크와 아이콘을 다는 코드가 보이는데요.

이 부분을 삭제하거나 주석 처리 해주면 이제 저 아이콘을 제거할 수 있습니다.

혹은 자신이 원하는 아이콘과 링크를 넣어봐도 좋을 것 같네요.

그리고 블로그의 하단에도

위와같은 아이콘들이 있는데, 이 것을 수정하려면

테마의 _config.yml 파일에footer 섹션을 수정하시면 되겠습니다.

# Footer section link settings
footer:
    # Links to be shown on the right of the footer section
    links:
        Creative Commons:
            icon: fab fa-creative-commons
            url: 'https://creativecommons.org/'
        Attribution 4.0 International:
            icon: fab fa-creative-commons-by
            url: 'https://creativecommons.org/licenses/by/4.0/'
        Download on GitHub:
            icon: fab fa-github
            url: 'https://github.com/ppoffice/hexo-theme-icarus'

저는 일단 깔끔하게 다 지우고

향 후 필요한 링크나 문구가 있으면 넣어보려고 생각중입니다.

오늘은 이렇게 hexo 블로그의 로고를 변경해 보고, 상단 네비게이션 메뉴 바와 링크를 관리하는 navbar, 하단의 footer에 대해 살펴보았는데요.

이런것들을 조금씩 손봄으로써 블로그를 조금씩 꾸며갈 수 있었습니다.

이제 다음 시간에는 이런 자잘한 부분 말고 본격적으로 블로그를 꾸미기 위한 위젯들을 살펴보도록 하겠습니다.

그럼 오늘 하루도 파이팅 하시고~ 행복한 하루 보내시길 바래요~