👩💻Quarto Blog(2)
Quarto를 활용하여 Github 블로그를 구축하는 이전 포스팅에 이어서, Github 블로그를 좀 더 보기 좋게, 혹은 원하는 기능을 좀 더 추가하는 몇가지 Customizing 사항들에 대해 소개하려고 합니다. 사실 블로그 Customizing은 삽질의 시작이며, 처음 시작은 가볍게 시작하지만 하나씩 옵션들을 내맘대로 건드리다가 보면 시간이 훌쩍 지나가버리는 마법을 경험하게 됩니다.
기본적으로 .qmd파일을 작성하면서 글의 configuration을 설정하는 것은 Tutorial: Authoring에서 제목 작성, category 설정등 기본적인 부분을 확인할 수 있습니다. 기본적인 설정들에 더해서 저번 포스팅보다 여러가지 옵션들을 바꿔가면서 확인하는 과정들이 많기 때문에 localhost(로컬 컴퓨터)에서 블로그가 어떻게 바뀌어 가는지 확인하기 위해 아래의 명령어를 VSCode 터미널에 입력하여 창을 띄우며 확인해보세요!
quarto previewTheme
블로그를 처음 Build하고 나면 가장 먼저 바꾸고 싶은 건 블로그의 테마 설정일 것 입니다. 내용도 중요하지만 전체적인 Blog의 인상을 결정하는 테마는 Quarto에서 기본적으로 제공하는 테마들을 사용하면 편하게 설정할 수 있습니다.
정말 다양한 분위기의 테마들을 제공하기 때문에 테마 하나씩 확인해가며 고를 수 있습니다. 마음에 드는 테마를 선택한 후 블로그를 처음 Build한 프로젝트 파일에서 _quarto.yml파일을 열어보면 아래와 같이 창이 작성되어 있는 것을 확인할 수 있습니다.
파일에서 theme이라는 부분에 default로 적혀 있는 테마의 명칭 대신에 자신이 원하는 theme의 이름을 적어주면 됩니다. 예를 들어 만약 sketchy테마를 선택했다면 아래와 같이 적어주면 됩니다.
한번 quarto preivew를 통해 띄워둔 local 창에서 바뀐 테마를 한번 확인해보세요!
ToC
ToC란 Table of Contents 의 약자로 블로그의 내용들이 여러 제목/소제목들로 구성되어 글이 길어질 경우, 내용을 한눈에 파악하기 쉽도록 목차를 보여주는 기능입니다. Quarto에서는 html 설정 옵션으로 이 기능을 지원하고 있으며 아래 예시 사진에서와 같이 한쪽에 ToC를 보여줘서 포스팅의 독자분들이 쉽게 내용을 파악하고 필요하는 부분만 골라서 확인하기도 용이합니다.
Quarto에서는 다양한 ToC 형식을 지원하고 있는데 작성하는 .qmd파일의 서두에 설정하는 포스팅 설정 부분에 toc: ture라고 추가하면 해당 .qmd파일에 #, ## 등으로 제목으로 작성했던 이름을 기반으로 해당 포스팅의 ToC가 나타나게 됩니다.
만약 ToC의 Numbering을 자동으로 나오게 하고 싶다면 아래와 같이 number-sections: true도 포스팅 설정 부분에 추가해준다면 넘버링된 ToC가 나오는 것을 확인할 수 있습니다.
이 부분도 Quarto Docs에서 더 다양한 옵션들을 확인해보실 수 있으니 다양한 옵션들을 기호에 맞게 바꿔가며 확인해보세요!
Github 잔디
Github 유저로써 프로필에 있는 잔디를 심는 기쁨을 가지고 있는데 이를 Blog 메인에도 똑같이 보여줄 수 있으면 좋겠다 생각해서 아래 사진처럼 잔디 이미지를 넣었었습니다.
githubchart를 활용해서 Github 잔디 연동 이미지를 가져오는 방법은 사실 많이 알려져 있기 때문에 Quarto로 만든 Blog reposiotory에서 블로그 첫화면을 담당하는 index.qmd파일에 아래 한줄을 추가해주면 됩니다.
[색상코드]와 [GithubID]부분에 각자 원하는 색상과 ID를 적어주면 됩니다. 제 블로그 같은 경우, 적용된 minty 테마와 어울리는 색상 코드를 찾아서 아래와 같이 작성했습니다.
Jupyter notebook
Jupyter Notebook 혹은 Jupyter Lab을 이용하여 코드 블럭마다 실행할 수 있고 바로 바로 실행 결과를 볼 수 있는 .ipynb 파일은 많은 AI/데이터 분야의 사람들에게 사랑 받고 있는 작성 형식입니다. 작성한 .ipynb 파일을 그대로 블로그 포스팅 글로 바꾸고 싶다면 특별한 수정 없이 .ipynb파일 서두에 .qmd파일 처럼 문서 configuration 파트를 추가한 후 rendering하면 그대로 블로그 포스팅으로 만들어 집니다. 아래 문서 configuration 예시는 제 블로그 👩💻torch.Tensor vs torch.tensor포스팅에 쓰인 .ipynb파일 서두에 작성한 configuration 입니다.
---
title: 👩💻torch.Tensor vs torch.tensor
description: torch Tensor 객체 생성 방법 비교와 Inverted 연산 확인하기
date: "2022-12-21"
categories: [torch, tensor, inverted, code]
toc: true
---이렇게 간편한 .ipynb파일 업로드 후 바로 rendering 되는 기능으로 제 블로그에 작성된 글들은 👩💻torch.Tensor vs torch.tensor, 👩💻class ⟷ dict ⟷ yaml, 👩💻Chord Graph 등이 있습니다. Bokeh와 같은 데이터 시각화 툴도 문제없이 랜더링 되므로 데이터 사이언티스트 분들에게는 더할 나위 없이 좋은 기능이라고 생각합니다.
Code Snippets
이 파트에서는 빠르게 옵션들을 블로그 작성을 좀 더 다채롭게 할 수 있도록 하는 코드 스니펫들을 빠르게 소개하려고 합니다. 이미 앞서 소개해드린 내용만으로도 글 작성에 큰 무리는 없지만 아래의 코드 스니펫들을 적절히 잘 활용한다면 더 좋은 포스팅들을 할 수 있을 것 입니다!
이미지 넣기
이미지와 관련된 작성 코드 스니펫을 소개하겠습니다. 이전에 이미지를 Typora를 통해 넣거나 Markdown 문법의 형식으로 이미지를 삽입하게 되면 와 같이 코드로 이미지를 넣어주게 됩니다. 하지만 이렇게 이미지들을 넣게 되면 이미지 사이즈 조절이나 정렬 등을 설정해주기가 어렵기 때문에 html 문법형식을 빌려 글에 이미지들을 넣어주는 것을 추천드립니다.
html 사용하여 이미지 삽입
이 코드는 가운데 정렬(
centering), 이미지의 (포스팅 대비 상대적인) 너비 조정(width), 이미지 캡션(figcaption)을 html 문법을 빌려 이미지를 삽입해주는 snippet입니다.포스팅 대표 이미지 설정
다음으로 작성글의 대표 이미지를 설정하면 블로그 메인 화면에 뜨는 그림을 정해 줄 수 있습니다.
블로그 메인 화면에서 각 포스팅들의 대표 이미지들
.qmd파일의 맨 윗부분에 설정해주는 문서 configuration에image: ...라인을 추가하고,...부분에 이미지 경로를 설정해주면 포스팅의 대표 이미지를 설정할 수 있습니다. 아래는 이번 포스팅의 대표 이미지를 설정하는 예시 configuration 입니다.
Callout Block
Callout Block은 포스팅에서 따로 강조하고 싶거나 토글(Toggling)하고 싶은 내용이 있을 때 사용하면 유용한 작성 방법입니다. Quarto Docs의 Callout Blocks에서 볼 수 있듯이, note, warning, important, tip, caution과 같이 글의 메인 내용과 다른 포인트를 가진 내용이거나 강조하고 싶은 파트를 작성하여 보여줄 수 있습니다.
::: {.callout-caution collapse="true"}
# Callout Block 예시
Quarto의 Callout Block을 활용해봅시다! 생각보다 정말 유용하게 잘 쓰는 기능입니다 :)
:::이 코드 스니펫을 이용하여 글에 삽입하면 아래와 같이 나옵니다. 한번 아래 Block을 클릭해보세요!
Quarto의 Callout Block을 활용해봅시다! 생각보다 정말 유용하게 잘 쓰는 기능입니다 :)
예시에서 확인할 수 있다시피 collapse="true"등과 같은 Callout Block에 해당하는 다양한 옵션들도 Docs에서 찾아볼 수 있으니 다양하게 시도해보세요!
수학 수식
논문 리뷰와 같은 글들을 작성할 때 가끔식 수학 기호나 수식들을 작성해야 할 때가 있습니다. 그래서 블로그에서 수식이 잘 작성이 되는가도 블로그 플랫폼을 결정하는 중요한 기준이 되기도 합니다. Quarto의 처음 소개에서도 말씀드렸던 것처럼 수학, 과학적 언어와 글들에 친화적인 플랫폼이기 때문에 Quarto는 수식 삽입을 TeX 문법으로 작성하면 예쁘게 랜더링 되도록 만들어진 블로그 플랫폼입니다. 사실 Markdown 문법과 다르지 않습니다. Quarto Docs Equations에서 볼 수 있듯이 $로 수식을 warpping하면 수식이 잘 랜더링 되는 것을 볼 수 있습니다.
html에서 수식을 다양한 형식으로 rendering할 수 있도록 옵션도 제공하고 있습니다. Format Options 테이블에 있는 html-math-method옵션을 활용해서 plain, webtex, gladtex, mathml, mathjax, katex 등과 같은 옵션을 사용할 수 있습니다. 예를들면 아래와 같이 _quarto.yml 설정 파일에 html-math-method: katex 한 줄 추가하면 수식 랜더링 스타일을 바꿀 수 있습니다.
글자색 설정
글자색을 기본 테마에서 설정한 색이 아닌, 파란색, 빨간색 등 다른 색을 사용하고 싶다면 아래와 같이 html 문법을 활용하여 작성하면 됩니다.
Toggle
토글은 Callout Block을 활용해서 작성할 수도 있지만 기본 html 문법을 활용해서 아래와 같이 작성할 수도 있습니다.
아래와 같이 Toggle 파트가 랜더링 됩니다.
Toggle 제목
Toggle 내용Quarto Blog(1)포스팅에서 Quarto로 기본적인 블로그를 만들고 나서 이번 포스팅의 여러 커스텀 옵션들을 활용하면 각자 원하는 Github Blog를 손쉽게 만들 수 있습니다. 그리고 기본적인 html의 문법을 따라가기 때문에 이번 포스팅에서 몇부분들은 html 문법에 익숙하신 분들에게는 당연한 내용이지 않을까 싶습니다. Quarto를 쓰지 않더라도 블로그를 만들 수 있는 방법은 많지만 처음 소개글에서 이야기 했던 제가 Quarto를 알게 된 배경과 니즈를 듣고 저와 같은 비슷한 상황이시라면 정말 좋은 툴이라고 생각하실 거라고 확신합니다. 만약 아직 Github Blog 초심자라면 Quarto를 한번 고려해보시는 것을 다시 한번 권장해드리며 이만 마치겠습니다.
Reference
Comments
Blog가 일방향 소통의 플랫폼이 아니라 글을 읽어준 다양한 독자의 여러 반응과 피드백을 받아 발전하는게 또 하나의 즐거움일 것 입니다. Quarto에서도 Commenting을 넣을 수 있는 옵션을 제공합니다. 기본적으로 3가지 Commenting 프로그램들을 이용하여 블로그의 댓글 기능을 활성화 시킬 수 있습니다.
Utterances와 Giscus 둘 다 쉽게 댓글 기능을 추가할 수 있지만 Blog Github Repository를
public으로 설정해야만 사용할 수 있는 기능이기에 Blog Repository를private으로 두고 싶은 저는Hypothes.is를 선택할 수 밖에 없었습니다. 아래와 같이._quarto.yml파일에 Hypothesis를 활용하여 Interacting 기능을 추가해주었습니다.단, Hypothesis의 단점은 일반적인 댓글 UI 창이 있는게 아니라 특정 라인을 선택해서 댓글을 다는 형식이기 때문에, 이 기능이 적용되어 있는지 모르고 독자들이 포스팅에 대한 반응을 많이 남기지 않는 경향이 있어 블로그에서 피드백을 받기가 어렵습니다.