不知不觉使用Material主题已经度过了四个年头,个人还是非常喜欢这个主题的,期间大大小小对主题进行了无数次的魔改,反正是有什么想法就想办法实现了,除非出现下一个更喜欢的主题或者自己动手做一个,目前来说还是会继续用这个主题的

本站主题的魔改的代码已经在Github开源:https://github.com/noisky/typecho_material_theme.git

开源主要是为了更新主题方便,直接在服务器上git pull就可以保持更新了... 所以并没有整理打包发布..
想尝鲜的可以自己动手去改,主要是替换cdn的资源为本地即可

最近的主要改动如下:

清凉夏季配色

indexPic.jpg
大家应该可以看到网站的主题配色更改为清凉夏季配色,其实更改配色方案的想法很早就有了,只不过一直没有去实施
主要是有好多细节性的需要调整;
这次抽空给整理了下,把需要更改的属性值但单独的提取出来,并且定义统一的颜色变量去管理,这样就方便以后更改配色了
这次只做了一套夏季配色,之后应该会做多套,按季度更换配色~ 你懂的.png 当我什么都没说

自适应黑暗主题

除了更换了夏季配色,这次还做了一套黑暗配色~ 捂嘴笑.png
连微信都支持黑暗配色了,你的网站还不支持吗?
主流浏览器已经支持黑暗配色的自动适应,也就是当系统主题配色为黑色时,网站将自动使用黑暗配色
darkIndex.jpg

整体效果还是可以的,可能有些小细节没有调整到,往后再慢慢完善吧~
主要是使用了媒体查询标签 prefers-color-scheme: dark

@media (prefers-color-scheme: dark) {
//黑色配色的css
}

这个标签会自动检测浏览器的主题,如多是黑暗主题自动切换到黑暗配色

博客主题自动部署

前一阵子研究了下自动构建,主要是使用 Gtiea+Drone 实现的,轻量化部署方便
现在给主题也用上了自动构建
之前主题是放在github上的,主题更新好服务器上是主动 git pull 同步的
现在把主题的仓库同步到了 Gtiea,平时只修改gitea上的仓库,速度也快
然后提交commit后,drone直接ssh远程登录到服务器执行git pull,并且把仓库同步到github的远程仓库中
真·自动化 滑稽.png
而我需要做的就是修改本地的代码,然后 git commit && git push 就行啦~
这才是解放生产力~

接入谷歌统计服务

博客最近接入了谷歌统计服务,主要谷歌的统计分析更加全面多样化一点
不过缺点是由于谷歌的服务速度不是很稳定,所以网站的加载速度被拖累了 泪.png
这也是没有办法的事,现在网站在同时使用两套统计系统,等数据报告比较完善的情况下,我再对比看看最终使用哪一家的统计服务吧...

首页DNS查询缓存

博客的首页加载使用的dns查询缓存,理论上会给网站加速一丢丢..(真的假的我也感觉不出来)
主要是看到淘宝也这么做了..
具体就是在header.php的头标签上加上了这么一个判断

<?php if($this->is('index')): ?>
    <link rel="dns-prefetch" href="//api.ffis.me" />
    <link rel="dns-prefetch" href="//static.ffis.me" />
    <link rel="dns-prefetch" href="//static.noisky.cn" />
    <link rel="dns-prefetch" href="//v1.hitokoto.cn" />
    <link rel="dns-prefetch" href="//hm.baidu.com" />
    <link rel="dns-prefetch" href="//www.google-analytics.com" />
    <link rel="dns-prefetch" href="//www.googletagmanager.com" />
<?php endif;?>

当然具体效果如何,这就是仁者见仁智者见智了 笑眼.png

增加赞助页面

网站的侧栏和关于页面加入了赞助入口,现在你可以请我喝杯咖啡了 茶杯.png

文章页增加目录树

postPage.jpg

这个功能其实早就想加了,原计划就是使用js去生成一个目录树
但是在我逛github的时候偶然发现了大佬写好的有轮子了
Github:https://github.com/xxyangyoulin/jquery_headindex

自动生成文章目录索引,手风琴式折叠显示,自动定位当前位置

完美符合我的预期效果
就直接集成到了主题中了,再美化下前端显示,和Material主题完美适配
就是显示位置有点尴尬,由于是双栏式主题,所以就显得没有地方塞这个目录树
现在的方案是先在左侧显示,等侧边栏滚动出屏幕显示区域后,再将目录树移动到侧边栏的位置
效果方面还是有点突兀,等待后续想出更好的方案再优化吧
再次感谢大佬 @xxyangyoulin

文章图片使用webp格式

之前的文章图片比较大的我会手动的使用 tinypng.com 压缩一下,基本能达到比较理想的文件大小
不过随着webp格式的普及,我也开启了又拍云的webp图片格式,这样在请求图片的时候,又拍云会检测客户端是否支持webp的图片格式而智能返回webp或者原图片格式,也算从侧边优化了网站的加载速度吧~

使用Gzip和Brotli压缩

又拍云现在上线了Gzip和Broli智能压缩,在客户端同时都支持 Gzip 和 Brotli 的情况下,又拍云会优先使用 Brotli 压缩算法
很实用的功能
2020-05-15T04:48:18.png

更改文章永久链接地址

这次终于铁了心了更改了文章的永久链接格式
之前的格式是 ffis.me/分类/文章地址 的显示格式
感觉风格不是很统一,想换成wp的格式 ffis.me/archives/文章地址
一直没下决心去改,因为改了之后以前的链接都404了
不过这次我编写了nginx规则,实现了301重定向,将以前几个分类的地址自动重定向到新的地址上
这样以前的链接也能正常的引流到新的链接上了,一举两得,美滋滋 哈哈.png
附上我的nginx重定向方案

#文章永久路径跳转,只跳转分类+文章地址的访问,不跳转分类的访问
location ~ ^/Diary/..*$ {
    rewrite ^/Diary/(.*)$ /archives/$1 permanent;
}
location ~ ^/Music/..*$ {
    rewrite ^/Music/(.*)$ /archives/$1 permanent;
}
location ~ ^/experience/..*$ {
    rewrite ^/experience/(.*)$ /archives/$1 permanent;
}
location ~ ^/Share/..*$ {
    rewrite ^/Share/(.*)$ /archives/$1 permanent;
}
location ~ ^/java/..*$ {
    rewrite ^/java/(.*)$ /archives/$1 permanent;
}

首页banner的加载方式

首页的banner大图的加载方式最开始是静态写在css中的
后来我接入了我的随机图片api,这样更改图片就不用每次都修改css文件了,而且api是自己写的,想怎么展示都可以
现在的方案是每日换一张图片,不过图片得自己适配,暂时只有四张图片,以后可能会加更多的图片
不过图片多了反而也不太好,影响了整体观感
后期可能会考虑根据配色确定图片,图片和配色做成配套的,这样效果也许会更好 小乖.png

近期对网站和主题做出的小改动大概就是以上这么多了,以后有其他想法了再慢慢折腾 乖.png