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

Question

我在我的项目中使用 Zurb Foundation，它非常方便。但是我很困惑如何在加载该页面时添加我自己的 JavaScript 仅用于特定页面的 DOM 。

我在页面的局部使用了第三方图表库，我必须用一些 JavaScript 初始化图表容器。这些 JavaScript 无法合并到最终的 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 然后添加一个script 标记到 page.But 的某处如何？
有没有一种方法可以方便地添加 Foundation 框架之外的脚本？是否有类似于 html 模板部分行为的方法？

Answer 1

从您的文件夹结构来看，我假设您使用的 Foundation 6 "flavor" 是 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.

中排除

有关 Foundation 模板中使用的模板系统的更多信息，请参阅 Panini section of the Foundation Docs。

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

How to add JavaScript just for one specific page?

javascript

zurb-foundation

zurb-foundation-6