Typecho博客主题Joe7.7.1美化优化记录【持续更新】 {message type="error" content="此页面主要记录博客美化和优化过程及一些实用技巧【持续更新】优化&美化内容有些可能会仅适用于本Joe主题[7.7.1]，也会包含通用内容，请注意分辨。最后更新：2023-04-03 19:04:19 星期一"/}7.7.1版本更新内容：去除QQ分享图片设置选项新增静态资源本地化、CDN化静态资源全同步至本地去除live2d右下角人物功能{message type="info" content="速度的优化"/}头像优化，Joe主题采用的头像源是gravatar，小天更换为了 dn-qiniu-avatar.qbox.me 七牛云的加速头像源。CDN加速优化，因为主题新版本加入了静态资源本地化、CDN化，所以主题所有的静态文件css ,js等，将整个assets目录上传至你的CDN，在模板后台设置好自己的加速域名即可加速。插件优化，主题静态资源已实现CDN加速，接下来实现文章内图片的加速，小天改写了QiniuCDN插件，将附件资源和小天自用的静态资源文件，替换成七牛云CDN加速（请提前将你的附件文件目录/usr/uploads/上传到CDN）至此，就实现了主题静态资源和文章内图片等静态资源的CDN加速。{message type="info" content="SEO的优化"/}老生常谈：SiteMap、Robots、站长平台给网站博客侧边栏加一个请协助SEO优化添加文章搜一下功能：Joe主题找到usr/themes/Joe/public下的batten.php 30行左右，插入如下代码，其他主题同理。<span class="text"> <a href="https://www.baidu.com/s?wd=<?php $this->title() ?>+site:www.xtboke.com" target="_blank">搜一下</a></span> <span class="line">/</span>{message type="error" content="其他美化折腾"/}页面加载耗时的功能和样式的实现 可以看到小天博客底部页面的一些样式和功能样式的实现：可以去【 shields.io 】网站去自定义，种类很多，像ICP、版权信息等等。功能的实现：找到usr/themes/Joe/public目录下的footer.php第47行，加入以下代码document.getElementById('pagetimes').innerHTML = '<img src="https://img.shields.io/badge/页面加载耗时：-<?php _endCountTime(); ?>-green">';_endCountTime()是获取页面耗时的函数；pagetimes是前台标签的ID值，放到前台你想显示的位置即可。<a href="javascript:(0)" id="pagetimes"></a>非插件typecho给博客加个评论等级-仿虎牙直播贵族给你的网站博客侧边栏添加一个联系我/关注我/个人信息给你网站博客的评论添加一键打卡功能一行CSS代码给网站博客添加灰色默哀色一行CSS代码给网站文本文字添加颜色动态变化给网站博客底部增加首页友情链接给你网站博客添加一个读者墙未完 待续

