在Hugo网页中动态引用JS与CSS文件
为了最大节约带宽和服务器资源,除了尝试在CDN中缓存CSS、js文件之外,我想到尽量设置网页不主动加载一些不必要的外部库。
例如,一些纯文字的页面就不需要jquery库的支持,而使用图片灯箱的页面则自动加载fancybox的资源库。
因此,对于一些需要展示图片的网页,我就动态启用外部脚本链接。
实现的方法也很简单,目前来看已经能满足我的要求,至于效果待以后再评估:
修改single.html
具体就是修改theme文件中的themes\hello-friend\layouts_default\single.html,
在倒数第二行插入如下代码:
{{ if (findRE "div class=.?fancybox.?" .Content 1) }}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{ end }}
div class=.?fancybox.? 为我的shortcodes中的代码:
<div class="fancybox" align="center">
<a data-fancybox="{{ $gallery }}" href="{{ $path }}/{{ $file }}" data-caption="{{ $caption }}"><img src="{{ $path }}/{{ $file }}"></a>
</div>
Read other posts