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": true, //是否在友情链接页面中显示，true为显示，false为不显示 } ]示例：[ { "type": "UtopiaXC", "name": "UtopiaXC", "url": "https://www.utopiaxc.cn/", "description": "尽管如此，世界依旧美丽", "image": "https://imgs.utopiaxc.cn/2021/08/28/ccd08b1e5dd5b.png", "email": "utopiaxc@utopiaxc.com", "display": true, }, { "name": "UtopiaXC Moments", "url": "https://moments.utopiaxc.cn/", "description": "UtopiaXC个人动态站", }, ]友情链接样式Demo3. 分类与标签模板Dear 2.0.1 版本起开始支持为了方便查看全部标签和分类，我设计了一个独立页面模板来显示它们，可以更轻松地访问不同类型的内容。请在Typecho后台中，管理->独立页面中创建一个新的独立页面，并将其自定义模板设置为“全部分类与标签”。分类与标签模板样式Demo4. 搜索Dear 2.0.1 版本起开始支持这是一个十分简单的搜索页面，它直接调用Typecho的原生搜索方法。如果你想在博客中实现搜索功能，请在Typecho后台中，管理->独立页面中创建一个新的独立页面，并将其自定义模板设置为“搜索模板”。搜索模板样式Demo5. 灯箱Dear 2.0.1 版本起开始支持如果您的文章中含有大量图片，使用灯箱可以让图片显示更加优雅，同样也可以让访问者更轻松地放大或查多张图片。 本主题内置了一个基于Viewer.js的灯箱系统，你可以在设置中启用它，除此之外不需要你进行任何配置。如果你选择不启用，则渲染页面时不会加载相关JS与CSS来加快加载速度。 灯箱设置灯箱样式Demo6. 代码高亮Dear 2.0.1 版本起开始支持如果你的博客包含大量的代码，你可以选择加载代码高亮模块，本主题内置了一个Highlight.js代码高亮，此外，我重新设计了复制与语言显示徽标来符合主题样式。 你可以在设置中启用它，除此之外不需要你进行任何配置。如果你选择不启用，则渲染页面时不会加载相关JS与CSS来加快加载速度。 代码高亮设置代码高亮样式Demo7. LaTeX渲染Dear 2.0.1 版本起开始支持TEX是一个非常高效的排版系统，而LaTeX又使得其更加容易被使用。一般，在学术领域，论文都是以TEX格式发布，因此它对各种数学公式的支持非常棒。 如果你的博客含有大量的数学公式，或有发布简单的学术报告需求，可以针对文章启用LaTeX渲染。需要注意的是，本主题采用KaTeX库实现显示，因此对复杂LaTeX的语法支持可能不够好，请不要直接用它来发布您的学术文章，它只应用做简单的公式渲染器。 本主题KaTeX支持参考于《为 Typecho 增加 LaTeX 公式的渲染》。 如果你希望渲染LaTeX，请在发表或编辑文章时，展开底部的自定义字段，选择“LaTeX 渲染”为启用。渲染引擎只针对特定文章生效，如果文章没有启用渲染，则完全不会加载相关渲染库以加快访问速度。 LaTeX渲染设置LaTeX渲染Demo8. 主页与面包屑Dear 2.0.1 版本起开始支持为了丰富首页访问体验，首页出了文章列表，您还可以选择嵌套渲染一个页面。 你可以像装修GitHub个人主页的README.md一样装修这里，它会忠实地在主页显示你设置的独立页面。 如果需要，请在设置中输入独立页面的slug别名。 主页嵌套设置独立页面Slug位置首页中独立页面的嵌套位置除了主页，你也可以自定义面包屑导航内容。 面包屑导航设置面包屑导航样式Demo另外，要提的一点是，可以看到在我的站点，面包屑导航最右侧有一个无法在设置中配置的链接。如果你也希望添加这种链接，可以直接修改header.php中的源代码，添加一个a标签来实现，虽然我并不推荐你这么做。9. 目录Dear 3.1.0 版本起开始支持主题会在文章详情中自动生成一个目录，用户可以规定该目录的默认位置、展开层级数、自动隐藏与移动端设置。该目录会检测文章全文中包含的所有标题标签，并将其生成为目录。目录最上层自动根据文章中最大的标题标签号生成，不需要担心没有从h1开始设置标题会出现问题。 目录样式Demo目录设置10. AI摘要Dear 3.2.1 版本起开始支持AI摘要默认关闭，需要在后台配置API信息后使用。采用OpenAI标准接口，目前市面上绝大多数模型都支持使用该形式接口，我使用的是Google的Gemini免费层模型，因此每天的生成条目数有限，3.1 Flash Lite每天只能生成500次，但是对我的文章数来说完全足够用了。 AI摘要样式AI摘要功能设置11. 徽章与版权声明Dear 3.3.0 版本起开始支持添加了一些徽章可以显示在文章底部，并提供了可选的版权声明。 徽章与版权设置针对具体文章进行设置12. 其他自定义设置除此之外，还有一些其他可自定义的设置，包括：在首页显示或隐藏文章分类信息文章列表每页显示的项目数友情链接默认图片设置与打开方式设置文章列表标题名设置底部RSS订阅链接设置自定义CSS与JS代码等下方截图为 Dear 3.2.1 版本全部可配置项开源与捐助本主题完全开源，但由于Fork的原主题采用的不是源代码领域常用的协议，而是知识共享协议CC BY-NC-SA 4.0 DEED，因此稍微注意。 关于捐助，请不要在任何渠道以任何方式为本项目付出金钱，如果您想捐助本项目，您可以向慈善组织或开放源代码促进会（开源组织，OSI）捐款，感激不尽。 当然，本项目欢迎社区贡献代码，如果有需求可以随时提交PR或Issue。 2026-04-22 13:55 JST 2026-07-28 11:08 JST Updated UtopiaXC 于日本茨城筑波市
最近从原来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 于北京