主题简述
WIKI文档：https://docs.fuukei.org/Sakurairo/AI-Annotations/
项目地址：https://github.com/mirai-mamori/Sakurairo
个人优化项
残留问题
- 内建封面API有问题
- 资源未全面OSS
- 未开启静态和缓存
插件列表
- WPCode Lite（方便优化主题，不改动主题源代码，以后可以直接升级版本）
- WP Editor.md（MD编辑器）
- WPQiNiu(七牛云对象存储插件)
- IMGspider(方便网上
抄袭借鉴文章拉图)
图片默认连接到媒体
//图片默认连接到媒体文件(原始链接)
update_option('image_default_link_type', 'file');
以上代码添加到function函数文件中
主题CSS小细节修改
/* 隐藏黄金徽章存在问题的粒子效果，修改级别可以修改exhibition.php文件 */
.medal-ambient{display:none;!important}
.medal-fleck{display:none;!important}
.medal-pulse{display:none;!important}
/* 文章的标题H2H3下划线优化 */
.entry-content h2:after {
bottom: -3px !important;
left: 0% !important;
width: 100% !important;
height: 0.35em !important;
opacity: 0.3 !important;
}
/*文章目录 字体 竖线 左右间隔 */
.toc-link::before {height:100% !important;opacity: 0.5;}
a.toc-link { font-size: 14px !important;}
.toc>.toc-list li { margin: 3px 0px 3px 0px !important;}
/*文章目录 宽度放大 */
.toc-container { width: 290px !important;right: -20vw !important;}
主题自带短代码 v3.0
本主题预置了多种多代码，您可以在文章中使用他们：
提示块[ noway]这是禁止提示块[/noway]
这是禁止提示块
允许提示块[ buy]这是允许提示块[/buy]
这是允许提示块
任务提示块[ task]这是任务提示块[/task]
这是任务提示块
警告提示块[ warning]这是警告提示块[/warning]
这是警告提示块
折叠信息块[ collapse title="这是收缩信息块，这里是标题"]这里是信息[/collapse]
这是收缩信息块，这里是标题
GitHub 仓库信息块
[ ghcard path="#GitHub 用户名#/#仓库名#"][/ghcard]
将 #GitHub 用户名# 替换为您的用户名、 #仓库名# 替换为您的仓库名：例如：
卡片信息块
[ showcard icon="#icon#" title="#标题#" img="#图片链接#" color="#cce1eb"]#链接#[/showcard]
#icon# 替换为 FontAwesome 6 icon
#标题# 替换为卡片标题
#图片链接# 替换为图片 URL
#链接# 替换为超链接
聊天气泡
[ conversations avatar="#头像#" direction="#row#"]#文本#[/conversations]
[ conversations avatar="#头像#" direction="#row-reverse#"]#文本#[/conversations]
将 #头像# 替换为头像 URL
#文本# 替换为聊天文本
#对齐方式# 为 row 时聊天气泡靠左，为 row-reverse 时聊天气泡靠右
Hello
World
bilibili视频[ vbilibili]视频的BV号[/vbilibili]
steam状态卡片[ steamuser]你的steamUID[/steamuser]
要使用此功能，你需要先按照
<a href="https://docs.fuukei.org/Sakurairo/Steam/">Steam库模版使用说明</a>
配置好你的apiKey
uid获取方法参考steam模版说明
![](https://oss.qiwanli.com/2025/05/20250526152635676.png")
底部每日一言
document.addEventListener('DOMContentLoaded', () => {
//底部每日一言
const targetElement = document.getElementById('colophon');
if (!targetElement) {
console.error('Element 底部一言 not found!');
return;
}
const observer = new MutationObserver((mutations) => {
if (targetElement.classList.contains('show')) { // 检查是否有show类
r = document.getElementsByClassName("hitokoto")[0];
chakhsu("每日一言： ",r); // 调用函数
observer.disconnect(); // 可选：停止监听
}
});
observer.observe(targetElement, { attributes: true, attributeFilter: ['class'] });
//头像签名
const targetElement2 = document.querySelectorAll('.header-info p')[0];
if (!targetElement2) {
console.error('Element 头像签名2 not found!');
return;
}
chakhsu("阿七：",targetElement2); // 调用函数
});
播放器
接入的是明月浩空音乐
签名彩虹打字机效果
function chakhsu(ttttt,r) {
text = r.innerText;
function t() {
return b[Math.floor(Math.random() * b.length)];
}
function e() {
return String.fromCharCode(94 * Math.random() + 33);
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
(l.textContent = e()), (l.style.color = t()), n.appendChild(l);
}
return n;
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : ((c.step = g), c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? ((c.text += t[c.skillP]), c.skillP++) : c.delay ? c.delay-- : ((c.direction = "backward"), (c.delay = a)) : c.skillP > 0 ? ((c.text = c.text.slice(0, -1)), c.skillP--) : ((c.skillI = (c.skillI + 1) % o.length), (c.direction = "forward"))), (r.textContent = c.text), r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d);
}
var l = ttttt,
o = [text].map(function(r) {
return r + "";
}),
a = 22,
g = 1,
s = 2,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i();
}
自定义圆点点鼠标
CSS代码：
@media (min-width: 768px) {
#cursor {
position: fixed;
width: 16px;
height: 16px;
background: rgba(60, 60, 67);;
border-radius: 8px;
opacity: .25;
z-index: 99999999;
pointer-events: none;
transition: .2s ease-in-out;
transition-property: background,opacity,transform
}
}
#cursor.hidden {
opacity: 0
}
#cursor.hover {
opacity: .1
}
#cursor.active {
opacity: .5;
transform: scale(.5)
}
JS代码：
var CURSOR;
Math.lerp = (a, b, n) => (1 - n) * a + n * b;
const getStyle = (el, attr) => {
try {
return window.getComputedStyle ?
window.getComputedStyle(el)[attr] :
el.currentStyle[attr];
} catch (e) {}
return "";
};
class Cursor {
constructor() {
this.pos = {
curr: null,
prev: null
};
this.pt = [];
this.create();
this.init();
this.render();
}
move(left, top) {
this.cursor.style["left"] = `{left}px`;
this.cursor.style["top"] = `{top}px`;
}
create() {
if (!this.cursor) {
this.cursor = document.createElement("div");
this.cursor.id = "cursor";
this.cursor.classList.add("hidden");
document.body.append(this.cursor);
}
var el = document.getElementsByTagName('*');
for (let i = 0; i < el.length; i++)
if (getStyle(el[i], "cursor") == "pointer")
this.pt.push(el[i].outerHTML);
document.body.appendChild((this.scr = document.createElement("style")));
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='gray' /></svg>") 4 4, auto !important}`;
}
refresh() {
this.scr.remove();
this.cursor.classList.remove("hover");
this.cursor.classList.remove("active");
this.pos = {
curr: null,
prev: null
};
this.pt = [];
this.create();
this.init();
this.render();
}
init() {
document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
document.onmousemove = e => {
(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
this.pos.curr = {
x: e.clientX - 7,
y: e.clientY - 7
};
this.cursor.classList.remove("hidden");
};
document.onmouseenter = e => this.cursor.classList.remove("hidden");
document.onmouseleave = e => this.cursor.classList.add("hidden");
document.onmousedown = e => this.cursor.classList.add("active");
document.onmouseup = e => this.cursor.classList.remove("active");
}
render() {
if (this.pos.prev) {
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.45);
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.45);
this.move(this.pos.prev.x, this.pos.prev.y);
} else {
this.pos.prev = this.pos.curr;
}
requestAnimationFrame(() => this.render());
}
}
(() => {
CURSOR = new Cursor();
// 需要重新获取列表时，使用 CURSOR.refresh()
})();
//点击弹出文字
//
//// 监听DOM加载完成（替代(document).ready）
document.addEventListener('DOMContentLoaded', function() {
let a_idx = 0;
const values = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
// 点击事件处理（替代("body").click）
document.body.addEventListener('click', function(e) {
// 创建元素（替代("<span/>")）
const span = document.createElement('span'); span.textContent = values[a_idx];
a_idx = (a_idx + 1) % values.length;
// 设置样式（替代.css()）
Object.assign(span.style, {
zIndex: '99999999',
top: `{e.pageY - 20}px`,
left: `{e.pageX-10}px`, position: 'absolute',
fontWeight: 'bold',
color: '#83D6FF',
fontSize:'12px',
transition: 'all 1.5s ease-out', // 替代.animate()
opacity: '1' // 初始状态 });
document.body.appendChild(span); span.style.willChange = 'transform, opacity';
span.style.transform = 'translateY(0) scale(1)';
// 动画效果（替代.animate()）
setTimeout(() => {
span.style.top = `{e.pageY - 180}px`;
span.style.opacity = '0';
// 动画结束后移除（替代回调函数）
span.addEventListener('transitionend', () => span.remove());
}, 10); // 微小延迟确保样式生效
});
});
Comments NOTHING