Как добавить JavaScript только для одной конкретной страницы?

Question

Я использую Zurb Foundation в своем проекте, и это очень удобно. Но я смущен тем, что как добавить свой собственный JavaScript, который предназначен только для DOM конкретной страницы, когда эта страница загружается.

Я использовал сторонний графический файл lib в частичной части страницы, и я должен запустить контейнер диаграммы с некоторым 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, а затем добавить тег скрипта где-нибудь на странице. Но как?
Есть ли способ, который удобно добавлять скрипты из рамки Foundation? Есть ли способ, подобный поведению частичного шаблона html?

Answer 1

От взгляда вашей структуры папок Я предполагаю, что «аромат» Фонда 6, который вы используете, - это шаблон Zurb Foundation.

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/**/*" в яваскрипте путей к низу:

# 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 к этому:

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 вы торчите в каталоге single-page будут скопированы в каталоге dist и исключены из app.js.

Подробнее о шаблонной системе, используемой в шаблонах Foundation, см. В разделе Panini раздела Foundation Docs.