フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

pugでincludeしたときに困ることを解決する

pugでincludeしたときに困ることを解決する

コーディングするときにpug使ってますか？慣れるとhtmlでコーディングするより大分速くコーディングできるようになります！

pugについてあまり知らない人はPugでHTMLコーディングを効率化・メリットと使い方を知るに分かりやすく書いてあるので、読んでみてください。

コンパイル言語なので、コンパイルするための環境の構築が大変なときもあります。そんなときは下記のコンパイラーを使うと簡単にpugのコンパイル環境が手に入ります。

pugの特徴の1つはファイルのincludeができることです。

ほんとに便利なのですが、たまにincludeファイルの内容がページごとに微妙に異なり、includeファイルにしたいけど、includeファイルにできない！ってこともあります。

今回はそんなときの解決方法を紹介します。

pugを使い始めて間もない人には役に立つ内容だと思います。

目次

  1. 相対パスを解決する
  2. ナビのカレントのclassを解決する

相対パスを解決する

画像へのパスや、リンクが相対パスになっているとincludeファイルにしたときに困ります。

例えば次のようなディレクトリ構造を考えてみます。

  • index.pug
  • _include.pug
  • img.jpg
  • hoge
    • index.pug

index.pug と hoge/index.pug の両方でimg.jpgを読み込む場合、
相対パスで書くと当然記述が変わります。

これを index.pug と hoge/index.pug の2つファイルで
includeされている_include.pug で img.jpg を
相対パスで読み込むにはどうすれば上手くいくでしょうか。

それはpathの変数をおくと上手くいきます。
次が記述例です。

index.pug

- var path = "./";
include _include.pug

hoge/index.pug

- var path = "../";
include ../_include.pug

_include.pug

img(src=`${path}img.jpg`)

このように書くことでコンパイルされると次のようになります。

index.pug → index.html

<img src="./img.jpg">

hoge/index.pug → hoge/index.html

<img src="../img.jpg">

これを利用すれば、リンクなどの相対パスがincludeしたいファイルの中にあっても、問題なくincludeファイルとして利用できます。

ナビのカレントのclassを解決する

次はナビのカレントなど、ページによってclassが変わったり、classが追加されたりする要素がincludeファイルの中にある場合の解決方法です。

これはfor文やfunctionなども使用しているので、pugを使い始めた人には少し分かりづらいかもしれません。

基本的な解決方法は先程と同じで、ページを識別するための変数を1つおきます。

以下のようなディレクトリ構造を考えてみます。

includeするのは_nav.pugです。

  • index.pug
  • _nav.pug
  • outline
    • index.pug

次が記述例です。

index.pug

- var page = "home";
include _nav.pug

outline/index.pug

- var page = "outline";
include ../_nav.pug

_nav.pug

-
  var nav = {
    home:{
      url:"/",
      name:"HOME"
    },
    outline:{
      url:"/outline/",
      name:"OUTLINE"
    },
    items:{
      url:"/items/",
      name:"ITEMS"
    },
    news:{
      url:"/news/",
      name:"NEWS"
    },
    contact:{
      url:"/contact/",
      name:"CONTACT"
    }
  };
  function currentCheck(i){
    if( i == page )
      return "current";
    else
      return "";
  }
nav.nav
  ul.glnav
    - for(item in nav)
      li(class=`glnav-item ${currentCheck(item)}`)
        a(href=`${nav[item].url}`)= nav[item].name

_nav.pugは少し複雑かもしれません。

nav変数には、ナビゲーションメニューの内容を配列で入れています。

currentCheck関数は、page変数とnav変数のキーを比較して、同じだったら current を返す関数です。

上記のものをコンパイルすると、次のようになります。

index.pug → index.html

<nav class="nav">
  <ul class="glnav">
    <li class="glnav-item current"><a href="/">HOME</a></li>
    <li class="glnav-item"><a href="/outline/">OUTLINE</a></li>
    <li class="glnav-item"><a href="/items/">ITEMS</a></li>
    <li class="glnav-item"><a href="/news/">NEWS</a></li>
    <li class="glnav-item"><a href="/contact/">CONTACT</a></li>
  </ul>
</nav>

outline/index.pug → outline/index.html

<nav class="nav">
  <ul class="glnav">
    <li class="glnav-item"><a href="/">HOME</a></li>
    <li class="glnav-item current"><a href="/outline/">OUTLINE</a></li>
    <li class="glnav-item"><a href="/items/">ITEMS</a></li>
    <li class="glnav-item"><a href="/news/">NEWS</a></li>
    <li class="glnav-item"><a href="/contact/">CONTACT</a></li>
  </ul>
</nav>

includeしてはいませんが、上記の内容をcodepenで作成しました。

OUTLINEにcurrentのclassが付いていることが確認できると思います。

See the Pen pug nav by takblog (@blanks-site) on CodePen.

これからもpugについて思いついたことを書いていこうと思います。

arrow_circle_up