↓본문으로 건너뛰기
이노팩토리 블로그
  1. Posts/

Hugo BlowFish 테마에서 여러 명의 저자 구현하기

·3 분· loading · loading ·
Seanbryu
Techtopic Config Hugo Blowfish
작성자
Sean Bongchoon Ryu
The Founder and CEO of InnoFactory
목차

다수의 블로그 사이트에서 여러 명의 저자들이 활동하는데, Hugo 는 Default Author 라는 단일 저자를 기본으로 제공한다.

Blowfish 테마는 하나의 글에 다수의 저자를 지정할 수 있는 멀티 저자 기능을 추가적으로 제공한다.

이 글은 Blowfish 테마에서 제공하는 멀티 저자기능을 중심으로 전개되며, Hugo 의 기본 기능과 충돌되는 부분에 대해서도 언급한다.

저자 생성하기
#

멀티 저자 기능을 사용하려면, 가장 먼저 저자 관련 정보를 json 파일로 만들어, <SITE>/data/authors 디렉터리에 추가해야 한다.

파일의 이름은 <key>.json 이다.

아래는 본 저자의 저자관련 정보를 기록한 seanbryu.json 라는 이름의 파일이다. 파일 이름 규칙에 따라 seanbryu 가 본 저자의 참조키이다.

{
    "name": "Sean Bongchoon Ryu",
    "image" : "img/seanbryu_avatar.png",
    "bio": "A founder and CEO of InnoFactory",
    "social": [
        { "linkedin": "https://linkedin.com/in/seanbryu" },
        { "twitter": "https://twitter.com/seanbryu" },
        { "instagram": "https://instagram.com/seanbryu" },
        { "medium": "https://medium.com/@seanbryu" },
        { "github": "https://github.com/seanbryu" },
        { "goodreads": "http://goodreads.com/seanbryu" },
        { "keybase": "https://keybase.io/seanbryu" },
        { "reddit": "https://reddit.com/user/seanbryu" }    ]
}

반드시 위와 같은 형태로 json 파일을 생성해 주어야 한다.

이 파일에는 name, image, bio, social 이렇게 4개의 속성이 주어진다. 이 속성들은 Hugo 에서 제공하는 Default Author 정보를 모방한 것이다.

social 에 있는 “linkedin”, “twitter” 같은 키 값들은 아이콘 이미지를 가져오는데 사용된다. 설정에서 자유롭게 사용할 수 있는 다른 아이콘(키값) 으로 변경해도 무방하다.

저자 이미지 추가하기
#

저자 이미지는 인터넷에서 주로 사용하는 이미지 포맷인 jpg 또는 png 로 만드는 것을 추천한다.

이미지는 <SITE>/assets 디렉터리 하위에 위치시키면 된다. 이미지 사이즈는 Blowfish 테마가 알아서 조정하기 때문에 신경 쓸 필요가 없다.

앞 섹션에서 이미지 파일의 경로는 img/seanbryu_avatar.png 로 지정되어 있으며, 이 파일의 실제 위치는 <SITE>/assets/img/seanbryu_avatar.png 이다.

글에 저자 적용하기
#

이제 포스트된 글에 저자를 적용할 시간이다.

앞 섹션에서 만든 key 를 기억해야 한다. json 파일의 이름이다.

다음은 이 글 앞쪽에 추가된 Front Matter 이다.

title: "Hugo BlowFish 테마에서 여러 명의 저자 구현하기"
date: 2023-05-28T22:51:38+09:00
draft: false
description: "Configure multiple authors for your articles."
slug: "multi-author"
tags: ["authors", "config", "hugo", "blowfish"]
showAuthor: false
authors:
  - "seanbryu"
  - "mjun"
showAuthorsBadges : true

authors 속성에 key 를 넣어주면, 저자로 등록이 된다.

Front Matter 는 yaml 포맷을 따르므로, 저자가 여러 명이라면 아래쪽에 저자들을 추가하여 배열로 표현하면 된다.

Hugo 는 단일 사용자 사이트를 위해 사이트 전체에 적용되는 Default Author 기능이 있다. showAuthor 속성은 Default Author 표시 여부를 결정한다.

다음은 showAuthor 가 true 일 때, Default Author 가 표시된 화면이다.

image-20230607095917416

다음은 showAuthor 가 false 일 때, 글의 저자만 표시된 화면이다.

image-20230607095835816

분류체계에 “저자 별” 추가하기
#

저자별로 글 목록을 보려면 분류체계에 저자별 설정을 추가해야 한다.

<SITE>/config/_default/hugo.toml 에 다음과 같이 author 속성을 추가하면 된다.

[taxonomies]
  tag = "tags"
  category = "categories"
  author = "authors"

저자 프로필 페이지 추가하기
#

저자의 상세약력 페이지를 추가하려면, 먼저 <SITE>/content/authors/<key> 형태의 디렉터리를 생성해야 한다. 앞 섹션에서 서술한 대로 key 는 저자 정보를 표현한 json 파일의 이름이다.

새로 생성한 디렉터리에 약력페이지 역할을 할 _index.md 파일을 추가 하면 된다.

앞 섹션에서 설명한 seanbryu 저자의 약력페이지 파일은 <SITE>/content/authors/seanbryu/_index.md 이 된다. _index.md 파일의 내용은 다음과 유사하게 작성하면 된다.

---
title: "Sean Bongchoon Ryu"
---

This is a page for bio of Sean Ryu.