将 Bootstrap 模板添加到 MeteorJS [英] Add Bootstrap template to MeteorJS
问题描述
我有一个来自 https://wrapbootstrap.com/ 的 Bootstrap 主题，我想在我的 MeteorJS 应用程序中使用它.问题是它有脚本标签，如:
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"></script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"></script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
添加到 MeteorJS 时不起作用.我知道标签不起作用，但是您如何将这个设计的页面与 MeteorJS 兼容?
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
后期
我添加了 script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> 以上.以上所有脚本都添加在中.google.maps 库在 lib/main.js 中使用，它不适用于 MeteorJS，因为它会引发 ReferenceError.在 Meteor 之外，它工作正常.
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
关于如何从 Bootstrap 模板添加 Google 地图脚本的任何想法?
Any ideas on how to add that Google Maps script from the Bootstrap Template?
后期
Bootstrap 模板有一个 lib/main.js 文件，它是最后一个导入的 javascript 文件.尽管如此，当我将它添加到 Meteor 时，它似乎可以运行，但在 UI 中看不到它的效果.例如，它执行这一行 $(".chzn-select").select2(); 但只有当我从控制台执行它时，我才能看到 UI 的变化.该文件最后由 Meteor 加载.我也试过
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
没有成功.
推荐答案
这些外部主题可能与meteor 中的默认引导程序不兼容，因此您应该删除meteor 的引导程序包:
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
删除默认引导程序:
meteor remove bootstrap
添加您的主题:
将你的 css 文件放在你项目的 css 目录中，比如 /client/css
Place your css files in your project's css directory, say /client/css
将主题 javascript 文件放在 /client/lib
Place the themes javascript files in /client/lib
不要担心脚本标签，或者链接它们中的任何一个或任何东西，meteor 应该负责所有这些.
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
还有
Meteor 默认包含 JQuery，因此您不必担心将其包含在您的项目中.如果由于某种奇怪的原因你的流星项目可能没有使用它，要添加 jquery:
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
外部 API
例如 FB/Google Mapis API/跟踪脚本.像往常一样将它们添加到 html 文件的 部分.
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
希望你觉得这一切都很酷！
Hopefully you find all of this cool!!
这篇关于将 Bootstrap 模板添加到 MeteorJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
