나에게 맞게 Ghost 설정하기
Ghost를 시작하고, 이제 내 입맛에 맞게 각종 항목 변경 사항을 기록해둔다. 추가 혹은 조정 사항은 나에게 불필요한 요소 제거, 댓글 추가, 코드 하이라이트 추가, 목차 보기 기능 추가이다.
주의
아래 가이드는 AWS Lightsail에 docker 기반으로 Ghost CMS 설치 후 저에게 맞는 설정을 변경하는 과정을 담은 글입니다. 사용하는 환경에 따라 가이드가 정상 동작하지 않을 수 있습니다.
ironicarori
사전 준비
docker의 content의 테마 관련 파일은 current 디렉터리의 테마에 대한 링크를 가지고 있다. 그리하야~ yaml에서 편의를 위해 생성한 ghost-data 볼륨을 접근하여 수정이 불가하다. ghost-data에 실제 데이터를 복사하여 내가 수정한 theme가 ghost에 적용할 수 있게 하자!
이미지의 파일은 아무리 수정하여도 docker 재시작 시 이미지 파일로 다시 복구가 된다. 이미지 수정 사항을 저장하여 처리할 수 있다. 하지만 수정 후 매번 도커 이미지 커밋은 너무나도 불편하다. 하여, 이미 생성해둔 도커 볼륨에 접근하여 수정할 수 있게 해보자!
## ghost의 쉘로 진입
sudo docker exec -it ghost /bin/sh
## current의 테마를 content에 복사하여 ghost-data 볼륨을 수정하여
## 테마 수정 가능한 환경 구성
cp -a /var/lib/ghost/current/content/themes/casper /var/lib/ghost/content/themes위의 수정 사항이 적용되면 aws 인스턴스의 /var/lib/docker/volumes/ 디렉터리에 존재하는 docker 볼륨에 접근하여 ghost의 테마 파일 수정이 가능해진다!
불필요한 항목 제거
사이트에 각종 subscribe나 sign up, social 관련 아이콘 및 링크가 보기 싫어 그리고 필요 없어 제거하기로 했다. 대충 코드 상 설정에서 제거하면 되는 것 같아 찾아보았다.
Setting → Membership에 들어가 Subscription access no body로 설정하면 된다.
소셜 미디어 링크 수정은 테마 파일을 수정해야 한다. default.hbs파일 내의 아래 항목 삭제하면 된다. 수정 후 docker 재시작하면 적용 완료!
<div class="gh-social">
{{#if @site.facebook}}
<a class="gh-social-link gh-social-facebook" href="{{facebook_url @site.facebook}}" titl>
{{/if}}
{{#if @site.twitter}}
<a class="gh-social-link gh-social-twitter" href="{{twitter_url @site.twitter}}" title=">
{{/if}}
</div>떠다니는 목차 추가
목차를 통해 필요한 정보로 바로 이동하는 편리함! 멋지지 않은가? 그렇기에 어찌 페이지 위로 둥둥 떠다니는 목차를 추가하지 않을 수 있을까?
떠다니는 목차 추가를 위해 default.hbs와 page.hbs 수정이 필요하다. 본 수정 사항은 https://ghost.org/tutorials/adding-table-of-contents/#intro를 참고 처리하였다.
default.hbs
아래 코드 참고하여 {{ghost_head}} 위에 항목 추가
{{!-- TOC styles --}}
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css>">
<style>
.gh-content {
position: relative;
}
.gh-toc > .toc-list {
position: relative;
}
.toc-list {
overflow: hidden;
list-style: none;
}
@media (min-width: 1300px) {
.gh-sidebar {
position: absolute;
top: 0;
bottom: 0;
margin-top: 4vmin;
grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
}
.gh-toc {
position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
top: 4vmin;
}
}
.gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */
}
</style>
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
it should always be the last tag before the closing head tag --}}
{{ghost_head}}아래 코드 참고하여 {{ghost_foot}} 위에 항목 추가
{{!-- Tocbot script --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
{{! Initialize Tocbot after you load the script }}
<script>
tocbot.init({
// Where to render the table of contents.
tocSelector: '.gh-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.gh-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3, h4',
});
</script>
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the clo
sing body tag --}}
{{ghost_foot}}post.hbs
아래 코드 참고하여 {{content}} 위에 항목 추가
<section class="gh-content gh-canvas">
<aside class="gh-sidebar"><div class="gh-toc"></div></aside>
{{content}}
</section>읽음 상태 막대 추가
현재 게시글을 얼마나 읽었는지 확인할 수 있는 기능을 추가하려고 한다. 아무래도 기술 블로그로 만들 예정이라 게시글이 좀 길 것 같은데, 현재 어느 정도 읽었는지 알면 도움이 되지 않을까 싶다.
https://ghost.org/tutorials/reading-time/를 참고하여 수정하였다.
post.hbs
아래 코드 참고하여 {{!< default}} 아래에 항목 추가
{{!< default}}
<progress class="reading-progress" value="0" max="100" aria-label="Reading progress"></progress>default.hbs
아래 코드 참고하여 {{ghost_head}} 위에 항목 추가. 가이드에는 설정에서 code injection으로 추가하라고 하였다. 하지만, 이미 목차를 추가하며 default.hbs에 style 항목 추가한 내역이 있어 통일하였다.
<style>
.reading-progress {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
height: 5px; /* Progress bar height */
background: #c5d2d9; /* Progress bar background color */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Hide default progress bar */
}
.reading-progress::-webkit-progress-bar {
background-color: transparent;
}
.reading-progress::-webkit-progress-value {
background: var(--ghost-accent-color); /* Progress bar color */
}
</style>
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings, it should always be the last tag before the closing head tag --}}
{{ghost_head}}아래 코드 참고하여 {{ghost_foot}} 위에 항목 추가
{{#is "post"}}
<script>
const progressBar = document.querySelector('.reading-progress');
function updateProgress() {
const totalHeight = document.body.clientHeight;
const windowHeight = document.documentElement.clientHeight;
const position = window.scrollY;
const progress = position / (totalHeight - windowHeight) * 100;
progressBar.setAttribute('value', progress);
requestAnimationFrame(updateProgress);
}
requestAnimationFrame(updateProgress);
</script>
{{/is}}
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the clo
sing body tag --}}
{{ghost_foot}}댓글 기능 추가
블로그에 댓글이 없으면 허전하다. 뭐 허접한 블로그라 누가 방문해서 거기에 댓글까지 달겠냐만, ... 그래도 명색이 블로그인데, 댓글 기능 정도는 추가해두는게 좋겠다.
https://giscus.app/ko를 참고하여 기능 추가를 완료하였다.
일단 giscus로 댓글 기능을 선정했다. 왜냐? 무료니까. git hub 로그인이 필요하긴 하지만, 뭐 그냥 쓰자. 어차피 댓글 달 사람도 없다.
https://giscus.app/ko를 참고하여 git hub에 댓글을 달기 위한 스크립트를 만들어 준다. 가이드가 상세하여 생성에 문제될 사항은 없다.
댓글 기능 추가는 post.hbs를 수정하여야 한다.
아래 코멘트 관련 항목을 제거한다.
{{#if comments}}
<section class="article-comments gh-canvas">
{{comments}}
</section>
{{/if}}그리고 같은 자리에 giscus 스크립트를 추가한다.
<section class="article-comments gh-canvas">
<script src="https://giscus.app/client.js"
data-repo="[ENTER REPO HERE]"
data-repo-id="[ENTER REPO ID HERE]"
data-category="[ENTER CATEGORY NAME HERE]"
data-category-id="[ENTER CATEGORY ID HERE]"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="ko"
crossorigin="anonymous"
async>
</script>
</section>코드 강조 기능 추가
ghost에 기본적으로 코드 블록 추가 기능은 있다. 하지만 부족하다. 그래서 https://spooohome.blogspot.com/2021/03/prismsyntax-highlighter.html를 참고하여 prism 코드 강조 기능을 추가하였다.
default.hbs에 {{ghost_head}}와 {{ghost_foot}} 부분에 관련 항목을 추가하면 된다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.c
ss">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolb
ar.min.css">
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings, it should always be the last tag before the closing head tag --}}
{{ghost_head}}<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></sc
ript>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboar
d.min.js'></script>
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the clo
sing body tag --}}
{{ghost_foot}}변경 사항 적용하기
각종 hbs 파일 수정 사항이 ghost에 반영되려면 docker 재시작이 필요하다.
참고 자료
- https://ghost.org/tutorials/adding-table-of-contents/#intro
- https://ghost.org/tutorials/reading-time/
- https://giscus.app/ko
- https://spooohome.blogspot.com/2021/03/prismsyntax-highlighter.html