List of theme - Baldanders.info
tag:Baldanders.info,2015-09-11:/tags
2015-09-11T17:59:18+09:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
Theme を利用する
tag:Baldanders.info,2015-09-11:/hugo/theme/
2015-09-11T08:59:18+00:00
2015-09-11T08:59:18+00:00
前々回,前回とちょっと飛ばしすぎたので今回は軽めに theme の話題を。
Spiegel
/profile/
<p><a href="https://baldanders.info/hugo/hello/" title="インストールから Hello World まで">前々回</a>,<a href="https://baldanders.info/hugo/section/" title="Categories, Tags そして Section">前回</a>とちょっと飛ばしすぎたので今回は軽めに theme の話題を。</p>
<h2 id="overview">Hugo の Theme</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> には theme 機能がある。
Theme 機能の利点はもちろん画面の構成等を共有できる点にある。
また複数人で作業している場合は theme として構成を管理することで作業環境を統一できる利点もある。</p>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の repository には既に多くの theme が寄せられている。</p>
<ul>
<li><a href="https://github.com/gohugoio/hugoThemes">gohugoio/hugoThemes</a></li>
</ul>
<p>また repository に登録されているもの以外にも色々なテーマが公開されているようである。</p>
<h2 id="install">Theme をインストールして利用する</h2>
<p>Theme を利用するには作業環境上に repository を <code>git clone</code> する。</p>
<pre tabindex="0"><code>C:\hugo-env\www>git clone --recursive https://github.com/gohugoio/hugoThemes.git themes
</code></pre><p>この repository ではユーザが公開している theme を git の submodule として結合しているため, <code>--recursive</code> オプションを付けて clone する。
現時点(2015年9月)で56個の theme が登録されているようである。</p>
<p>また単独の theme をインストールする場合は,作業環境に <code>themes</code> フォルダを作り,その下に theme の repository を clone する</p>
<pre tabindex="0"><code>C:\hugo-env\www>git clone https://github.com/spiegel-im-spiegel/hugo-theme-text.git themes/hugo-theme-text
Cloning into 'themes/hugo-theme-text'...
remote: Counting objects: 174, done.
remote: Compressing objects: 100% (133/133), done.
Receiving objecemote: Total 174 (delta 82), reused 123 (delta 35), pack-reused 0
Receiving objects: 49%
Receiving objects: 100% (174/174), 25.34 KiB | 0 bytes/s, done.
Resolving deltas: 100% (82/82), done.
Checking connectivity... done.
</code></pre><p>Theme を使ってビルドする場合には <code>-t</code> または <code>--theme</code> オプションを使って theme 名を指定する。
Theme 名は <code>themes</code> フォルダ直下のフォルダ名である。</p>
<pre tabindex="0"><code>C:\hugo-env\www>hugo --theme="html5"
0 draft content
0 future content
1 pages created
0 paginator pages created
2 tags created
1 categories created
in 72 ms
</code></pre><p>また <code>config.toml</code> に theme 名を記述する方法もある(ただしコマンドライン・オプションのほうが優先される)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml:config.toml" data-lang="toml:config.toml"><span class="line"><span class="cl"><span class="nx">baseurl</span> <span class="p">=</span> <span class="s2">"http://hello.example.com/"</span>
</span></span><span class="line"><span class="cl"><span class="nx">languageCode</span> <span class="p">=</span> <span class="s2">"ja"</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">"Hello World!"</span>
</span></span><span class="line"><span class="cl"><span class="nx">theme</span> <span class="p">=</span> <span class="s2">"html5"</span>
</span></span></code></pre></div><h2 id="make">Theme を作成する</h2>
<p>もちろん Theme は自身で作成することもできる。
作成するには <code>hugo new theme</code> コマンドを使う。</p>
<pre tabindex="0"><code>C:\hugo-env\www>hugo new theme sample-theme
C:\hugo-env\www>tree /f .
C:\HUGO-ENV\WWW
│ .editorconfig
│ .gitignore
│ config.toml
│ README.md
│
├─archetypes
├─content
│ └─practice
│ hello.md
│
├─data
├─layouts
│ │ 404.html
│ │ index.html
│ │
│ ├─practice
│ │ single.html
│ │
│ ├─section
│ │ practice.html
│ │
│ └─_default
│ list.html
│ single.html
│
├─public
│ │ 404.html
│ │ index.html
│ │ index.xml
│ │ sitemap.xml
│ │
│ ├─categories
│ │ └─hugo
│ │ index.html
│ │ index.xml
│ │
│ ├─css
│ │ reset.css
│ │ text.css
│ │
│ ├─practice
│ │ │ index.html
│ │ │ index.xml
│ │ │
│ │ └─hello
│ │ index.html
│ │
│ └─tags
│ ├─hello
│ │ index.html
│ │ index.xml
│ │
│ └─world
│ index.html
│ index.xml
│
├─static
└─themes
└─sample-theme
│ LICENSE.md
│ theme.toml
│
├─archetypes
│ default.md
│
├─layouts
│ │ index.html
│ │
│ ├─partials
│ │ footer.html
│ │ header.html
│ │
│ └─_default
│ list.html
│ single.html
│
└─static
├─css
└─js
C:\hugo-env\www>hugo --theme="sample-theme"
0 draft content
0 future content
1 pages created
0 paginator pages created
2 tags created
1 categories created
in 37 ms
</code></pre><p>いくつかファイルが作成されているが <code>LICENSE.md</code> と <code>theme.toml</code> 以外は空のファイルである。</p>
<p><code>LICENSE.md</code> はライセンスファイルで MIT ライセンスの雛形が出力されている。
そのまま使うのであればライセンス発行者の名前を記述する。
他のライセンスを使うのであれば他のファイルに差し替えるなり削除するなりすればよい。</p>
<p><code>theme.toml</code> には theme の情報を記述する。
初期値は以下のようになっている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml:themes/sample-theme/theme.toml" data-lang="toml:themes/sample-theme/theme.toml"><span class="line"><span class="cl"><span class="c"># theme.toml template for a Hugo theme</span>
</span></span><span class="line"><span class="cl"><span class="c"># See https://github.com/gohugoio/hugoThemes#themetoml for an example</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nx">name</span> <span class="p">=</span> <span class="s2">"Sample Theme"</span>
</span></span><span class="line"><span class="cl"><span class="nx">license</span> <span class="p">=</span> <span class="s2">"MIT"</span>
</span></span><span class="line"><span class="cl"><span class="nx">licenselink</span> <span class="p">=</span> <span class="s2">"https://github.com/yourname/yourtheme/blob/master/LICENSE.md"</span>
</span></span><span class="line"><span class="cl"><span class="nx">description</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"><span class="nx">homepage</span> <span class="p">=</span> <span class="s2">"http://siteforthistheme.com/"</span>
</span></span><span class="line"><span class="cl"><span class="nx">tags</span> <span class="p">=</span> <span class="p">[</span><span class="s2">""</span><span class="p">,</span> <span class="s2">""</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">features</span> <span class="p">=</span> <span class="p">[</span><span class="s2">""</span><span class="p">,</span> <span class="s2">""</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">min_version</span> <span class="p">=</span> <span class="mf">0.14</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">author</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">homepage</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"># If porting an existing theme</span>
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">original</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">homepage</span> <span class="p">=</span> <span class="s2">""</span>
</span></span><span class="line"><span class="cl"> <span class="nx">repo</span> <span class="p">=</span> <span class="s2">""</span>
</span></span></code></pre></div><p>これに必要な項目を書き込めばいい。</p>
<h2 id="customaize">Theme をカスタマイズする</h2>
<p><a href="https://baldanders.info/hugo/hello/" title="インストールから Hello World まで">前々回</a>を読んだ方はピンと来ると思うが, theme のフォルダ構成(<code>archetypes</code>, <code>layouts</code>, <code>static</code>)は作業環境のそれとほぼ同じである。
実は theme の構成は作業環境で上書きできる。
従って theme を自サイト用にカスタマイズするのであれば, <code>themes</code> フォルダ内は触らないようにして,作業環境側で上書きするのがスマートである。</p>
<h2 id="mytheme">拙作 Theme “hugo-theme-text”</h2>
<p>今回,このサイトを構築するにあたり,シンプルなテキスト・サイト用の theme を作成・公開した。</p>
<ul>
<li><a href="https://github.com/spiegel-im-spiegel/hugo-theme-text">spiegel-im-spiegel/hugo-theme-text</a></li>
</ul>
<p>次回からはこの theme をベースに説明をしていきたいと思う。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>