Github 블로그 만들기_4

게시 2023/11/14 업데이트 2023/11/17

By Hyechan Bang 15 분읽는 시간

블로그 댓글기능, CSS 커스텀

블로그의 중요한 역할은 정보 기록도 있지만, 다른 사람과의 소통도 있다. 이를 위해 댓글기능을 설치해보자.

기본적인 테마는 Chirpy를 그대로 가져왔지만, 추가적인 CSS 수정이 가능하다.

1. Comment 기능

Github 블로그 같은 경우는 Github Pages를 사용한 정적 페이지 프로젝트이기 때문에, 외부의 댓글 기능을 설치해서 사용해야 한다.

이러한 Comment App 중 많이 사용되는 3가지가 있다.

Disqus
Utterances
Giscus

처음에는 Giscus를 사용하려 했으나, CSP관련 에러로 인해 시간이 너무 지체돼서 그냥 Utterances로 방향을 틀었다.

설치 과정

1) Github Repo의 Discussions(댓글기능) 활성화

Github Repo의 Settings 메뉴에 들어간다.
Features 항목의 Discussions 항목의 체크박스를 체크해준다.

2) Utterances 앱 설치

본인의 Github Resository에 Utterances를 연결해야 한다.
https://github.com/apps/utterances
위 링크에 접속 후, 본인의 Github 블로그 Repo에 설치를 진행한다.

3) `_config.yml` 수정

  
comments:
    active: utterances
    utterances:
        repo: momo1108/momo1108.github.io
        issue_term: pathname

comments 항목에서 설정 정보를 입력해준다.

active : 사용할 Comment App - utterances
utterances
- repo : github계정/github레포
- issue_term : 포스트의 댓글창 생성기준

2. CSS 커스터마이징

🔹도큐먼트 참조

If you need to customize the stylesheet, copy the theme’s assets/css/jekyll-theme-chirpy.scss to the same path on your Jekyll site, and then add the custom style at the end of it.

Starting with version 6.2.0, if you want to overwrite the SASS variables defined in _sass/addon/variables.scss, copy the main sass file _sass/main.scss into the _sass directory in your site’s source, then create a new file _sass/variables-hook.scss and assign new value.

from : https://chirpy.cotes.page/posts/getting-started/#customizing-stylesheet

위 도큐먼트에 따르면 다음과 같다.

Chirpy 테마 깃헙 페이지의 assets/css/jekyll-theme-chirpy.scss를 그대로 프로젝트의 같은 경로에 복사한다.
해당 파일 맨 아래에 커스텀 스타일을 작성한다.

Chirpy 6.2.0 버전부터, 기존 테마의 _sass/addon/variables.scss에 정의된 변수값을 수정하고 싶으면 _sass/main.scss를 프로젝트에 그대로 복사하고, _sass/variables-hook.scss를 프로젝트에 생성해 여기에 새 값을 정의한다.

참고로 6.2.3 버전의 _sass/addon/variables.scss에는 아래와 같은 내용이 정의돼있다.

  
 /*
 * The SCSS variables
 */

 /* sidebar */

 $sidebar-width: 260px !default; /* the basic width */
 $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 $sb-btn-gap: 0.8rem !default;
 $sb-btn-gap-lg: 1rem !default;

 /* other framework sizes */

 $topbar-height: 3rem !default;
 $search-max-width: 200px !default;
 $footer-height: 5rem !default;
 $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
 $base-radius: 0.625rem !default;
 $back2top-size: 2.75rem !default;

 /* syntax highlight */

 $code-font-size: 0.85rem !default;
 $code-header-height: 2.25rem !default;
 $code-dot-size: 0.75rem !default;
 $code-dot-gap: 0.5rem !default;
 $code-icon-width: 1.75rem !default;

 /* fonts */

 $font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
 $font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;

🔹참조 후기

도큐먼트에 명시된대로 assets/css/jekyll-theme-chirpy.scss 를 복사하고 최하단에 커스텀 css를 작성해보았다.

일단 본문의 수평선의 y축 margin을 좀 늘리기 위해 설정을 해보았다.

assets/css/jekyll-theme-chirpy.scss

  
@import 'main';

/* append your custom style below */
div.content {
    hr {
        margin: 32px 0;
    }
}

위에서 사용한 선택자의 경우, chirpy theme 깃헙의 _layouts 를 살펴보면 알 수 있다.

하지만 예상했던대로의 결과는 나오지 않았다. 이상하게도 css 적용이 아예 되지않더라.

다른 방법을 모색하던 중, 변수값을 바꾸고 싶은 경우 사용하는 main.scss 와 variables-hook.scss 를 사용해보았다.

1) main.scss

