本文是一個詳細(xì)的教程，告訴大家如何在Hexo博客中嵌入微博秀或者微博直播組件。

為什么要向博客中添加微博秀/微博直播組件？1.微博秀是什么

新浪微博秀，可以放置在你的博客、網(wǎng)站，或" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 向Hexo博客添加微博秀（pug模板）

向Hexo博客添加微博秀（pug模板）

時間：2023-05-18 05:09:01 | 來源：網(wǎng)站運營

時間：2023-05-18 05:09:01 來源：網(wǎng)站運營

向Hexo博客添加微博秀（pug模板）：目的

本文是一個詳細(xì)的教程，告訴大家如何在Hexo博客中嵌入微博秀或者微博直播組件。

為什么要向博客中添加微博秀/微博直播組件？

1.微博秀是什么

新浪微博秀，可以放置在你的博客、網(wǎng)站，或是其它支持html代碼的位置，展示你的微博和粉絲，讓更多人關(guān)注你。
2.微博直播組件是什么

可以讓用戶在您的網(wǎng)站上針對某一熱點話題進(jìn)行實時討論，用戶在此發(fā)1.布的微博將會發(fā)布到新浪微博。
3.嵌入這兩種組件的好處

這兩種組件能夠讓用戶在博客網(wǎng)頁中放入一個組件，微博秀可以用來展示個人的有關(guān)信息，如發(fā)表的微博，粉絲狀態(tài)等，微博直播可以用來展示在某個話題下發(fā)表的所有微博。

4.為什么不用其他方法？

如果單純的只是想不斷更新博客動態(tài)，也可以選擇每次都自己修改代碼，但這樣會非常麻煩，需要不斷生成和上傳代碼。

微博直播還可以允許不同的人同時更新動態(tài)。

準(zhǔn)備工作

下面展示我使用微博秀的基礎(chǔ)，有不一樣的同學(xué)應(yīng)當(dāng)在接下來的過程里進(jìn)行適當(dāng)?shù)男薷囊员阌谧约涸O(shè)置。

博客： Hexo主題： ButterflyButterfly使用了pug來生成網(wǎng)頁。

pug是一套外觀優(yōu)雅并且功能豐富的模板引擎，以前叫做jade。目前，越來越多的公司和開發(fā)者使用pug取代html作為模板語言。
如果你使用的是html (ejs)等，可以利用在線工具將兩種代碼進(jìn)行轉(zhuǎn)換。推薦：https://pughtml.com/

生成微博秀代碼

??！要特別注意使用的瀏覽器??！

  1. 經(jīng)過多次嘗試，我發(fā)現(xiàn)因為這個頁面要加載一個被認(rèn)為不安全的腳本，所以在Chrome和Edge瀏覽器中無法正常打開，顯示預(yù)覽（如左圖），最后我的解決方法是使用國產(chǎn)的瀏覽器，例如世界之窗瀏覽器（如右圖），360安全瀏覽器亦可使用，但會導(dǎo)致你之后得清理360留下來的垃圾和流氓文件。



2. 進(jìn)入微博秀官網(wǎng)或微博直播組件官網(wǎng)，并登錄。這里有個bug，即點擊頁面中的登錄是不起反應(yīng)的，右上角的登錄才可以。這可能是微博頁面的代碼經(jīng)歷了好幾次改版，前后并沒有實現(xiàn)良好的溝通。


3. 微博秀代碼生成

大家可以在基礎(chǔ)設(shè)置和樣式設(shè)置更改自己想要的顏色和各種設(shè)置。這里記得一定要在樣式設(shè)置中任意更改一下顏色，讓代碼中出現(xiàn) color。

設(shè)置完畢后，點擊“復(fù)制代碼”復(fù)制左下角框中代碼。

如同第3步一樣，同樣生成代碼，且復(fù)制代碼。

修改layout

注意是不是pug體系，如果是ejs體系就填入之前你復(fù)制的代碼

  1. 因為我使用了Butterfly主題，它是用pug進(jìn)行排版的。
  2. 打開目錄themes/Butterfly/layout/includes/widget中的card_announcement.pug 文件。
  3. 填入自己復(fù)制的代碼即可。

進(jìn)階修改

黑暗模式修改

pug .weibo-light(style='width:100%; overflow:hidden') iframe(width='105%', height='300', frameborder='0', scrolling='300', style='overflow: hidden; margin-top:-25px;', src='https://widget.weibo.com/livestream/listlive.php?language=zh_cn&width=0&height=300&uid=3826421909&skin=9&refer=0&appkey=&pic=1&titlebar=0&border=0&publish=0&atalk=1&recomm=0&at=0&colordiy=1&atopic=%E9%9D%92%E8%A1%8C%E4%B8%89&color=FFFFFF,FFFFFF,000000,666666,FFFFFF,FFFFFF&dpc=1')pug .weibo-dark(style='width:100%; overflow:hidden') iframe(width='106%', height='300', frameborder='0', scrolling='300', style='overflow: hidden; margin-top:-25px;', src='https://widget.weibo.com/livestream/listlive.php?language=zh_cn&width=0&height=300&uid=3826421909&skin=9&refer=0&appkey=&pic=1&titlebar=0&border=0&publish=0&atalk=1&recomm=0&at=0&colordiy=1&atopic=%E9%9D%92%E8%A1%8C%E4%B8%89&color=202020,202020,a1a1a1,d9d9d9,202020,202020&dpc=1')按照我的修改設(shè)置顏色，使不同模式下的顏色如其一樣。

//weibo xiu .weibo-light display: none .weibo-dark display: block

完成修改

? 在修改完成之后，通過hexo clean && hexo generate && hexo deploy 部署自己的代碼。

? 如果成功，就開始享受自己的博客吧。

? 如果有任何問題，請在下方評論區(qū)留言，我會盡快進(jìn)行解答。

關(guān)鍵詞：模板

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