1000notes いくばくかの読書と考え事のブログ

記事をシェア:

基本的なブログを表示するのに必要なページは、トップページと、記事の個別ページだけといっていいでしょう。トップページの見せ方を少し変えて、ブログの一覧のページとは別にしたいという場合もあると思いますが、そうしたことも Hugo では簡単にできます。

baseof.html で大枠をつくる

まず最初に、ブログ上のすべての html ファイルで共通する大枠の部分を _default/baseof.html に記述します。私の使った HTML テンプレートの場合、最後の部分で Javascript ライブラリを呼んでいましたので、このような感じになっています。


  <!DOCTYPE html>
  <html lang="ja">
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}

        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}

        <!-- all js here -->
        <script src="/js/vendor/jquery-1.12.0.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            // grab an element
            var myElement = document.querySelector(".intelligent-header");
            // construct an instance of Headroom, passing the element
            var headroom  = new Headroom(myElement);
            // initialise
            headroom.init();
        </script>               
        <script src="/js/main.js"></script>
    </body>
  </html>

Hugo のテンプレートとしては、２種類存在することに注目してください。一つは Partial です。


  {{ partial "header.html" . }}

この一行で、partial ディレクトリに存在する header.html の内容がここに流れ込まれます。ファイル名のあとに存在する「.」は自分自身への参照といって、現在レンダリングしているページの情報、例えばタイトルや、パーマリンクなどといったものが渡されます。