main.scss 의 내용을 보면 상단에서 chirpy에서 제공하는 기본 scss 값들을 모두 import 하고있다.

느낌상 모든 scss를 가져다 사용하는 곳에서 추가로 scss를 작성하면 안될수가 없을 것 같아서 작성해보았다.

페이지의 sidebar 와 본문의 header, horizontal line 의 커스텀을 작성했다.

  
@import 'colors/typography-light';
@import 'colors/typography-dark';
@import 'addon/variables';
@import 'variables-hook';
@import 'addon/module';
@import 'addon/syntax';
@import 'addon/commons';
@import 'layout/home';
@import 'layout/post';
@import 'layout/tags';
@import 'layout/archives';
@import 'layout/categories';
@import 'layout/category-tag';

#sidebar {
    background-size: cover;
    background-position: center;

    .nav-link {
        background: var(--sidebar-nav-bg);
    }

    .sidebar-bottom {
        padding: 0px 24px;
        justify-content: center;
    }
}

main div.content {

    h1, h2, h3 {
        font-weight: bold;
    }
    hr {
        position: relative;
        margin: 70px 0 !important;
        overflow: visible;
        opacity: .75;
        border-color: var(--content-hr-border-color);
        border-style: dashed;

        &::after {
            position: absolute;
            top: 0%;
            left: 50%;
            content: '';
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--content-hr-image-bg-color);
            background-image: url('/avatar_trans.png');
            background-size: 80% 80%;
            background-position: center;
            background-repeat: no-repeat;
            transform: translate(-50%, -50%);
            border: 2px solid var(--content-hr-border-color);
        }
    }

    .highlight {
        max-height: 750px;
        scrollbar-color: #4a4c55 #1a1c25;
        scrollbar-width: thin;
        &::-webkit-scrollbar {
          width: 4px;
          height: 8px;
          background-color: var(--content-highlight-scrollbar-color);
        }
        &::-webkit-scrollbar-thumb {
          background-color: var(--content-highlight-scrollbar-thumb-color);
        }
    }
}

다행히도 여기서 정의한 내용은 적용이 되는것을 확인했다.

Chirpy에서 제공하는 light, dark theme에 맞추어 css 값을 적용하기 위해서는 기존의 Chirpy의 scss 파일에 정의된 내용들을 수정해야 한다.

내가 바꾸고싶은 내용들은 _sass/colors/syntax-dark.scss, _sass/colors/syntax-light.scss 에 있다.

해당 파일의 내용들을 복사해서 내 프로젝트의 _sass/variables-hook.scss 에 붙여넣고, 수정작업을 진행했다.

2) _sass/variables-hook.scss

자주 사용하는 스타일들을 재활용할 수 있는 Mixin 이 light, dark 테마에 따라서 정의되어있다.