博客美化和优化过程记录及实用技巧【停止更新】 {alert type="warning"}请前往新文章 ！！！Typecho博客主题Joe7.7.1美化和优化过程记录及实用技巧【持续更新】 {/alert}{message type="error" content="此页面主要记录博客美化和优化过程及一些实用技巧【停止更新】优化&美化内容有些可能会仅适用于本Joe主题[7.3.6]，也会包含通用内容，请注意分辨。最后更新：2021-12-22 19:04:19 星期三"/} {message type="info" content="关于速度的优化"/}安装好系统后，小天能想到的第一个优化的就是速度，“君欲善其事,必先利其器”嘛。速度在CDN方面的优化，小天就不多赘述了，可以参考我的另一篇文章 《真正的Typecho非插件实现全站css,js,图片静态资源CDN加速 ！阿里、腾讯、七牛、又拍云等通用！》除了做好CDN，其次就是缓存了，这里小天是直接安装的Tpcache缓存插件，采用Redis缓存驱动 。 PS：小天已经关闭了该插件，启用插件后，会出现评论提交报错等系列问题。关于头像的优化，Joe主题采用的头像源是gravatar，小天更换为了 dn-qiniu-avatar.qbox.me 七牛云的加速头像源。小方面就是主题设置，关闭一些不必要的功能：鼠标特效、2D人物模型、炫酷的动画等等吧{message type="info" content="关于SEO的优化"/}seo方面小天也是小白，知之甚少。开启SiteMap功能做好Robots.txt维护好站长平台给网站博客侧边栏加一个请协助SEO优化添加文章搜一下功能：Joe主题找到usr/themes/Joe/public下的batten.php 30行左右，插入如下代码，其他主题同理。<span class="text"> <a href="https://www.baidu.com/s?wd=<?php $this->title() ?>+site:www.xtboke.com" target="_blank">搜一下</a></span> <span class="line">/</span>{message type="warning" content="博客列表缩略图美化"/}Joe主题自带的列表缩略图是随机40张图片，感觉不是小天要的风格；所以小天自己找了一些美图，放到了static静态文件夹里，同时也镜像到了七牛云，剩下的就是修改了。找到 theme/Joe/core/function.php 的232行$result[] = 'https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/thumb/' . rand(1, 42) . '.jpg';替换为：$result[] = __TYPECHO_CDN_DIR__ . 'static/images/thumb/' . rand(1, 201) . '.jpg';TYPECHO_CDN_DIR 是在Typecho主目录下的config.inc.php里定义的CDN目录，这里可以看我上面提到的那篇文章；这里为什么我没有直接写CDN域名呢？是因为方便切换回本地域名，切换时，只需要记得更改__TYPECHO_CDN_DIR__的值就可以了。{message type="warning" content="页面加载耗时的功能和样式的实现"/}可以看到小天博客底部页面的一些样式和功能样式的实现：可以去【 shields.io 】网站去自定义，种类很多，像ICP、版权信息等等。功能的实现：找到usr/themes/Joe/public目录下的footer.php第47行，加入以下代码document.getElementById('pagetimes').innerHTML = '<img src="https://img.shields.io/badge/页面加载耗时：-<?php _endCountTime(); ?>-green">';_endCountTime()是获取页面耗时的函数；pagetimes是前台标签的ID值，放到前台你想显示的位置即可。<a href="javascript:(0)" id="pagetimes"></a>{message type="error" content="其他优化"/} 关于Joe主题7.3.6直播列表未找到数据的优化 关于Joe主题7.3.6侧边栏最新回复显示数量失效的优化 非插件typecho给博客加个评论等级-仿虎牙直播贵族 给你网站博客的评论添加一键打卡功能 一行CSS代码给网站博客添加灰色默哀色 一行CSS代码给网站文本文字添加颜色动态变化未完 待续

关于Joe主题7.3.6侧边栏最新回复显示数量失效的优化 {message type="info" content="关于Joe主题7.3.6侧边栏最新回复显示数量失效的优化"/}Joe主题[7.3.6]侧边栏最新回复评论的显示数量，我在后台 评论列表数目 里设置之后，前台页面没有反应，于是小天翻找源码，找到了问题所在。找到usr/themes/Joe/public目录下的aside.php，第132行.<?php $this->widget('Widget_Comments_Recent', 'ignoreAuthor=true&pageSize=5')->to($item); ?>修改为：<?php $this->widget('Widget_Comments_Recent', 'ignoreAuthor=true')->to($item); ?>{callout color="#f31212"}删除pageSize=5即可，在这里作者把显示的数量给固定了，因此后台设置评论列表数目后无反应。这里删除pageSize=5，代码会自动读取后台的配置。var/Widget/Comments/Recent.php{/callout}$this->parameter->setDefault(array('pageSize' => $this->options->commentsListSize, 'parentId' => 0, 'ignoreAuthor' => false));

关于Joe主题7.3.6直播列表未找到数据的优化 {message type="info" content="关于直播列表未找到数据的优化"/}Joe主题[7.3.6]直播列表页，当点击某个分类没有数据时候，加载动画会一直显示，给用户体验不好；这里小天做了修改，当没有数据的时候提示一下暂无数据。找到usr/themes/Joe/assets/js目录下的joe.live.js，第54行.if (res.code !== 1) return;修改为：if(res.code !== 1){ $('.joe_live__list').html('<p>暂无数据！</p>'); return; }{callout color="#f31212"}修改完后，把joe.live.js压缩，然后复制到joe.live.min.js即可。{/callout}