如何在使用gulp生成网站时从页面访问元数据和前端内容?

时间:2017-09-05 07:51:47

标签: javascript gulp metalsmith

我正试图在gulp中建立Metalsmith流程。问题是我不知道如何设置从任意数量的不同格式的文件(YAML或JSON)加载元数据,然后在页面中全局使用它们。它适用于部分和布局。

这是我的src文件夹结构,仅适用于静态网站资产:

_data/
  settings.yaml
  info.json
_layouts/
  default.html
_partials/
  menu.html

index.html

这是我最新的吞咽过程:



'use strict';

/***********
 * PLUGINS *
 ***********/

var gulp            = require('gulp'),
    metalsmith      = require('gulp-metalsmith'),
    markdown        = require('metalsmith-markdown'),
    handlebars      = require('metalsmith-handlebars'),
    layouts         = require('metalsmith-layouts'),
    ignore          = require('metalsmith-ignore'),
    rootPath        = require('metalsmith-rootpath'),
    metadata        = require('metalsmith-metadata'),
    runSequence     = require('run-sequence').use(gulp); 


// Paths (external file with all paths)
var app_paths = require('../paths.js');

gulp.task('metalsmith', function() {
  return gulp.src('./src/site/**')
    .pipe(metalsmith({
      // Metalsmith's root directory, for example for locating templates, defaults to CWD
      root: './src/site/',
      // Parsing frontmatter, defaults to true
      frontmatter: true,
      json: true,
      // Metalsmith plugins to use:
      use: [
        metadata({
          "settings": "_data/settings.yaml",
          "info": "_data/info.json"
        }),
        rootPath(),
        markdown(),
        ignore(['_layouts/**/*', '_partials/**/*', '_data/**/*']),
        layouts({
          engine:     'handlebars',
          directory:  '_layouts/',
          partials:   '_partials/',
          default:    'default.html'
        }),
      ]
    }))
    .pipe(gulp.dest(app_paths.htmlStaticOut));
});




settings.yaml具有此键/值对:

site_name: Site name

当我尝试在页面中使用{{settings.site_name}}访问settings.yaml中的某些键时 - 没有任何反应。我也无法从页面中访问前端数据。

任何人都知道问题出在哪里?

0 个答案:

没有答案