惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园 - 三生石上(FineUI控件)
雷峰网
雷峰网
爱范儿
爱范儿
P
Proofpoint News Feed
Security Archives - TechRepublic
Security Archives - TechRepublic
Latest news
Latest news
The Hacker News
The Hacker News
Cyberwarzone
Cyberwarzone
博客园 - 【当耐特】
Project Zero
Project Zero
小众软件
小众软件
T
Tailwind CSS Blog
量子位
博客园 - 聂微东
I
Intezer
美团技术团队
S
SegmentFault 最新的问题
T
Tor Project blog
Spread Privacy
Spread Privacy
V
Vulnerabilities – Threatpost
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Jina AI
Jina AI
罗磊的独立博客
B
Blog RSS Feed
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
T
Troy Hunt's Blog
有赞技术团队
有赞技术团队
Google DeepMind News
Google DeepMind News
宝玉的分享
宝玉的分享
C
Cisco Blogs
L
LINUX DO - 热门话题
Last Week in AI
Last Week in AI
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
AI
AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Azure Blog
Microsoft Azure Blog
L
LINUX DO - 最新话题
Know Your Adversary
Know Your Adversary
GbyAI
GbyAI
Engineering at Meta
Engineering at Meta
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Recent Commits to openclaw:main
Recent Commits to openclaw:main
L
Lohrmann on Cybersecurity
The Register - Security
The Register - Security
L
LangChain Blog
博客园 - 叶小钗
T
Tenable Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC

kshao-blog-前端知识记录

