matery主题改动日志

折腾是永无止境的,刚开始觉得很完美的东西用一段时间后就开始发现各种不顺眼,于是东改西改;人就是这么不知足。

1 前言

当前博客主题套用的hexo-theme-matery,功能都很齐全了,看是挺好看的;于是当时果断换成了这个主题。
但同时这个优点也成了一部分人眼中的缺点:花里胡哨、不实用、加载速度慢。我看了很多个用这个主题的博客,虽然自认为自己网站的速度已经很慢了,但仍有许多人的博客加载速度在不断刷新我的下限,总算进去了,看到的却是满屏的雪花飘...当然并不是这样不好,毕竟不同人的审美不同,但至少这些不是我想要的。当然我也看到了许多极简但文章很好的博客,让我不禁想要拍手称快。
有了比较之后,就不难发现自己现在的主题存在一些不需要的元素。经过几天html、css、js的学习(能看懂源码任何一部分的作用、但细节需要一个个百度谷歌的程度),就可以开始进行精简和个性化主题了~

2 方法

为了增加容错率,先把blog源码全部上传到github一个私人仓库里(除非你觉得让别人看到也没什么),建个dev分支然后就可以开始进行修改咯~每修改一个地方记得commit一下,方便意外时想要回退某个修改前的版本(git现学现用)

3 记录

3.1 更换主题后立即做的改动

  • 关闭所有动画效果,修改导航栏,自定义页面,增加标题自动编号
  • 调整渲染器对LaTeX公式的支持
  • RSS由atom改为rss2,能够不打开博客预览全文
  • 界面改成英文,方便偶尔到访的老外
  • 防止文章目录过长时溢出,加入滑动栏
  • 解决英文标点'显示为的问题

3.2 去掉jsdelivr图片加速

以下内容更新于2020-01-14 15:01:23

虽然之前看别人博客弄了个github图床的免费CDN加速,但也看到些讨论说它不靠谱的地方;我用了一段时间后感觉并没有多大提升,于是赶紧删了所有免费加速。毕竟免费背后它可能会做一些小动作,自己又没有太多相关专业知识还是敬而远之为好。

3.3 去掉百度统计

以下内容更新于2020-01-15 16:13:07

不得不说百度真是辣鸡,谷歌的话提交了之后没过几天就有反馈了,而百度...
测试blog的时候发现百度统计、自动推送的相关代码加载占用了相当一部分时间,而且推送跟没推送没啥区别,要它有何用;我只能说,再见百度。

3.4 修改归档页面布局

以下内容更新于2020-01-17 17:17:56

归档的作用是让来访者快速找到感兴趣的文章,而matery主题的归档页面采用了时间线的布局,虽然眼前一亮但一点都不方便!还不如主页里的posts紧凑l,完全没起到相应的作用;这部分肯定是要大改特改的,删除不必要的元素,减少间隔、简化样式。

3.5 减少链接层级

默认的posts链接为permalink: :year/:month/:day/:title/,分了个三、四级,不利于搜索引擎爬取;而且我的post title都有注明日期,这样就和前面重复了,不必要。 直接改成了permalink: :title/
副作用是之前文章的评论消失、文章浏览计数器全部重置

3.6 简化footer信息

能删则删,如运行时间实在没必要精确到秒吧...

3.7 图片压缩、lazyload

图片是拖慢博客速度最大的一个原因之一,我喜欢每篇博客放一张自己以前拍的照片、截的图,累积起来占用了不少空间;为了避免在图片加载完成之前只能傻等着的尴尬局面,加个lazyload插件还是很管用的;但注意加了之后hexo-douban的图片会加载不出来,需要给其标签贴一个no-lazy属性。

3.8 bug修复

以下内容更新于2020-01-19 23:37:23
之前调了一些元素的位置,导致出现下一页按钮出现显示错位(可能是改变了哪个width属性引起的),解决方法是干脆换个边显示。

next错位

3.9 调整posts分类

