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

问题描述

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

I'm using Zurb Foundation in my project and it is very convenient. But I'm confused that how can I add my own JavaScript which is just for a specific page's DOM when that page is loading.

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

I used a third-party chart lib in a page's partial and I must initial the chart container with some JavaScript. These JavaScripts can not be combined to the final app.js because other pages don't contain the chart container div. So can any one give me some advice?

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

The following is my project structure.

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 ，然后在页面的某处添加一个脚本标签。但是怎么做？ br>有没有一种方法可以方便地添加基础框架之外的脚本？有没有像html模板部分行为的方法？

I tried adding my JavaScript code just after my chart container but I can't because it used jQuery.Assuming that my JavaScript is the draw.js. The gulp will auto merge the draw.js to the app.js which is for every page. If I just include the draw.js to my page but which page I should prevent the gulp auto merge the draw.js and xcharts to the app.js and then add a script tag to somewhere of the page.But how?
Is there a way that is convenient to add scripts that are out of the Foundation framework? Is there a method like the html template partial's behavior?

推荐答案

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

From the looks of your folder structure I am assuming the "flavor" of Foundation 6 you are using is the Foundation Zurb Template.

1. 将您想要在一个页面上使用的所有脚本仅移至 src / assets / js / single-page


2. 打开 src / layouts / default.html


3. 找到行：< script src ={{root}} assets / js / app.js>< / script>


4. 在该行之后，插入以下代码：

1. Move all scripts you want to use on one page only to src/assets/js/single-page
2. Open up src/layouts/default.html
3. Find the line: <script src="{{root}}assets/js/app.js"></script>
4. After that line, insert the following code:

{{#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路径：

The scripts also need to be excluded in config.yml so that they aren't included in app.js. Add "!src/assets/js/single-page/**/*" to the javascript paths towards the bottom:

# 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任务更改为：

Change the javascript task in gulpfile.babel.js to this:

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'));
}

现在你坚持单一的任何JS文件 - page 目录将被复制到 dist 目录，并从 app.js 中排除。

Now any JS files you stick in the single-page directory will be copied to the dist directory and excluded from app.js.

有关Foundation模板中使用的模板系统的更多信息，请参阅的rel =noreferrer> Panini 部分。

For more about the template system used in the Foundation templates, see the Panini section of the Foundation Docs.

这篇关于如何为一个特定页面添加JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！