I am trying to use Metronic admin theme on my web pages and want to convert my templates to jade/pug. Unfortunately, I encountered a bug that I am not able to work around nicely. Whenever, Metronic loads a page, it loads the core scripts first and then depending on what else you have on the page it loads page specific plugins and scripts. In order to mimic this functionality I created a footer.pug file that contains the core plugins and blocks for page specific plugins and scripts:
// BEGIN CORE PLUGINS
script(src='../assets/global/plugins/jquery.min.js', type='text/javascript')
script(src='../assets/global/plugins/bootstrap/js/bootstrap.min.js', type='text/javascript')
script(src='../assets/global/plugins/js.cookie.min.js', type='text/javascript')
script(src='../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js', type='text/javascript')
script(src='../assets/global/plugins/jquery.blockui.min.js', type='text/javascript')
script(src='../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js', type='text/javascript')
// END CORE PLUGINS
// BEGIN PAGE LEVEL PLUGINS
block page_level_plugins
// END PAGE LEVEL PLUGINS
// BEGIN THEME GLOBAL SCRIPTS
script(src='../assets/global/scripts/app.min.js', type='text/javascript')
// END THEME GLOBAL SCRIPTS
// BEGIN PAGE LEVEL SCRIPTS
block page_level_scripts
// END PAGE LEVEL SCRIPTS
// BEGIN THEME LAYOUT SCRIPTS
script(src='../assets/layouts/layout/scripts/layout.min.js', type='text/javascript')
script(src='../assets/layouts/global/scripts/quick-sidebar.min.js', type='text/javascript')
script(src='../assets/layouts/global/scripts/quick-nav.min.js', type='text/javascript')
// END THEME LAYOUT SCRIPTS
This footer.pug file is included my simple layout.pug:
doctype html
html
head
if title
title= title
else
title Template page
include head
body.page-header-fixed.page-sidebar-closed-hide-logo.page-content-white.page-md
.page-wrapper
include header
.page-container
.page-content-wrapper
.page-content
block content
include footer
When I write my actual web page, I extend the layout.pug and add a block at the end with the name of page_level_plugins
extends partials/layout
block content
if title
h1= title
...
block page_level_plugins
script(src='../assets/global/plugins/jquery-ui/jquery-ui.min.js', type='text/javascript')
When I look in the browser Inspector, the correct html has been created, the scripts are in the correct order
However, when I look at my network tab, I can see that JQueryUI has been downloaded before JQuery:
And I get an error in the console, that I am trying to load JQueryUI before JQuery. And for some reason, I get the error twice:
Has anyone found a solution to this problem?
