Hexo + RaisFast

为你的 Hexo 博客添加评论、搜索、用户登录和电商功能。RaisFast 作为后端完美集成。

概述

Hexo 是中文开发者最流行的静态博客框架。RaisFast 为 Hexo 博客补齐后端能力——评论、搜索、用户系统、甚至电商和支付。

Hexo    → 生成静态博客页面
RaisFast → 评论、搜索、认证、电商、支付

前提条件

已安装 Hexo
已安装 RaisFast（安装指南 →）

步骤 1：启动 RaisFast

raisfast

步骤 2：配置 Hexo 连接 RaisFast

在 Hexo 的 _config.yml 中添加 RaisFast 配置：

# _config.yml
raisfast:
  apiBase: http://localhost:9898/api/v1
  enableComments: true
  enableSearch: true

步骤 3：添加评论

创建 Hexo 评论组件。在主题的 layout/_partial/ 下创建 raisfast-comments.ejs：

<!-- layout/_partial/raisfast-comments.ejs -->
<% if (config.raisfast && config.raisfast.enableComments) { %>
<div id="raisfast-comments" data-post-id="<%= page.path %>"></div>
<script>
  (function() {
    var apiBase = '<%= config.raisfast.apiBase %>';
    var postId = document.getElementById('raisfast-comments').dataset.postId;

    fetch(apiBase + '/comments?post_id=' + encodeURIComponent(postId))
      .then(function(r) { return r.json(); })
      .then(function(data) {
        var html = '';
        data.data.items.forEach(function(c) {
          html += '<div class="comment"><strong>' + c.author_name + '</strong><p>' + c.content + '</p></div>';
        });
        html += '<form id="rf-comment-form">'
          + '<input name="author_name" placeholder="昵称" required>'
          + '<textarea name="content" placeholder="评论内容" required></textarea>'
          + '<button type="submit">提交评论</button>'
          + '</form>';
        document.getElementById('raisfast-comments').innerHTML = html;

        document.getElementById('rf-comment-form').addEventListener('submit', function(e) {
          e.preventDefault();
          fetch(apiBase + '/comments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              post_id: postId,
              author_name: this.author_name.value,
              content: this.content.value,
            })
          }).then(function() { location.reload(); });
        });
      });
  })();
</script>
<% } %>

在文章模板中引入：

<!-- layout/_partial/article.ejs 末尾 -->
<%- partial('raisfast-comments') %>

步骤 4：添加搜索

创建搜索组件 layout/_partial/raisfast-search.ejs：

<!-- layout/_partial/raisfast-search.ejs -->
<% if (config.raisfast && config.raisfast.enableSearch) { %>
<div id="raisfast-search">
  <input type="text" id="rf-search-input" placeholder="搜索文章...">
  <div id="rf-search-results"></div>
</div>
<script>
  document.getElementById('rf-search-input').addEventListener('input', function() {
    if (this.value.length < 2) return;
    fetch('<%= config.raisfast.apiBase %>/search?q=' + encodeURIComponent(this.value))
      .then(function(r) { return r.json(); })
      .then(function(data) {
        document.getElementById('rf-search-results').innerHTML =
          data.data.items.map(function(p) {
            return '<a href="' + p.url + '">' + p.title + '</a><p>' + p.excerpt + '</p>';
          }).join('');
      });
  });
</script>
<% } %>

步骤 5：生成和部署

# 生成静态文件
hexo generate

# 本地预览（Hugo + RaisFast 同时运行）
hexo server         # http://localhost:4000
raisfast             # http://localhost:9898

# 生产部署
hexo deploy          # 部署到你的静态托管
# RaisFast 部署到同一台服务器或独立服务器

Nginx 配置

server {
    listen 80;
    server_name yourdomain.com;

    # Hexo 静态文件
    location / {
        root /var/www/hexo/public;
        try_files $uri $uri/ /index.html;
    }

    # RaisFast API
    location /api/ {
        proxy_pass http://127.0.0.1:9898;
    }
}