Posted at

jade でアクティブページの html 要素に class 等を付与する パート2

More than 3 years have passed since last update.

関西フロントエンドUG Advent Calendar 2015 15日目の記事です。

先日開催された、関西フロントエンドUG 年忘れLT大会 で以下を内容しゃべりました。

Dreamweaver を使うのやめた話

http://www.slideshare.net/shimakyohsuke/dreamweaver-56109864

19 スライド目の「グローバルナビにアクティブな class を付与するのに困った」件は、以前 Qiita へ投稿した以下内容になります。

jade でアクティブページの html 要素に class 等を付与する

こちらについてを Mixin 使えばなんとかなるんじゃねとフィードバックいただいたのでちょっとアップデートしてみます。


ファイル構成

├── gulpfile.js

├── meta.json
├── dist
│ └── index.html
└── src
└── jade
├── include
│   └── _inc_gnavi.jade
└── index.jade

サイトの meta 情報を JSON で管理するので、 gulp-data を使ってます。


gulpfile.js

var gulp = require('gulp');

var jade = require('gulp-jade');
var data = require('gulp-data');

gulp.task('jade', function(){
return gulp.src('./src/jade/*.jade')
.pipe(data(function(file){
return require('./meta.json');
}))
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('./dist/'));
});



meta.json

{

"one": {
"title": "1 だよ",
"directory": "/one"
},
"two": {
"title": "2 だよ",
"directory": "/two"
},
"three": {
"title": "3 だよ",
"directory": "/three"
}
}


_inc_nav.jade

mixin list(id, ...items)

ul(class=id)
each item in items
if (item.pageName == pageName)
li
a.is_active(href="#{item.directory}")= item.pageName
else
li
a(href="#{item.directory}")= item.pageName

+list(
'gnav',
{pageName: one.title, directory: one.directory},
{pageName: two.title, directory: two.directory},
{pageName: three.title, directory: three.directory}
)



index.jade

//- one || two || three

- pageName = one.title;
include ./include/_inc_nav.jade

ファイルできたらコマンド叩く

$ gulp jade

こうなる。


index.html

<ul class="gnav">

<li><a href="/one" class="is_active">1 だよ</a></li>
<li><a href="/two">2 だよ</a></li>
<li><a href="/three">3 だよ</a></li>
</ul>


Mixin 使えば以前に比べコードが短くなりましたが、もはや自分の理想はなんなのかわかりません。

Express 使えばいいと思う。

以上です。