UtopiaXC Blog - 主题
type: channel
link: https://blog.utopiaxc.com/tag/%E4%B8%BB%E9%A2%98/
items: Dear主题v3版本正式发布
items: 关于Sakurairo主题的优化问题

Dear主题v3版本正式发布
type: item
date: 2026-04-22T13:05:00+08:00
description: Theme Dear for TypechoDear主题是一款由imjeff基于Bear博客平台设计理念创建的WordPress与Typecho主题。我在其基础之上，添加了一些独特功能，分支为了现在的专为Typecho打造的Dear主题Theme Dear for Typecho，今天，v3版本正式发布。设计AI和短视频的兴起，让人们早已失去静下心来阅读文字和撰写文字的兴趣。然而，我依旧认为单纯简单的图文方式仍是表达自己内心的最好手段，它安静又优雅。 Bear是一款极轻的博客平台，我第一次看到就被它的加载速度和简洁吸引。然而可惜的是，它并非是自部署的博客系统，而是一个博客平台。于是，在我苦苦追寻下，终于找到了imjeff开发的typecho-dear主题。它不像其他主题那样花哨，复刻于Bear让它有着飞快的速度和简洁，这正是我苦苦寻找的纯图文博客主题。 Bear博客示例然而，它并非尽善尽美，它只实现了最基本的博客功能，对于一些高级功能缺失过多，因此我决定，在它的基础上，用最小的开销实现更多的功能，这也就是本项目：Theme Dear for Typecho。安装与使用在GitHub Release下载最新的名为Dear-For-Typecho.zip的文件到Typecho站点目录下的{basePath}/usr/themes/主题文件夹中并解压。请保证解压后的文件夹名字与压缩包名一致，即Dear-For-Typecho。打开Typecho管理后台，在控制台->外观中找到Dear-For-Typecho主题，选择启用。在控制台->外观中，找到设置选项卡，进行个性化设置。新特性下面是相对于原主题typecho-dear添加的一些新特性。关于原主题的特性和样式，请前往原仓库查看。1. 评论Dear 2.0.1 版本起开始支持原主题仅支持原生评论样式，且需要手动修改代码开启，因此我参考Story-for-Typecho主题为本主题添加了一个内嵌评论系统。 出于安全考量与加载速度考量，你可以在主题设置中完全禁用评论系统，哪怕你在发布文章的时候在Typecho中选择了开启评论区，如果你禁用了评论系统，我仍不会夹在评论的CSS和JS，来防止恶意提交并且可以提高加载速度。 此外，我也提供了一个选项，供您禁止评论者填写他们的网站地址，以防止博客出现恶意网站链接导致备案问题。 同时，我强烈建议你开启Typecho的评论审核机制，不要允许未经许可的评论出现在公众视野。 评论区相关设置评论区样式2. 友情链接Dear 2.0.1 版本起开始支持社交属性也是个人博客的一个卖点。因此我添加了友情链接模板供用户来展示自己的社交网络。 如果您想启用友情链接页面，请在Typecho后台中，管理->独立页面中创建一个新的独立页面，并将其自定义模板设置为“友情链接”。 友情链接拥有两种添加方式。使用Links插件或直接将链接的JSON格式信息发布在独立页面中。这两种方法可以同时使用，也可以仅使用一种，系统将会优先渲染内容解析，然后再渲染插件数据。使用Links插件说实话，我不是很喜欢使用插件来解决问题，大多数时候这会使事情变得很麻烦。 不过Links是一个优秀的插件，它提供了一种简单的友情链接管理方式，但是它的数据提供模式并不符合我的评论区要求，因此它在本主题中仅用作数据库与管理，在渲染时主题会直接读取数据库的内容进行渲染而非使用插件原生方法。下载并启用Links插件。如果你正在使用MySQL8及后续版本数据库，开启该插件可能会报错HY000。当出现这种情况时，请找到插件对应的数据库脚本plugin/Links/Mysql.sql，将里面的MyISAM引擎修改为InnoDB在Typecho后台中，找到管理->友情链接进行友情链接管理工作。添加后的友情链接将直接显示在模板为友情链接的所有独立页面中。使用独立页面内容解析Dear 3.0.0 版本起开始支持在Typecho后台中，找到管理->独立页面，找到上面创建好的以友情链接为模板的独立页面，点击编辑。 在富文本编辑区域，任意位置中添加以下标签： 在标签内部，添加一个JSON数组，数组中的每个元素就是一条单独的友情链接，格式如下：// 如果条目中不包含某个字段，可以直接留空不写。如果屏幕中出现Warning，请关闭php的日志直接打印。永远不要在生产环境中让用户直接拿到错误信息。 [ { "type": "分组这是类型，用于在显示的时候进行分组，如果没有分组则会自动归类为默认分组", "name": "友情链接名字", "url": "友情链接地址", "description": "友情链接描述", "image": "友情链接缩略图/头像", "email": "友情链接管理者邮箱", "display": tr…

关于Sakurairo主题的优化问题
type: item
date: 2021-08-29T02:51:00+08:00
description: 最近从原来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主题设置，找到全局设置，打开页尾设置，在页尾附加代码中添加以下代码： 友链鼠标浮在卡片上的伪类动画对不起，但是我还是要说，这个覆盖的动画实在是太丑了。其实我觉得卡片边缘外发光就挺好看的了，结果非要加上这个一大片黑色覆盖过去的动画，说实话真的丑，而且透明度也低的离谱，所以我这里直接把背景色改掉了，改成白色就不会再有覆盖动画了。和上面一样，也是在css中添加：.links ul li:before{ background: rgba(255,255,255,0); }注脚供应商这里想加上供应商的图标，比如阿里云，Google，matomo等，只需要在全局设置，打开页尾设置，页尾信息中添加以下代码，内容按照下方进行编写，大小更改height属性即可。如添加多个则重复按照以下格式添加即可（样例演示见本站底部） 2021-08-29 02:51 UtopiaXC 于北京