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

Question

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

我在页面的部分中使用了第三方图表库,我必须使用一些JavaScript初始化图表容器.这些JavaScripts无法组合到final中,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到我的网页,但这些网页,我应该避免吞气自动合并draw.js,并xcharts于app.js再一个脚本标记添加到page.But怎样的地方？
有没有一种方法可以方便地添加基础框架之外的脚本？有没有像html模板部分行为的方法？

Answer 1

从你的文件夹结构的外观我假设你正在使用的基础6的"味道"是基础Zurb模板.

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

{{#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"

将javascript任务更改为gulpfile.babel.js:

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.

有关Foundation模板中使用的模板系统的更多信息,请参阅Foundation Docs的Panini部分.