variables-hook.scss 에서 이 Mixin들을 그대로 덮어쓰기 하는 형식이므로, 해당 내용을 그대로 복사해서 원하는 부분만 수정, 추가해주자.

  
/*
 * The syntax light mode typography colors
 */

 @mixin light-scheme {
    /* Framework color */
    --main-bg: white;
    --mask-bg: #c1c3c5;
    --main-border-color: #f3f3f3;
  
    /* Common color */
    --text-color: #34343c;
    --text-muted-color: #757575;
    --text-muted-hightlight-color: inherit;
    --heading-color: #2a2a2a;
    --label-color: #585858;
    --blockquote-border-color: #eeeeee;
    --blockquote-text-color: #757575;
    --link-color: #0056b2;
    --link-underline-color: #dee2e6;
    --button-bg: #ffffff;
    --btn-border-color: #e9ecef;
    --btn-backtotop-color: #686868;
    --btn-backtotop-border-color: #f1f1f1;
    --btn-box-shadow: #eaeaea;
    --checkbox-color: #c5c5c5;
    --checkbox-checked-color: #07a8f7;
    --img-bg: radial-gradient(
      circle,
      rgb(255, 255, 255) 0%,
      rgb(239, 239, 239) 100%
    );
    --shimmer-bg: linear-gradient(
      90deg,
      rgba(250, 250, 250, 0) 0%,
      rgba(232, 230, 230, 1) 50%,
      rgba(250, 250, 250, 0) 100%
    );
  
    /* Sidebar */
    --site-title-color: #454545; // 제목
    --site-subtitle-color: #565656; // 부제
    // <a href="https://www.freepik.com/free-ai-image/ai-generated-water-picture_57309985.htm#query=clear%20sky&position=11&from_view=search&track=ais">Image By freepik</a>
    --sidebar-bg: url("/assets/img/background/light.jpg");
    --sidebar-border-color: #fff9; // sns 링크 테두리
    --sidebar-muted-color: #242424; // nav 글색깔
    --sidebar-active-color: #1d1d1d;
    --sidebar-nav-bg: #fff5; // 메뉴 bg
    --sidebar-hover-bg: #fffb; // 메뉴, sns 링크 호버 bg
    --sidebar-btn-bg: #fff5; // sns 링크 bg
    --sidebar-btn-color: #5e5e5e; // social icon 색깔
    --avatar-border-color: #fff9; // avatar 테두리
  
    /* Topbar */
    --topbar-bg: rgb(255, 255, 255, 0.7);
    --topbar-text-color: rgb(78, 78, 78);
    --search-border-color: rgb(240, 240, 240);
    --search-icon-color: #c2c6cc;
    --input-focus-border-color: #b8b8b8;
  
    /* Home page */
    --post-list-text-color: dimgray;
    --btn-patinator-text-color: #555555;
    --btn-paginator-hover-color: var(--sidebar-bg);
  
    /* Posts */
    --toc-highlight: #0550ae;
    --btn-share-color: gray;
    --btn-share-hover-color: #0d6efd;
    --card-bg: white;
    --card-hovor-bg: #e2e2e2;
    --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
      rgba(211, 209, 209, 0.15) 0 0 0 1px;
    --footnote-target-bg: lightcyan;
    --tb-odd-bg: #fbfcfd;
    --tb-border-color: #eaeaea;
    --dash-color: silver;
    --kbd-wrap-color: #bdbdbd;
    --kbd-text-color: var(--text-color);
    --kbd-bg-color: white;
    --prompt-text-color: rgb(46, 46, 46, 0.77);
    --prompt-tip-bg: rgb(123, 247, 144, 0.2);
    --prompt-tip-icon-color: #03b303;
    --prompt-info-bg: #e1f5fe;
    --prompt-info-icon-color: #0070cb;
    --prompt-warning-bg: rgb(255, 243, 205);
    --prompt-warning-icon-color: #ef9c03;
    --prompt-danger-bg: rgb(248, 215, 218, 0.56);
    --prompt-danger-icon-color: #df3c30;
  
    /* Tags */
    --tag-border: #dee2e6;
    --tag-shadow: var(--btn-border-color);
    --tag-hover: rgb(222, 226, 230);
    --search-tag-bg: #f8f9fa;
  
    [class^='prompt-'] {
      --link-underline-color: rgb(219, 216, 216);
    }
  
    .dark {
      display: none;
    }
  
    /* Categories */
    --categories-border: rgba(0, 0, 0, 0.125);
    --categories-hover-bg: var(--btn-border-color);
    --categories-icon-hover-color: darkslategray;
  
    /* Archive */
    --timeline-color: rgba(0, 0, 0, 0.075);
    --timeline-node-bg: #c2c6cc;
    --timeline-year-dot-color: #ffffff;

    /* Custom */
    --content-hr-border-color: #bbb;
    --content-hr-image-bg-color: #ff9898;

  } /* light-scheme */

  

