文章目录
  1. 1. 边栏Widget - 最新随笔
  2. 2. 创建Filter - 文章尾部增加版权信息

用Hexo搭建本博客至今为止,感觉不错,管理起来很方便,Markdown排版文字的确很赞。接下来这一篇文章想更为深入的探讨,比如如何编程的方式来修改Hexo成更为灵活的布局或创建新的功能:

边栏Widget - 最新随笔

可直接自己在模板template写或通过帮助创建Hexo helper plugin来实现。在此分享后者的做法:

代码原理

获取指定目录或全站的随笔并排序遍历输出而已

<% site.categories.findOne({name: 'project'}).posts.sort('date', -1).each(function(post){ %>
    <li>
      <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
    </li>
<% }) %>
  • 执行代码安装插件recent_posts

    npm install hexo-helper-recent_posts --save
    
  • 在主题目录下的_widget目录下新建widget文件recent_posts.ejs (比如ROOT\themes\jacman\layout_widget),代码如下(如有必要可自定义修改ulClass和liClass并添加相关的样式):

    <div class="linkslist">
        <p class="asidetitle"><%= __('recent_posts') %></p>
        <div class="linkslist clearfix">
            <%- recent_posts({     count: 6, 
                                ulClass: '',
                                liClass: ''}) %>
        </div>
    </div>    
    
  • 打开主题_config.yml, 启用recent_posts这一widget:

    #### Widgets
    widgets: 
    - github-card
    - category
    - tag
    - recent_posts // 启用recent_posts
    - links
    ##- douban
    - rss
    ##- weibo
    

相关链接:

hexo-helper-recent_posts

https://github.com/hexojs/hexo/issues/459

Querying posts in Hexo

https://github.com/JamesPan/hexo-theme-icarus/blob/master/layout/_widget/recent_posts.ejs

创建Filter - 文章尾部增加版权信息

Hexo博客系统天生具有良好的可扩展性,Hexo的插件基本上分为Deployer、Filter、Generator、Renderer、Tag等很多种类。其中Filter插件可用于修改一些特定的数据。比如这种before_post_render Filter会在文章正式渲染之前执行,具体的执行和渲染步骤可以参见关于渲染的官方文档

相关链接:

为Hexo博客的每一篇文章自动追加版权信息

文章目录
  1. 1. 边栏Widget - 最新随笔
  2. 2. 创建Filter - 文章尾部增加版权信息