将 Bootstrap 模板添加到 MeteorJS
Posted
技术标签:
【中文标题】将 Bootstrap 模板添加到 MeteorJS【英文标题】:Add Bootstrap template to MeteorJS 【发布时间】:2013-02-17 12:49:38 【问题描述】:我有一个来自 https://wrapbootstrap.com/ 的 Bootstrap 主题,我想在我的 MeteorJS 应用程序中使用它。问题是它有如下脚本标签:
<!--[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?
后期编辑:
我在上面添加了script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
。以上所有脚本都添加在<body>
中。 google.maps
库在 lib/main.js
中使用,它不适用于 MeteorJS,因为它引发了 ReferenceError
。在 Meteor 之外它工作正常。
关于如何从引导模板添加 Google 地图脚本的任何想法?
后期编辑:
Bootstrap 模板有一个 lib/main.js
文件,它是最后一个导入的 javascript 文件。尽管如此,当我将它添加到 Meteor 时,它似乎正在运行,但在 UI 中看不到它的效果。例如,它执行$(".chzn-select").select2();
这一行,但只有当我从控制台执行它时,我才能看到 UI 更改。该文件最后由 Meteor 加载。我也试过
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;
没有成功。
【问题讨论】:
【参考方案1】:这些外部主题可能与流星包含的默认引导程序不兼容,因此您应该删除流星的引导程序包:
删除默认引导:
meteor remove bootstrap
添加您的主题:
将您的 css 文件放在项目的 css 目录中,例如 /client/css
将主题javascript文件放在/client/lib
不用担心脚本标签,或者链接它们中的任何一个或任何东西,meteor 应该会处理所有这些。
还有
Meteor 默认包含 JQuery,因此您不必担心将其包含在您的项目中。如果由于某些奇怪的原因您是流星项目可能没有使用它,请添加 jquery:
meteor add jquery
外部 API
例如 FB/Google Mapis API/跟踪脚本。像往常一样将它们添加到 html 文件的 <head>
部分。
希望你觉得这一切都很酷!
【讨论】:
我觉得它真的很酷:) 谢谢你的回答,它对我有部分帮助。现在,我被谷歌地图脚本困住了——你可以看看更新后的问题。 在 html 文件的<head></head>
部分添加谷歌地图 api
它有效,但我已经更新了问题。即使现在不是完整的回复,我也会标记它。谢谢!
这可能与添加文件的顺序有关,meteor 按文件名从 a-z 的顺序添加文件。调整文件名以匹配它们需要的顺序
所以我想把这个main.js
重命名为zmain.js
以上是关于将 Bootstrap 模板添加到 MeteorJS的主要内容,如果未能解决你的问题,请参考以下文章
如何将 bootstrap 和 jquery 包含到 vue webpack-simple 模板中?
使用 bootstrap-vue:如何将类添加到 b 分页组件中的页面按钮
ngx bootstrap popover 将 html 字符串创建移动到 HTML 模板文件