たとえば head.html の内容は以下のようになっているかもしれません。


  <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>{{ .Title }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png">

        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/font-awesome.min.css">
        <link rel="stylesheet" href="/style.css">
        <link rel="stylesheet" href="/custom.css">
        <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
  </head>

メタ情報や CSS を読み込んでいるのがわかると思いますが、途中にタグの中身に {{ .Title }} と書かれている部分が渡された参照に基づいてタイトルを入れています。たとえばブログの個別記事をレンダリングしているときには、その記事の題名がここに入るわけです。</p> <p>さきほどの「.」を忘れてしまうと、この {{ .Title }} は空欄になってしまいますので、 partial を呼び出した先で現在レンダリングしているページの情報を利用するならば、呼び出す際に忘れずに「.」をつけるようにしてください。</p> <p>もう一つのテンプレートとして、block というものがあります。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> {{ block "main" . }}{{ end }} </span></span></code></pre></div><p>これは個別記事ならば記事本文、ブログのトップページならば記事が列挙されている部分といったように、それぞれのテンプレートで main と定義されている部分が流し込まれる場所です。ここでも「.」を使って参照を渡しているのに注意してください。これがないと、記事はいつまでたっても空欄のままということになりかねません。</p> <p>{{ end }} というのは、main という領域の範囲を閉じている命令ですが、もっとわかりやすい例が別の場所にありますので、この行はこういうものと思ってください。</p> <h2 id="partial-で再利用可能なパーツを呼び出してくる">partial で再利用可能なパーツを呼び出してくる</h2> <p>partial は基本的にその内容を流し込むだけですが、渡された情報によって処理を分岐させることも可能です。たとえば OGP 情報を設定する場合、トップページでは website、個別ページでは article に設定しますが、それは if 構文を使って以下のように書けます。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-HTML" data-lang="HTML"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> {{ if .IsHome }} </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">head</span> prefix<span style="color:#719e07">=</span><span style="color:#2aa198">"og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"</span>> </span></span><span style="display:flex;"><span> {{ else }} </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">head</span> prefix<span style="color:#719e07">=</span><span style="color:#2aa198">"og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"</span>> </span></span><span style="display:flex;"><span> {{ end }} </span></span></code></pre></div><p>.IsHome は Hugo の変数で、参照がサイトのホームのときだけ「真」の値になります。なので、ホームのときには前半が、そうでないときには後半の行が流し込まれます。{{ else }} と {{ end }} は、それぞれが「もしくは」と「ここまで」の、プログラミングの構文を表現しています。</p> <p>こうした方法を応用して、「タグが３つ以上あるときだけ表示」「デプロイしてるサーバー上のときだけ Google Analytics コードを挿入」といったことでも、なんでも可能です。</p> <h2 id="個別記事を作ってみる">個別記事を作ってみる</h2> <p>次に、main が定義されているテンプレートについて見ていきます。個別ページは</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> layouts/ </span></span><span style="display:flex;"><span> 　├ _default/ </span></span><span style="display:flex;"><span> 　│　 ├ baseof.html　共通する html の枠組み(htmlタグなど） </span></span><span style="display:flex;"><span> 　│ 　└ single.html 個別記事のテンプレート </span></span><span style="display:flex;"><span> 　│ </span></span><span style="display:flex;"><span> 　├ partials/ </span></span><span style="display:flex;"><span> 　　├ head.html headタグの中身 </span></span><span style="display:flex;"><span> 　　├ header.html ブログのロゴなどのヘッダの共通部分 </span></span><span style="display:flex;"><span> 　　└ footer.html ブログのフッターなどの共通部分 </span></span></code></pre></div><p>この構造だと _default/single.html に作るのがもっともわかりやすいでしょう。ここに、以下の内容でファイルを作ってみます。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-HTML" data-lang="HTML"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> {{ define "main" }} </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">section</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"main"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">div</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"left-col"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">div</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"blog-meta"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">h1</span>>{{ .Title }}</<span style="color:#268bd2">h1</span>> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">div</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"blog-date"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">span</span>>{{ .Date.Format "2006 年 01 月 02 日"}}</<span style="color:#268bd2">span</span>> </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">div</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">div</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"blog-img"</span>> </span></span><span style="display:flex;"><span> {{ if .Params.featured_image }} </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">img</span> src<span style="color:#719e07">=</span><span style="color:#2aa198">"{{- .RelPermalink -}}{{- .Params.featured_image -}}"</span> alt<span style="color:#719e07">=</span><span style="color:#2aa198">""</span>> </span></span><span style="display:flex;"><span> {{ else }} </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">img</span> src<span style="color:#719e07">=</span><span style="color:#2aa198">"/img/default.jpg"</span> alt<span style="color:#719e07">=</span><span style="color:#2aa198">""</span>> </span></span><span style="display:flex;"><span> {{ end }} </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">div</span>> </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">div</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">div</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"blog-content"</span>> </span></span><span style="display:flex;"><span> {{ .Content }} </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">div</span>> </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">div</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <<span style="color:#268bd2">div</span> class<span style="color:#719e07">=</span><span style="color:#2aa198">"right-col"</span>> </span></span><span style="display:flex;"><span> {{ partial "sidebar" . }} ← partial ディレクトリに sidebar.html がないとエラーになるので注意 </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">div</span>> </span></span><span style="display:flex;"><span> </<span style="color:#268bd2">section</span>> </span></span><span style="display:flex;"><span> {{ end }} </span></span></code></pre></div><p>最初と最後に、{{ define “main” }} とその締めくくりの {{ end }} があることに注目してください。この間にあるものが main 部分として、先程の baseof.html の {{ block “main” }} に挿入されます。</p> <p>他にもいくつか重要な構文があります。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> {{ .Content }} </span></span></code></pre></div><p>ここには、Markdown の frontmatter 以降、つまり本文が html にレンダリングされて入ります。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>{{ .Date.Format "2006 年 01 月 02 日"}} </span></span></code></pre></div><p>ここは記事の日付を、フォーマットを指定して表示させています。この2006、01という部分は勝手に2020といった数字に書き換えてはいけなくて、ここが置き換えられる仕組みになっています。詳しくは<a href="https://gohugo.io/functions/format/">Hugoの.Formatについての説明</a>を御覧ください。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> {{ if .Params.featured_image }} </span></span><span style="display:flex;"><span> <img src="{{- .RelPermalink -}}{{- .Params.featured_image -}}" alt=""> </span></span><span style="display:flex;"><span> {{ else }} </span></span><span style="display:flex;"><span> <img src="/img/default.jpg" alt=""> </span></span><span style="display:flex;"><span> {{ end }} </span></span></code></pre></div><p>ここは、「もし記事の frontmatter に featured_image という項目があるなら」という if 文を使って、アイキャッチが存在するときとしないときで処理を分けています。</p> <p>アイキャッチ画像は記事と同じフォルダにいれることを想定していますので、存在するならば {{ .RelPermalink }} という相対パスで指定される記事のパスと、{{- .Params.featured_image -}} で指定されるそのファイル名をつなげたものを img タグで呼び出しています。</p> <p>変な空白が入ってはいけませんので、念のため {{- .RelPermalink -}} と、前後の空白が削除されるように「-」をつけて呼び出しています。</p> <p>アイキャッチの情報がない場合はデフォルトの画像を表示させています。この「/img」というディレクトリはテーマ直下にありますので、もしテーマの名前が hoge だとするなら、theme/hoge/img という場所にあります。</p> <h2 id="初めての記事を書いてみる">初めての記事を書いてみる</h2> <p>それでは、このテンプレートで記事を表示させてみましょう。この連載の過去の記事でも触れましたが、Hugo の config.toml が存在するディレクトリで、次のような命令を打ち込んでみます。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> hugo new blog/sample/index.md </span></span></code></pre></div><p>これで、content/blog/sample/index.md というファイルが作られ、デフォルトのfrontmatterが、現在の日付とともに作成されます。デフォルトの frontmatter は archetype/default.md を使って変更することも可能です。また、このファイルとディレクトリ、frontmatter を手で自分で作ってもかまいません。</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> hugo -D server </span></span></code></pre></div><p>で、サーバーを立ち上げた状態でブラウザを開くと、この記事は localhost:1313/blog/sample/ でアクセスできます。たとえば：</p> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>--- </span></span><span style="display:flex;"><span>title: "テストページ" </span></span><span style="display:flex;"><span>date: 2020-04-01T00:00:00+09:00 </span></span><span style="display:flex;"><span>featured_image: featured.jpg </span></span><span style="display:flex;"><span>draft: true </span></span><span style="display:flex;"><span>--- </span></span></code></pre></div><p>frontmatterをこのように変えて、sample.jpg という適当なファイルを index.md が置かれているのと同じディレクトリに置けば、アイキャッチが表示されるはずです。まとめると、single.html の仕組みはこのようになっています。</p> <p><img src="hugo-template-single.jpg" alt=""></p> <p>Hugoはテンプレートに従ってHTMLを作り出しますので、あとはCSSで見た目を決めるだけとなります。</p> <p>サーバーを立ち上げている間は、index.md の本文を書き換えたり、single.html の各部分に修正を加えると自動的にページがアップデートされてゆく様子もわかると思いますので、さまざまな場所に書き込みをして、対応関係を掴んでみてください。</p> <p>これで、single.html というテンプレートファイルを使ってブログの個別ページの作り方の初歩が理解できたと思いますので、次はブログのトップページに複数の記事を列挙する仕方、膨大なページを遷移するためのページネーションの方法をみてみましょう。</p> <div class="authorbox mt-0 mb-0"> <div class="card"> <div class="card-body"> <div class="author-image"> <img src="/images/mehori.jpg" alt="" class="rounded-circle" /> </div> <strong>堀 E. 正岳（Masatake E. Hori)</strong><br />2011年アルファブロガー・アワード受賞。ScanSnapアンバサダー。ブログLifehacking.jp管理人。著書に「ライフハック大全」「知的生活の設計」「リストの魔法」（KADOKAWA）など多数。理学博士。 </div> </div> </div> <div class="tagcloud mt-5"> <h3>タグ</h3> <a href="https://1000notes.jp/categories/hugo/">Hugo</a> </div> <div class="clear"></div> </div> </div> </div> </div> <h3 class="mb-0">関連記事</h3> <div class="row posts-md"> <div class="col-lg-3 col-sm-6"> <article class="entry"> <div class="entry-image"> <a href="/blog/2020/hugo-theme-1/"> <a href="/blog/2020/hugo-theme-1/"><img src="/blog/2020/hugo-theme-1/hugo-theme-1.jpg" alt=""></a> </a> </div> <div class="entry-title title-sm text-start"> <div class="entry-categories"> <a class="entry-categories" href="/categories/hugo">Hugo</a> </div> <h3><a href="/blog/2020/hugo-theme-1/" class="color-underline stretched-link">WordPressからHugoへ：Hugoでブログテーマを作る (1)</a></h3> </div> <div class="entry-meta"> <ul> <li><i class="icon-time"></i> 2020.04.27</li> </ul> </div> </article> </div> <div class="col-lg-3 col-sm-6"> <article class="entry"> <div class="entry-image"> <a href="/blog/2020/wp-to-markdown-3/"> <a href="/blog/2020/wp-to-markdown-3/"><img src="/blog/2020/wp-to-markdown-3/wp-to-markdown-3.jpg" alt=""></a> </a> </div> <div class="entry-title title-sm text-start"> <div class="entry-categories"> <a class="entry-categories" href="/categories/hugo">Hugo</a> </div> <h3><a href="/blog/2020/wp-to-markdown-3/" class="color-underline stretched-link">WordPressからHugoへ：全投稿をMarkdownにエクスポートする (3)</a></h3> </div> <div class="entry-meta"> <ul> <li><i class="icon-time"></i> 2020.04.26</li> </ul> </div> </article> </div> <div class="col-lg-3 col-sm-6"> <article class="entry"> <div class="entry-image"> <a href="/blog/2020/wp-to-markdown-2/"> <a href="/blog/2020/wp-to-markdown-2/"><img src="/blog/2020/wp-to-markdown-2/wp-to-markdown-2.jpg" alt=""></a> </a> </div> <div class="entry-title title-sm text-start"> <div class="entry-categories"> <a class="entry-categories" href="/categories/hugo">Hugo</a> </div> <h3><a href="/blog/2020/wp-to-markdown-2/" class="color-underline stretched-link">WordPressからHugoへ：全投稿をMarkdownにエクスポートする (2)</a></h3> </div> <div class="entry-meta"> <ul> <li><i class="icon-time"></i> 2020.04.26</li> </ul> </div> </article> </div> <div class="col-lg-3 col-sm-6"> <article class="entry"> <div class="entry-image"> <a href="/blog/2020/wp-to-markdown-1/"> <a href="/blog/2020/wp-to-markdown-1/"><img src="/blog/2020/wp-to-markdown-1/wp-to-markdown-1.jpg" alt=""></a> </a> </div> <div class="entry-title title-sm text-start"> <div class="entry-categories"> </div> <h3><a href="/blog/2020/wp-to-markdown-1/" class="color-underline stretched-link">WordPressからHugoへ：全投稿をMarkdownにエクスポートする (1)</a></h3> </div> <div class="entry-meta"> <ul> <li><i class="icon-time"></i> 2020.04.26</li> </ul> </div> </article> </div> </div> </div> </div> </div> </section> <footer id="footer"> <div class="container"> <div class="footer-widgets-wrap row col-mb-50"> <div class="col-lg-2 col-sm-6"> <div class="widget widget_links"> <h4 class="mb-3 mb-sm-4 nott ls0">Management</h4> <ul> <li><a href="https://codex.wordpress.org/">About Us</a></li> <li><a href="https://wordpress.org/support/forum/requests-and-feedback">Careers</a></li> <li><a href="https://wordpress.org/extend/plugins/">Customers</a></li> </ul> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="widget widget_links"> <h4 class="mb-3 mb-sm-4 nott ls0">Our Products</h4> <ul> <li><a href="https://codex.wordpress.org/">Real Estate</a></li> <li><a href="https://wordpress.org/support/forum/requests-and-feedback">Movers</a></li> <li><a href="https://wordpress.org/extend/plugins/">Stores</a></li> </ul> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="widget widget_links"> <h4 class="mb-3 mb-sm-4 nott ls0">Support</h4> <ul> <li><a href="https://wordpress.org/support/forum/requests-and-feedback">Help Center</a></li> <li><a href="https://wordpress.org/extend/plugins/">Chat</a></li> <li><a href="https://wordpress.org/support/">Email Us</a></li> </ul> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="widget widget_links"> <h4 class="mb-3 mb-sm-4 nott ls0">Category Cloud</h4> <div class="tagcloud"> <a href="/categories/%E6%97%85%E8%A1%8C">旅行</a> <a href="/categories/%E8%A9%B1%E9%A1%8C">話題</a> <a href="/categories/hugo">hugo</a> <a href="/categories/%E3%82%B0%E3%83%AB%E3%83%A1">グルメ</a> <a href="/categories/youtube">youtube</a> <a href="/categories/%E3%82%B2%E3%83%BC%E3%83%A0">ゲーム</a> <a href="/categories/%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC">テクノロジー</a> <a href="/categories/%E8%8B%B1%E8%AA%9E">英語</a> <a href="/categories/books">books</a> <a href="/categories/%E7%A7%91%E5%AD%A6">科学</a> <a href="/categories/%E6%9C%AC">本</a> <a href="/categories/%E7%9F%A5%E7%9A%84%E7%94%9F%E6%B4%BB">知的生活</a> <a href="/categories/%E8%AA%AD%E6%9B%B8">読書</a> <a href="/categories/%E3%83%8E%E3%83%BC%E3%83%88">ノート</a> <a href="/categories/%E6%97%A5%E8%A8%98">日記</a> <a href="/categories/%E6%98%A0%E7%94%BB">映画</a> <a href="/categories/%E3%82%A2%E3%83%8B%E3%83%A1">アニメ</a> <a href="/categories/%E3%82%A2%E3%83%BC%E3%83%88">アート</a> <a href="/categories/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a> <a href="/categories/%E3%82%B5%E3%82%A4%E3%83%88%E6%83%85%E5%A0%B1">サイト情報</a> <a href="/categories/%E3%83%95%E3%82%A1%E3%83%B3%E3%82%BF%E3%82%B8%E3%83%BC">ファンタジー</a> <a href="/categories/%E5%8F%96%E6%9D%90">取材</a> <a href="/categories/%E6%8E%A8%E7%90%86%E5%B0%8F%E8%AA%AC">推理小説</a> <a href="/categories/%E6%96%87%E5%85%B7">文具</a> <a href="/categories/%E8%A9%A9%E9%9B%86">詩集</a> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="widget widget_links"> <h4 class="mb-3 mb-sm-4 nott ls0">About</h4> <div><a href="/" class="retina-logo" data-mobile-logo="/images//mehori/1000notes-logo.png"><img src="/images/1000notes-logo.png" alt="a thousand notes"></a></div> <p></p> <div class="mt-3"> <a href="https://twitter.com/mehori" class="social-icon si-small si-twitter" title="twitter" target="_blank"> <i class="icon-twitter"></i> <i class="icon-twitter"></i> </a> <a href="" class="social-icon si-small si-facebook" title="Facebook" target="_blank"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a> <a href="" class="social-icon si-small si-instagram" title="instagram" target="_blank"> <i class="icon-instagram"></i> <i class="icon-instagram"></i> </a> <a href="#" class="social-icon si-small si-youtube" title="YouTube"> <i class="icon-youtube-play"></i> <i class="icon-youtube-play"></i> </a> <a href="#" class="social-icon si-small si-github" title="Github"> <i class="icon-github"></i> <i class="icon-github"></i> </a> <a href="#" class="social-icon si-small si-linkedin" title="Linkedin"> <i class="icon-linkedin"></i> <i class="icon-linkedin"></i> </a> <a href="#" class="social-icon si-small si-rss" title="Substack"> <i class="icon-email2"></i> <i class="icon-email2"></i> </a> </div> </div> </div> </div> </div> <div id="copyrights"> <div class="container"> <div class="row align-items-center justify-content-between col-mb-30"> <div class="col-lg-auto text-center text-lg-start"> Copyrights © 2020 All Rights Reserved by Masatake E.Hori<br> <div class="copyright-links"><a href="#">プライバシーポリシー</a></div> </div> <div class="col-lg-auto text-center text-lg-start"> <div class="copyrights-menu copyright-links m-0"> <a href="#">Home</a>/<a href="#">About</a>/<a href="#">Features</a>/<a href="#">Portfolio</a>/<a href="#">FAQs</a>/<a href="#">Contact</a> </div> </div> </div> </div> </div> </footer> </div> <div id="gotoTop" class="icon-angle-up rounded-circle" style="left: 30px; right: auto;"></div> <script src="/js/jquery.js"></script> <script src="/js/plugins.min.js"></script> <script src="/js/functions.js"></script> </body> </html>

WordPressからHugoへ：Hugoでブログテーマを作る (2)

記事をシェア:

baseof.html で大枠をつくる