在Meteor应用中插入addthis共享按钮? [英] Inserting addthis sharing buttons in a Meteor app?
问题描述
如何在Meteor应用中插入添加此共享按钮?通常，您可以直接将提供的代码直接复制到html文件中:
How do I insert addthis sharing buttons in a Meteor app? Usually, you can just copy the provided code directly into the html file:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
<!-- AddThis Button END -->
但是在Meteor中，按钮不显示.链接似乎从DOM中消失了.这是完整的Meteor应用程序(.js和.css文件为空白):
But in Meteor, the buttons don't appear. The links seem to disappear from the DOM. Here's the full Meteor app (the .js and .css files are blank):
<head>
<title>test-addthis</title>
</head>
<body>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
<!-- AddThis Button END -->
</body>
这是显示问题的实时版本: http://testaddthismeteor.meteor.com/
And here's a live version showing the problem: http://testaddthismeteor.meteor.com/
推荐答案
流星"模板中的body标签实际上不是HTML body标签.它只是您应用程序的主体".
The body tag in a Meteor template is not really a HTML body tag. It's just the "body" of your application.
这样，当Meteor加载您的应用程序时，它将生成HTML元素以在浏览器本身中呈现页面，然后呈现任何适用的模板.在您的情况下，您有一个包含脚本标签的模板，并且假设与标准HTML文档一样，浏览器将继续执行相关的Javascript.但是，这不是它的工作方式.没有执行Javascript，只是将DOM节点附加到DOM结构中.
As such, when Meteor loads your app, it will generate the HTML elements to render the page in the browser itself, then render any applicable templates. In your case, you have a template containing a script tag and your assumption is that, as with a standard HTML document, the browser will go ahead and execute the associated Javascript. However, that's not how it works. The Javascript isn't being executed, the DOM nodes are just being appended to the DOM structure.
您可以通过尝试记录addthis_config的值来对此进行测试-该值将是未定义的.您尝试包含的addthis脚本也未被浏览器选中，因为Web检查器中的资源"选项卡将指示该内容.
You can test this by trying to log the value of addthis_config - it will be undefined. The addthis script you tried to include has also not been picked up by the browser as your Resources tab in the Web Inspector will indicate.
为了解决此问题，您需要告诉Meteor获取外部脚本，然后设置变量.在模板的<head>元素中，添加脚本:
In order to fix this, you need to tell Meteor to fetch the external script and then set the variable. In your template's <head> element, add the script:
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
然后在Javascript中声明该变量:
And then declare the variable in your Javascript:
if (Meteor.isClient) {
var addthis_config = {"data_track_addressbar": true};
}
这篇关于在Meteor应用中插入addthis共享按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
