Academicテーマ（Hugo）のカスタマイズ

Academicのカスタマイズでやったことを備忘録。

Authorの編集

content/authors/admin/ を content/authors/{ユーザー名}/ に変更して

• _index.md を編集する。
• avatar.jpg にアイコン画像を設定

# 表示名
< name: Nelson Bighetti
---
> name: nattokinxxxx

# フォルダ名と同じ
authors:
< - admin
---
> - nattokinxxxx

# 個人ブログなので不要
< role: Professor of Artificial Intelligence
< 
< organizations:
< - name: Stanford University
<   url: ""
< 

# 簡単な自己紹介
< bio: My research interests include distributed robotics, mobile computing and programmable matter.
---
> bio: Gopherくんかわいい

# 興味
interests:
< - Artificial Intelligence
< - Computational Linguistics
< - Information Retrieval
---
> - Golang
> - K8s
> - Vue.js
> - etc...

# 学歴は削除
< education:
<   courses:
<   - course: PhD in Artificial Intelligence
<     institution: Stanford University
<     year: 2012
<   - course: MEng in Artificial Intelligence
<     institution: Massachusetts Institute of Technology
<     year: 2009
<   - course: BSc in Artificial Intelligence
<     institution: Massachusetts Institute of Technology
<     year: 2008

# SNSやGitHub
social:
<   link: https://twitter.com/GeorgeCushen
---
>   link: https://twitter.com/nattokinxxxx

<   link: https://github.com/gcushen
---
>   link: https://github.com/nattokin

# Gravatarは使わないので削除
< email: ""

# People widgetは使わないので削除
< user_groups:
< - Researchers
< - Visitors

# 自己紹介（使わないので書いてない /authors/{ユーザー名}/ に表示される）
< Nelson Bighetti is a professor of artificial intelligence at the Stanford AI Lab. His research interests include distributed robotics, mobile computing and programmable matter. He leads the Robotic Neurobiology group, which develops self-reconfiguring robots, systems of self-organizing robots, and mobile sensor networks.
< 
< Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
< 

トップページの編集

• content/home/ 配下の使わない項目は削除
  • active に true をセットすると有効になる
  • weight に入れた数値によって並び順が変わる
• トップメニューは config/_default/menus.toml を編集
  • weight に入れた数値によって並び順が変わる
  • 不要な項目は削除する
• content/home/posts.md の編集
  • content.filters.author は個人ブログで不要なので削除
  • design.view で表示タイプが変更できる（1: リスト 2: コンパクト 3: カード）

CSSのカスタマイズ

assets に scss フォルダを作成して custom.scss を作成。 拡張子は css ではなく scss なので注意。

Scssは煩雑になりがちなCSSを効率的に記述・管理できるメタ言語です。

例

// assets/scss/custom.scss

// プロフィール画像のサイズ調整
.avatar {
  width: 150px;
  height: 150px;
}

// 記事トップのスペースを開ける
h1 {
  margin-top: 2rem;
}
// サブタイトルとメタデータの間の隙間をなくす
p.page-subtitle {
  margin-bottom: 0;
}
// メタデータを右寄せして本文との間にスペースを開ける
div.article-metadata {
  margin-bottom: 5rem;
  text-align: right;
}

// ヘッダー前後の余白が詰まっていたので広げる
h2,
h3,
h4,
h5,
h6 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

// 記事内の画像の前後の余白を広げる
.article-style img,
.article-style video {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

ハイライトスタイルの変更

ここで色合いを確認して

ここで名前を探す（cssのタブ）

# tomorrow-night-bright.css を利用
< # highlight_style = "github"  # For supported styles, see https://cdnjs.com/libraries/highlight.js/
> highlight_style = "tomorrow-night-bright"  # For supported styles, see https://cdnjs.com/libraries/highlight.js/