VueJS 引入Twitter文章列表； 嵌入Twitter內(nèi)容,vue 組件微信公眾號-ESG跨境

VueJS 引入Twitter文章列表； 嵌入Twitter內(nèi)容,vue 組件微信公眾號

VueJS 引入Twitter文章列表； 嵌入Twitter內(nèi)容

為了讓新聞直接使用Twitter，而不需要再開發(fā)一套新聞系統(tǒng)。

類似效果：https://ethereum.org/ ，以太坊的最下面，有以太坊twitter的文章列表。

1. 科學(xué)上網(wǎng)之后打開twitter 設(shè)置 小工具

原諒我使用了中文

這時，會跳轉(zhuǎn)一個網(wǎng)頁：publish.twitter

然后在輸入框輸入你想引用的twitter地址，點擊確認(rèn)（ ）

eth的twitter

選擇樣式：

展示樣式

然后copy code：

案例

示例代碼：

a class=twittertimeline href=https://twitter.com/ethereumproject refsrc=twsrc%5EtfwTweets by ethereumproject/a script async src=https://platform.twitter.com/widgets.js charset=utf8/script

然后將這段代碼插入到你的html中即可運(yùn)行。

2. vue中使用上面的代碼

由于我們一般使用components做組件化，在組件中是不可以使用script標(biāo)簽的，所以在vue中，可以將script那一段直接放入index.html中 head的底部：

!DOCTYPE html

html

head

  meta charset=utf8

  ! something your code

  script async src=https://platform.twitter.com/widgets.js charset=utf8/script

/head

body

  div id=app/div

/body

/html

然后在components中：

div class=twitterarea

a class=twittertimeline href=https://twitter.com/ethereumprojectrefsrc=twsrc%5EtfwTwitter by ETH, Loading.../a

/div

在網(wǎng)頁中的效果：

效果

The end.

特別聲明：以上文章內(nèi)容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。