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

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

改版原因

  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;
}

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

本文永久链接:https://blog.xmgspace.me/archives/blog-revised-2019.html
本文文章标题:Xiaomage's Space样式大改版完成~
如无特殊说明,只要您标明转载自Xiaomage's Blog,您就可以自由转载本文。禁止CSDN/采集站采集转载。
授权协议:署名-非商业性使用-相同方式共享 4.0(CC BY-NC-SA 4.0)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