win or mac clash 无 TUN 让 Antigravity、Chrome 强制 proxy(解决 Antigravity 无法加载选择 model、自动更新无法登录、跳转) 【大杂烩】在 pnpm 中直接修改 node_modules(.pnpm) 中的依赖项,项目中持久化 - pnpm 中的依赖处理、幽灵依赖、寻址规则等 在 html 中直接使用 Esm、Jsx 脚本快速调试和使用 React@19 和 Vue@3 源码,解决 React19 UMD 构建等问题 一键在本地批量检测并升级更新 package.json 中的模块依赖,ncu(npm-check-updates)在 npm、pnpm 或 workspace 项目中的使用教程 解决 Mac Docker Desktop 中启动出现的问题合集 通过阿里云、腾讯云无服务器搭建自定义的企业域名邮箱,实现在 QQ邮箱 收发等功能(附腾讯 SMTP 和 IMAP) 解决使用代理(clash 等)进行 SSH 连接(如 Github ssh key clone/push)出现 kex_exchange_identification 错误 静态文件资源 cdnjs, jsdelivr 抖音字节国内快速 CDN 镜像推荐【2025】- 仍在使用 bootcdn 和 staticfile CDN 请注意验证资源的完整性(SRI) pnpm monorepo 中管理依赖的最佳实践,与 Catalogs(目录)协议的使用(monorepo 中统一版本管理) Web 安全中的 Secure Contexts(安全上下文)- 解决在本地中使用 clipboard 或 Crypto 等 API 限制或关闭上下文限制 使用 serve 配合 openssl 或 mkcert 创建本地自签名可信任的证书 - 创建本地 TLS\SSL https 协议服务 利用 Github Actions 和 Acme 自动申请、更新和部署至阿里云、腾讯云 CDN Lets Encrypt SSl\TLS ECC RSA 双证书 【CSS】解决在 flex 容器中使用 align-content 或 justify-content 属性 center 居中时的溢出滚动和截断问题 - 理解 safe 关键字 在线工具 - 一键获取下载抖音无水印视频、抖音去水印解析工具、下载抖音无水印高清图集【2025 最新】 【React Router】v6 data router 在非组件(或工具方法)中如何优雅的跳转路由 【React】为什么路由跳转时页面滚动高度不会被重置(保留上个页面高度)?理解 history scrollRestoration 的场景与使用,以及如何使用 React Router 重置和跳转前保留滚动高度 【React】在本地 Html 中快速 debug(调试)React 源码 【React】结合源码和 EventLoop 分析 - 为什么 useLayoutEffect 会阻止 DOM 重绘(而 useEffect 闪烁)?为什么其内部 useState 会“同步”执行? React Compiler - 解放在函数中编程时的性能焦虑(React Conf 2024)附 Next 在线演示 在 github actions 中获取时间,并转换为中国标准时间(中国时区) 【npm】npm ci - npm clean install,在 CI、CD 中保持构建的一致性和可重复性 eslint 9.x 升级或使用指南,eslint.config.js 配置,包含 react、typescript、prettier 等常用配置升级迁移 使用 Spicetify 自定义 Spotify - 歌词翻译、全屏展示、主题替换 在 node 中快速代理请求(Proxy),解决跨域或请求转发问题 - http-proxy-middleware 修改请求体和返回 解决在 webstorm 或 idea 等 jetbrains 工具中遇到 Git 无法 force push,或 force push 灰色禁用无法点击(protected branches) hexo-seo-submit,Hexo 博客 SEO 优化插件 - 每日定时自动或手动提交链接至百度、Bing、Google,支持 Github Actions 和 Coding Jenkins 等CI(Hexo 插件编写) 一文吃透 pnpm 如何使用 workspace 构建 monorepo,与 npm、yarn 的用法对比(pnpm 9.x 内部安装依赖问题 link-workspace-packages) 【Node】Corepack - 解决 pnpm 或 yarn 的多版本管理、解决本地版本与 packageManager 中的版本一致性问题 解决 npm、cnpm 或 pnpm install 遇到 certificate has expired (证书已过期) npm、yarn、pnpm 设置最新国内镜像源(附官方镜像源和最新阿里源),以及 nrm 的使用教程【2025】 解决从 docker desktop 内镜像 linux 创建的容器,启动就停止、无法启动等问题(无进程容器) docker(docker desktop)中设置国内镜像源加速(阿里云、中科大),以及代理和容器代理设置,解决桌面端无法登陆就退出问题 【CSS】解决外边距重叠(重合)引起的 margin 垂直方向(top、bottom)不生效,无作用的问题 【CSS】CSS-Nesting:CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套 【CSS】解决移动端(高清方案)下在谷歌浏览器中出现 字体大小布局异常,和设置的 font-size 不符(Text Autosizer、Font Boosting) 【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has 【windows 11】使用 wePe 纯净 制作pe启动盘 安装\重装\升级 windows 11(windows 10)详细教程,附 windows 11 跳过联网、分区等教程 【webpack】Externals(外部扩展)浅析 - webpack 5 【Windows】一句话(一键、一分钟、一段代码)清除 Windows 11(10) 快捷方式角标(小箭头) 【Git】cherry-pick 使用场景介绍,如何在 WebStorm 中使用 cherry-pick;(从分支中提取 commit 功能) 【message-channel】了解频繁出现在框架的 Message Channel,及在事件循环(Event Loop)中的表现 【web-worker】浅析 useWorker 库如何只需函数方法即可在 worker 内运行;如何区分 Web Socket、Web Worker和Service Worker? 【React】理解学习 React 17中的批处理 与 18 批处理 为何用谷歌(Chrome)浏览器下载PDF时有时预览有时下载? 【less】Parent Selectors & 和 &&(多个父选择器的用法及回顾) 【React Router】在非组件(或工具方法)中如何优雅的跳转路由 - 理解 HashHistory 和 BrowserHistory 处理谷歌浏览器(google Chrome)https 站点将 http 资源自动转成 https - 附全站资源强制转 https vscode 国内直链接下载,提升(加速)下载速度 【css-tricks】从 flex 子元素超出父级(容器)宽度,探其原理 flex:1 时 width 的作用 linux,mac 终端(Terminal)上使用代理(http/https/socks5)提升速度,给 git 一键设置代理提升速度 修复 Win 11或10 Xbox Game Bar 录屏截屏打不开灰色等 ios,Windows 网页皆可平滑、惯性滚动(Smooth-scroll.js)- 博客、网站、web、JavaScript 【2022年】apple 苹果(ios)注册美服区(日区)ID教程(附免税地区及身份信息生成器)-时效:2022年2月 javaScript 文件上传 - input 上传 和 webAPi 上传(解决上传对 input 的依赖) Git 解决 pull 操作出现:不建议在没有为偏离分支指定合并策略时执行pull操作 一行代码解决谷歌浏览器出现:"您的连接不是私密连接" Nginx 中使用 cookie 灰度或分流 css 指定方向模糊 - 鸿蒙开机效果(animation 事件) PE 升级 windows11 解决不满足限制(绕开 TPM),顺带 surface pro 一键升级 windows11(无需 PE) 在 Hexo 中一键部署 github page 并同步 push 变更文件到指定分支(hexo-deployer-git) z390 + i79700 + rx560(讯景转蓝宝石) 双显卡双系统 - openCore 0.6x 黑苹果 BigSur 11.4(20F71) Progressive JPEG - Web 前端 渐进(模糊)加载图片 z390+英伟达1060+i7 9700 安装黑苹果教程(避坑)- MAC OS 10.13.6 饿了么外卖红包-百亿补贴(每天都可免费领),来自内部的优惠! Google AdSense 添加付款方式-使用银行外汇(招行外汇) ECMAScript2021 可用新特性 客户端或服务端 cookie 的设置、读取、携带问题 css 文字渐入效果,css 变量的进一步使用 setProperty Css 模拟赛博朋克 故障风格 按钮 Fetch、Ajax 请求遇到301或302时 记录前后端不同域名 携带 cookie,及如何处理 Chrome SameSite Mac下 Nginx、openssl,配置本地 Localhost Https 测试环境 在线生成短链接,新浪短链接 t.cn webStorm 开发,配置 ts(TypeScript)的 FileWatchers 微信小程序 - typeScript 的配置与热加载 win10 重装系统,电脑出现:"由于最近更改电脑硬件而无法正常启动",或重装卡在:"海内存知己"等问题解决方法 算法- js 二叉树,二叉查找树的基本实现及递归与循环的版本 异或运算符 ^ 理解与应用 面试 - js 在指定数组中找出不重复的两数之和为 target
在 Hexo 中使用 AI(Gemini、deepseek、Azure)生成文章摘要,支持自定义模板。hexo-ai-summaries 插件文档(默认适配主题 Butterfly)
kshao · 2024-06-20 · via kshao-blog-前端知识记录

前言

还在前言???帮 AI 快速总结嘛?哈哈~

本文为 hexo-ai-summaries 插件文档,插件主要功能是帮你插入 AI Html 至文章中,至于 Html 内容可自定,默认内容为适配 Gemini 和主题 ButterFly

获取 Gemini Pro API KEY

部署 API Proxy

Google PaLM API 限制使用区域,你需要部署中转服务

Netlify 注册繁琐?

你可能会因为 Netlify 的身份验证而停止了此教程,再提供个方案,好好看下去~

  • 使用阿里云的 serverless (云函数) 反向代理 AI 服务(理论大部分 AI 服务都可使用) - nginx serverless
  • 或你懂的修改代码,也可以直接将 Gemini 提供的 API 和 gemini-openai-proxy 部署至 阿里云等 serverless 服务中,注意 Gemini 的区域限制。

部署 Gemini OpenAI Proxy

这一步为可选,完成上面部署即可使用了。使用 赛博菩萨 cloudflare 部署该服务即可像使用 open ai 样使用 Gemini

修改:

  • var BASE_URL => Netlify 提供的域名 或者 你自己的 gemini 服务
var BASE_URL = "https://<your url>.netlify.app";
  • 找到 getToken 函数,修改内部的 apikey 为你的 Gemini API KEY
if (!rawApikey.includes("#")) {
  return {
    // apikey: rawApikey,
    apikey: 'your api key here',
    useBeta: false
  };
}
const apikey = 'your api key here';
  • 【可选】搜索 access-control-allow-origin 修改为你的域名

测试服务

