Hugo Future Imperfect の設定とデザイン調整について②

HUGOのテーマ、「Hugo Future Imperfect」について解説します。本サイトの修正を例にテンプレートのレイアウト修正について紹介します。

Ishiguro Suguru

前回の記事の続きです。 今回は設定ファイルやカスタムCSS以外のテンプレートを編集する方法について紹介します。

Hugo Future Imperfect の設定ファイルとレイアウトのカスタマイズについて

前回は以下の１と２について説明しました。 “Hugo Future Imperfect"のテンプレート ファイルの編集について説明したいと思います。

  1. 設定ファイル”config.toml”について
  2. カスタムCSS適用について
  3. テンプレート ファイル(layoutsフォルダ)の編集について

3. テンプレート ファイル(layoutsフォルダ)の編集について

公開されているテーマを適用するためには、“themes"フォルダに配置していると思います。 このテーマ ファイルを編集したいい場合は、プロジェクト直下の"layouts"フォルダに同じ構成かつ同名ファイルのものを配置すると編集した内容が適用されます。 （もちろん直接"themes"フォルダのファイルを編集してもOK）

今回は本サイトで適用している修正の一部を紹介します。 おそらく需要が高い以下2種類のファイルの修正内容を説明します。

  • “/layouts/partials/header.html”: サイトで読み込む外部ファイルの設定やGoogleタグマネージャー(GTM)の設定
  • “/layouts/partials/navbar.html, sidebar.html, /layouts/post/header.html” :記事作成日のフォーマット変更

サイトで読み込む外部ファイルの設定やGoogleタグマネージャー(GTM)の設定の変更や追加

Webサイト共通で読み込ませるファイル（jQueryなど）やGTM、Google AdSense、その他クラウド事業者が提供しているサービスを利用するためタグをHTMLファイルに埋め込む場面があると思います。 これらの設定を追加・変更・削除するためには、"/layouts/partials/header.html"を編集する必要があります。 本サイトの例は以下になりますので、GTMを利用したい場合やGoogle AdSenseを利用したい方は参考にしてみてください。 （コメント タグに”Google Tag Manager”, “Google AdSense"と記載のある箇所）

また、本ファイルのコードの通り"Hugo Future Imperfect"はCSSを外部サイトから直接参照しているため、自身が作成したサイト上でファイルをすべて参照したい場合は、 参照先からダウンロードして自身が管理するサーバーに配置するようにしましょう。

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Google Tag Manager -->
            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
        <!-- End Google Tag Manager -->
        <!-- Google AdSense -->
            <script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- End Google AdSense -->

        <!-- 中略 -->

        <!-- If the value "default" is passed into the param then we will first
             load the standard css files associated with the theme -->
        {{ if or (in ($.Scratch.Get "cssFiles") "default") (eq ($.Scratch.Get "cssFiles") false) }}
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css">
            <link rel="stylesheet" href="{{ "css/main.css" | relURL }}">
            <link rel="stylesheet" href="{{ "css/add-on.css" | relURL }}">
            <link rel="stylesheet" href="{{ "css/academicons.min.css" | relURL }}">
        {{ end }}

        <!-- 中略 -->

      {{ template "_internal/google_analytics.html" . }}
    </head>
    <body>
        <!-- Google Tag Manager (noscript) -->
            <noscript>
                <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
            </noscript>
        <!-- End Google Tag Manager (noscript) -->

      <!-- Wrapper -->
      <div id="wrapper">

記事作成日のフォーマット変更

記事作成日のフォーマとはデフォルの場合、英語表記（例：January 2, 2006）になっていると思います。 この表記を変更したい場合は、次のファイル”/layouts/partials/navbar.html, sidebar.html, /layouts/post/header.html"を編集しましょう。 具体的に、各ファイルには以下のコードが記述されているためFormatの記載を表示したい形式に変更しましょう。 ここでは年月日表記(YYYY-MM-DD)に変更しています。

<!-- 変更前 -->
{{ ($.Scratch.Get "dateType").Format "January 2, 2006" }}
<!-- 変更後 -->
{{ ($.Scratch.Get "dateType").Format "2006-01-02" }}
comments powered by Disqus