有条件地在html中包含JS脚本 [英] Conditionally include JS script in html

问题描述

我在Github Pages上创建了一个简单的网站，并使用CDN包含了几个脚本文件：

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

在本地机器上进行开发期间，包含完整版本的脚本以简化调试有时很有用，但在目标服务器上，我更愿意使用缩小脚本，即包含 angular.min.js 而不是 angular.js 。有没有办法在html中使用条件包含，或者Github Pages是否有一些机制来替换上次提交的文件的部分？

解决方案

Jekyll文档说您可以使用Jekyll环境在构建站点时有条件地包含代码。对于你的情况：

  ... 
 {％如果jekyll.environment ==生产％} 
< 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％} 
 ... 
  

---

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

_config.yml 集合环境：prod 。

_config_dev.yml 集合环境：dev p>

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

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

I am making a simple website hosted on Github Pages and use CDN to include several script files:

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

During development on a local machine it is sometimes useful to include full versions of scripts to simplify debug, but on target server I'd prefer to use minified scripts, i.e. include angular.min.js instead of angular.js. Is there a way to have "conditional include" in html, or do Github Pages have some mechanism to substitute parts of last submitted files?

解决方案

The Jekyll documentation says you can use the Jekyll environment to conditionally include code when building the site. For your case:

...
{% 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 suggests using another config file specifically for development.

_config.yml sets environment: prod.

_config_dev.yml sets environment: dev.

Running jekyll build --config _config.yml,_config_dev.yml in development, the second config file overrides the first and sets the environment to dev. GitHub Pages runs jekyll build - which only uses _config.yml - and would have environment set to prod. You could use a similar syntax to the above to conditionally include the file.

...
{% 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 %}
...

这篇关于有条件地在html中包含JS脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！