Hexo 博客一行代码接入 Friend Flow 友链联盟

(function (id, api, self, max) {
  var c = document.getElementById(id);
  if (!c) return;

  function esc(s) {
    if (!s) return "";
    var d = document.createElement("div");
    d.textContent = s;
    return d.innerHTML;
  }

  function resIcon(i) {
    if (!i) return "";
    if (i.indexOf("http") === 0) return i;
    return api + i;
  }

  function fmtDate(s) {
    try {
      return new Date(s).toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      });
    } catch (e) {
      return s;
    }
  }

  function render(data) {
    var list = data.slice().sort(function () {
      return Math.random() - 0.5;
    });

    var h = '<div class="ff-grid">';

    for (var i = 0; i < list.length; i++) {
      var f = list[i];
      var ic = resIcon(f.icon);
      var arts = f.recentArticles || [];

      h += '<div class="ff-card"><div class="ff-card-header">';
      h +=
        '<a target="_blank" href="' +
        esc(f.url) +
        '" rel="noopener">' +
        '<img class="ff-card-avatar" src="' +
        esc(ic) +
        '" alt="' +
        esc(f.name) +
        '" loading="lazy"/></a>';
      h +=
        '<div class="ff-card-info">' +
        '<a class="ff-card-name" target="_blank" href="' +
        esc(f.url) +
        '" rel="noopener">' +
        esc(f.name) +
        "</a>";
      h +=
        '<div class="ff-card-desc">' + esc(f.description) + "</div></div></div>";

      if (arts.length > 0) {
        h += '<div class="ff-card-articles">';
        var n = Math.min(arts.length, max);
        for (var j = 0; j < n; j++) {
          var a = arts[j];
          var t = a.publishTime ? fmtDate(a.publishTime) : "";
          h +=
            '<a class="ff-article-item" target="_blank" href="' +
            esc(a.url) +
            '" rel="noopener">' +
            '<span class="ff-article-title">' +
            esc(a.title) +
            "</span>";
          if (t) h += '<span class="ff-article-time">' + t + "</span>";
          h += "</a>";
        }
        h += "</div>";
      }

      h += "</div>";
    }

    h += "</div>";
    c.innerHTML = h;
  }

  var url = api + "/api/friend-links";
  if (self) url += "?exclude=" + encodeURIComponent(self);

  fetch(url)
    .then(function (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then(render)
    .catch(function (e) {
      console.error("Friend Flow:", e);
      c.innerHTML =
        '<div class="ff-error">' + (e.message || "Fetch failed") + "</div>";
    });
});

'use strict';

var fs = require('fs');
var path = require('path');

var DIR = path.join(hexo.base_dir, 'source', '_data', 'friend-flow');
var CSS = fs.readFileSync(path.join(DIR, 'style.css'), 'utf8').trim();
var JS_TEMPLATE = fs.readFileSync(path.join(DIR, 'template.js'), 'utf8').trim();

hexo.extend.tag.register('friendflow', function () {
  var config = hexo.config.friend_flow || {};
  var apiBase = (config.api_base || '').replace(/\/+$/, '');
  var selfUrl = (config.self_url || '').replace(/\/+$/, '');
  var maxArticles = config.articles_per_card || 5;

  if (!apiBase) {
    return '<div style="text-align:center;color:#999;padding:40px 0">' +
      'Friend Flow: please set friend_flow.api_base in _config.yml</div>';
  }

  var id = 'ff-' + Math.random().toString(36).substr(2, 8);

  // 将模板 IIFE 转为立即执行，注入运行时参数
  var js = JS_TEMPLATE
    .replace(/^\(function\s*/, '(function ')
    .replace(/\}\);$/, '})("' + id + '","' + apiBase + '","' + selfUrl + '",' + maxArticles + ');');

  return '<style>' + CSS + '</style>' +
    '<div id="' + id + '" class="ff-container">' +
    '<div class="ff-loading"><span class="ff-spinner"></span></div>' +
    '</div>' +
    '<script>' + js + '</script>';
});