|
|
@@ -9,9 +9,9 @@ tags:
|
|
|
|
|
|
新站终于做好了。
|
|
|
|
|
|
-几天前我在《[关于本站的未来](https://www.xxxlbox.com/posts/2018/whats-next-about-this-site/)》一文中详细阐述了我从WordPress换到静态博客系统Hugo的原因，这里也不再赘述。这里简单总结下目前博客迁移的情况：
|
|
|
+几天前我在《[关于本站的未来](https://www.xxxlbox.com/posts/2018/whats-next-about-this-site/)》一文中详细阐述了我从WordPress换到静态博客系统Hugo的原因，这里不再赘述。简单总结下目前博客迁移的情况：
|
|
|
|
|
|
-* 文章只保留了一部分，一些没有很大意义的就没有搬过来，保留了共11篇文章；
|
|
|
+* 文章只保留了一部分，一些没有很大意义的就删掉了，保留了共11篇文章；
|
|
|
* 评论全部丢失；
|
|
|
* “友链”与“关于”页面的重写还在进行中。
|
|
|
|
|
|
@@ -21,19 +21,19 @@ tags:
|
|
|
|
|
|
## 代码
|
|
|
|
|
|
-先来聊聊新站代码相关或者说跟这个Hugo主题相关的话题吧。这个主题目前是自用主题，很多地方都写死了，而且代码比较粗糙，还有一堆bug，因此暂时不会开源。Hugo在中文博客圈里并不是特别火，用的人较少，主题什么的也是挺少的，我是很愿意为社区作贡献的，所以等以后代码拿得出手了我一定会丢到GitHub上的。
|
|
|
+先来聊聊新站代码相关或者说跟这个Hugo主题相关的话题吧。这个主题目前是自用主题，很多地方都写死了，而且代码比较粗糙，还有一堆bug，因此暂时不会开源。Hugo在中文博客圈里并不是特别火，用的人较少，主题什么的也是挺少的，我是很愿意为社区作贡献的，所以以后等代码拿得出手了我一定会把它丢到GitHub上的。
|
|
|
|
|
|
-设计灵感来自Hugo主题“[Sam](https://github.com/hivickylai/hugo-theme-sam)”。第一次看到这主题，瞬间就被Get到了。打开文章页，从上到下，映入眼帘的是文章的标题，而不是Header里的站点标题，舒服。更重要的是字符与字符之间有一定的间距，不是挤到一起的，配上灰色背景，那叫一个优雅啊，Zhuangbility爆表。本来就打算用这个主题了，实际使用下来，细节问题还是挺多的，改也不好改了，索性就自己写一个，这才有了后面的故事。
|
|
|
+设计灵感来自Hugo主题“[Sam](https://github.com/hivickylai/hugo-theme-sam)”。看到这个主题的第一眼就被Get到了。文章页，从上到下，映入眼帘的是文章的标题，而不是Header里的站点标题，舒服。排版上，字符与字符之间有一定的间距，不是挤到一起的，配上灰色背景，那叫一个优雅啊，Zhuangbility爆表。本来就打算用这个主题了，实际使用下来，细节问题还是挺多的，改也不好改了，索性就自己写一个，这才有了后面的故事。
|
|
|
|
|
|
-写一个Hugo主题可比WP主题容易多了。也就研究了几个主题的源码，对着文档，几天就把HTML骨架写好了，加样式也比想象中的要顺利。第一次尝试在项目中使用Sass，安装node-sass时踩了不少坑，最后发现了Koala这个软件。Koala带了编译sass的环境，不用手动安装了，而且还带js压缩的功能，简直神器。这次为了实现底栏自动隐藏以及异步加载评论的功能，写了100多行js，最终效果还挺好的，我都有点不敢相信自己。
|
|
|
+写一个Hugo主题可比WP主题容易多了。也就研究了几个主题的源码，对着文档看，几天就把HTML骨架写好了，加样式也比想象中的要顺利。第一次尝试在项目中使用Sass，安装node-sass时踩了不少坑，最后发现了Koala这个软件。Koala带了编译sass的环境，不用手动安装了，而且还带js压缩的功能，简直神器。这次为了实现底栏自动隐藏以及异步加载评论的功能，写了100多行js，最终效果还挺好的，我都有点不敢相信自己。
|
|
|
|
|
|
-主题依然走极简风，借鉴了Sam主题多处写得好的地方，包括一些页面布局和文字间距。配色并没有抄Sam主题，抄的是[Humble Bundle](https://www.humblebundle.com)的官网，配色什么的借鉴一下不犯法吧？在框架与库的使用方面：
|
|
|
+主题依然走极简风，借鉴了Sam主题多处写得好的地方，包括一些页面布局和文字间距。配色并没有抄Sam主题，抄的是[Humble Bundle](https://www.humblebundle.com)的官网，配色什么的借鉴一下不犯法吧？在框架与库的使用上：
|
|
|
|
|
|
* Normalize.css
|
|
|
* 动画库[animate.css](https://daneden.github.io/animate.css/)
|
|
|
* 图标库使用[Feather](http://feathericons.com/)，轻量，风格也很搭。
|
|
|
|
|
|
-既然都用静态博客了，何不把加载速度优化到极致。animate.css特地用gulp自定义构建了，只取了几个需要的动画。借助sass，几个css被合并成一个文件，输出还是压缩的，最终css只有15KB，gzip压缩后只有4.5KB了。js也是做了压缩的，100行代码也就2KB，Feather图标并没有用那个js，而是直接将svg插到html文档中，减少了请求数，也避免了js动态插入svg到DOM时造成的图标显示延时。对了，还有字体，我并未使用任何网络字体，用了“Trebuchet MS”，字体绝大多数Windows PC和Mac均有安装，实测iOS也支持，就Android不支持，不过也无所谓，默认的Sans Serif字体也不丑。
|
|
|
+既然都用静态博客了，何不把加载速度优化到极致。animate.css特地用gulp自定义构建了，只取了几个需要的动画。借助sass，几个css被合并成一个文件，输出还是压缩的，最终css只有15KB，gzip压缩后只有4.5KB了。js也是做了压缩的，100行代码也就2KB，Feather图标并没有用那个js，而是直接将svg插到html文档中，减少了请求数，也避免了js动态插入svg到DOM时造成的图标显示延时。对了，还有字体，我并未使用任何网络字体，用的是“Trebuchet MS”。该字体绝大多数Windows PC和Mac均有安装，实测iOS也支持，就Android不支持，不过也无所谓，默认的Sans Serif字体也不丑。
|
|
|
|
|
|
评论系统使用Valine，需要加载Leancloud的依赖库，100多KB，评论本身js体积也有70多KB。这要是跟页面同步加载，那我前面做的那些优化就……一夜回到解放前。所以我就开始学习js异步加载的操作了，由于整个项目并没有用jQuery，就不能用jQuery的`.getScript`方法了，最终我在Stackoverflow找到了原生js的替代方法：
|
|
|
|
|
|
@@ -62,4 +62,6 @@ https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-nat
|
|
|
|
|
|
那些说静态博客不好管理的，怎么样，涨姿势了吧。
|
|
|
|
|
|
-写的有点乱啊，基本上是想到哪写到哪，就说这么多吧，以后说不定会写个详细点的Hugo博客部署指南……
|
|
|
+写的有点乱啊，基本上是想到哪写到哪，就说这么多吧，以后说不定会写个详细点的Hugo博客部署指南……
|
|
|
+
|
|
|
+**更新**：利用DNSPod智能解析，国内访客自动解析到腾讯云服务器，国外访客解析到Netlify全球CDN。
|
