Different scripts for different pages?

[HEIGE-PCloud]

A similar question MoOx/pjax#230

I want to have different <script src> tags in different pages, how should I handle this?

For example, I have

<script src="pjax.js"></script>
<script src="theme.js"></script>

on page 1, and Pjax() is initialized in theme.js.

And I have

<script src="lightgallery.js"></script>
<script src="pjax.js"></script>
<script src="theme.js"></script>

on page 2, which I want to call if (!window.lightgallery) lightgallery.init() in theme.js when the page is loaded. How should I organize the DOM tree and reload the function?

[PaperStrike]

The easiest solution would be wrapping the parts that differ among pages into an element that you will add to the selectors option. Make sure to have the wrapper existing on each page. In your example, that could be

<!-- page 1 -->
<div class="differ-among-pages"></div>
<script src="pjax.js"></script>
<script src="theme.js"></script>

<!-- page 2 -->
<div class="differ-among-pages">
  <script src="lightgallery.js"></script>
</div>
<script src="pjax.js"></script>
<script src="theme.js"></script>

don't forget to select that element like:

const pjax = new Pjax({
  selectors: [
    '.differ-among-pages',
  ],
});

#31 (comment) shows two other possible solutions.