By

文章目录
  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，具体代码如下：

1
2
3
4
#### Widgets
widgets: 
- github-card
- hot-articles # 热评文章

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

二. 创建热门评论 widget

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

1
2
3
4
5
6
7
8
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 多说热评文章 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 之前的点，我的样式代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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

author:Zhenguo
Author: Zhenguo      Blog: 94275.cn/     Email: jinzhenguo1990@gmail.com
I have almost 13 years of application development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for IT tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 分析
  2. 2. 实现
    1. 2.1. 一. 创建控制开关
    2. 2.2. 二. 创建热门评论 widget
    3. 2.3. 三. 添加自定义的样式
返回顶部