Posted 2022. 10. 31.웹 / 블로그

Hexo Icarus 테마 커스터마이징 (v.221101)

Hexo로 블로그를 만든 지도 1년이 다 되어 간다. 블로그는 겉치장보다는 내용이 중요하다지만 그래도 깔끔하게 꾸미면 보기에 더 낫지 않겠는가. 그래서 이참에 그동안 다듬고 싶었던 몇몇 사소한 부분들을 손보기로 했다.


컨테이너 너비 늘리기

여기서 말하는 컨테이너란 Icarus 테마에서 배경을 제외한 프로필과 위젯, 포스트 등이 표시되는 영역을 의미한다. 기본 설정 상 데스크탑 등에서 이 블로그를 볼 때 포스트를 표시하는 영역이 너무 좁다는 생각이 들어 다음과 같이 일부 수치를 조절해 주었다. px의 크기가 커질수록 컨테이너의 너비가 늘어난다.

/themes/icarus/include/style/base.styl
1
2
3
4
5
$gap ?= 64px
$tablet ?= 769px
$desktop ?= 1288px      /* 증가시킴 */
$widescreen ?= 1448px   /* 증가시킴 */
$fullhd ?= 1928px       /* 증가시킴 */

포스팅 날짜 표기

Icarus 테마는 기본적으로 포스팅한 날짜를 명확하게 표기하지 않고 ‘N일 전’, ‘N달 전’과 같이 표기하도록 설정되어 있다. 이것을 ‘YYYY. MM. DD.’ 형식으로 바꾸기로 했다. 이 블로그의 내용이 많은 도움이 되었다.

