Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@peaceiris

Hugo でローカルサーバーかどうかで条件分岐する

Hugo Theme を自作していると 「hugo server を実行した時だけこの処理をしてほしい」なんてことがあると思います。Hugo はその要望に応える機能を提供していますが、あまり知られていないと感じるので紹介します。

.Site.IsServer 変数を見ればいい

結論から言うと .Site.IsServer 変数を見て条件分岐すればオッケーです。

hugo server でローカルサーバー(ビルトインサーバー)を立ち上げた時に True が格納されます。以下の公式ドキュメントで紹介されています。

.Site.IsServer

a boolean to indicate if the site is being served with Hugo’s built-in server. See hugo server for more information.

利用ケース

.Site.IsServer 変数を使えば簡単に実現できます。

リソースの取得先を変更する

例えば、PCがオフラインの時でも hugo server でレンダリング結果を確認したいと思ったら、 CSS や JavaScript の読み込みを、

  • ローカルサーバー(hugo server)の時はローカルのリソースにアクセスする。
  • サイトを生成(hugo)した時は https で始まるリンクを指定する。

というように分岐させれば良いです。

Google Analytics のオン・オフ

hugo server を実行した時のサイトでは Google Analytics にアクセス解析させたくない場合もあるかと思います。というかその時は Google Analytics を生成する意味はないです。

.Site.IsServer の使い方

実際の使い方です。

{{ if $.Site.IsServer }}
  <script src="/local/materialize/materialize.min.js"></script>
{{ else }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer></script>
{{ end }}

/local/materialize/materialize.min.js${hugo_theme_root}/static/local/materialize/materialize.min.js に配置しておきます。

このようにしておくことで、 hugo server を実行した時には上の script タグが展開され、 hugo コマンドを実行した際には下の script タグが展開されるようになります。

以上です。ありがとうGoざいました ʕ◔ϖ◔ʔ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?