Question

我想在一个页面上相互显示两个独立的Tumblr博客。我希望他们看起来与他们的Tumblr主题相同。最好的方法是什么？

我可以使用JavaScript导入这样的内容：

<div id="tumblr1">
  <script type="text/javascript" src="http://tumblr1.tumblr.com/js"></script>
<div>

<div id="tumblr2">
  <script type="text/javascript" src="http://tumblr2.tumblr.com/js"></script>
<div>

但内容显然不会被设计。有更简单的方法吗？如果没有，是否有一种简单的方法来设计我从js获得的内容？

更新
我正在解析JSON但JavaScript不喜欢属性值中的破折号。举一个简单的例子：

<script type="text/javascript">
    var tumblelog = {

                    "title":"Tumblr Title",
                    "description":"Tumblr Description",
                    "name":"tumblr name",
                    "timezone":"US\/Central",
                    "cname":false,
                    "feeds":0,
                    "posts-start":0,
                    "posts-total":"111",
                    "posts-type":false

                    };

</script>

<script type="text/javascript">

     document.write(tumblelog.posts-total);

</script>

告诉我“未捕获的ReferenceError：未定义总数”。但是，

<script type="text/javascript">

     document.write(tumblelog.feeds);

</script>

返回0就好了。 Tumblr的API建议类似

     document.write(tumblelog['@posts-total']);

使用时但返回“未定义”。

有什么建议吗？

Answer 1

我希望他们看起来与他们的Tumblr主题相同。

使用iFrame？

Answer 2

我会使用api并设置一个json回调

<script type="text/javascript"
src="http://tumblr1.tumblr.com/api/read/json?callback=my_callback"></script>

<script type="text/javascript"
src="http://tumblr2.tumblr.com/api/read/json?callback=my_callback"></script>

然后准备好回调：

function my_callback(tumblr_data)
{
    //append the data to the div here
}

您可以找到tumblr api阅读文档here。

编辑：或者你可以这样做，没有回调：

<div id="tumblr1">
    <script type="text/javascript" src="http://tumblr1.tumblr.com/api/read/json"></script>
    <script type="text/javscript">
        parse_tumblr_data(tumblr_api_read);
    </script>
<div>

<div id="tumblr2">
    <script type="text/javascript" src="http://tumblr2.tumblr.com/api/read/json"></script>
    <script type="text/javscript">
        parse_tumblr_data(tumblr_api_read);
    </script>
<div>

我在on this site之前使用了上面的例子来改变Tumblr音频播放器的颜色......但你可以做任何你想做的事。

Answer 3

tumblelog['@posts-total']将查找@posts-total obj的tumblelog密钥，该密钥不存在。

这样做：

document.write(tumblelog['posts-total']);

在一个页面上显示两个独立的Tumblr博客？

3 个答案: