Question

我在我的项目中使用Zurb Foundation，非常方便。但我很困惑，我怎么能添加自己的JavaScript，这只是在加载该页面时的特定页面的DOM。

我在页面的部分中使用了第三方图表库，我必须使用一些JavaScript初始化图表容器。这些JavaScripts无法合并到最终app.js，因为其他页面不包含图表容器div。那么任何人都可以给我一些建议吗？

编辑：以下是我的项目结构。

src/
├── assets
│   ├── img
│   │   └── x.jpg
│   ├── js
│   │   ├── app.js
│   │   ├── draw.js
│   │   └── xcharts.js
│   └── scss
│       ├── app.scss
│       ├── news.scss
│       └── _settings.scss
├── data
├── layouts
│   └── default.html
├── pages
│   ├── news.html
│   └── template.html
├── partials
│   └── news-header.html
└── styleguide
    ├── index.md
    └── template.html

我尝试在我的图表容器之后添加我的JavaScript代码，但我不能，因为它使用了jQuery.Assuming我的JavaScript是draw.js。 gulp会自动将draw.js合并到每个页面的app.js。如果我只是将draw.js添加到我的页面，但我应阻止gulp自动将draw.js和xcharts合并到app.js，然后将脚本标记添加到某处页面。但是怎么样？
有没有一种方法可以方便地添加基础框架之外的脚本？有没有像html模板部分行为的方法？

Answer 1

从你文件夹结构的外观我假设＆＃34;味道＆＃34;您正在使用的Foundation 6是Foundation Zurb模板。

仅将您要在一个页面上使用的所有脚本移至src/assets/js/single-page
打开src/layouts/default.html
找到行：<script src="{{root}}assets/js/app.js"></script>
在该行之后，插入以下代码：

{{#ifpage 'news'}}
  <script src="{{root}}assets/js/single-page/draw.js"></script>
  <script src="{{root}}assets/js/single-page/charts.js"></script>
{{/ifpage}}

这将仅包含名为news的页面上的那些脚本。

还需要在config.yml中排除这些脚本，以便它们不会包含在app.js中。将"!src/assets/js/single-page/**/*"添加到底部的javascript路径：

# Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "!src/assets/js/single-page/**/*"
    - "src/assets/js/app.js"

将gulpfile.babel.js中的javascript任务更改为：

function javascript() {
  // Insert this section before the return statement
  gulp.src('src/assets/js/single-page/**/*.js')      
  .pipe($.if(PRODUCTION, $.uglify()
    .on('error', e => { console.log(e); })
  ))
  .pipe(gulp.dest(PATHS.dist + '/assets/js/single-page'));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

现在，您在single-page目录中的任何JS文件都将被复制到dist目录，并从app.js中排除。

有关基金会模板中使用的模板系统的更多信息，请参阅Panini的Foundation Docs部分。

如何为一个特定页面添加JavaScript？

1 个答案: