Xiaomage's Space样式大改版完成~

温馨提示:本文最后修改于 50 天前,部分内容可能已经过时。如文章内容或静态资源失效,请联系我进行更新,谢谢~

改版原因

  1. 博客方面,原来使用的RAW主题是一个很不错的主题,使用的人有很多,我使用时长也超过了半年。但是,这个主题在某些方面比较臃肿,网络请求比较多,流量消耗比较大,而我的服务器放在国外,速度并不是很快,这就导致网站打开速度很慢。RAW主题还有一个Bug:过长的代码块无法正常渲染。此外,作者也承认了RAW主题的渲染能力不是很高。于是很早就打算换掉这个主题,但一直没有找到好的替代品。
  2. 我很早就想打造一个轻量级的主题,最好是metal design风格的,但我看过的MD风格的主题元素太多,不够轻量,自己又没有多余时间学写主题。
  3. 无意间在GitHub发现了这个MD风格的主题,尽管这个主题有一点年久失修,但它的审美很符合我,我近期也有时间,于是心血来潮,想魔改这个主题长期使用。
  4. (还未进行)主域名方面,很多博主都是把博客放在blog.example.com这样的二级域名下,域名放一个导航,I think it's so cool~

魔改的主题

主题魔改自https://github.com/Hanson/typecho_material_theme,感谢原作者的付出,看GitHub的项目应该是个Dalao呢!

修改记录:

  1. 这个主题一开始有一些Bug,文章显示的位置稍有错位,已经修复~
  2. 加入PJAX无刷新功能,浏览更加流畅,同时利用NProgress.js实现了加载进度条,顶部弹出的加载提示是自己写的QAQ....
  3. 细节改善,如侧边栏的音乐播放器不会随页面加载而停止,成为了真正的“全站播放器”,等等...
  4. 优化速度,很多资源使用了CDN,国内的bootcdn是做的最好的,能使用的CDN基本都是这家提供的。

关于PJAX

关于PJAX,我要写一点踩坑笔记QAQ...

我使用的PJAX的js是MoOx/pjax,其实还有一个知名度更高的,defunkt/jquery-pjax,但这个需要jQuery支持,而且配置复杂。

参考资料:https://paugram.com/coding/add-pjax-to-your-website.html

顶部的进度条则是使用了NProgress.jshttps://github.com/rstacruz/nprogress,非常方便。

具体的配置的话,查看本页面源代码就可以了~


这个主题比上个主题要轻量许多,加载速度也有明显的提高,尽管部分功能还有些缺失,如夜间模式的切换,点击浏览大图,但我觉得也无伤大雅,今后有时间再研究加入。

写博客要返璞归真,记录才是真正目的,而不是弄很多花里胡哨的东西,那些东西放在Xiaomage’s Lab里发光发热吧~

主页改版

主页的改版也已经完成啦~现在访问xmgspace.me将会跳转到新主页,只有访问blog.xmgspace.me才会打开Xiaomage's Blog。

这其中相对有一点技术含量的就是对原来域名下文章的重定向了。如果不进行301重定向,相关搜索引擎的记录可能在几天内迅速消失,用户体验也很差,访问以前的文章,只能看到一个冰冷的404页面。

我们需要对xmgspace.me.conf进行编辑,加入以下内容,并重启nginx:

location ~* ^/archives/(.*) {
    return 301 https://blog.xmgspace.me/archives/$1;
    access_log off;
}
location ~* ^/page/(.*) {
    return 301 https://blog.xmgspace.me/page/$1;
    access_log off;
}
location ~* ^/category/(.*) {
    return 301 https://blog.xmgspace.me/category/$1;
    access_log off;
}
location ~* ^/2019/(.*) {
    return 301 https://blog.xmgspace.me/2019/$1;
    access_log off;
}
location ~* ^/2018/(.*) {
    return 301 https://blog.xmgspace.me/2018/$1;
    access_log off;
}
location ~* ^/feed/(.*) {
    return 301 https://blog.xmgspace.me/feed/$1;
    access_log off;
}

今后八月份就要进行高数的复习了,博客有可能断更一段时间,但有实用有趣的东西我一定会第一时间进行记录的,毕竟积累才能成长,量变才能质变。

~~End Of File~~

本文永久链接:https://blog.xmgspace.me/archives/blog-revised-2019.html

本文文章标题:Xiaomage's Space样式大改版完成~

本站欢迎转载与引用~但您需要注明文章标题与链接,并表明转载/引用自Xiaomage's Blog。

授权协议:署名-非商业性使用-相同方式共享 4.0 国际(CC BY 4.0)

标签:

还没有人评论哦,还不快抢沙发~

添加新评论

i_f01.pngi_f02.pngi_f03.pngi_f04.pngi_f05.pngi_f06.pngi_f07.pngi_f08.pngi_f09.pngi_f10.pngi_f11.pngi_f12.pngi_f13.pngi_f14.pngi_f15.pngi_f16.pngi_f17.pngi_f18.pngi_f19.pngi_f20.pngi_f21.pngi_f22.pngi_f23.pngi_f24.pngi_f25.pngi_f26.pngi_f27.pngi_f28.pngi_f29.pngi_f30.pngi_f31.pngi_f32.pngi_f33.png