给博客加一个每日成语模块

给博客加一个每日成语模块只要 10 行代码适用Hexo / Hugo / WordPress / Typecho / Ghost / 博客园以及任何能贴 HTML 的地方。全文代码可直接复制不依赖 jQuery、不用写后端、不用注册账号。先看效果在博客正文底部加上这个卡片每天凌晨自动换一条成语同一天所有访客看到的是同一条它带来的三个变化很实在页面活着—— 老访客每次进来都能看到新内容搜索引擎喜欢—— 每次抓取都拿到一段不一样的自然语言文本停留时长上升—— 总有人会点查看详解往下看。用的什么接口词海集 的免费开放 API。不用注册、不用申请 Key服务端已经开了 CORS前端直接fetch就能调。一共 3 个接口接口说明GET https://www.hdemba.cn/api/daily每日成语按日期轮换同一天全站同一成语GET https://www.hdemba.cn/api/idiom随机成语每次请求返回一条GET https://www.hdemba.cn/api/poem随机唐诗宋词含原文/api/daily的返回长这样{errno:0,data:{id:3521,word:一丝不苟,pinyin:yī sī bù gǒu,explanation:形容办事认真连最细微的地方也不马虎。,derivation:清·吴敬梓《儒林外史》,url:https://www.hdemba.cn/chengyu/3521.html},from:词海集 https://www.hdemba.cn}成语、拼音、释义、出处、详情页链接字段全是现成的。核心10 行代码dividdaily-cy/divscriptfetch(https://www.hdemba.cn/api/daily).then(rr.json()).then(res{constdres.data;document.getElementById(daily-cy).innerHTMLb${d.word}/b${d.pinyin}br${d.explanation}bra href${d.url} target_blank relnoopener查看出处/a;}).catch(()document.getElementById(daily-cy).textContent今日成语加载失败);/script把这两段粘进主题的侧边栏、页脚模板或者文章模板的正文之后保存刷新就能看到。能用之后再往下做三步升级它会从能跑变成好用。升级一加样式让它像博客的一部分#daily-cy{margin:28px 0;padding:18px 22px 14px;border:1px solid #e8e6e1;border-left:3px solid #8c5a2b;border-radius:10px;background:#fff;font-size:14.5px;line-height:1.9;color:#374151;}#daily-cy b{font-size:20px;letter-spacing:1px;color:#1f2329;}左边那道 3px 的棕色竖线是关键——它让卡片看起来像引用块而不是广告位观感完全不同。升级二一天只请求一次接口本身就是同一天返回同一条那这一天的重复请求全是浪费。用localStorage缓存当天结果constKEYdaily_chengyu;constpnString(n).padStart(2,0);consttoday${newDate().getFullYear()}-${p(newDate().getMonth()1)}-${p(newDate().getDate())};constboxdocument.getElementById(daily-cy);asyncfunctionloadDaily(){constcachedJSON.parse(localStorage.getItem(KEY)||null);if(cachedcached.datetoday)returnrender(cached.data);try{constresawaitfetch(https://www.hdemba.cn/api/daily);constjsonawaitres.json();if(json.errno!0)thrownewError(bad errno);localStorage.setItem(KEY,JSON.stringify({date:today,data:json.data}));render(json.data);}catch(e){cached?render(cached.data):(box.textContent今日成语加载失败);}}functionrender(d){box.innerHTMLb${d.word}/b${d.pinyin}br${d.explanation}bra href${d.url} target_blank relnoopener查看出处/a;}loadDaily();注意一个坑取日期别用new Date().toISOString().slice(0, 10)它返回的是UTC 日期——北京时间早上 8 点之前算出来的是昨天缓存就错位了。所以上面用的是本地时间自己拼。顺带说一句缓存做好了还有个额外好处访客刷新页面时成语不会闪一下正在加载…。升级三把冗长的出处洗干净derivation字段给的是整段古籍引文比如宋·苏洵《辨奸论》事有必至理有固然惟天下之静者乃能见微而知著。月晕而风础润而雨人人知之。卡片上其实只需要宋·苏洵《辨奸论》这一小截。绝大多数引文都以朝代·作者《书名》开头所以取到第一个书名号闭合就够用functionshortSource(s){if(!s||s无)return;constms.match(/^([^》]*》)/);returnm?m[1]:s.slice(0,20);}实测对《儒林外史》《封氏闻见记·打球》《红楼梦》这类引文都能正确截断取不到书名号时退化为前 20 个字符也不会出错。完整可运行版本存成daily-chengyu.html双击打开就能跑!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title每日成语/titlestylebody{font-family:Microsoft YaHei,sans-serif;background:#f7f6f3;padding:40px;}#daily-cy{max-width:560px;margin:0 auto;padding:20px 24px 16px;border:1px solid #e8e6e1;border-left:3px solid #8c5a2b;border-radius:10px;background:#fff;font-size:14.5px;line-height:1.9;color:#374151;}#daily-cy b{font-size:22px;letter-spacing:2px;color:#1f2329;}#daily-cy .py{font-family:Georgia,serif;color:#8c5a2b;font-size:13px;}#daily-cy .src{margin-top:12px;padding-top:10px;border-top:1px dashed #e8e6e1;font-size:12.5px;color:#6b7280;}/style/headbodydividdaily-cy正在加载今日成语…/divscriptconstKEYdaily_chengyu;constpnString(n).padStart(2,0);constnownewDate();consttoday${now.getFullYear()}-${p(now.getMonth()1)}-${p(now.getDate())};constboxdocument.getElementById(daily-cy);constshortSources{if(!s||s无)return;constms.match(/^([^》]*》)/);returnm?m[1]:s.slice(0,20);};constrenderd{box.innerHTMLb${d.word}/bdiv classpy${d.pinyin}/div${d.explanation}div classsrc出处${shortSource(d.derivation)||—}a href${d.url} target_blank relnoopener查看详解/a 数据来源词海集/div;};(async(){constcachedJSON.parse(localStorage.getItem(KEY)||null);if(cachedcached.datetoday)returnrender(cached.data);try{constjsonawait(awaitfetch(https://www.hdemba.cn/api/daily)).json();if(json.errno!0)thrownewError(bad errno);localStorage.setItem(KEY,JSON.stringify({date:today,data:json.data}));render(json.data);}catch(e){cached?render(cached.data):(box.textContent今日成语加载失败);}})();/script/body/htmlFAQQ我的博客是 HTTPS接口也是 HTTPS会有混合内容警告吗不会。接口就是https://www.hdemba.cn和你站点同协议。Q会跨域报错吗服务端已经返回Access-Control-Allow-Origin: *前端直接调就行不需要 JSONP也不需要自己搭反代。Q接口挂了会不会把页面搞坏所有请求都包在try/catch里失败只影响这一个卡片显示兜底文案。配合升级二的本地缓存接口短时间挂掉时访客看到的还是上一次成功的内容。Q免费有什么条件接口文档里写明请求返回请保留来源字段。也就是页面上别把数据来源词海集这行删掉。合理——这是作者持续维护 3 万条成语、7 万多首诗词数据的动力顺手保留一下就好。结尾接口文档含全部字段说明和前端示例https://www.hdemba.cn/api/下一篇写《用免费的随机诗词 API 做一个签名档》调的是同一家的/api/poem重点讲 CSS 竖排排版——把一首诗排成卷轴的样子感兴趣的可以先点个关注。