Jongbin Oh

I write something to think

3 minute read

포스트 옆에 목차가 나오는 글을 보고 나도 해보고 싶다. 직접 만들진 못하겠고 목차를 지원하는 Jekyll 템플릿을 찾았다.

목차를 비롯해 블로그 포스트 읽기를 도와주는 기능, 컬러 베리에이션, 유지 보수 걱정이 없게 많이 사용하는 테마. 블로그가 4개라서 컬러 베리에이션은 반드시 지원해야 한다. 이런 요구 사항을 만족하는 Minimal Mistakes 테마를 찾았다.

org-ruby를 사용한 게 발목을 잡았다

Emacs Org-mode가 메인 마크업 언어다. markdown으로 바로 글쓰기가 싫다. markdown이 필요할 때는 Org-mode로 글을 쓰고 markdown으로 익스포트한다.

markdown을 지원하는 Jekyll로 글을 쓸 때도 마찬가지다. markdown으로 익스포트하는 과정을 없애보려고 org-ruby를 사용해서 바로 HTML을 뽑은 게 문제였다. minimal mistakes가 toc와 같은 기능을 지원하려면 markdown을 처리할 수 있어야 하는데, HTML을 뽑는 파이프라인을 따로 타고 있었기 때문이다.

org-ruby를 고치거나 Org-mode로 글을 쓰고 markdown을 익스포트해서 Jekyll 정규 파이프라인을 그대로 타게 해야 한다. org-ruby를 계속 수정하며 Jekyll 업데이트를 따라갈 에너지가 없어서 markdown으로 익스포트하게 고쳤다.

설치

설치 방법은 Quick-Start Guide - Minimal Mistakes 글을 참고하면 된다. 난 테마를 gem으로 설치하고 있다.

source "https://rubygems.org"

gem "minimal-mistakes-jekyll"

블로그 빌드에 필요한 ruby는 Asdf로 설치해서 실행한다.

커스터마이즈

검색 디폴트값인 lunr 대신 google 사용

search_provider          : google # lunr (default), algolia, google

lunr이 예쁘고 좋은데 크롤링에 너무 취약하다. 파일 용량이 너무 커서 google로 변경했다.

google website, analytics

google:
  search_engine_id       : # YOUR_SEARCH_ENGINE_ID

analytics:
  provider               : "google-gtag" # false (default), "google", "google-universal", "google-gtag", "custom"
  google:
    tracking_id          : "MY_TRACKING_ID"

잘 나가는 테마를 쓰는 이유 중 하나다. 편하게 설정할 수 있다.

asseturl 변수 사용

asseturl : "/pnotes/assets"

블로그가 루트에 없어서 생기는 불편함이랄까?

둘 중 하나를 선택하면 된다.

  1. /pnotes/assets/AWESOME_IMAGE.jpg
  2. /pnotes/assets/AWESOME_IMAGE.jpg

난 2번이 편하다. 그래서 설정해서 사용하고 있다. 초창기부터 이렇게 사용해서 지금은 더 편하게 설정할 수 있는지는 모르겠다.

포스트 defaults 설정

왠만한 건 여기서 다 설정할 수 있다.

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
      values:
        layout: single
        author_profile: true
        read_time: true
        share: true
        related: true
        mathjax: false
        mermaid: false
        adsense: true
  - scope:
      path: "page"
      values:
        sitemap: false
  - scope:
      path: ""
      type: tag
      values:
        author_profile: true
        sitemap: false
  - scope:
      path: ""
      type: category
      values:
        author_profile: true
        sitemap: false

Google Adsense 수동 삽입

자동 삽입으로 했는데, 읽는데 너무 방해된다. 광고는 붙이고 싶지만 읽는데 방해되는 건 싫다. 그래서 본문을 다 읽은 후 나오는 관련된 글 앞에 Google Adsense 삽입했다. _includes/before-related.html 파일을 만들어서 작업.


<script async src="GOOGLE ADSENSE"
    crossorigin="anonymous"></script>
<!-- blog - pnotes -->
<ins class="adsbygoogle" style="display:block" data-ad-client="DATA-AD-CLIENT" data-ad-slot="DATA-AD-SLOT"
    data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

prev, next 버튼 사이에 random 버튼 추가

랜덤 글로 이동하는 기능을 빼먹을 수 없지. 나도 가끔 누른다.


<nav class="pagination">
    
    <a href="/pnotes/archives/book-seven-concurrency-models-in-seven-weeks-2014/" class="pagination--pager"
        title="Seven Concurrency Models in Seven Weeks (Paul Butcher, 2014) 독후감 - 복습하고 교양쌓고 배우기
">Previous</a>
    
    <!-- Random Page -->
    <a href="/pnotes/random/" class="pagination--pager" title="Random">Random</a>
    
    <a href="#" class="pagination--pager disabled">Next</a>
    
</nav>

assets/css/main.scss 를 복사하고 import 후 커스터마이징했다.

---
# Only the main Sass file needs front matter (the dashes are enough)
search: false
---

@charset "utf-8";

@import "minimal-mistakes/skins/air"; // skin
@import "minimal-mistakes"; // main partials

/*
Post pagination navigation links
========================================================================== */

/* next/previous buttons customize */
.pagination--pager { width: 33%; }

50%를 33%로 고쳤다.

LaTeX 랜더링 기능

이건 자주 사용을 안 하더라도 붙여 놓으면 뿌듯하다.

MathJax를 사용해서 붙였다.

이전 이후 테마

lifelog

이전

nil

이후

nil

programming notes

이전

nil

이후

nil

emacsian

이전

nil

이후

nil

dev-diary

이전

nil

이후

nil

마치며

Jekyll 표준 파이프라인을 타게 하는 작업이 가장 크다. 이걸 해놔서 다음 테마를 바꿀 때는 이번처럼 힘들지는 않을 것 같다.

블로그마다 비주얼 개성이 있었다. 하지만 이제는 색깔만 다르다. 개성이 유지보수 효율화에 무릎을 꿇었다. 블로그 아이콘을 만들어서 좀 더 개성을 줄까 싶다.

테마가 마음에 들어 한동안 신경 쓰지 않고 쓸 것 같다.

링크

You May Also Enjoy