/ / Assemble.ioの問題は、代替テンプレートを使用して0ページを組み立てること - zurb-foundation、yeoman-generator、assemble

Assemb.ioの問題は、代替テンプレートを使用して0ページを組み立てること - zurb-foundation、yeoman-generator、assemble

私はAssemble.ioを初めて使用しており、Foundation 5のセットアップを迅速に行うためにジェネレータを使用しています。しかし、代替テンプレートを使用して問題を解決しています。

私は同じテンプレートを持つすべてのページを生成するページを得ることができますが、明らかにサイトのセクションの異なるテンプレートを持つことを好むでしょう。

現在のGruntfile.js

assemble : {
options : {
layoutdir : "<%= paths.templates %>/layouts",
layout : "site.hbs",
partials : "<%= paths.templates %>/partials/*.hbs",
assets : "<%= paths.assets %>",
data : "<%= paths.data %>/*.{json,yml}",
helpers : [ "<%= paths.templates %>/helpers/*.js" ],
marked : {gfm : true},
plugins : [ "assemble-middleware-sitemap","assemble-contrib-permalinks" ],
sitemap : {dest : "<%= paths.dist %>/"},
permalinks : {preset : "pretty"},
},
about: {
// override task-level layout
options: {
layoutdir : "<%= paths.templates %>/layouts",
layout: "banded.hbs",
partials : "<%= paths.templates %>/partials/*.hbs",
assets : "<%= paths.assets %>",
data : "<%= paths.data %>/*.{json,yml}",
helpers : [ "<%= paths.templates %>/helpers/*.js" ],
marked : {gfm : true},
plugins : [ "assemble-middleware-sitemap","assemble-contrib-permalinks" ],
sitemap : {dest : "<%= paths.dist %>/"},
permalinks : {preset : "pretty"}
},
// files: {"docs/": ["src/content/about/*.hbs" ]},
files : [ {
expand : true,
cwd : "<%= paths.content %>/about",
src : "<%= paths.content %>/about/*.{md,hbs}",
dest : "<%= paths.dist %>/"
} ]
},

// Default
dist : {
files : [ {
expand : true,
cwd : "<%= paths.content %>/",
src : "**/*.{md,hbs}",
dest : "<%= paths.dist %>/"
} ]
}
},

私はこれについて非常に新しいので、私はいくつかのことを試して、Assemble.ioサイトのドキュメントを見てきましたが、ここでは役に立たないようです。

Assemble.ioサイトの例

assemble: {
options: {
layout: "default.hbs",
layoutdir: "layouts"
},
docs: {
// override task-level layout
options: {layout: "docs-layout.hbs" },
files: {"docs/": ["src/docs/*.hbs" ]},
},
site: {
// override task-level layout
options: {layout: "site-layout.hbs" },
files: {"site/": ["src/site/*.hbs" ]},
}
// ... other targets
}

私が以前言及したように、Foundation FoundationサイトはYoemanによって生成されており、 ジェネレーター - セイシー - ロボテイ だから私はそれがデフォルトで設定しているものから遠くに迷いたくはありませんでした。

どんなアイデアでも大歓迎です。

回答:

回答№1は0

これはまさに答えではありませんが、私は代わりの方法を見つけました。

レイアウトを使用するように各セクションに指示するのではなく、ファイルが各HTMLファイルごとにどのレイアウトを使用するかを追加するだけです。私はこれがはるかに簡単だと思います。

更新されたGruntfile.js

