跳到正文
OBSERVATION ENTRY站点

Shiro开源版支持主页随机一言

2025-03-071751 分钟2025-05-01 更新

起因#

今天本来打算想给Shiro主题添加一言功能,然后你猜怎么着,这玩意儿只有闭源版支持,emmmmm,有点抠门了吧,不过,有方法解决

image-20250307111205841
image-20250307111205841

解决方案?#

那很easy了

原理#

Shiro主题提供注入js脚本,那就从这里入手

image-20250307111321633
image-20250307111321633

创建js脚本#

在你自己的cdn下创建一个js文件

javascript
28LINES
// 以下用于Shiro主题首页默认一言替换
// 检查当前页面是否是首页
if (window.location.pathname = '/' || window.location.pathname = '/index.html') {
  // 延时 0.5 秒执行
  setTimeout(() => {
    // 使用 fetch 请求数据
    fetch('https://v1.hitokoto.cn')
      .then(response => {
        // 检查响应是否成功
        if (!response.ok) {
          throw new Error('网络响应失败');
        }
        return response.json(); // 解析 JSON 数据
      })
      .then(data => {
        // 获取目标元素
        const hitokotoElement = document.querySelector('small.text-center');
        if (hitokotoElement) {
          // 替换元素内容为获取的句子
          hitokotoElement.innerText = data.hitokoto;
          console.log("默认一言已替换");
        }
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
  }, 500); // 500 毫秒 = 0.5 秒
}

引入文件#

引入这个js文件,比如我的是https://fastly.jsdelivr.net/gh/sysfox/cdn/blog/custom.js

(注意:这个脚本里会有我自己写的功能,建议自己开一个js)

在后台引入:

image-20250307111753421
image-20250307111753421

(请确保符合json语法)

检查#

Vercel部署会有缓存,可以等一段时间#

生效#

image-20250307111919572
image-20250307111919572

控制台输出#

image-20250307112003330
image-20250307112003330

Happy Hacking !#

订阅
LICENSE
作者:Teror Fox
本文:Shiro开源版支持主页随机一言
链接:https://blog.trfox.top/posts/site/shiro-random-hitokoto
COMMENTS

评论

加载评论区…