如何给Hexo博客系统添加文章置顶

如何设置文章置顶

置顶原理说明

1. 文章列表会先按照top属性排序，有top属性的文章会显示在没有此属性的文章前面
2. 如果有多篇文章都设置了top属性，则会按照属性值的大小进行排序，数值越大，优先级越高
3. 置顶文章会在标题前面显示红色的”置顶”标签，方便识别
4. 没有设置top属性的文章仍然按照发布日期排序

基础置顶

最简单的置顶设置，将文章放在所有普通文章前面：

---
title: 重要公告
date: 2025-09-23 10:00:00
categories: 公告
top: 1  # 只要设置了top属性，就能置顶
---

多级置顶优先级

如果需要设置多篇置顶文章的优先级，可以使用不同的数值：

---
title: 最重要的公告
date: 2025-09-23 10:00:00
categories: 公告
top: 100  # 优先级最高
---

---
title: 次重要的公告
date: 2025-09-23 10:00:00
categories: 公告
top: 50  # 优先级次之
---

注意事项

1. 置顶功能仅在首页生效，在归档页和分类页不会生效
2. 建议合理使用置顶功能，不要过多置顶文章，以免影响用户体验
3. 当不需要置顶时，可以直接删除top属性
4. 如需禁用置顶功能，可以恢复原始的index.ejs文件

代码预览

<div class="posts-container">
            <% if (site.posts && site.posts.length > 0) { %>
                <% 
                // 获取所有文章并进行全局排序，实现真正的置顶功能
                var allPosts = site.posts.toArray().sort(function(a, b) {
                    // 先检查是否有置顶属性
                    var aHasTop = a.top !== undefined && a.top !== null && a.top !== 0;
                    var bHasTop = b.top !== undefined && b.top !== null && b.top !== 0;
                    
                    if (aHasTop && !bHasTop) return -1;
                    if (!aHasTop && bHasTop) return 1;
                    
                    // 如果都有置顶属性，则按置顶值降序排列
                    if (aHasTop && bHasTop) return b.top - a.top;
                    
                    // 否则按日期降序排列
                    return b.date - a.date;
                });
                
                // 处理分页 - 获取当前页应该显示的文章
                var pageSize = theme.per_page || 10;
                var startIndex = (page.current - 1) * pageSize;
                var endIndex = startIndex + pageSize;
                var posts = allPosts.slice(startIndex, endIndex);
                %>
                
                <% posts.forEach(function(post) { %>
                    <article class="article-card">
                        <h2 class="article-title">
                            <a href="<%= url_for(post.path) %>"><%= post.title %></a>
                        </h2>
                        <p class="article-excerpt" style="width: 300px; margin: 0 0 15px 0; font-size: 14px; line-height: 1.6; word-wrap: break-word; word-break: break-all;">
                            <% 
                            var content = strip_html(post.excerpt || post.content) || '';
                            var cleanContent = content.replace(/\s+/g, ' ').trim();
                            var excerptLength = theme.page.excerpt_length || 222;
                            var excerpt = cleanContent.length > excerptLength ? cleanContent.substring(0, excerptLength) + '...' : cleanContent;
                            %>
                            <%= excerpt %>
                        </p>
                        <div class="article-meta">
                            <span class="date">发布于 <%= date(post.date, 'YYYY-MM-DD') %></span>
                            <% if (post.categories && post.categories.length > 0) { %>
                                <span class="category">
                                    <a href="<%= url_for(post.categories.data[0].path) %>">
                                        <%= post.categories.data[0].name %>
                                    </a>
                                </span>
                            <% } %>
                        </div>
                    </article>
                <% }); %>
            <% } else { %>
                <div class="no-posts">
                    <p>暂无文章</p>
                </div>
            <% } %>
        </div>