Typecho Joe主题 实现手机端菜单栏添加自定义模块 用过 Joe 主题的都知道，只有电脑端才会有侧边栏模块，而手机端只有中间的文章分类栏目和页面栏目，这导致很多人自定义的侧边栏在手机端无法查看。 很显然这样会让手机端侧边栏空落落的，今天的教程就是为手机端菜单栏添加自定义模块，为手机端侧边栏增添浅浅滴活力！ 效果展示 操作步骤 {message type="warning" content="注意：此教程基于Joe主题原版而修改的，因为Joe主题二开的较多，所以添加的位置不一定一样，不过规律都是一样，修改前请备份文件！"/} 准备以下代码： </ul> <br/> </ul> <ul class="joe_header__slideout-menu panel-box"> 这里填入你自己的代码 进入网站根目录 /usr/themes/Joe/public/header.php 文件，将上面代码复制粘贴在下图位置即可（这里我就不添加代码了，你们可以自行添加想展现的代码） 具体位置应该在 </div> <div class="joe_header__mask"></div> 上面，进入文件拉到最底部就看见咯！ {callout color="#f0ad4e"} 方法是死的，但是代码是活的，大家根据自己的需求添加在不同的位置， 切记 干什么事一定先备份。 {/callout}

Typecho Joe主题 侧边栏添加仿mac操作栏 本站一直致力追寻对 Typecho 博客系统 Joe 主题的美化，为了不让博客美化过度只是增加了一些实用功能，并对 Joe 主题进行优化修复，赋予它新的生命力。 这不今天 ‌UP主 （艾霂Mr.）又带来了新的力作，很可能大家在别的主题或者其他系统都见过它，虽然不是很实用但是绝对会为您的博客带来眼前一亮的感觉！没错今天为大家带来的就是，给侧边栏添加仿mac操作栏🍵 效果展示 Mac样式CSS代码 {callout color="#f0ad4e"} 在Typecho后台 -- 设置外观 -- 全局设置 -- 自定义CSS -- 添加下面的样式 {/callout} /*侧边栏添加Mac样式*/ .aimac { position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #fc625d !important; width: 11px; height: 11px; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; float: right; right: 55px; top: 17px; } 修改侧边栏模板 侧边栏模板在 Typecho 根目录这个文件： /usr/themes/Joe/public/aside.php 在每个侧边栏标题后面加个 <span> </span> 标签并且设置样式名和你添加的一致，我这里叫 aimac <span class="aimac"></span> 具体添加位置看下图：（其它侧边栏类似）

Typecho Joe主题 搜索关键字回显修复 Joe 是 Typecho 博客中一款开源免费且非常精美的主题，但是这款主题很早就停止维护了，有些功能作者并没有开发，并且在 Typecho 更新到 1.2.1 版本后还出现了一些小问题🤢 Joe 主题的知名度很高，所以在原作者停止维护后，很多大佬都发布过自己的魔改版本，魔改后的主题虽然修复了 BUG 而且新增了很多功能，但是大佬都是基于自己的想法魔改的，我个人觉得有些过于花里胡哨！于是决定自己动手修复一下下，本次主要修复在 Typecho 1.2.1 版本中搜索关键字不回显的问题。 下图既是问题所在！ 据猜测只有在使用 Typecho 1.2.1 以上版本才会出现这个问题，这并不是 BUG 只是主题并没有适配新版，看了一下源码后发现只是简单的取值问题而已，改一串代码基本搞定。 找到主题文件夹所在位置，编辑 /archive.php 文件，大概在25行左右可以看到他取值为 _keywords ，把这个值改为 archiveTitle 即可，这样搜索关键字不回显的问题，就解决咯！ {callout color="#f0ad4e"} 本篇文章算是小小的笔记吧，有用得到的朋友自行取走。 {/callout}

Typecho Joe主题 添加评论框背景图 最近一直在折腾我的博客，本站一直以来用的 WordPress 但感觉有一点臃肿，索性更换为 Typecho 并采用 Joe 主题，因为自己比较追求完美吗🤦‍♂️感觉评论框空荡荡的，今天就为评论框加个背景图！ 效果展示 食用方法 以 Joe 主题为例，将下面 css 代码添加到 Joe/assets/css/joe.global.min.css 文件内即可。 css代码 .joe_comment__respond-form .body 就是评论框主题，可以直接在前端按F12查看自己主题的是哪个组！ .joe_comment__respond-form .body{padding:15px;background:url(https://www.iarc.top/usr/uploads/2024/03/1257364055.png);background-position:right;background-repeat:no-repeat;resize:none;}.joe_comment__respond-form .body:hover{background-position-x:4000px;transition:ease-in-out 2s;} 背景图片 背景图片，最好自己保存下来，以防失效。 {callout color="#f0ad4e"} 有需要的小伙伴自行取走，方法很简单适用范围很广就看大家的动手能力了。这篇文章就相当于一个记录了，以防不时之需！ {/callout}

Typecho 开启 Gzip 压缩加速网站 GZip 压缩，是一种网站速度优化技术，也是一把 SEO 优化利器，许多网站都采用了这种技术，以达到提升网页打开速度、缩短网页打开时间的目的。 网站采用 Gzip 压缩，还有一个好处，就是让你少了一份流量超标的担心。因为 Gzip 开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，而这个，也正是提升网页打开时间的原因所在。 Gzip开启方法 找到你 Typecho 的网站根目录文件中的 index.php 文件中，并在开头添加如下代码即可。 /** 开启gzip压缩 */ ob_start('ob_gzhandler'); {callout color="#f0ad4e"} 非常简单实用的一串代码，这里 艾霂Mr. 也算是做一个笔记了，有需要的可以自己动手试试！ {/callout}

Typecho 修改 Gravatar 头像源为国内头像源 Typecho 的评论默认使用的是 Gravata 头像，每次页面打开总是卡在 https://gravatar.com 的链接，虽然匹配了 QQ邮箱 调用 QQ头像 的功能，但是对于非 QQ邮箱 用户调用的依然是 Gravatar 头像！ 这里 艾霂Mr. 就对头像源地址进行了替换，这里分享一款国内头像源 Cravatar（初认头像） ，我自用的速度确实不错，值得推荐。 修改代码替换Gravatar头像地址 打开 var/Typecho/Common.php 文件，找到下面的代码，大概在836行左右。 public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { $url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com'; $url .= '/avatar/'; if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; return $url; } {message type="success" content="替换为下面代码"/} public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { $url = $isSecure ? 'https://cravatar.com' : 'https://cravatar.com'; $url .= '/avatar/'; if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; return $url; } 另外一个修改方法，具体方式为在 Typecho 根目录文件 config.inc.php /** * 替换Gravatar头像为Cravatar头像 * * Cravatar是Gravatar在中国的完美替代方案，你可以在https://cravatar.com更新你的头像 */ define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cravatar.com/avatar/'); 分享几款Gravatar头像CDN加速源 极客族 Gravatar CDN加速 这个就不多说了，大家去它的官网看看，还提供了谷歌字体等CDN加速服务等。 七牛 Gravatar 头像CDN加速 HTTP和HTTPS都支持，网址： dn-qiniu-avatar.qbox.me 需要使用的自行替换吧。 中科大的 Gravatar 头像加速 中科大的就不说了，免费提供了不少公益国内CDN加速服务，如谷歌字体CDN加速等。网址： https://gravatar.proxy.ustclug.org/ 这个好像只能SSL的，HTTP的提示被重置。 Gravatar头像CDN加速选择及说明 以上三个 Gravatar 头像CDN加速到底选那个了，那个加速效果最好？ 这里 艾霂Mr. 试了下，但从速度来讲，七牛的速度最快，其次是极客族，最慢是中科大的（日本机房）。 不过 艾霂Mr. 推荐选择极客族。因为经过 艾霂Mr. 的测试，七牛的很多都显示的默认 Gravatar 头像，而不能是自己在 WordPress 后台或者其他程序中设置的头像类型。