Motivation

Today I originally planned to add the Hitokoto feature to the Shiro theme, and guess what? This feature is only supported in the closed-source version. Hmm, a bit stingy, isn't it? However, there is a way to solve it.

Solution?

That's quite easy.

Principle

The Shiro theme provides JavaScript injection, so let's start from there.

Create JavaScript Script

Create a JavaScript file under your own CDN.

// 以下用于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 秒
}

Import File

Import this JavaScript file, for example, mine is https://fastly.jsdelivr.net/gh/sysfox/cdn/blog/custom.js

(Note: This script contains functions I wrote myself; it's recommended to create your own JavaScript file.)

Import it in the dashboard:

(Please ensure it conforms to JSON syntax)

Check

Vercel deployments may have a cache; you can wait for a while.

Effective

Console Output

Happy Hacking!