VueJS 引入Twitter文章列表; 嵌入Twitter内容


为了更好地让新闻报道立即应用Twitter,而不用再开发设计一套新闻系统。

相近实际效果:https://ethereum.org/ ,以太币的最下边,有以太币twitter的文章列表。

1. 科学上网以后开启twitter -> 设定 -> 实用工具

2526346-901536160f52c258.jpg

请原谅我应用了汉语

这时候,会自动跳转一个网页页面:publish.twitter

随后在文本框键入你要引入的twitter详细地址,点一下确定( -> )

2526346-65f73501ced41054.jpg

eth的twitter

挑选款式:

2526346-ce15df2477c164ae.jpg

展现款式

随后copy code:

2526346-a3843713105c5300.jpg

实例

实例编码:

<a class="twitter-timeline" href="https://twitter.com/ethereumproject?ref_src=twsrc^tfw">Tweets by ethereumproject</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

随后将这一段编码插进到你的html中就可以运作。

2. vue中应用上边的编码

因为大家一般应用components做组件化,在部件中是不能应用script标识的,因此 在vue中,能够将script那一段立即放进index.html中 head的底端:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <!-- something your code -->

    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

  </head>

  <body>

    <div id="app"></div>

  </body>

</html>

随后在components中:

<div class="twitter-area">

  <a class="twitter-timeline" href="https://twitter.com/ethereumproject?ref_src=twsrc^tfw">Twitter by ETH, Loading...</a >

</div>

在网页页面中的实际效果:

2526346-e09bd1c88d58f1c4.jpg

实际效果

The end.