如何让文章C位出道~

详情

首先修改/node_modules/hexo-generator-index/lib/generator.js文件,添加置顶功能:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后修改/themes/indigo/layout/_partial/post.ejs文件,给索引页面增加置顶样式:

<%- partial('post/toc', { post: post}) %>
<article id="<%= post.layout %>-<%= post.slug %>"
  class="post-article article-type-<%= post.layout %> fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title"><%- post.title %></h1>
        <div class="post-meta">
            <%- partial('post/date', {date_format: config.date_format}) %>
            <%- partial('post/category') %>
            <% if (post.top>0) { %>
                <span><icon class="icon icon-thumb-tack icon-pr"></icon><font color="ff4081">置顶</font></span>
            <% } %>            
            <%- partial('plugins/page-visit') %>
        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <%- post.content %>
        </div>

        <%- partial('post/copyright') %>
        <%- partial('post/reward-btn') %>

        <div class="post-footer">
            <%- partial('post/tag') %>

            <%- partial('post/share-fab') %>

        </div>
    </div>

    <%- partial('post/nav') %>

    <%- partial('post/comment') %>
</article>
<%- partial('post/reward') %>

之后修改/themes/indigo/layout/_partial/index-item.ejs文件,给正文页面增加置顶样式:

<article id="<%= post.layout %>-<%= post.slug %>"
  class="article-card article-type-<%= post.layout %>" itemprop="blogPost">

    <div class="post-meta">
        <%- partial('post/date', {date_format: config.date_format}) %>
        <%- partial('post/category') %>
        <% if (post.top>0) { %>
            <span><icon class="icon icon-thumb-tack icon-pr"></icon><font color="ff4081">置顶</font></span>
        <% } %>
    </div>

    <%- partial('post/title', { hasLink: true }) %>

    <div class="post-content" id="post-content" itemprop="postContent">

    <% if(theme.excerpt_render) { %>
        <%- post.excerpt || post.content %>
    <% } else { %>
        <%- post.excerpt ? strip_html(post.excerpt) : truncate(strip_html(post.content), {
            length: theme.excerpt_length
        }) %>
    <% } %>

        <a href="<%- url_for(post.path) %>" class="post-more waves-effect waves-button">
            <%= __('post.continue_reading') %>
        </a>
    </div>
    <% if(post.tags && post.tags.length){ %>
    <div class="post-footer">
        <%- partial('post/tag') %>
    </div>
    <% } %>
</article>

最后大功告成,只需要在.md文件中加入top初始化参数,比如:

title: Hexo置顶文章
date: 1111-11-11 11:11:11
tags: Hexo
categories: Hexo
top: 1
  • 当top的值取0的时候,表示默认排序,即是按照时间顺序来排序。
  • 当top的值取1到无穷大(最好取整数)的时候,值越高越靠前。

参考:
解决Hexo-theme-indigo的置顶问题