GitHub 블로그 테마 이주 #4 - 커스터마이징 (Part 1)
GitHub 블로그 테마 이주 #4 - 커스터마이징 (Part 1)
이 글에서는 사이트를 운용하는 목적에 맞게 UI 설정을 조정한 기록을 담고 있습니다. 그 중에서도 주로 설정을 바꾸는 방식으로 조정이 가능한 부분 위주로 담았습니다. SCSS/CSS/HTML 파일 수정이 필요한 경우는 다음 글에서 소개합니다.
관련글
테스트 서버 구성
기존 데이터 복사
사이트 설정
커스터마이징 (Part 1)
커스터마이징 (Part 2)
운영 사이트에 반영
테스트 사이트의 수정 사항 일괄 반영
페이지 상단에 사진과 함께 글 넣기
Alembic은 feature_image와 feature_text 변수를 설정하여, 페이지 상단에 그림을 넣고, 그림 위에 글을 넣을 수 있습니다.
---
title: 퀀트강의 슬기로운 주식 정보
excerpt: "퀀트강의 슬기로운 주식 정보는 주식 시세와 재무 데이터를 통계적으로 분석하여 투자에 되는 정보를 제공합니다."
feature_text: |
주식 시세와 재무 데이터를 분석하여 투자에 도움이 되는 정보를 제공합니다.
feature_image: "https://picsum.photos/1300/400?image=989"
---
Minimal Mistakes는header안에 overlay_image 변수로 그림을 설정합니다. 페이지의 title이 그림 위에 큰 글자로 나타납니다. 그 아래에 작은 글자가 나타나는데, header안에 tagline 변수가 정의되어 있으면 이를 쓰고, 그렇지 않으면 excerpt를 씁니다. title만 보여주고, 추가 문구는 보이고 싶지 않은 경우에는 show_overlay_excerpt를 false로 설정하면 됩니다.
매뉴얼에는 tagline이 있으면 excerpt에 우선한다고 설명되어 있지만, 항상 excerpt가 사용되는 듯 합니다.
최근 포스팅 목록 지우기
메인 페이지 아래쪽에는 최근 포스팅 목록이 나오고 있습니다. 블로그라면 유용한 기능이겠지만, 제 사이트는 이 기능이 필요 없습니다. 또한 왼쪽 저자 소개를 위한 사이드바와 오른쪽에 비어 있는 사이드바도 제거하고 싶습니다. (필요한 경우 이 두 사이드바 구역에 네비게이션이나 목차를 넣을 수 있습니다)
전체 화면을 모두 쓰고, 아래쪽 있는 최근 글 목록을 없애기 위해서는, 페이지의 레이아웃(layout)을 splash로 변경해 주면 됩니다. 오른쪽 사이드바만 없애고 싶은 경우에는 layout은 조정하지 않고, classes를 wide로 설정하면 됩니다.
레이아웃 매뉴얼에 지원하는 레이아웃, 추가 클래스, 그리고 설정 방법이 잘 정리되어 있습니다.
layout: splash
페이지마다 제목 추가하기
Minimal Mistakes는 페이지 제목을 본문내에 표시하지 않습니다. title로 지정된 내용은 HTML 문서에 <head>안에 제목(title)로 기입합니다. 이에 비해 Alembic은 title을 본분 내에 <h1> 태그로 넣어줍니다.
제목을 본문에도 표시하기 위해서는 제목 태그(마크다운에서 #)을 사용하거나, 앞에서 메인 페이지에서 소개한 header를 사용하여야 합니다.
아래는 header를 이용하여 어두운 배경위에 제목을 표시한 것입니다. header는 배경으로 그림을 지정할 수도 있지만 overlay_color를 설정하여 배경색을 지정할 수도 있습니다.
excerpt가 부제처럼 표시되지 않다록, show_overlay_excerpt는 false로 설정하였습니다.
title: "TQQQ 수익률과 비용 (QQQ 3x)"
excerpt: "TQQQ의 최근 1년 수익률과 추정 비용"
header:
overlay_color: "#333"
show_overlay_excerpt: false
글자가 꽤 크게 나오고 표시된 박스의 여백도 상당합니다. 이는 이후에 조정하도록 하겠습니다.
상단 네비게이션 바 설정하기
오른쪽 상단에 Quick-Start Guide라는 기본 네이게이션 항목이 기본 설정되어 있습니다. 검색 버튼은 이전 _config.yml 설정에서 사이트 검색 기능을 켰기 때문에 추가된 것입니다. (search를 true로 설정)
상단 네비게이션 바는 _data/navigation.yml를 수정하면 됩니다.
main:
- title: "재무 기반 선별"
url: "/fn/"
- title: "레버리지/인버스"
url: "/lev/"
- title: "각종 통계"
url: "/stats/"
상단 네비게이션 바는 페이지 폭에 따라 유연하게 동작합니다. 폭이 줄어들면 오른쪽 항목부터 하나씩 사라지고, 대신 목록을 보여주는 ☰ 마크가 나타나게 됩니다.
피드(feeds)
아래는 검색 등록의 편의를 위해서 설정한 것입니다. 일반적인 블로그 사이트의 경우 따로 설정할 필요가 없을 수 있습니다.
대부분의 Jekyll 기반 테마들은 Atom 기반의 피드를 기본 제공합니다. 사이트 URL/feed.xml로 기본 설정되어 있습니다.
개수는 기본 10개로 설정되어 있습니다. 이 숫자를 늘리려면 feed 아래 posts_limit를 설정하면 됩니다.
Minimal Mistakes는 atom_feed 아래 피드 관련 설정을 합니다만, 갯수는 feed 아래에 설정해야 합니다. 피드는 jekyll-feed 플러그인이 담당하는데, 이 플러그인이 이 변수를 참조하기 때문입니다.
feed:
posts_limit : 50
네이버의 경우 Atom 형식의 피드를 받지 않습니다. RSS 2.0 형식의 피드만 받습니다. 이 경우 RSS 2.0 형식의 피드를 다음과 같이 직접 정의해야 합니다. 루트 디렉토리 밑에 rss.xml이라는 파일 이름으로 만들어서 등록하면 사이트 URL/rss.xml로 접근할 수 있습니다. 필요한 개수만큼 (코드에서는 50개) 설정하면 됩니다.
해당 코드는 지킬 블로그 RSS Feed 설정하기와 RSS 2.0으로 검색이 잘되는 Jekyll 블로그 만들기를 참고하였습니다.
---
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
{% assign feed_path = "/rss.xml" %} <!-- 피드경로 명시 -->
<channel>
<title> {{ site.title | xml_escape }} </title>
<description>{{ site.description | xml_escape }}</description>
<link>{{ site.url }}{{ site.baseurl }}/</link>
<atom:link href="{{ feed_path | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
<language>ko-KR</language>
<copyright>Copyright QuantKang, All rights reserved.</copyright>
<pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
<lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
<generator>Jekyll v{{ jekyll.version }}</generator>
{% for post in site.posts limit:50 %}
<item>
<title>{{ post.title | xml_escape }}</title>
<description>{{ post.content | strip_html | truncatewords: 200 | xml_escape }}</description>
<author>{{ post.author_name | xml_escape }}</author>
<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
<link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
<guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
{% for tag in post.tags %}
<category>{{ tag | xml_escape }}</category>
{% endfor %}
{% for cat in post.categories %}
<category>{{ cat | xml_escape }}</category>
{% endfor %}
</item>
{% endfor %}
</channel>
</rss>
댓글
댓글 쓰기