故事背景

最近一年，持续的各种 AI 落地，也曾想着给博客做点什么集成，忙于工作无暇深入折腾，到头来都是 Pending 🤣，今天总算是稍微改一下下（对，全程不到三分钟的那种）。
刚好朋友 @赖勇浩 搞的产品「红头条」出了个博客 AI 摘要的功能，干脆借个东风，给博客做了下集成。

根据 @赖勇浩 的自述，因为「红头条」本来就给很多博客文章做了摘要了，搞了个方案，给大家放到自己的博客里面去。这样大家就不用对接 OpenAI，也不用出钱。大概效果嘛，可以参考下面这张图。

WordPress 集成红头条「AI摘要」-诺墨的博客站

如何集成红头条博客 AI 摘要

集成前，博客需要满足：

  • 支持 RSS，可以是 RSS 1.0/2.0、Feed、Atom 等协议，便于抓取内容生成摘要。
  • 站点被「红头条」收录，未收录可以访问 https://xhh.club/ 联系勇浩做个收录（ 🤷‍♂️ 其实他完全可以搞个提交地址，然后走自动化的，估计做的太急，还没跟上）。

集成其实很简单，引入一个 JS，当网站被访问时，触发请求集成进来的 JS，如果红头条已经收录并完成了摘要生成，就会自动获取对应的内容并展示在页面指定的一个位置上。

Step1 安装 Head, Footer and Post Injections 插件

这一步大部分人可以跳过了。但凡折腾 WordPress 的，基本都知道怎么通过博客后台修改 JS/CSS（对，就是个像百度统计那样集成），大部分的主题甚至还自带了修改 JS / CSS 的功能面板，还不知道的只能自行百度了。。。摊手.jpg

Step2 在页面植入 红头条的 AI 摘要 JS

以「Head, Footer and Post Injections」为例，安装后可以在「设置 -> Head and Footer」菜单中找到它，然后切换到「Posts」标签页，表示代码只插入到文章页。然后在「BEFORE THE POST CONTENT」下的 DESKTOP 下复制粘贴代码。

WordPress 集成红头条「AI摘要」-诺墨的博客站

贴一下具体的代码。。。

<script type="text/javascript">
// 可修改，摘要将显示在这个选择器选中的元素之上。
// var _xhh_selector = ".czr-wp-the-content";
var _xhh_selector = "#articlexxx";
// 可修改，定制最外层 DIV 的风格。
// 默认限制宽度为 750px，上下加 8px 的镶边，4 像素圆角。
var _xhh_style = "max-width: 750px; margin:8px 0px; border-radius: 4px;";

// 以下部分不要改动
var host = 'http://xhh.club';
var _xhh_service_url = host + '/summarize-this/';
(function() {
  var smmr = document.createElement("script");
  smmr.src = host + "/static/js/summarize_this.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(smmr, s);
})();
</script>

代码中的 _xhh_selector 可以修改，安装了不同的 WP 主题是会不一样，可以通过浏览器右键菜单的「检查」功能来查看自己博客的内容 DIV 是哪个，多数时候可能是 .post-content 这样子。。

注意事项

WordPress 有很多插件，有些会改变 URL，比如「Google Analytics for WordPress by MonsterInsights」会把 RSS Feed 中的 URL 加上一些 UTM 参数，但从文章列表点开文章的 URL 是不带这些参数的。「红头条」的AI摘要依赖URL来查找对应的摘要，出现这种情况时就会出找不到摘要。所以如果在用「Google Analytics for WordPress by MonsterInsights」或类似的插件，需要禁用掉。

最后

上文大半内容来自 @赖勇浩 ，趁着这个机会就这么水一篇博文吧。。。 🤣