/*
 * The main dark mode styles
 */

 @mixin dark-scheme {
    /* Framework color */
    --main-bg: rgb(27, 27, 30);
    --mask-bg: rgb(68, 69, 70);
    --main-border-color: rgb(44, 45, 45);
  
    /* Common color */
    --text-color: rgb(175, 176, 177);
    --text-muted-color: #868686;
    --text-muted-hightlight-color: #aeaeae;
    --heading-color: #cccccc;
    --label-color: #a7a7a7;
    --blockquote-border-color: rgb(66, 66, 66);
    --blockquote-text-color: #868686;
    --link-color: rgb(138, 180, 248);
    --link-underline-color: rgb(82, 108, 150);
    --button-bg: #1e1e1e;
    --btn-border-color: #2e2f31;
    --btn-backtotop-color: var(--text-color);
    --btn-backtotop-border-color: #212122;
    --btn-box-shadow: var(--main-bg);
    --card-header-bg: #292929;
    --checkbox-color: rgb(118, 120, 121);
    --checkbox-checked-color: var(--link-color);
    --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
    --shimmer-bg: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(58, 55, 55, 0.4) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  
    /* Sidebar */
    --site-title-color: #e5e5e5;
    --site-subtitle-color: #d1d1d1;
    // <a href="https://www.freepik.com/free-photo/beautiful-sky-full-stars-trona-ca_13381243.htm#query=starry%20night&position=14&from_view=search&track=ais">Image by wirestock</a> on Freepik
    --sidebar-bg: url("/assets/img/background/dark.png");
    --sidebar-border-color: #292929;
    --sidebar-muted-color: #dadada;
    --sidebar-active-color: #2691f6;
    --sidebar-nav-bg: #2226;
    --sidebar-hover-bg: #222b;
    --sidebar-btn-bg: #2226;
    --sidebar-btn-color: #aaa;
    --avatar-border-color: rgb(206, 206, 206, 0.9);
  
    /* Topbar */
    --topbar-bg: rgb(27, 27, 30, 0.64);
    --topbar-text-color: var(--text-color);
    --search-border-color: rgb(55, 55, 55);
    --search-icon-color: rgb(100, 102, 105);
    --input-focus-border-color: rgb(112, 114, 115);
  
    /* Home page */
    --post-list-text-color: rgb(175, 176, 177);
    --btn-patinator-text-color: var(--text-color);
    --btn-paginator-hover-color: #2e2e2e;
  
    /* Posts */
    --toc-highlight: rgb(116, 178, 243);
    --tag-hover: rgb(43, 56, 62);
    --tb-odd-bg: #252526; /* odd rows of the posts' table */
    --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
    --tb-border-color: var(--tb-odd-bg);
    --footnote-target-bg: rgb(63, 81, 181);
    --btn-share-color: #6c757d;
    --btn-share-hover-color: #bfc1ca;
    --card-bg: #1e1e1e;
    --card-hovor-bg: #464d51;
    --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
      rgb(137, 135, 135, 0.24) 0 0 0 1px;
    --kbd-wrap-color: #6a6a6a;
    --kbd-text-color: #d3d3d3;
    --kbd-bg-color: #242424;
    --prompt-text-color: rgb(216, 212, 212, 0.75);
    --prompt-tip-bg: rgb(22, 60, 36, 0.64);
    --prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
    --prompt-info-bg: rgb(7, 59, 104, 0.8);
    --prompt-info-icon-color: #0075d1;
    --prompt-warning-bg: rgb(90, 69, 3, 0.88);
    --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
    --prompt-danger-bg: rgb(86, 28, 8, 0.8);
    --prompt-danger-icon-color: #cd0202;
  
    /* tags */
    --tag-border: rgb(59, 79, 88);
    --tag-shadow: rgb(32, 33, 33);
    --dash-color: rgb(63, 65, 68);
    --search-tag-bg: #292828;
  
    /* categories */
    --categories-border: rgb(64, 66, 69, 0.5);
    --categories-hover-bg: rgb(73, 75, 76);
    --categories-icon-hover-color: white;
  
    /* archives */
    --timeline-node-bg: rgb(150, 152, 156);
    --timeline-color: rgb(63, 65, 68);
    --timeline-year-dot-color: var(--timeline-color);

    /* Custom */
    --content-hr-border-color: #555;
    --content-hr-image-bg-color: #8dabd5;
  
    .light {
      display: none;
    }
  
    hr {
      border-color: var(--main-border-color);
    }
  
    /* categories */
    .categories.card,
    .list-group-item {
      background-color: var(--card-bg);
    }
  
    .categories {
      .card-header {
        background-color: var(--card-header-bg);
      }
  
      .list-group-item {
        border-left: none;
        border-right: none;
        padding-left: 2rem;
        border-color: var(--categories-border);
  
        &:last-child {
          border-bottom-color: var(--card-bg);
        }
      }
    }
  
    #archives li:nth-child(odd) {
      background-image: linear-gradient(
        to left,
        rgb(26, 26, 30),
        rgb(39, 39, 45),
        rgb(39, 39, 45),
        rgb(39, 39, 45),
        rgb(26, 26, 30)
      );
    }
  
    color-scheme: dark;
  
    /* stylelint-disable-next-line selector-id-pattern */
    #disqus_thread {
      color-scheme: none;
    }
  } /* dark-scheme */

다양한 항목에 대한 내용이 정의되어있지만, 실질적으로 내가 수정한 곳은 sidebar 파트와, 새로 추가한 custom 파트이다.

정리

이번 장은 블로그에 추가적인 커스터마이징을 하는 작업에 대해 알아보았다.

scss 코드의 내용을 첨부했기 때문에 내용이 조금 길어보일 수 있으나, 정작 내용 자체는 어렵지 않아서 어렵지 않게 커스터마이징을 할 수 있었다.

하나 불만인 점은 chirpy의 도큐먼트에 나온대로 scss를 수정하려했는데 잘 되지 않았다는 점. 생각보다 그렇게 도큐먼트가 친절하게 되어있진 않다.

markdown 사용법도 그렇고… chirpy만의 깔끔한 추가 마크다운 문법이 있음에도, 사용법이 불친절하게 안내되어있어서 직접 해당 markdown은 어떻게 사용해야햐는지 github의 파일을 뒤져보아야 했다.

ex) 요런거..

예쁘죠?

혹시나 궁금한 사람들이 있다면, 이 블로그에 따로 정리해둔 핀 포스트가 있으니 참조하자.

Github