Hugo の Table タグに Uikit を適用する

1. はじめに

 Hugo の生成する Table タグには,id 属性や class 属性を事前に追加することができません。そのため,Shortcode を用いて Table タグに CSS を適用される手法が公開されています。しかし,Markdown でテーブルを記述する度に Shortcode を追記するのは Markdown の利点を削いでしまうので,本記事では Shortcode を用いらずに Table タグに Uikit を適用する方法について記述します。

2. 環境構築

 まず初めに,動作確認するためのデモサイトを構築します。本記事では,Hugo Theme Basic を利用します。Hugo と Hugo Theme Basic のビルド手順に従ってデモサイトをビルド手順していきます。

$ hugo new site demo
$ cd ./demo/themes/
$ git clone https://github.com/siegerts/hugo-theme-basic.git
$ cd ./hugo-theme-basic/exampleSite/
$ hugo server --themesDir ../..

 次に,./demo/themes/hugo-theme-basic/layouts/partials/head_includes.htmlに UiKit の CDN を追記します。これによって UiKit が自動的にロードされるようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.11.1/css/tachyons.min.css" />

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs@9.12.0/styles/github-gist.css" />

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.6/dist/js/uikit-icons.min.js"></script>

{{ template "_internal/google_analytics_async.html" . }}

 最後に,下記の Markdown ファイルを./demo/themes/hugo-theme-basic/exampleSite/content/post直下に保存します。ファイル名は任意で問題ありません。

1
2
3
4
5
6
7
8
9
+++
title = "None"
date = 2020-01-11
+++

|a  |b  |c  |
|---|---|---|
|1  |2  |3  |
|4  |5  |6  |

3. 実装

 single.htmlの 16 行目に replace 関数を追記します。これによって<table>タグが<table class="uk-table uk-table-divider">に変換されることで UiKit が適用されます。

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<section id="main" class="mt5">
<h1 itemprop="name" id="title">{{ .Title }}</h1>
<span class="f6 gray">{{ .Date.Format "January 2, 2006" }}</span>

<article itemprop="articleBody" id="content" class="w-90 lh-copy">
    {{ replace .Content "<table>" "<table class=\"uk-table uk-table-divider\">" | safeHTML }}
</article>

<!-- last modified note -->
<span class="f6 gray mv3"
    title="Lastmod: {{ .Lastmod.Format "January 2, 2006" }}. Published at: {{ .PublishDate.Format "2006-01-02" }}.">
    {{ if ne .Lastmod .PublishDate }}
    <span class="i">last modified</span> {{ dateFormat "January 2, 2006" .Lastmod }}
    {{ end }}
</span>

4. 実行結果

 以下のようにテーブルが装飾されていれば Table タグに UiKit が適用されています。

5. おわりに

 ここまで,Hugo において Shortcode を用いらずに Table タグに Uikit を適用する方法について記述してきました。本記事で提案した手法は,Markdown の利点を損なわずにテーブルを装飾することが可能です。しかし,複数のデザインを使い分けることができません。複数のデザインを使い分ける場合は,Shortcode を用いた手法が適切であると考えられます。

環境情報

  • Uikit Ver.3.2.6
  • Hugo Ver.0.62.2
  • Zorin OS 15 Core (Ubuntu 18.04 LTS)

Dutch

コンピュータサイエンスを専攻している大学院生です。趣味は,アニメ鑑賞・プログラミング・ライフハックなどです。


© 2020 Dutch Powered by Hugo