之前的分类方法有些不合理,重新规划了下。大多数博客都有categoriestags两种分类方式:

  • 其中categories往往是互不关联、范围比较广的分类,如生活、学习、工作...在写post之前,最好先确定几个大的分类方向,尽量涵盖所有文章类型;在这基础之上扩展出多个子分类,之后将post对号入座;必要时再增添新的子分类,让博客的分类树不断完善。
    Hexo支持多级子分类,如下列写法:

    categories:
      -  [学习, 语言, 英语   ]
      -  [工作, 工具 ]

    代表该post同时属于学习工作两个同级分类,而语言学习的子分类,英语又是语言的子分类。 注意英文逗号后必须有一个空格,而中括号前后的空格则无所谓。

  • tags则相对随意一些,它是另一个维度的分类,可以比较具体,tag之间也可以有重复的地方。此外,不同于categories常事先就规定好,tags往往是写完post拍一下脑袋当场确定的。

总的来说tags比较乱、相互之间没有什么顺序,而categories注重层级,结构清晰。

3.10 一些元素的小调整

将文章标题字体改小了点,防止移动端预览时文字超出card;修改目录栏样式,使其能够清晰地显示各级分类,tags样式不需要改动;

3.11 修复移动端hexo-douban中图片不能正常显示

解决方案是在head中添加一段<meta name="referrer" content="no-referrer">;这么做的副作用会导致不蒜子计数器无法正常工作,折中方案是只在hexo-douban相关页面添加该<meta>标签:



以下内容更新于2020-03-29 10:18:59

3.12 在post卡片页面显示文章创建时间和修改时间

有时候写完一篇post之后并不是就放在那不管了,过了一段时间可能会要修改修改,这时候在页面中清晰地体现出来还是方便了他人不少的。实现也比较简单,连我这样的萌新都能改。

3.13 评论端由Valine修改为utterances

很早之前就想改一改评论端的实现方式了,之前一直是依靠Leancloud,但按照现在这个趋势放在它上面还是不放心,指不定哪天就没了呢。
一直觉得用Github issue的方式实现评论很方便,虽然提高了评论的门槛(需要fq才能显示评论界面),但反正平时没啥人留言,所以其实无所谓。自己管理起来方便就行。

3.14 去掉post卡片的图片部分,图片全部放到gallery里

图片太多确实拖慢了网站的访问速度,虽然都是我自己拍的挑选出来的照片,但想了想还是主页简洁一点好;(很早之前就改了忘记记录下来了- -)


以下内容更新于2020-07-28 16:05:12

3.15 禁用cloudflare的Rocket Loader功能

最近调试博客的时候发现国内访问时评论区加载不出来,分析后发现是ajax.cloudflare.com网站的rocket-loader.min.js在国内网络环境下请求不到,之前还以为是utterances评论端的问题。

3.16 图片全部转webp,并加上免费的CDN

因为一直用github当图床,而国内好像不能访问https://raw.githubusercontent.com的内容,所以没办法又不情愿地加上了jsdelivr的CDN加速;顺便写了个shell脚本将图片批量压缩并转为webp格式了(IOS端好像暂时还无法识别webp)。

3.17 恢复valine评论端(MiniValine),并实现与utteranc.es的切换

由于很多人是从国内访问,github时不时抽风,导致utteranc.es有时加载不出来;为了优化访客体验,决定暂时恢复valine评论系统,并根据Sanarous's Blog增加了一个用来切换评论系统的滑块。

3.18 MiniValine换成魔改版Valine

换上Minivaline几个小时之后发现ipad访问时不显示评论框,可能是和主题有冲突,折腾了一阵子找不到原因之好放弃;搬出原来的valine照着别人改了下,加上了mathjax支持、自定义表情包、添加身份标示、卡片式留言板...话说适配移动端设备真是麻烦,特别是ios系统、调试起来都很复杂,不过还好最后问题都找到解决方法了。



待记录...

Author: zcp
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source zcp !
评论
Valine utteranc.es
 Previous
高温气体动力学基础知识复习
最近要用到,翻出来随缘复习下,只写一些基础知识,方便忘记的时候随手打开看。 1 导论 高温气体的几种能量形式:宏观动能、内能、化学能、辐射能 空气、1atm下:800K,振动能激发;2500K,$\mathrm{O}_{2}$
Next 
入坑WSL(Windows Subsystem for Linux)
在笔记本上装Ubuntu用了几个月之后,由于一些软件只能在windows下运行,来回切换系统也挺麻烦的,故决定安装个WSL(Windows Subsystem for Linux)试试。意外感觉用起来挺舒服的;一是平常需求也不多,就用下Sh
  TOC