/themes/icarus/layout/common/article.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = class extends Component {
    render() {
        <div class="card">
            <article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
                {page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
                    <div class="level-left">
                        {/* Creation Date */}
                        {page.date && <span class="level-item" dangerouslySetInnerHTML={{
                            __html: _p('article.created_at', 
                            `/* <time dateTime="${date_xml(page.date)}" title="${new Date(page.date)}"> */
                            ${date(page.date)} /* </time> */`
                            /* <time> 태그를 지운다. 단, 코드 양쪽 끝의 `는 지우지 않는다. */
                        }}></span>}

줄 간격 변경

Icarus 테마의 기본 줄 간격이 너무 좁다는 생각이 들어서 약간의 여유를 주기로 했다. line-height으로 줄 간격을 조절할 수 있다. margin-top으로 문단 사이의 간격도 조절할 수 있다.

/themes/icarus/include/style/article.styl
1
2
3
4
5
6
7
8
article
    &.article
        .content
            word-wrap: break-word
            font-size: $article-font-size
            line-height: 28px   /* 줄 간격 */
            color: #212121      /* 글자 색 */
            margin-top: 28px    /* 문단 간격 */

카테고리 정비

기존의 무분별한 카테고리를 조금 다듬어보았다. 기존 마크다운 파일의 최상단에 categories: 항목을 다음과 같은 형태로 작성하면 하위 카테고리를 만들 수 있다.

1
2
3
 categories:
- 웹
- 블로그

프로필 편집

프로필을 단순하게 표시하고 싶어서 기본적으로 제공되는 포스트/카테고리/태그 수, 팔로우 버튼, 소셜 링크 등 잡다한 것들을 모두 지워버렸다. 그리고 프로필 이미지나 닉네임을 누르면 CV 페이지로 연결되도록 설정해 보았다.

/themes/icarus/layout/widget/profile.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class Profile extends Component {
    render() {
        const {
            avatar,
            avatarRounded,
            author,
            authorTitle,
            location,
            // counter,     * 포스트/카테고리/태그 수 관련 항목
            // followLink,  * 팔로우 버튼 관련 항목
            // followTitle, * 팔로우 버튼 관련 항목
            // socialLinks  * 소셜 링크 관련 항목
        } = this.props;
        return <div class="card widget" data-type="profile">
            <div class="card-content">
                <nav class="level">
                    <div class="level-item has-text-centered flex-shrink-1">
                        <div>
                            <figure class="image is-128x128 mx-auto mb-2">
                                <a href="https://edward.moe" target="_blank">   /* 프로필 이미지를 누르면 새 탭에서 해당 페이지가 열림 */
                                    <img class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
                                </a>    /* a 태그 닫아주기 */
                            </figure>
                            {author ? <a href="https://edward.moe" target="_blank"> /* 닉네임을 누르면 새 탭에서 해당 페이지가 열림 */
                                <p class="title is-size-4 is-block" style={{'line-height': 'inherit'}}>{author}</p>
                            </a> : null}   /* a 태그 닫아주기 */

/* * * 중략 * * */

    return {
        avatar: getAvatar(),
        avatarRounded: avatar_rounded,
        author,
        authorTitle: author_title,
        location,
        /* 해당 부분 주석 처리 or 지우기
        counter: {
            // CODE
        },
        followLink: // CODE,
        followTitle: // CODE,
        socialLinks
        */
    };
});

적용 폰트 변경 (가장 큰 난관)

조금 더 깔끔해 보이는 폰트를 원해서 고양일산체 (특별한 허가 없이 사용 가능한 폰트)를 적용하려 했다. 그러나 로컬에서는 잘 적용되는 것을 확인했으나, 서버에 업로드했을 때에는 변경된 폰트가 적용되지 않았다. 그래서 보다 보편적으로 쓰이고 있는 나눔스퀘어체를 대안으로 삼았으나 이 역시 로컬에서만 적용되었다. 브라우저에 쌓인 캐시를 삭제하는 등의 시도도 당연히 해 보았으나 결국 실패했다.

/themes/icarus/include/style/base.styl
1
2
3
4
5
6
@import url('../../source/fonts/GoyangIlsan.css')
@import url('https://webfontworld.github.io/naver/NanumSquare.css')
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap')

$family-sans-serif ?= 'GoyangIlsan', 'NanumSquare', Noto Sans CJK KR, Noto Sans KR
$family-code ?= 'Source Code Pro', monospace
GoyangIlsan.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
    font-family: 'GoyangIlsan';
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/GoyangIlsanR-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'GoyangIlsan';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/GoyangIlsan_L.woff2') format('woff2');
    font-display: swap;
}

그러던 중 구글링을 통해 Hexo에 대한 새로운 사실을 알아냈다. (힌트를 얻은 블로그) hexo server 명령어를 통해 로컬에서 가동할 때에는 css의 변경 사항이 즉시 반영되지만, hexo d -g 명령어를 통해 서버의 내용을 갱신할 때에는 변경 사항이 반영되지 않는 이슈가 있다는 것이었다. 실제로 확인해 보니 GitHub 상의 리포지터리에 있는 css 디렉토리를 삭제하여도 hexo deploy 명령어를 입력하면 몇 개월 전에 커밋했던 css 파일들이 복구될 뿐이었다. 그래서 GitHub 상에 있는 css 파일을 직접 수정해 보기로 했다.

css 디렉토리 안에 있는 default.css와 style.css를 수정했다. 그러나 다시 hexo deploy 명령어를 입력하자 커밋 내역이 사라지고 기존 파일들로 다시 대체되었다.

그 때 눈에 들어온 것이 있었으니, 바로 hexo가 설치된 디렉토리 바로 아래에 있는 public 폴더였다. public 폴더 안에는 GitHub 상에 있는 것과 똑같은 파일 및 폴더들이 자리하고 있었다. 그 중에서 css 디렉토리 안에 있는 default.css와 style.css를 수정한 뒤, hexo clean 명령어를 실행하고 나서 다시 hexo d -g 명령어를 실행하니 변경 사항들이 정상적으로 적용되는 것을 볼 수 있었다. 지금까지 ./themes/icarus 디렉토리 아래에 있는 파일들을 수정하는 데에만 집중하다 보니 등잔 밑이 어두운 줄도 모르고 있었던 것이다.

/public/default.css & style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
font-family: 'GoyangIlsan', 'NanumSqaure', 'Noto Sans CJK KR', 'Noto Sans KR', Ubuntu, Roboto, sans-serif;
/* 모든 폰트 관련 코드 수정 */

html {
    background-color: #fce4ec; }
/* 배경색 관련 코드 수정 */

a {
    color: #e91e63; }
/* 모든 강조색 관련 코드 수정 */

.content h1 {
  padding-left: 8px;
  border-left: 8px solid #e91e63; }
/* 모든 h1, h2의 왼쪽에 포인트 색상 추가 */

/* * * 이하 생략 * * */

마침내, css 변경 사항들을 적용하는 데에 성공했다! 이것을 과연 ‘성공’했다고 말할 수 있는지는 모르겠지만 아무튼 원하는 대로 커스터마이징된 블로그를 보니 기분이 좋았다. 이틀에 걸쳐 작업한 보람이 있었다.


이상으로 Hexo 블로그의 Icarus 테마의 일부를 커스터마이징하는 방법에 대한 서술을 마친다.


Hexo Icarus 테마 커스터마이징 (v.221101)

https://blog.edward.moe/2022/10/31/How-to-customize-Hexo-Theme/

Author

Edward*

Posted on

2022. 10. 31.

Updated on

2022. 10. 31.

Licensed under

#

Categories

Tags

Diary1
Eclipse1
GameMaker™1
Hexo4
MySQL1
TensorFlow1
html, css1
×