最近从原来mashiro的Sakura主题换到了Fuukei基于Sakura开发的Sakurairo上，发现这个主题就是原来的Sakura主题的深度定制版。

樱花特效，2Dlive，下箭头，波浪特效等等我之前在流年的博客见到过，不过流年当时给出的解决方案基本是直接修改源码，但是Sakurairo中都给单独做成了功能选项，十分的贴心，而且也完全重置了设置页，着实是佬。

但是我在使用过程中，也有一些不太尽如我意的地方，稍微研究了一下，做了一些修改。当然因为我不是专业学前端的（号称是全栈，其实是做后端和数据分析的），目前只做了以下少许的修改，如果以后有其他想法会逐步的填充进来。

首页

顶栏

和原来Sakura的顶栏一样，当显示首页大图的时候顶栏会自动隐藏。这虽然设计如此，但是我个人比较喜欢一目了然的感觉，而且如果有些图片的颜色和顶栏的文字过于贴近，文字会消失不见，感觉不够直观，因此这个功能我不喜欢但是作者又没设置开关，就只能自己修改相关的源码。

其实这块相当容易修改，打开F12我们可以看到当顶栏隐藏时是没有yya这个样式类的，因此只要找到在哪里对这个进行控制的便好办了，于是我在app.js这个js脚本中发现了这样一行（三目运算符就是怎么排版都不好看）：

window.addEventListener("scroll", (() => {
        (document.documentElement.scrollTop || window.pageYOffset) > 0 ?
            e.classList.add("yya") :
            e.classList.remove("yya")
    }))
}))

显而易见，这行代码就是检测页面滚动到顶部时给顶栏添加yya类用的，而不在顶部的时候则去掉yya。那么就很好解决了，只需要将remove也改为add就好了。

图片背景

我还蛮喜欢背景一体化的这个选项的，不过开启之后图片并非填充而是会切图，我觉的有的是有切出来的图很不好看，所以想改一改，现在还没有着手弄（

文章

首行缩进

这个问题不大，因为我写文章都是用markdown，所以基本每个主题都会遇到这种问题，毕竟markdown只负责内容，展示应该由html来负责，所以这个只需要简单改一下css样式就可以了。这里不需要改文件，只需要打开主题设置中的其他设置-低使用设置-自定义css，将这段加进去就好了，之后需要缩进的部分直接打上p标签就好了。(不过后来我发现如果使用markdown的话，图片也会被包在p标签里面，这样图片也会偏移，电脑上没啥，但是手机上就会非常难受，图片右边会出去一部分，所以我给删掉了)

article p{ 
    text-indent:2em;
}

图片点击放大

这个主题限制了不允许在图片右键，而且点击图片也不会放大，所以遇到一些比较糊或者分辨率特别高的大图片的时候字有的时候会看不清，这时就需要加入点击放大图片功能了。主题提供了三种灯箱，不知道是我使用的Githuber MD不支持这个图片的渲染还是怎么，主题的灯箱不好用。有一个开源js库叫做view.js，直接把这个库引入进来就可以直接用了。（开启Pajx会无效）

操作如下：打开iro主题设置，找到全局设置，打开页尾设置，在页尾附加代码中添加以下代码：

<!--大图展示 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@1.10.1/dist/viewer.min.css">
<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.10.1/dist/viewer.min.js"></script>
<script>
let viewer = new Viewer(document.getElementsByTagName('article')[0]);
</script>

友链

鼠标浮在卡片上的伪类动画

对不起，但是我还是要说，这个覆盖的动画实在是太丑了。其实我觉得卡片边缘外发光就挺好看的了，结果非要加上这个一大片黑色覆盖过去的动画，说实话真的丑，而且透明度也低的离谱，所以我这里直接把背景色改掉了，改成白色就不会再有覆盖动画了。和上面一样，也是在css中添加：

.links ul li:before{
    background: rgba(255,255,255,0);
}

注脚

供应商

这里想加上供应商的图标，比如阿里云，Google，matomo等，只需要在全局设置，打开页尾设置，页尾信息中添加以下代码，内容按照下方进行编写，大小更改height属性即可。如添加多个则重复按照以下格式添加即可（样例演示见本站底部）

<a href="此处替换为跳转的链接" target="_blank">
    <img 
        src="此处替换为要展示的而图片" 
        alt="此处替换为备选图片" 
        title="此处替换为光标悬浮展示的信息" 
        style="height: 1em">
</a>

本篇内容为原创内容，采用CC BY-NC-SA 4.0协议许可
2021-08-29 02:51
UtopiaXC
于北京