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

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

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

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

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

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

原諒我使用了中文

這時(shí)，會(huì)跳轉(zhuǎn)一個(gè)網(wǎng)頁(yè)：publish.twitter

然后在輸入框輸入你想引用的twitter地址，點(diǎn)擊確認(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)頁(yè)中的效果：

效果

The end.

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