"use strict";
module.exports = function(grunt) {
require("time-grunt")(grunt);

grunt
.initConfig({

paths : {
src : "src",
dist : "dist",
tmp : ".tmp",
assets : "<%= paths.dist %>/assets",
content : "<%= paths.src %>/content",
data : "<%= paths.src %>/data",
templates : "<%= paths.src %>/templates",
bower : "bower_components"
},

//credentials: grunt.file.readJSON("credentials.json"),

watch : {
assemble : {
files : [ "<%= paths.src %>/{content,data,templates}/**/*.{md,hbs,yml,json}" ],
tasks : [ "assemble" ]
},
sass : {
files : [ "<%= paths.src %>/css/**/*.scss" ],
tasks : [ "sass:server" ]
},
js : {
files : [ "<%= paths.src %>/js/**/*.js" ],
tasks : [ "concurrent:js" ]
},
livereload : {
options : {
livereload : "<%= connect.options.livereload %>"
},
files : [ "<%= paths.dist %>/**/*.html",
"<%= paths.assets %>/css/{,*/}*.css",
"<%= paths.assets %>/js/{,*/}*.js",
"<%= paths.assets %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}" ]
}
},

connect : {
options : {
port : 9000,
livereload : 35729,
// change this to "0.0.0.0" to access the server from outside
hostname : "localhost"
},
dist : {
options : {
open : true,
base : [ "<%= paths.dist %>" ]
}
}
},

assemble : {
options : {
layoutdir : "<%= paths.templates %>/layouts",
//layout : "site.hbs",
partials : "<%= paths.templates %>/partials/*.hbs",
assets : "<%= paths.assets %>",
data : "<%= paths.data %>/*.{json,yml}",
helpers : [ "<%= paths.templates %>/helpers/*.js" ],
marked : {gfm : true},
plugins : [ "assemble-middleware-sitemap","assemble-contrib-permalinks" ],
sitemap : {dest : "<%= paths.dist %>/"},
permalinks : {preset : "pretty"},
},
//Default
dist : {
files : [ {
expand : true,
cwd : "<%= paths.content %>/",
src : "**/*.{md,hbs}",
dest : "<%= paths.dist %>/"
} ]
}
},

imagemin : {
images : {
files : [ {
expand : true,
cwd : "<%= paths.content %>/images/",
src : "**/*.{png,jpg,gif}",
dest : "<%= paths.assets %>/images/"
} ]
}
},

modernizr : {
dist : {
devFile : "<%= paths.bower %>/modernizr/modernizr.js",
outputFile : "<%= paths.assets %>/js/modernizr.js"
}
},

sass : {
options : {
includePaths : [ "<%= paths.bower %>" ]
},
dist : {
options : {
outputStyle : "compressed"
},
files : {
"<%= paths.assets %>/css/site.css" : "<%= paths.src %>/css/site.scss"
}
},
server : {
options : {
sourceMap : true
},
files : {
"<%= paths.assets %>/css/site.css" : "<%= paths.src %>/css/site.scss"
}
}
},

concurrent : {
js : [ "copy:bower", "copy:js", "modernizr" ],
assets : [ "copy:bower", "copy:js", "modernizr", "imagemin" ]
},

clean : {
dist : "<%= paths.dist %>/**",
tmp : "<%= paths.tmp %>",
bowerAssets : "<%= paths.dist %>/bower_components",
js : [ "<%= paths.assets %>/js/*",
"!<%= paths.assets %>/js/modernizr.js" ]
},

useminPrepare : {
home : "<%= paths.dist %>/index.html",
options : {
dest : "<%= paths.dist %>"
}
},

filerev : {
css : {
src : "<%= paths.assets %>/css/*.css"
},
js : {
src : "<%= paths.assets %>/js/*.js"
}
},

usemin : {
html : [ "<%= paths.dist %>/**/*.html" ]
},

copy : {
bower : {
files : [ {
expand : true,
cwd : "<%= paths.bower %>/",
src : [ "jquery/**", "foundation/**" ],
dest : "<%= paths.dist %>/bower_components/"
} ]
},
js : {
files : [ {
expand : true,
cwd : "<%= paths.src %>/js/",
src : [ "*.js" ],
dest : "<%= paths.assets %>/js/"
} ]
}
},

cdnify : {
dist : {
html : [ "<%= paths.dist %>/**/*.html" ]
}
},

htmlmin : {
dist : {
options : {
removeComments : true,
collapseWhitespace : true
},
files : [ {
expand : true,
cwd : "<%= paths.dist %>/",
src : "**/*.html",
dest : "<%= paths.dist %>"
} ]
}
}
});

grunt.loadNpmTasks("assemble");
require("load-grunt-tasks")(grunt);

grunt.registerTask("build:dist", [ "clean:dist", "clean:tmp", "assemble",
"concurrent:assets", "sass:dist", "useminPrepare", "concat",
"clean:js", "uglify", "filerev", "usemin", "cdnify", "htmlmin",
"clean:bowerAssets" ]);

grunt.registerTask("build:server", [ "clean:dist", "clean:tmp", "assemble",
"concurrent:assets", "sass:server" ]);

grunt.registerTask("server", [ "build:server", "connect", "watch" ]);

grunt.registerTask("default", [ "build:dist" ]);
};

今私の/about/index.hbsに


タイトル:About description:これは私のページです。

レイアウト:banded.hbs

こんにちは、これは約ページです。