有条件地在html中包含JS脚本

时间:2018-04-30 13:26:14

标签: javascript html github-pages

我正在Github Pages上制作一个简单的网站,并使用CDN包含几个脚本文件:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>

在本地计算机上进行开发时,包含完整版本的脚本以简化调试有时很有用,但在目标服务器上我更喜欢使用缩小的脚本,即包括angular.min.js而不是{{1 }}。有没有办法让#34;条件包括&#34;在HTML中,还是Github Pages有一些机制来替换最后提交的文件的部分?

1 个答案:

答案 0 :(得分:1)

The Jekyll documentation表示您可以在构建网站时使用Jekyll环境有条件地包含代码。对于你的情况:

...
{% if jekyll.environment == "production" %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

Another option建议使用另一个专门用于开发的配置文件。

_config.yml设置environment: prod

_config_dev.yml设置environment: dev

在开发中运行jekyll build --config _config.yml,_config_dev.yml,第二个配置文件overrides是第一个,并将环境设置为dev。 GitHub页面运行jekyll build - 仅使用_config.yml - 并且环境设置为prod。您可以使用与上述类似的语法来有条件地包含该文件。

...
{% if site.environment == "prod" %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...