Question

我是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 
}

正如我之前提到的，核心基金会网站是由Yoeman生成的，而我正在使用generator-sassy-roboyeti所以我不想偏离默认情况下设置的内容。

任何想法都将不胜感激。

Answer 1

这不是答案，但我确实找到了另一种方法。

我只是添加文件应该用于每个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

标题：关于说明：这是关于我的页面。

布局：banded.hbs

嗨，这是关于页面的。

使用替代模板组装0页的Assemble.io问题

1 个答案:

布局：banded.hbs