Hexo 自定义 widget

文章目录

1. 1. 分析
2. 2. 实现
   1. 2.1. 一. 创建控制开关
   2. 2.2. 二. 创建热门评论 widget
   3. 2.3. 三. 添加自定义的样式

Hexo 为我们提供了很多常用的 widget，但是，这些 widget 可能不能满足我们的要求，比如我们需要最新评论。为此，特写此文，希望帮助更多人添加自定义的widget。

分析

Hexo 首页的 widget，说白了其实就是一段网页代码。我们需要做的是，在不破坏原有代码结构，写出易维护，可随时控制显示与否的 widget。

我用的 jacman 主题，在这个主题下有很多 widget 可用，在主题下的 _config.yml 文件中能够查看所有支持的 widget，并且能够控制显示哪些 widgets。自定义的 widget 需要考虑几个问题？第一，数据源问题(本文暂不做详细介绍)；第二，数据显示的问题；

关于数据显示问题，我们需要考虑到代码不能太耦合，尽量解耦，而且要尽量少对已有模块尽心修改；具体到实现就是我们的 widget 要独立，不与其他模块混合，我们的 widget 要样式和结构也要分离。

对 jacman 主题代码阅读和分析得出以下结论:

1. widget 控制显示与否开关在主题的 _config.yml 配置文件中；
2. 通过阅读 _partial/sidebar.ejs ，发现页面上的 widget 是通过遍历主题的 _config.yml 配置文件来控制的。真正的实现是在 _widget 目录下，文件名称是 _config.yml 中配置名称（文件后缀 .ejs）；
3. 通过阅读 _widget 目录下的 widget，发现本文件夹下只实现页面的布局；

4. 我们 widget 布局的样式文件在主题文件夹下的 source/css/_partial/aside.styl 文件；

   上面是对以后框架实现的分析，下文将用具体的例子来实现。

实现

我们这次实现热门评论 widget，数据源为多说的热门评论。多说评论传送门多说下线了，汗。具体实现步骤如下：

一. 创建控制开关

在主题的 _config.yml 配置文件中添加热门评论开关 hot-articles，具体代码如下：

#### Widgets
widgets: 
- github-card
- hot-articles # 热评文章

上述代码中，widgets 下的 widget 代码顺序即为显示的顺序。

二. 创建热门评论 widget

在 _widget 添加 hot-articles.ejs 文件，实现代码如下：

<div class="hotarticles">
  <p class="asidetitle"><%= __('hot_articles') %></p>

  <!-- 多说热评文章 start -->
  <div class="ds-top-threads" data-range="monthly" data-num-items="5"></div>
  <!-- 多说热评文章 end -->

</div>

如果未使用多说评论，需要额外添加以下代码：

<!-- 多说热评文章 start -->
<div class="ds-top-threads" data-range="monthly" data-num-items="5"></div>
<!-- 多说热评文章 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
  var duoshuoQuery = {short_name:"ihongqiqu"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script>
<!-- 多说公共JS代码 end -->

三. 添加自定义的样式

热门评论文章是一个列表，我们需要去掉 li 之前的点，我的样式代码如下：

//hot-articles
.hotarticles
  @media mini
    width 45%
    float left
    margin 0 5% 0 0
  @media tablet 
    width 100%
    float none
    margin 1em 0 0
  li 
    border-bottom 1px solid color-gray
    list-style-type none
    a
      display block
      padding 0.5em 5%
      &:hover
        color color-theme

大功告成！生成一下，在本地预览发现我们的 widget 出来了。

到此我们在 hexo 中添加 widget 的功能就实现了，希望能够帮助到你。如有任何问题，欢迎反馈，我的邮箱 jingle1267@163.com 。

本文地址 http://94275.cn/2016/11/09/hexo-add-widget/ 作者为 Zhenguo