theme
  1. Home
  2. Docs
  3. Hugo
  4. theme

themeのカスタマイズ

更新日: 2022-01-25

Hugoのカスタマイズ #

以下は使用するthemeがbookを前提とする。

Mathjaxの有効化 #

layouts/partials/docs/inject/footer.htmlに下記内容を追記する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

これで

1
2
3

$$
  y = ax^2 + bx +c
$$

とすると $$ y = ax^2 + bx +c $$ と表示される。

markupの設定 #

config.tomlに下記を追加。デフォルトからの変更点はhighlightのsyntaxをgithubに変更したことと、unsafeをtrueに変更したこと。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList = true
      footnote = true
      linkify = true
      strikethrough = true
      table = true
      taskList = true
      typographer = true
    [markup.goldmark.parser]
      attribute = true
      autoHeadingID = true
      autoHeadingIDType = "github"
    [markup.goldmark.renderer]
      hardWraps = false
      unsafe = true
      xhtml = false
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = true
    noClasses = true
    style = "pygments"
    tabWidth = 4
  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 2

Font Awesomeの使用 #

Font Awesomeを使用可能にするよう設定する。

  • Font AwesomeのDownloadからWeb版(Free for Web)をダウンロードする。
  • その中のcssディレクトにあるall.min.cssを/static/css内にコピーしてfontawesome-all.min.cssとリネームする。
  • 同様にwebfontsディレクトリを/staticディレクトリにコピーする。
  • /layouts/partials/docs/inject/head.htmlに下記を追加する。
1

<link rel="stylesheet" href="{{ "/css/fontawesome-all.min.css" | absURL }}">

これで<i class="fas fa-heart"></i>とするとと表示される。

見た目のカスタマイズ #

themeのhugo-bookから下記ファイルを探して、プロジェクトのトップにコピーする。

assets
  plugins
    _numbered.scss
    _scrollbars.scss
  _custom.scss
  _fonts.scss
  _variables.scss

_fonts.scssを編集し、デフォルトから変更する。web fontのNot Sans JPとSource Code Proに設定する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

code {
  font-family: 'Source Code Pro', monospace;
}

Google Fontsはここから検索でき、必要なcssなどの情報が確認できる。

パンくずリストの表示 # 

Home > Docs > Hugo > theme

のように階層構造を示すものをページの上部に表示する。

下記を/layouts/partials/breadcrumb.htmlとして保存

{{- define "breadcrumb" }}
  {{- if .node.Parent }}
    {{- template "breadcrumb" (dict "node" .node.Parent "start" .start) }}
  {{- else if not .node.IsHome }}
    {{- template "breadcrumb" (dict "node" .node.Site.Home "start" .start) }}
  {{- end }}

  {{- if eq .node .start }}
    <li>{{ .node.LinkTitle }}
  {{- else }}
    <li><a href="{{ .node.Permalink }}">{{ .node.LinkTitle }}</a>
  {{- end }}
{{- end }}

layouts/partials/docs/inject/content-before.htmlに

<ol class="breadcrumb">
  {{- template "breadcrumb" (dict "node" . "start" .) }}
</ol>

を追加。

static/css/breadcrumb.cssに

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.breadcrumb {
  padding: 0;
}
.breadcrumb li {
  display: inline;
  list-style: none;
}
.breadcrumb li:not(:last-child)::after {
  content: '>';
  padding: 0 0.5em;
}

を追加。

layouts/partials/docs/inject/head.htmlに

1

<link rel="stylesheet" href="{{ "/css/breadcrumb.css" | absURL }}">

を追加。

linktitleの使用 #

Bookのテーマではデフォルトではリンクはlinktitleではなくtitleが使用される。これはタイトルに長い名前を付けたときに不便であるので、linktitleが有効になるように設定する。

layouts/partials/docs/linktitle.htmlに

{{ $title := "" }}

{{ if .LinkTitle }}
  {{ $title = .LinkTitle }}
{{ else if .Title }}
  {{ $title = .Title }}
{{ else if and .IsSection .File }}
  {{ $title = path.Base .File.Dir | humanize | title }}
{{ else if and .IsPage .File }}
  {{ $title = .File.BaseFileName | humanize | title }}
{{ end }}

{{ return $title }}

を作成。

あとは必要な個所でこれを呼び出せばいい。 今回はlayouts/partials/docs/menu-filetree.htmlにbookのテーマからコピーしたmenu-filetree.htmlをおいて35行目を{{- partial "docs/linktitle" .Page -}}とした。

comments powered by Disqus