你的 header 需要携带 Authorization,任意值即可。你可以在上述 getToken 函数中修改此逻辑。

curl https://cloudflare部署地址/v1/chat/completions \
    -H "Authorization: xx \
    -H "Content-Type: application/json" \
    -d '{
        "model": "gpt-4o",
        "messages": [{"role": "user", "content": "Hello"}],
        "temperature": 0.7
        }'

配置 hexo-ai-summaries 插件

安装

pnpm add hexo-ai-summaries

使用

hexo/_config.yml 中配置 hexo-ai-summaries

root/_config.yml

hexo-ai-summaries: enable: true aiSummaryApi: https://<cloudflare workers url>.workers.dev/v1/chat/completions prompt: 'xxx' maxToken: 2000 aiConfig: model: gpt-4o stream: true

在你的文章中也可主动关闭

title: xxx
date: xxx
categories: xxx
cover: xxx
# add this line to disable ai-summaries
ai-summaries: false

进阶

  1. 为了更好的让 ai 理解文章,传入至 ai 的内容为:文章标题:${tagConfig.title};文章目录:${tagConfig.toc};具体内容:${tagConfig.content},大部分情况下不需要设置该值,如需更改请修改 tagConfig 接受 document.querySelector的值。
  2. geminiConfig 中的 headersBoolean,你可以在 workers 中固定,此处 false 可以防止 options 请求

root/_config.yml

hexo-ai-summaries: enable: true aiSummaryApi: https://<cloudflare workers url>.workers.dev/v1/chat/completions # 只在该日期后的文章上生成 摘要 按钮 generateAfterDate: 2024/05 # optional # 文字数量限制 => String.length maxToken: 30000 prompt: You are a highly skilled AI trained in language comprehension and summarization. I would like you to read the text delimited by triple quotes and summarize it into a concise abstract paragraph. Aim to retain the most important points, providing a coherent and readable summary that could help a person understand the main points of the discussion without needing to read the entire text. Please avoid unnecessary details or tangential points. Only give me the output and nothing else. Do not wrap responses in quotes. Respond in the Chinese language. aiConfig: model: gpt-4o temperature: 0.7 # optional default undefined headers: { 'Content-Type': 'application/json' } # optional, default undefined stream: false # optional default undefined # 获取摘要内容的元素标签,一般不需要改 tagConfig: # optional title: .post-title content: .post-content toc: .toc-content

进进阶

如果你有其他的服务和样式,那你也可以使用该插件。hexo-ai-summaries 可将你的 html js css 插入文章中(.post-content 内)。
因为会将内容添加至 文章内容 最前端,若塞入整个 html 将会影响列表页的摘要展示,所以 cssjs 资源会以引入的方式加载(当然也会更加节省资源,和加快加载速度,有 CDN 的话)。会将你的文件生成在 public/hexo-ai-summaries 中。

hexo-ai-summaries:
  enable: true
  generateAfterDate: 2024/05
  customHtml:
    htmlFile: Gemini/gemini.html
    jsFile: Gemini/gemini.js
    styleFile: Gemini/gemini.css

prompt 进阶

prompt 中你可以让 Gemini 将相关词汇使用 "``" 回复,在渲染对话时会将其渲染为 code 标签。(目前仅支持此扩展)

缓存

你可以在 CFworkers 中使用 kV 缓存结果,或阿里云函数部署的可以使用 Nas 存储,插件在请求体中携带了 titleupdateTime,可以由此判断,具体逻辑不赘述。
你可以一次性的返回结果(保持结构体一致即可),插件也会 fake 出流式输出效果

使用 deepseek 等其他 AI 服务

不支持推理的 tokens 输出(未做推理的回复识别)

插件支持 OpenAI 格式的输出,兼容非流式输出的 API,如你的 API 服务不是 openAI 格式的,可以使用三方工具 format,如 LiteLLM

国内可以使用中转的 API 服务,也可以使用大厂提供的如 硅基流动火山引擎

推荐阅读

https://immmmm.com/gemini-pro-ai/
https://github.com/tardis-ksh/hexo-ai-summaries