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

目的

本文是一个详细的教程，告诉大家如何在Hexo博客中嵌入微博秀或者微博直播组件。

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

1. 微博秀是什么

   新浪微博秀，可以放置在你的博客、网站，或是其它支持html代码的位置，展示你的微博和粉丝，让更多人关注你。

2. 微博直播组件是什么

   可以让用户在您的网站上针对某一热点话题进行实时讨论，用户在此发1.布的微博将会发布到新浪微博。

3. 嵌入这两种组件的好处

   这两种组件能够让用户在博客网页中放入一个组件，微博秀可以用来展示个人的有关信息，如发表的微博，粉丝状态等，微博直播可以用来展示在某个话题下发表的所有微博。

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

   如果单纯的只是想不断更新博客动态，也可以选择每次都自己修改代码，但这样会非常麻烦，需要不断生成和上传代码。

   微博直播还可以允许不同的人同时更新动态。

准备工作

下面展示我使用微博秀的基础，有不一样的同学应当在接下来的过程里进行适当的修改以便于自己设置。

博客： Hexo
主题： Butterfly

Butterfly使用了pug来生成网页。

pug是一套外观优雅并且功能丰富的模板引擎，以前叫做jade。目前，越来越多的公司和开发者使用pug取代html作为模板语言。

如果你使用的是html (ejs)等，可以利用在线工具将两种代码进行转换。推荐：https://pughtml.com/

生成微博秀代码

1. 经过多次尝试，我发现因为这个页面要加载一个被认为不安全的脚本，所以在Chrome和Edge浏览器中无法正常打开，显示预览（如左图），最后我的解决方法是使用国产的浏览器，例如世界之窗浏览器（如右图），360安全浏览器亦可使用，但会导致你之后得清理360留下来的垃圾和流氓文件。

2. 进入微博秀官网或微博直播组件官网，并登录。这里有个bug，即点击页面中的登录是不起反应的，右上角的登录才可以。这可能是微博页面的代码经历了好几次改版，前后并没有实现良好的沟通。

3. 微博秀代码生成

   

   大家可以在基础设置和样式设置更改自己想要的颜色和各种设置。这里记得一定要在样式设置中任意更改一下颜色，让代码中出现 color。

   设置完毕后，点击“复制代码”复制左下角框中代码。

4. 微博直播代码生成

   如同第3步一样，同样生成代码，且复制代码。

5. 代码转换

   • 进入https://pughtml.com/
   • 将复制的代码填入
   

修改layout

1. 因为我使用了Butterfly主题，它是用pug进行排版的。
2. 打开目录themes\Butterfly\layout\includes\widget中的card_announcement.pug 文件。
3. 填入自己复制的代码即可。

进阶修改

1. Butterfly主题使用了黑暗模式，所以我们需要两个iframe，在不同的时候展示不同的iframe，如图所示修改

   

2. 图中所用到的代码（注意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')
   

   .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')
   

   按照我的修改设置颜色，使不同模式下的颜色如其一样。

3. 修改CSS让不同iframe在不同时候显示

   • 打开目录themes\Butterfly\source\css_mode 中的 darkmode.styl 文件

   • 填入weibo-light和weibo-dark的样式

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

完成修改

​ 在修改完成之后，通过hexo clean && hexo generate && hexo deploy部署自己的代码。

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

​ 如果有任何问题，请在下方评论区留言，我会尽快进行解答。

本文原始链接：https://blog.jiehua1995.xyz/post/add-weiboshow-in-Hexo-blog/
更多信息请访问我的个人博客
如有任何问题，请在个人博客此篇博文下评论区留言