Hexo-next-weibo秀

微博秀代码的获取

我们要登录新浪微博开放平台来获取微博秀的代码

新建微博组件

在themes/next/layout/_marco目录下面新建weibo.swig这个组件

{% if true %}
  <div class="widget-wrap">
    <h3 class="widget-title">Weibo Show</h3>
    <div class="widget-weibo">
      <iframe width="100%" height="550" class="share_self"  frameborder="0" scrolling="no" src="//widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=5&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=5143642701&verifier=c044f752&dpc=1"></iframe>
    </div>
  </div>
{% endif %}

将微博秀的样式放在themes/next/source/css/_common/components/sidebar目录下面的sidebar.styl

.widget-title{
  font-size: 14px;
  font-weight: 600;
  text-align:center;
}

.widget-weibo{
  text-shadow: 0 1px #fff
  border-radius: 3px
}

微博秀组件的引用

在themes/next/layout/_marco目录下面的sidebar.swig组件里面引入

具体的位置视情况而定，我是放在友情链接下面的

{% if theme.links %}

 ...

{% endif %}

{% include './weibo.swig' %}

踩过的坑

1、本地预览的时候要将localhost:4000替换成127.0.0.1，否则看不到

2、直接在微博里面复制的微博秀代码包含http://widget.weibo.com…,一定记得将http去掉，否则会谷歌的https认为是不安全链接，被浏览器拦截。