Initial commit

.gitignore

@@ -0,0 +1,3 @@
+.sass-cache/
+public/
+hugo.exe

archetypes/default.md

@@ -0,0 +1,7 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+comments: false
+---
+

archetypes/posts.md

@@ -0,0 +1,9 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+tags: 
+  - blog
+  - story
+---
+

config.toml

@@ -0,0 +1,37 @@
+baseURL = "https://www.xxxlbox.com"
+languageCode = "zh-cn"
+DefaultContentLanguage = "zh"
+title = "Track3's Blog"
+
+# enableGitInfo = true
+
+pygmentsCodefences  = true
+pygmentsUseClasses  = true
+hasCJKLanguage = true
+
+[blackfriday]
+hrefTargetBlank = true
+
+[taxonomies]
+  tag = "tags"
+  category = ""
+
+[params]
+  author = "Track3"
+
+  dateform       = "Jan 02, 2006"
+  dateformFull   = "2006-01-02 15:04"
+  dateformList   = "Jan 2"
+  dateformSingle = "Mon, Jan 2"
+
+[[params.mainMenu]]
+  link = "/posts/"
+  text = "Posts"
+
+[[params.mainMenu]]
+  link = "/friends/"
+  text = "Friends"
+
+[[params.mainMenu]]
+  link = "/about/"
+  text = "About"

content/about.md

@@ -0,0 +1,27 @@
+---
+title: "About"
+date: 2018-03-20T20:16:07+08:00
+draft: false
+comments: false
+---
+
+博主是一只大学狗，纺织工程专业。喜欢折腾各种事物，热爱数码科技，本想学计算机专业，却在纺织的路上越走越远。
+
+本站始建于2016年，用了两年多的WordPress，终于还是换成了静态博客。不管怎么说，这还是那个分享个人所见所闻所思的自留地，欢迎每一位访客的到来，欢迎留言评论互动。
+
+## 联系博主
+
+* Telegram: http://t.me/mytrack3
+* Twitter: [@mytrack03](https://twitter.com/mytrack03)
+* QQ: 5-7-2-3-0-3-7-1-2 [^1]
+* Weibo: [@Track3](http://weibo.com/u/2350674815 )
+* Email: pengliabc(at)live.cn[^2]
+
+也欢迎去这些地方和博主一起玩耍：
+
+* Steam: [@Track3](http://steamcommunity.com/profiles/76561198244211610)
+* 网易云: [@Track3](http://music.163.com/#/user/home?id=34583669)
+
+[^1]: 去掉“-”，原因你懂的。
+
+[^2]: 你懂的。

content/friends.md

@@ -0,0 +1,24 @@
+---
+title: "Friends"
+date: 2018-03-20T20:16:19+08:00
+draft: false
+comments: true
+---
+
+这里是本站的留言板，你可以在这里随意留言。
+
+以下是小伙伴们的网站：
+
+* [闲淡酱杂货店](https://www.geekcj.com/)
+* [清风小墨](https://windy.ink/)
+* [Ozem's Blog](https://ozem.xyz/)
+* [远方的行者](https://webnotes.me/)
+* [果壳Sir](http://gksir.top/)
+
+欢迎友链，友链原则：
+
+* 以交朋友为目的。
+* 可以相对稳定地运营下去。
+* 无须经常更新，但应还在更新！
+* 内容可以不正经，但是要正常！
+* 无所谓权重，但不应被标记为不安全网站！

content/posts/2017/3-years-of-win10.md

@@ -0,0 +1,74 @@
+---
+title: 三年Win10，回首
+date: 2017-10-02T20:40:21+08:00
+draft: false
+tags:
+  - Windows 
+---
+
+三年前的今天，Windows 10首次与我们见面。转眼三年过去，回头看，Win10的变化真的不少。
+
+作为第一时间加入Windows Insider Program的第一批Win10用户，我对Win10有一种特别的感情。Win10的成长之路中，有太多的惊喜与感动了，这里就简单回顾一下Win10发展历程上一些令人难忘的瞬间吧。
+
+## "Windows TH" or "Windows 9" ?
+
+很早就听到下一代Windows的传言，当时已经有了代号为Windows Threshold的系统运行截图泄露出来。于是大家就在猜测下一代Windows的正式命名，可以说大部分网友都认为是Windows 9，然而有意思的是，北京时间10月1日凌晨的那场面向媒体的小规模发布会上，Terry宣布下一代Windows将是Window 10。记得那时正是我高三的国庆节假期，早上起很早打开IT之家，Windows 10这几个字疯狂轰炸我的眼睛，然后评论都是什么“Windows9吧吧主哭晕在厕所”“软媒Win9之家哭晕在厕所”什么的，真的挺搞笑的，好吧，微软你赢了。
+
+![Windows10 name](https://ojirvqiyr.qnssl.com/images/2017/img017.jpg)
+
+我第一时间加入了Windows Insider Program，装双系统尝鲜了Win10的第一个对外公开的版本Build 9841。对这个版本第一感觉就是，真的太像Win8.1了。把开始屏幕移到了开始菜单里，Charms栏并未移除，用Win+C组合键依然可以呼出，桌面图标，任务栏也是Win8的风格。窗口边框变成了只有一像素宽，过渡动画也被移除，让人很不习惯。现在看来真的很难想象，Win10能变化成今天这个样子，是要动多少刀子啊……
+
+随后推送Build 9860时也是让人难忘，在系统设置里检查更新，下载时没有进度条，5个小圆点就一直在那转圈。我足足等了四个小时都没什么变化，也不知道进展如何，最后没办法直接下系统镜像安装……传言这个版本进行了7000多处改进，好吧，基本上都是内核改进。另外有人记得Build 9879的硬盘丢失事件吗，幸亏我装的是慢速版，并没有碰到。
+
+可以说这个阶段Win10基本上只能算是雏形，当时公开的这些版本叫做技术预览版（Technical Preview），显然，Win10还有很长一段路要走。
+
+## “下一篇章”
+
+2015年1月22日北京时间凌晨1点（1月21日太平洋时间早上9点），微软将在总部雷德蒙德举行发布会，主题为“Windows 10: The Next Chapter”。这次发布会可以说干货满满：宣布Win10一年免费升级、发布Win10面向消费者的预览版、宣布手机版Windows 10、宣布全新浏览器斯巴达（Project Spartan）、Continuum概念的提出、Cortana来到PC，另外还有重磅硬件Hololens……发布会后推送的Build 9926开始菜单获得重新设计，任务栏也用上今天Win10上默认的黑色配色。可以说终于有个版本看上去比较像今天的Win10了。
+
+![Windows10 9926](https://ojirvqiyr.qnssl.com/images/2017/img018.jpg)
+
+四月底的Build 2015大会上，斯巴达浏览器被正式命名为Microsoft Edge，同时，技术预览版也被改名为Insider Preview。我们已越来越能够感觉到，Win10离正式版越来越近了。
+
+终于2015年7月29日，Win10正式版来了，版本锁定Build 10240。
+
+然而，这并不是终点，而是起点。
+
+## Windows as a Service
+
+Windows 10将是最后一个Windows，这意味着Windows将不会再有像Win11、Win12这样大版本的更新了，而是隔一段时间进行小更新。也就是说Windows 10将不仅仅是作为一款软件来销售，更是当成一种服务来卖。因此Win10会不断得到更新，不断完善。
+
+Win10正式版10240推出后，微软随即开始了TH2分支的开发。新系统在15年11月面向Win10用户推送，这个版本是Build 10586，外部版本号称为1511，按年月来命名。我个人感觉Build 10240更像是一个为了让Win10尽快上市而赶工完成的伪正式版，一些功能特性并没有达到预期，1511版正是对10240的一些细节上的完善，可以说，1511这个版本才算是真正的Win10初代正式版。1511新特性主要有：
+
+* **右键菜单。**在任务栏上点击右键，弹出菜单变成与开始菜单和磁贴上的右键菜单一致深色风格，而不是10240上与桌面右键菜单相同的浅色风格。
+* **标题栏配色。**标题栏颜色可随着系统颜色同步改变
+* **Edge浏览器。**支持标签页预览、Cast Media和WebRTC。
+* **应用可安装到其他分区。**应用商店下载的应用可放在C盘之外。
+* **……**
+
+TH2分支后便是RS（Redstone）分支了。16年7月，Win10一周年更新（Anniversary Update）推送，版本锁定Build 14393。时过一年，Win10的免费升级期限也到了，可是改系统时间也能享受免费升级的Bug却迟迟没有修复。可能三年10亿安装量的目标有些大了，MS也就睁一只眼闭一只眼了。不过好消息是，Win10八个月装机量已突破 2.7 亿，看来完成目标还是很有希望的嘛。
+
+当然，1607作为一周年的大更新，新特性也自然不少：
+
+* **Windows Ink。**平板电脑和支持触控的笔电带有手写笔会很实用，提供不错的绘画手写体验。
+* **Edge浏览器扩展。**可在应用商店下载。
+* **Cortana升级。**锁屏上可唤醒Cortana。
+* **系统界面调整。**开始菜单布局逻辑调整、操作中心图标被移到了任务栏最右侧……
+* **安装界面尴尬的中国古诗。**
+* [……](https://www.ithome.com/html/win10/244377.htm)
+
+时间迈向2017年，RS2分支迎来正式版Build 15063，这次更新被称为创意者更新（Creators Update），外部版本号1703。
+
+* **画图3D。**经典《画图》程序可能是很多“老司机”们刚接触电脑时的好基友，承载了很多老用户的回忆。现在我们有了更强的《画图3D》，可以轻松创造3D图像，放飞创意。创意者更新大概就是这么得名的吧。
+* **游戏模式。**
+* **Windows Defender迎来更加Modern的设计。**
+* **夜灯。**开启之后，屏幕会显示偏暖色调，减少蓝光伤害。
+* [……](https://www.ithome.com/html/win10/302312.htm)
+
+三年来，Windows 10的各种变化远远不是简单罗列一下就能说尽的，不过总之，Win10是越来越好了，越来越好看，越来越好用。不出意外的话，秋季创意者更新（Fall Creators Update）将在17号推送，期待全新的设计语言Fluent Design（Project Neon）……
+
+Win10的时代，我们不仅仅是见证人，从“Win9”突然变Win10，经历Win10从襁褓到弱冠的整个历程，我们更是Win10时代的参与者。用户从来没有在Windows的开发中有这么高的参与度，用户的反馈从来没有受到像现在这样的重视。正如Win10的Slogan：
+
+> Windows 10 is not for all of us, but for each of us.
+
+![Ninja Cat](https://ojirvqiyr.qnssl.com/images/2017/img019.jpg)

content/posts/2017/decided-to-buy-cuphead.md

@@ -0,0 +1,16 @@
+---
+title: 下定决心买《茶杯头》
+date: 2017-10-05T22:22:08+08:00
+draft: false
+tags:
+  - Steam
+  - 游戏
+---
+
+纠结了几天，最终还是决定买下。
+
+复古卡通画风，配上爵士乐BGM，一下子就把我带回童年。为了保持20世纪30年代的卡通美学，游戏的每一帧均为手工绘制，这工作量也就可想而知了。难怪Cuphead几年前就已亮相，直到现在才正式发售。
+
+可以说，游戏的品质毋庸置疑，唯一让我犹豫的就是游戏难度。看到Steam上很多玩不下去退款的，我就先下了破解版体验了一下。虽然狠狠砸了几次手柄，不过感觉游戏还没有难到让我碰都不想碰的地步。难，但是很有意思，决定入正了。
+
+这次就不在Steam上买了，Win10商店这边可是支持"XBOX Play Anywhere"啊，万一以后买了Xbox呢？

content/posts/2017/goodbye-my-windows-phone.md

@@ -0,0 +1,92 @@
+---
+title: 别了，我的Windows Phone
+date: 2017-08-14T21:47:52+08:00
+draft: false
+tags:
+  - Windows
+---
+
+Windows Phone死了。一年之前我是不信的，现在，我不得不信。
+
+几天前看到了WP8.1结束主要支持的消息，心头一凉。去[微软官网上查询](https://support.microsoft.com/zh-cn/lifecycle/search?alpha=Windows%20Phone)得知，WP8.1主要支持结束于2017年7月17日，这也就意味着WP8.1用户将不会再收到任何功能上的更新了。要知道有相当一部分的WP用户并未升级到Win10 Mobile系统（事实是很多机型被微软放弃适配，理由是硬件性能不达标），WP8.1在Windows手机阵营中仍占有七成的份额，因此这个消息算是足够劲爆了。
+
+## 我与WP
+
+我接触Windows Phone系统并不是很早，记得那是WP阵营最好的时代——2014年。
+
+故事还要从老妈的直板按键机说起。老妈使用多年的爱机因充电口松动导致充电易中断，严重影响正常使用，因此换机就提上了议事日程。正如很多的2G用户那样，老妈对手机的要求就是打电话发短信，所以她还是更倾向于用功能机。作为家里最懂手机的人，老妈换机就必然要参考我的意见，我当然是劝他换智能手机啦。用过几年Android的我深深感到此系统不适合她，又对WP系统“觊觎已久”，因此我最终还是说服了老妈，下单了Lumia 525。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img012.jpg" alt="Lumia 525" caption="依然健在的Lumia 525" class="left" width="403" height="302" >}}
+
+525使用Lumia Black固件，搭载WP8 GDR3系统。这个在今天看来边框能跑航母的手机，打开了我进入WP世界的大门。说实话，第一次打开这个系统的时候真被惊艳到了，系统丝滑流畅，相当跟手，磁贴界面在Android、iOS那种桌面图标面前显得是如此别致，过渡动画也是逼格满满。深入体验下来，微软服务用起来也是爽爽的，OneDrive与系统深度集成，跟电脑同步照片文件真心方便。WP系统比Android省心不少，老妈也能轻松上手了，还学会了玩微信……
+
+要说WP系统功能缺失其实我并没有明显的感觉，不过得知WP8.1有预览版的时候我还是忍不住就升级了。WP8.1的改进可以说是巨大的，一些一直遭受诟病的问题在WP8.1上得到了比较好的解决。WP8.1用起来很是舒服，我深深感到已经无法离开这个系统，因此我觉得，我的下一部手机将会是Windows Phone。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img013.jpg" alt="Lumia 830 box" caption="只留下了盒子和一段美好的回忆" class="right" width="403" height="302" >}}
+
+真的不会再有哪个手机能像Lumia 830这样打动我了，从发布会看到手机的第一眼，我就被Lumia 830的工业设计深深吸引。高考过后，要入新机了，当然，我入了骚绿色的830。拿到手机后简直爱不释手，细细端详，这手机真的是不管从哪个角度看都好看啊，我不得不佩服老诺的设计功底（此时微软已经完成对诺基亚手机业务的收购，不过还是原班人马）。830使用Lumia Denim固件，系统为WP8.1 GDR1。之后的大学时光里，830一直都是我的主力机。应用生态方面，我也没什么好抱怨的，常用的应用都有了，就是有时一些应用的功能缺失会导致小尴尬，不过还在可以接受的范围内。
+
+本来想着WP我会一直用下去，没想到那天……暑假收假，火车凌晨四点半到榆次站，没公交，跟别人拼车，没想到手机竟落在车上。可能是我习惯调成震动的缘故，手机打了没人接，而且手机电量也不足了。回到宿舍定位，之后便杳无音讯——我的Lumia 830就这样丢了。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img014.jpg" alt="一切信号停留于此" caption="一切信号停留于此" width="745" height="310" >}}
+
+没想到，我就此离开了WP。由于实在是找不到适合心仪的WP新机，就想先买个安卓用用。考虑到以后可能还是要用回WP，于是我就买了台便宜的魅蓝 note3。它陪伴了我接近一年的时间，万万没想到这一年的时间，微软一台新手机也没出。我对WP死心了，这个暑假，我在闲鱼上淘了个二手Nexus 6p，那么这也就意味着我短期不会再用回WP了。
+
+我离开WP不是因为系统不好用，也不是因为应用生态不行，更不是因为大家都脱坑了，而是微软自身对WP的消极态度。看看WP阵营还有新机发布吗？官方商城上都没手机的影子了。以前微软口口声声说不会放弃Windows Phone，好，我信，只要你手机在出，我就会买。再看看现在这架势，不明摆着破罐子破摔吗，那我还有什么必要坚持呢？
+
+别了，我的Windows Phone。再也不会熬夜等新系统推送了，再也不会因应用有更新了而激动不已……
+
+## 扶不起的阿斗
+
+WP系统真是个扶不起的阿斗，即使诺基亚倾其所有，光荣献身。要知道微软在手机行业有近20年的征战历史。早在1997年，微软就发布了第一代移动设备操作系统Windows CE1.0，远远早于iPhone以及Android的2007年。那为什么微软的Windows Phone乃至整个移动部门都走如此艰难呢？我个人总结了这么几点：
+
+### 折腾
+
+微软真的太能折腾了，战略决策失败。微软似乎一直没有为WP系统的发展规划好清晰的路线图。WM6到WP7，基本上就是推倒重来，这个我们暂且不提。WP8改用NT内核，一举废掉WP7的CE内核。系统的内核不同，这意味着什么？这意味着WP8与WP7几乎就是两个系统，虽然它们有着相似的系统界面。这一更改直接导致WP7设备与WP8系统无缘。可以说这是广大WPer最受伤的一次经历了吧。之后又发生了什么呢？普通用户这可能感觉不明显了，WP8.1推出了一个叫UAP(Universal Apps)的概念，就是通用应用，应用的格式从xpa改为appx，与桌面Windows实现了一定的意义上的共通。Windows 10年代，微软又提出UWP(Universal Windows Platform)的概念，即通用平台。UWP支持跨设备跨体系结构，一次编写，全平台运行。我承认，微软的这些理念都非常先进，都非常面向未来。然而，这每一次应用架构的更改，可都是需要开发者或多或少地重写代码啊，看看你的用户数量市场份额吧，有多少开发者愿意陪着你玩！每次，都是大折腾，一次两次也就算了，数数看这有几次了？
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img014.jpg" alt="Win的统一之路" caption="艰难的统一之路：从统一内核到统一应用再到统一平台" width="600" height="331" >}}
+
+### “龟软”
+
+在系统功能残缺不全时，微软动作太慢，市场份额被Andriod和iOS蚕食。就说一个应用媒体播放音量与来电通知音量单独设置的功能，微软硬是拖到WP8.1才加入。这个说出来一些一直用Android或iOS的读者会感到震惊吧？8.1以前的WP系统只有一个音量调节，是的，游戏、音乐、来电、短信、闹钟等通通是一个音量。再比如说常用设置快捷的快捷开关，这种重要的功能同样是在WP8.1中加入的。连个WiFi不得不进系统设置，在长长的列表里翻找，想想就累。你可能会说有应用可以把常用设置固定到开始界面的，没错，我的确装过这种应用，不过我不认为需要用第三方应用来满足刚需的系统是一个合格的系统。更不用说WP很多接口都不开放，第三方应用也无能为力了。
+
+就这样慢慢地，Windows Phone系统就被戴上了残废系统这个帽子。可以说直到Windows Phone 8.1这一代，WP系统的功能才跟上Android以及iOS的步伐，然而这都为时已晚。说WP8.1是残废系统肯定不对的，然而，“残废”的想法早就在人们的头脑中根深蒂固了，微软的不走心导致用户以及开发者的大量流失，应用生态的建设难上加难。要知道生态上落后了可并不是像添加几个功能这样好追上的。
+
+### “巨硬”
+
+微软太固执死板，不重视用户的反馈，满满的大企业作风。前面说到的音量分离、快捷开关包括通知中心哪一个不是WP用户满心期盼吵着要的功能？为什么微软一直都无动于衷呢？微软一直都在用做桌面的思路来做移动系统，WP系统的手机硬件配置似乎总比同时期的Android低一些，而价格却又相对更高一些，WP系统的授权费功不可没。微软梦想着能像自己的PC系统那样，坐收授权费，可是却被现实狠狠地扇了几耳光。素质不过硬，并没有人会用你的系统，即使你是桌面操作系统领域的霸主。
+
+说了这么多，总结起来就是：在怎么讨好消费者以及开发者两方面，微软都做得不好。然而这一切的根本原因是微软根本就不重视移动部门，哪怕微软拿出做桌面系统十分之一的热情，Windows Phone也不会落到今天这般田地。
+
+## 未来
+
+微软错过了互联网黄金十年，现在看来是不是又错过了移动时代？Windows Phone包括Windows 10 Mobile该何去何从？传说中的Surface Phone会到来吗？
+
+我们来看看纳德拉提出的“移动为先，云为先”的战略吧。说实话，目前从表面上来看我真的只能看出云为先。
+
+* 大幅减记并购来的诺基亚资产，百亿美元的收购算是打了水漂。
+* 今年的Build2017大会，第一天的Keynote通篇讲云计算，演示用的手机还是iPhone。
+* Lumia迟迟未出新品，产品线几乎停掉。
+* 云计算业务营收疯狂增长，而WP系统份额则跌到接近消失
+
+请问移动为先体现在哪里，自己的独家应用纷纷登陆登陆Android、iOS等移动平台算是移动为先吗？
+
+相信微软心里是有数的。微软在云为先上动作非常快，因为没有沉重的包袱，而在移动为先上，情况就要复杂得多。微软的很多独家服务，以往只能在微软自己的平台上才能用到，现在则覆盖到了更多的平台上。与其让那些软件服务独占，还不如让更多的人使用上自己的产品。这其实就是一种甩掉包袱的表现，不能让WP微不足道的市场份额拖累了自家服务的推行以及用户的培养。微软现在停止了Lumia产品线的更新应该也是想甩掉包袱，准备搞些大动作。
+
+Build2017上演示的骁龙835运行Windows 10，想想看，这样的设备不就是Surface Phone吗。一台搭载ARM芯片的手机，接上显示器和键鼠，就可以运行桌面应用，这不就是我们梦寐以求的移动计算吗？以前的思路是把手机系统慢慢改造成与PC共通，建设与PC通用的应用架构，使手机能够变得更加强大，以代替一些必须电脑才能完成的事；现在的思路就是让桌面Windows能够在ARM架构上运行，同时适应移动设备的小屏触摸操作，然后手机接上键鼠显示器后不光能运行UWP通用应用，而且还能运行桌面应用。不管是哪一种思路，UWP通用应用都是重要的一环，微软的想法是让通用应用慢慢取代传统应用程序，最终把Windows打造成真正的通用计算平台。
+
+最近又听说了微软代号为Andromeda的系统，外媒Windows Central爆料:
+
+> Andromeda是一个Windows版本，旨在模块化，其不受设备形态约束，能够模块化适用于不同的设备，并且支持折叠特性，支持Win10 CShell。 需要注意的是，现有Windows 10 Mobile手机不会获得红石3更新，会待在Feature2分支。但会更新Feature2分支的API，使Feature2也能使用为红石3、4开发的UWP应用。
+
+听到这个消息，我便不得不相信Surface Phone的存在——估计就是搭载着这个Andromeda系统。那么，现有Windows 10 Mobile手机不能升到新系统会不会被骂啊，毕竟历史似乎又一次重演了。不管怎么样，UWP通用应用平台这个东西应该是会一直坚持下来的吧，以前各种换内核还架构的，终归还是为了实现这个大一统，现在这个已经实现得差不多了吧，所以UWP应该不会有大变化了……
+
+不得不说，在实现多个计算平台统一上，微软的做法是真的激进，有时候甚至觉得是“步子大扯着蛋”了，频繁的变故导致用户和开发者纷纷逃离。我个人还是看好微软的万体一核战略的，最近各种查找资料，感觉纳德拉所说的“移动为先，云为先”可能就是这样的：
+
+> 我一直在等Surface Phone（或者确切说是等Continuum 3.0），不是执着，不是执迷，而是，我坚信绝大部分的办公性PC都不应该继续存在，一个公司和组织内部办公桌上应该只有显示器键盘鼠标，要么全公司全部云主机化办公，要么移动设备即为主机。上班，无线接入显示器和键鼠，下班，随身带走，随时也可以在家里加入外设办公或娱乐。手机即主机，这是一个大的进化方向。而手机做PC主机，Windows系统是现在演进成本最小的。
+>
+> 云计算办公主机和手机即主机，这两种都是很不错的方向，起码，能极大的节约社会资源，凡是极大的节约社会资源和推动社会进步的，一定会成现实。第一代的计算机，像山一样，然后Wintel 带我们进入第二个时代：个人PC时代，再接着，会是移动PC时代和随身助理时代。
+>
+> <cite>-来自IT之家</cite>
+
+说到这里，我想表达的是，Windows Phone应该已是过去式了。是时候收好你的记忆，挥手告别了，微软移动新的时代或许就要到来……

content/posts/2017/my-personal-landing-page.md

@@ -0,0 +1,91 @@
+---
+title: 自己写的个人Landing Page
+date: 2017-10-22T21:10:04+08:00
+draft: false
+excerpt: 苦学Web前端，终于弄了个像样的网页出来。
+tags:
+  - 前端
+---
+
+苦学Web前端，终于弄了个像样的网页出来。不废话，链接：[i.xxxlbox.com](https://i.xxxlbox.com)。
+
+![Landing页](https://ojirvqiyr.qnssl.com/images/2017/img020.jpg)
+
+我给这个页面起了个名字叫“The One”。为什么叫这个名字呢？说来真的巧，正想起名字的时候，听到了这首《[The One](http://music.163.com/#/song?id=469272617)》。虽然歌曲表达的意思跟页面内容完全无关，不过借用一下做个标题也无妨嘛……
+
+## 先说说特点吧：
+
+1. 使用Bootstrap框架，响应式布局；
+2. 黑白相间的熊猫配色，极简主义；
+3. 向下滚动时会有呼出动画（Reveal Animations）。
+
+## 使用的框架/库/API：
+
+* [Bootstrap](http://getbootstrap.com/)；
+* [jQuery](http://jquery.com/)；
+* [Font Awesome](http://fontawesome.io/)；
+* [lightGallery](http://sachinchoolur.github.io/lightGallery/)；
+* [scrollReveal.js](https://scrollrevealjs.org/)；
+* [百度地图 JavaScript API v2.0](http://lbsyun.baidu.com/index.php?title=jspopular)。
+
+为了充实文章内容，我决定贴出一些代码，分享一下心得。
+
+首先我想分享一下CSS里"vh"和"vw"这两个单位，他们分别表示相对浏览器视窗的高度和宽度。浏览器整个可视区的高度和宽度分别被定义为100vh和100vw，所以如果你想把一个元素的高度设定到占满整个浏览器，那么可以简单地设定`height: 100vh`。而且，不管你怎么改变窗口大小，元素的高度总是会保持刚好占满浏览器视区。看到很多人用js实时改变高度来实现铺满效果，反正我的原则就是，CSS能实现的，坚决不碰JavaScript，这个单位简直不要太好用。
+
+然后我想分享一下Flexbox轻松实现元素垂直、水平居中对齐的方法。
+
+拿我的这个页面的header部分来说吧，我的header中有两个container，一个是装着标题以及社交按钮的大容器，一个是装着“点我向下滚动”按钮的靠下的容器。html就像这样：
+
+```html
+<header>
+    
+  <div class="container" id="hdr-center">
+   <h1 id="hdr-big-text">大标题</h1>
+    <h2 id="hdr-smaller-text">小标题</h2>
+    <p id="hdr-social">
+      <a class="fa fa-flag" href="#"></a>
+      …
+      <a class="fa fa-envelope" href="#"></a>
+    </p>
+  </div>
+    
+  <div class="container">
+    <p>
+      <a class="fa fa-chevron-down" id="showmore" href="#me"></a>
+    </p>
+  </div>
+    
+</header>
+```
+
+首先，我指定整个header部分：
+
+```css
+header {
+  display: flex;
+  flex-direction: column;   /* 设定主轴的方向（即项目的排列方向）为垂直方向 */
+  justify-content: center;  /* 定义项目在主轴上居中对齐 */
+  align-items: center;      /* 定义项目在交叉轴上居中对齐 */
+}
+```
+
+
+这样，header中的两个容器在水平和垂直方向上都是居中的。“点我向下滚动”按钮跑中间去了，那怎么样把它拉到header底部呢？这个时候，我对它上面的容器也就是`#hdr-center`设定：
+
+```css
+#hdr-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+`flex: 1`算是`flex-grow: 1`的简写。`flex-grow`默认为0，表示如果轴上存在剩余空间，元素不放大。当只指定`#hdr-center`为`flex-grow: 1`时，该容器会扩大到占满整个轴，这样“点我向下滚动”按钮自然就被挤到下面了。然后再把`#hdr-center`设为`flex`，里面的大小标题和社交按钮就可以完美居中了！
+
+Flexbox真的是快速定位布局的神器，难怪新版Bootstrap都改用Flexbox定位了。如果不用Flexbox的话，垂直居中就不好实现，估计就是要把position设为absolute，然后`left: 50%; top: 50%;`之类的，这就把元素从正常的文档流中剥离了，总感觉这样的居中让人不舒服……
+
+心得体会大概就说这么多吧，总之，写这个页面真的学到了不少东西。栏目设计参考了一些大佬的个人主页，毕竟萌新，各位大佬莫见笑。另外，既然是前端，所有代码都是公开的，需要的可以直接拿走。也欢迎大家给我一些建议，遇到什么兼容性问题欢迎给我反馈，当然了，请务必使用现代浏览器.
+
+等等，是不是少了点什么？好像缺一个反馈表单。以我目前的能力，还做不出表单提交的后端。还是慢慢来吧，不管怎么说，这次整个页面都是自己一手设计、一行一行代码码出来的，虽说简陋了点，但我还是蛮开心的。毕竟萌新，以后会越来越好的。

content/posts/2017/raspberrypi-lede-setup.md

@@ -0,0 +1,65 @@
+---
+title: 变身智能路由器，树莓派配置LEDE
+date: 2017-05-29T17:25:44+08:00
+draft: false
+tags:
+  - 折腾
+  - 树莓派
+---
+
+对于一台仅仅是能用来上网的路由器，我是不满足的。为了做很多interesting的事，我把目光投向手上这台吃灰已久的Raspberry Pi 3B。
+
+早就听说树莓派可以做路由器，可是网上总找不到详细的教程，[OpenWrt](https://openwrt.org/)官方也没有适配树莓派3B，我一直都没成功。直到有一天，我惊喜地发现OpenWrt的一个分支[LEDE](https://lede-project.org/)支持3B了，体验了一番，发现稳定性还有些问题，无法正常使用。最近发现LEDE有更新，试了一下，发现终于能用了。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img005.gif" alt="techdata" caption="最先支持3B的一版是17.01.0，最近更新的版本是17.01." width="1232" height="171" >}}
+
+去[这里](https://lede-project.org/toh/views/toh_fwdownload?dataflt%5BBrand*~%5D=Raspberry+Pi+Foundation)下载树莓派LEDE固件。
+
+下载.gz格式的压缩包，解压，用Win32 Disk Imager将镜像烧录至SD卡。这个就不用多说了，相信玩树莓派的都熟悉。
+
+由于树莓派刷LEDE系统后默认IP地址是192.168.1.1，这会与一般路由器的网关地址冲突，所以如果我们要把树莓派直接连到现有路由器上，以实现同一个网段对树莓派的访问，首先就要更改路由器的LAN IP为192.168.1.0或其他你开心的数字（ 确保是同一个网段）。要是不想碰现有路由器，或者你现在并没有路由器（正准备用树莓派做一个），可以直接把树莓派用网线连接至电脑（LEDE的WLAN默认是关闭的，只能用有线；此时最好关闭电脑的WLAN）。我这里就是直接有线连接的。浏览器输入192.168.1.1进入LEDE的Luci web界面。
+
+![Luci web](https://ojirvqiyr.qnssl.com/images/2017/img006.gif)
+
+设定好密码以后进入Network>Wireless，点击"Edit"。在下面的"Interface Configuration"中的"Wireless Security"选项卡中设定WIFI密码（加密方式选WPA2-PSK），然后启动WLAN网络。
+
+![Luci interfaces conf](https://ojirvqiyr.qnssl.com/images/2017/img007.gif)
+
+此时就可以拔下网线，用WIFI连接，腾出来的那个网口就是WAN口了，我们把宽带接上。再次打开LEDE的后台配置界面，进入Network>Interfaces，编辑"lan"的配置。在"Physical Settings"里面去掉"eth0"即物理有线网卡的勾。保存并应用。这样，就可以确保树莓派上的有线网口是WAN专用了。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img008.gif" alt="Luci interface conf" caption="取消'eth0'的勾选" width="1454" height="589" >}}
+
+然后，我们回到"Interfaces"界面下，点击新建一个"wan"的配置，协议请根据自己的实际上网方式选择，我这里是PPPoE。下面的"Cover the following interface"选"eth0"。然后输入宽带账号密码就可以连接上网了。
+
+![Luci interfaces conf](https://ojirvqiyr.qnssl.com/images/2017/img009.gif)
+
+![Luci interfaces conf](https://ojirvqiyr.qnssl.com/images/2017/img010.gif)
+
+有了网络，首先我们可以安装Luci的中文语言包。进入System>Software，点击"Update lists"更新一下源。直接搜素"zh-cn"，安装"luci-i18n-base-zh-cn"。装完后进System设置，"Language and Style"里面选择中文就行了。
+
+![Luci software conf](https://ojirvqiyr.qnssl.com/images/2017/img011.gif)
+
+此时还有一个问题。我用的16G的SD卡，在LEDE下大概只有200多MB可用，我们还需要手动为文件系统扩容。我是参照网上的教程，用的fdisk和resize2fs，然而失败了。最后resize2fs的时候时报错，目前还没解决。不过听说还有个工具叫GParted，但是没有Linux的环境，Windows下需要U盘启动，就没有试……
+
+不知道是不是心理因素，用了树莓派的路由器感觉网比以前快多了（65元的渣渣路由器你懂的）。就是开网页的时候感觉反应飞快。虽然网速没有变快，但是感觉网络整体响应变快，可能网络延迟降低了吧。毕竟树莓派四核CPU加上1G内存对一个路由器来说简直豪华……
+
+然而，如果我们把树莓派刷成路由器，只是简单的把它当成一个上网用的设备，那是不是有点过于大材小用了？LEDE是OpenWrt的一个分支，本质还是一个Linux系统，因此有很多软件包可以使(zhe)用(teng)。这些软件可以极大地拓展路由器的功能，实现各种黑科技。
+
+LEDE采用opkg的软件包管理系统，类似于Debian系的"apt-get"与红帽系的"yum"。我大致看了看软件源，感觉基本上可以把路由器弄成一个服务器了。
+
+下面说说我安装一些软件包：
+
+* openssh-sftp-server：实现sftp访问树莓派，方便传输文件。
+* UPnP：通用即插即用。一般的路由器都支持，没有理由不安装。
+* QoS：判断网络行为所需的带宽并进行自动分配，保障重要的网络行为数据优先转发，还可以为某个IP限速。一般的路由器都支持，没有理由不安装。
+* DDNS：动态dns，将自己的公网IP映射到一个固定的域名解析上，实现公网访问路由器，配置好防火墙和端口转发后还可以直接访问内网。由于一般宽带都不是固定IP的，所以这很重要。普通路由器也支持这个功能，不过往往是只支持花生壳（oray.com）的服务，LEDE上这个支持更多的服务商。
+* Aria2 + yaaw：下载机，设置好DDNS后轻松远程下载。
+
+还有一些软件是打算装的，还没有来得及：
+
+* Adblock：屏蔽广告。
+* Samba和MiniDLAN：打造NAS和多媒体共享中心。
+* LNMP：LEDE是带了一个web server的（不然Luci的web界面怎么打得开），叫uHTTPd。看了一下软件源，发现Nginx和php版本好新，Apache很旧。可能没有多少人会在路由器上跑数据库吧，mysql版本才5.1……考虑到树莓派的性能，sqlite可能是更好的选择。
+* Seafile：私有云。
+
+说实话，树莓派还是适合用来折腾，而不是拿来使用。毕竟不是专门的网络设备，网卡的带宽还是共享USB的，而且还是USB2.0，所以就捉襟见肘了。另外，市面上有很多智能路由器产品，它们都有图形化的后台界面，有配套的手机app，只需要几个简单的操作就能实现上面的很多功能，用户体验不知道要强多少。然而，费尽辛苦做成一件事时的喜悦，真的只有经历过才会懂。这也许就是折腾的意义吧。

content/posts/2017/stories-behind-amd.md

@@ -0,0 +1,87 @@
+---
+title: 写在“锐龙”上市之际——AMD那段励志的故事
+date: 2017-02-24T20:27:13+08:00
+draft: false
+excerpt: 十年磨一剑，AMD Ryzen终于来了。可是AMD背后的故事，又有多少人了解？
+tags:
+  - AMD
+  - Intel
+---
+
+北京时间2月22日22:00，AMD在美国正式发布了全新的Ryzen（中文名“锐龙”）处理器。
+
+作为A饭，怎按捺得住内心的激动！要知道在这以前的很长一段时间里，PC半导体行业都被牙膏厂Intel支配，想买到高性能的U，穷鬼也只好捡破烂了。真不敢相信，自己竟能在有生之年见证“农奴翻身把歌唱”之日！实测AMD Ryzen 7 1800X完全可以匹敌Intel Core i7-6900K，而且价格还是后者的一半（黑心牙膏厂一直都在利用垄断攫取暴利）。桌面CPU市场终于可以从Intel挤牙膏的节奏中走出来，风暴终于来临了！
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img001.jpg" alt="Ryzen发布" caption="Ryzen来了！" width="1022" height="611" >}}
+
+也许直到今天，我们谈起AMD时，一些人仍会感到陌生，就算知道这家企业，印象也往往是什么CPU性能不如Intel、GPU市场份额没NVIDIA高之类的。必须承认的是AMD曾一度一蹶不振，持续低迷了很长一段时间，曾经的辉煌已鲜有人知。下面我们就来谈谈AMD的发展历程吧，一段艰苦奋斗的励志故事。
+
+首先我有必要解释一下，AMD是"Advanced Micro Devices"的缩写，翻译过来就是“超微半导体公司”，简称“超微”或“超威”（也许是因为在IT业界还有一家知名的主板企业“SuperMicro”在中国同样被称为“超微”，官方确定的中文名是“超威半导体”）。
+
+## 最初的十二年
+
+AMD成立于1969年，只比Intel晚一年，但它的基础却比Intel公司薄弱得多。公司的启动资金只有10万美元，刚成立时只能在创办人之一的约翰·凯利（John Carey）家中的客厅办公。除资金问题外，人才的缺乏也是AMD公司成立之初的一大棘手问题。Intel的两位创业者，诺伊斯（Robert Noyce）是集成电路的发明者之一，戈登·摩尔（Gordon Moore）则是著名的摩尔定律（Moore's Law）的提出者，他们在创办Intel前就在业界享有很高声望。而AMD就是一家普普通通的创业公司，不被大家看好，也很难吸引到人才。因此，AMD的创业初期可谓是困难重重。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/jerry-sanders.jpg" alt="AMD创始人桑德斯（Jerry Sanders）" caption="AMD重要的创始人桑德斯（Jerry Sanders）" width="1000" height="594" >}}
+
+通过团队的不懈努力，几个月后，AMD推出了第一个产品——一个4位的寄存器Am9300。次年AMD推出出了自己的专利产品 Am2501逻辑计数器（Am2501 logic counter）, 取得了成功。之后AMD又相继开始生产晶圆，发行股票，在马来西亚建立生产基地，进入RAM市场……一直稳步发展。
+
+## 与Intel的合约
+
+Intel的先天优势使它在微处理器的研制上一开始就处于领先地位。1974年Intel研发出8位微处理器8080。AMD看到了微处理器所蕴藏的巨大市场，投入技术力量进行研究，根据逆向工程第二年就开发出兼容8080的微处理器8080A，投放市场。当时，为Intel设计出全世界第一颗微处理器的工程师Federico Faggin带领安泽曼、西玛等人离开Intel，投靠石油大亨埃克森（Exron），成立了Zilog公司，研制出一种叫Z80的微处理器，性能上甚至高于Intel同档次的8085（8080的增强型）。Intel为和Zilog竞争，需要生产更多的8085，但又苦于自己的生产能力不够。这时创始人桑德斯亲自到Intel公司总部谈判授权事宜，Intel同意授权AMD做它的第二供应商（Second Source）。
+
+之后，AMD表现出强劲的发展势头，公司的业绩达到了一个又一个的里程碑。当Intel开发出16位处理器8086时，却迟迟不愿给AMD授权，因为此时Zilog公司的威胁已不那么严重，Intel认为自己不需要借助AMD的力量了。何况AMD生产的芯片已经对Intel自己的产品构成了威胁，Intel不愿看到AMD再继续发展壮大。
+
+Intel在1978年推出了世界上第一颗x86微型处理器。1981年，IBM设计出了自己的PC产品并希望使用Intel的x86处理器，同时要求将AMD作为第二供应商。Intel不想丢失像IBM这样大的订单，只好又一次与AMD谈判，签署了一个十年技术交换协定（10-year technology exchange agreement）。1984年AMD的销售额达到了创纪录的11亿美元，同年Intel的销售额是16亿美元，作为第二供应商，能取得这样的成绩是很不容易的。此时，Intel已经有点坐不住了，准备采取些行动，防患于未然。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2017/img002.jpg" alt="Intel i386 & AMD Am386" caption="Intel的i386和AMD的Am386" class="right" width="359" height="558" >}}
+
+1985年Intel推出了32位处理器80386，但是当386芯片正式上市后，Intel却宣布将由自己独家制造。AMD公司和桑德斯本人都被Intel的出尔反尔激怒了,根据双方1981年签订的协议获得授权是理所当然的事情。在双方谈判无效的情况下，AMD在1987年一纸诉状将Intel告上了法庭。
+
+对于Intel公司来说，只要诉讼一天没有最终判决，AMD就一天不能生产386芯片，所以就想尽办法把这场官司拖着，希望能拖垮AMD。要是AMD像这样一味等待无异于坐以待毙。桑德斯果断地决定，AMD要自主开发完全兼容80386的芯片。
+
+一个精干的技术团队迅速投入开发工作，终于在1989年开发出AMD自己的386芯片Am386。但就在AMD公司上下举杯庆贺、为Am386的正式上市作准备的时候，Intel从一个极其偶然的机会获得了这一信息。为阻止AMD借助此新产品东山再起，Intel别出心裁地想出个理由，起诉AMD非法使用“386”这一所谓Intel的名字，Am386的上市又被拖延了。好在法院最后判定386是一个通用的名字，而非Intel所专用，Am386才得以上市，但这已经是1991年3月的事情了。虽然在Intel的百般刁难下，AMD错过了销售新产品的最佳时机，但Am386的推出对于AMD来说意义重大，它打破了Intel一手垄断PC处理器市场的局面，是AMD独立研发处理器的成功开始。
+
+AMD和Intel的官司从1987年开始，一直拖到1995年才最终结束。最后AMD终于取得了生产X86处理器的权利，赢得了在PC芯片业中的生存权和发展权，同时也为此付出了惨重的代价：数千万美元的诉讼开支、公司高层精力的分散以及新产品不能上市的无奈等，难以尽述。AMD能在旷日持久的“马拉松”式的诉讼中坚持下来，与桑德斯顽强不屈、百折不挠的个性是分不开的。这位AMD的领头羊和精神领袖出生在芝加哥一个底层家庭，有一种硬汉子的脾性。在和Intel的抗争过程中，桑德斯毫不屈服，正如他所说的那样：“永不放弃，永不投降！”，因此被誉为“硅谷牛仔”。
+
+## 开发自己的微处理器
+
+接下来AMD在1993年发布Am486，以比Intel版本更低的价格销售。很多OEM，包括Compaq都使用Am486。其实到目前为止，AMD设计的每一款处理器都是逆向工程Intel的产品得到的。由于电脑工业生产周期的缩短，这种策略令AMD越来越难生存下去，因为这意味着他们的技术将一直落在Intel的后头。于是，AMD坚定地走上了一条自主开发处理器的发展之路。
+
+> 我们不能只做Intel的追随者，我们此前似乎一直在模仿或追赶它，这种做法大错特错。
+  <cite>桑德斯（Jerry Sanders）</cite>
+
+1993年，AMD宣布了独立开发AMD K5处理器的项目，业界纷纷看好这颗K5的架构与性能。但是由于采用了全新架构，研制工作的复杂度和难度都大大增加，到了1994年AMD预定发布的日子，K5的开发工作还未完成，因而挫伤了外界对它的热情。1995年K5处理器终于上市，AMD对这款处理器给予了很高的期望，希望它能狙击Intel势头正盛奔腾（Pentium）处理器。可这时AMD才发现自己的一个重大失误：K5和Pentium的针脚不兼容。当时绝大多数主板都是为Pentium处理器设计的，要采用AMD的K5处理器就必须重新设计新的芯片组和主板，而依AMD当时的实力和影响力又无法做到这一点，结果K5的架构一直无法推广起来。这给了AMD一个沉痛的教训：即使有比市场主流产品更优越的架构，如果不能兼容于市场上的现有规格，还是无法成功的！
+
+经历K5的惨痛教训后，AMD决定引进新的技术力量以充实开发队伍。1996年收购了NexGen。随后推出K6、K7。其中具有K7具有重大战略意义，被命名为Athlon（速龙）。Athlon在性能测试中全面超过当时的Pentium Ⅲ处理器，从Am386到K7，经过长期不懈的努力，AMD终于在CPU技术上超越了Intel。
+
+2002年4月24日，AMD正式推出了K8架构的Opteron(皓龙)，它具有划时代意义：世界上第一颗64位的CPU。是的，“amd64”就是这么来的！
+
+与此同时，Intel那边也丝毫不敢松懈，Pentium也一直在不断更新换代。
+
+这段历史也是整个行业发展史上最精彩的篇章。正是由于AMD的存在，Intel才不敢停下脚步，努力创新，生怕自己落后。红蓝大厂之间的竞争，直接加速了技术的进步。
+
+麦克尔·马龙说，在所有的高科技公司中，AMD公司是最可怕，也是最英勇的；它年复一年，代复一代，顽强地挑战这个星球上最成功、最著名、最具竞争力的公司之一。在同Intel的竞争中，Zilog、国家半导体、摩托罗拉、德州仪器、Cyrix、IDT、Rise等一个个败下阵来，不是烟消云散，就是无奈放弃，只有桑德斯带领的AMD，历经33年，不仅没有倒下，而且实力越来越强大。在80年代Intel授权的15家第二供应商中，SIEMENS、FUJITSU、HARRIS等都已放弃，只有AMD一家迄今还屹立在电脑芯片业。无怪乎桑德斯在接受UPSIDE杂采访时无比自豪地说：“唯一能阻止Intel在计算机世界实现全面控制的就是AMD。”
+
+## “后桑德斯”时代
+
+2000年，桑德斯正式把CEO的职务交给公司总裁瑞兹，自己则留任公司的董事长直到明年年底。瑞兹是桑德斯在2000年从摩托罗拉半导体公司挖来的芯片高手，以严格的营运专家著称。桑德斯相信这位新的CEO会做得比自己还好。
+
+现在桑德斯退居幕后了，他留给继任者的是一个在台式机处理器上和Intel分庭抗礼的AMD，一个在工作站和服务器处理器上雄心勃勃的AMD，一个在移动处理器上大举进入的AMD；更重要的是，他留给继任者的是一个在技术创新上已经能与Intel一争高下的AMD。
+
+可是之后发生的事多少有点让人揪心——AMD在与Intel的竞争中落后了。Intel推出了Core(酷睿)处理器，AMD全面落败，从此就一直被Intel压着。Intel也由于竞争对手不给力，开始了挤牙膏……
+
+2006年，AMD收购了ATI，从此有了自己的图形技术。同时，也与NVIDIA成了竞争对手。虽然AMD整体上持续低迷，但是还是取得了一些成就的。2010年，AMD（ATI）独立显示核心出货量超越NVIDIA成为世界第一。2011年，AMD推出APU=CPU+GPU的概念，即融合（Fusion）CPU及GPU于一体。Xbox One及PS4采用的均是AMD的芯片。
+
+不管怎么说，在Intel与NVIDIA的强力围功下，AMD终究还是活了下来。所以业界也有种说法：AMD是打不死的小强。
+
+现在大家该知道为什么Ryzen的发布让广大A饭如此了激动了吧？经历十年的低迷，AMD在处理器性能方面终于又能与Intel抗衡了。也许Ryzen不会使AMD今年的出货量一举超越Intel，但是市场早就需要这么一个搅局者了。Intel如果短时间内不能拿出产品，必然会选择降价，得实惠的还是广大用户。也许Ryzen并不会让AMD在短时间内崛起，但是它向外界释放了一个信号：红色巨人终于从沉睡中醒来！Intel，你还敢挤牙膏么？
+
+英特尔：不知怎么的7nm工艺突然就成熟了，我们决定8代酷睿直接上7nm！
+
+## 鸣谢-Acknowledgements
+
+本文参考并引用了大量资料以及一些大神的帖子，现将主要的贴出：
+
+* 百度贴吧：[【给不了解AMD的你】AMD公司的历史](http://tieba.baidu.com/p/762849907)；
+* Wikipedia维基百科：[Advanced Micro Devices](https://en.wikipedia.org/wiki/Advanced_Micro_Devices)。

content/posts/2017/what-i-learned-from-removing-seafile.md

@@ -0,0 +1,27 @@
+---
+title: 因卸载Seafile引发的尴尬
+date: 2017-08-17T17:42:40+08:00
+draft: false
+tags:
+  - 折腾
+---
+
+前几天用Seafile搭建私有云时，一不小心吧程序安装在root目录中，导致Nginx死活403 Forbidden，不得已只能删了重装。
+
+先用`rm -rf`命令顺利删掉了Seafile的目录，之后就是删除Seafile在MySQL中创建的三个数据库了：`ccnet-db`、`seafile-db`、`seahub-db`。由于以前经常把WordPress折腾到重装，所以删除数据库的命令我还是记得很清楚的，不就是`drop database database_name;`吗，于是我在命令行中输入`drop database ccnet-db;`，结果……
+
+> ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '-db' at line 1
+
+What？难道新版改了语法？我真的没有注意到后面的提示'-db'，还以为真的是我的语句打错了。首先我检查的是后面的分号是不是打成了中文的“；”，很显然不是，我把成功执行过的sql语句中的分号直接复制下来，结果还是报错。难道是语句前面部分要大写？我试了`DROP DATABASE ccnet-db;`，依然不行。难道是因为这个数据库特殊了，设定了什么不能删除的东西？不可能，明明报的是语法错误啊。百思不得其解，然后我就去找度娘了，还去了Seafile的官方社区，都没有什么线索，场面一度陷入僵局，我甚至想装一个phpmyadmin了。
+
+我仔细看了一下错误提示，好像就是这个"-db"的锅，我猜测这个是MySQL的保留字段，所以整个数据库的名字应该用引号包起来：`drop database "ccnet-db";`，结果不行。那单引号呢，也不行。最后还是上百度查了一下，原来MySQL还真的有保留字，解决方法就是……用单引号括起来？不，那不是单引号，是“\`”这个字符，就是键盘数字1左边的那个键。好吧，问题就这么解决了，感觉自己宛如一个智障……
+
+我以前也删过Seafile的数据库，真的是一切正常啊，这个“-db”肯定是新加的保留字……我不得不吐槽一下Seafile了，你说你加个-db干嘛呢，你这放在数据库里的东西，谁不知道这是个数据库，偏要后面加个-db，有必要吗？重装时询问创建数据库名字时，我默默地把“-db”全都删掉了。
+
+事情远远没有结束。我查了一下“\`”这个键，又发现了一些奇妙的东西。这个符号叫重音符或抑音符，是一个变音符号，用于希腊语（1982年前）、法语、加泰罗尼亚语以及一些其他语言内。重音符在编程方面有独立的用途，通常被码农称为反引号。参见维基百科：[重音符](https://zh.wikipedia.org/wiki/%E9%87%8D%E9%9F%B3%E7%AC%A6)。然后让我很气的是，中文下，这个键可以输入间隔号“·”！我能说我以前一直都用输入法打间隔号吗？
+
+![输入间隔号](https://ojirvqiyr.qnssl.com/images/2017/img016.png)
+
+之后，我把键盘上所有的符号键都试了，发现数字6那个键，就是英文下能打出乘方的“^”，中文下竟打出了省略号……即“Shift+6”。好吧，6个点，数字“6”键，真的好有道理！
+
+你们不要说我水，最起码我打省略号都用的输入法这种高级方式，省略号打六个句点的大有人在，我就不信没人中枪。

content/posts/2017/wp-sites-nginx-conf.md

@@ -0,0 +1,235 @@
+---
+title: WordPress站点如何配置Nginx
+date: 2017-06-17T00:48:35+08:00
+draft: false
+tags:
+  - Nginx
+  - WordPress
+---
+
+从LAMP换到LNMP环境有相当一段时间了，一直在研究怎么配置Nginx最科学，这里就简单分享一下经验。
+
+众所周知，Apache是全球使用最广泛的Web服务器，各种模块很多、教程也多，几乎可以满足你的各种需求。Nginx是一个高性能的Web服务器，它占用资源少，能轻松应对高并发的连接，相比Apache更加轻量化。可以说Nginx与Apache风格迥异，然而，网上很多关于Nginx的教程都是用的Apache的思路，一个配置文件各种写法的都有，让人很疑惑。也许是Nginx配置文件比较智能吧，感觉怎么写都能正常访问，然而作为强迫症，找不到最正确最科学的配置方法，简直难受。
+
+好好看了一下Nginx的官方文档，结合了codex.wordpress.org以及Nginx Wiki上的教程，姑且认为我现在Nginx的配置文件写对了吧，有什么不妥的欢迎讨论……
+
+在运行WordPress时，Nginx与Apache有些区别是你必须要了解的：
+
+* 执行php请求时，Nginx无法直接处理php文件，所以一般它是将php请求传送到后端的php-fpm（默认在本地的9000端口侦听，即127.0.0.1:9000）来处理。而Apache是将php当作自己的一个模块来调用，只要开启了这个模块，无需进一步的配置，Apache就能直接执行php请求。
+* Nginx没有像Apache的.htaccess那样的文件目录级别的配置文件。Apache的配置文件是可以AllowOverride的，也就是说你在.htaccess文件中的配置可以覆盖程序目录中的主配置文件（那么这也就意味着每次请求，Apache都会去读取网站根目录下的.htaccess文件，这效率想想就可怕）。当然对于虚拟主机用户来说，由于无法自行更改Apache的主配置文件，.htaccess就很有用了。WordPress的自定义固定链接功能正是通过自动将伪静态规则添加到.htaccess中实现的，由于Nginx没有这个特性，所以伪静态规则就要在nginx.conf中自行添加了。
+
+## HTTPS+HTTP/2配置
+
+这一部分配置应该写在`http {}`块中。
+
+```shell
+# Upstream to abstract backend connection(s) for php
+upstream php {
+    server unix:/run/php/php7.0-fpm.socket;  #使用unix socket
+    server 127.0.0.1:9000;  #使用TCP端口
+    # 上面两个取决于php-fpm的配置，二选一即可
+}
+
+# Main server
+#
+server {
+    listen       443 ssl http2;
+    server_name  www.xxxlbox.com;      # 你的网址
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;    # 开启HSTS
+
+    ssl on;
+    ssl_certificate fullchain.pem;     # 指定ssl证书路径
+    ssl_certificate_key privkey.pem;
+    ssl_dhparam dhparams.pem;
+    ssl_session_cache    shared:SSL:15m;
+    ssl_session_timeout  30m;
+    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
+    ssl_ciphers   ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS;
+    ssl_prefer_server_ciphers  on;
+
+    root   html/wordpress;     # 指定网站根目录
+    index  index.php index.html;
+
+    location / {
+        # This is cool because no php is touched for static content.
+        # include the "?$args" part so non-default permalinks doesn't break when using query string
+        try_files $uri $uri/ /index.php?$args?;
+    }
+
+    location ~ \.php$ {
+        # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
+        fastcgi_pass   php;
+        fastcgi_index  index.php;
+        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
+        include        fastcgi_params;
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
+        expires max;
+        log_not_found off;
+    }
+
+    location = /favicon.ico {
+	log_not_found off;
+	access_log off;
+    }
+
+    location = /robots.txt {
+        allow all;
+        log_not_found off;
+        access_log off;
+    }
+}
+```
+
+其中，`location / {}`块的`try_files`非常机智。网上很多教程都是在这里用了if判断加rewrite，就像这样：
+
+```shell
+if (-f $request_filename/index.html) {
+    rewrite (.*) $1/index.html break;
+}
+if (-f $request_filename/index.php){
+    rewrite (.*) $1/index.php;
+}
+if (!-f $request_filename){
+    rewrite (.*) /index.php;
+}
+```
+
+这很类似Apache的.htaccess的写法，这样配置必然是可以正常访问的。然而，Nginx官方并不推荐使用if，请参见《[If Is Evil](https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/)》。
+
+`try_files`语句的作用就是按顺序检查文件或文件夹是否存在，返回第一个找到的文件或文件夹，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。拿这里的`try_files $uri $uri/ /index.php?$args?`举个例子：当客户端请求`https://www.xxxlbox.com/post/2031`时，此时`uri$`就是`post/2031`（还是`/post/2031`？我不知道）。很明显，这是一个为了美观的“假”链接，网站目录下没有post这个文件夹，`$uri`和`$uri/`都是不存在的，所以请求会被重定向为`https://www.xxxlbox.com/index.php?$args?`。结果请求就被发送到php-fpm了，WordPress自己会判断请求的地址，因此就能显示正确的内容。另一个例子：当客户端请求`https://www.xxxlbox.com/wp-content/uploads/2017/10/img1.png`时，显然，此时$uri能找到，该png文件会直接被发送给客户端。由此可见，`try_files`能很好地支持WordPress的自定义固定链接功能，同时避免了每次都进行if判断，十分高效，推荐使用。
+
+## 301跳转，强制https访问
+
+```shell
+# Redirect non-www to www
+#
+server {
+    listen       80;
+    listen       443 ssl http2;
+    server_name  xxxlbox.com;
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+
+    ssl_certificate 1_xxxlbox.com_bundle.crt;
+    ssl_certificate_key 2_xxxlbox.com.key;
+    ssl_dhparam dhparams.pem;
+
+    return 301 https://www.xxxlbox.com$request_uri;
+}
+
+# Redirect http to https
+#
+server {
+    listen       80;
+    server_name  www.xxxlbox.com;
+
+    return 301 https://www.xxxlbox.com$request_uri;
+}
+```
+
+在网上搜索“Nginx 301跳转”，很多地方都是这么做的：
+
+```shell
+server {
+    listen       80;
+    server_name  www.example.org  example.org;
+    if ($http_host = example.org) {
+        rewrite  (.*)  http://www.example.org$1;
+}
+```
+
+Nginx官方文档上是这么写的，强烈建议大家去看看这一页：
+
+> This is a wrong, cumbersome, and ineffective way. The right way is to define a separate server for `example.org`
+>
+> <cite>-《[Converting rewrite rules](http://nginx.org/en/docs/http/converting_rewrite_rules.html)》</cite>
+
+这里使用的是`return 301`，也是新版Nginx推荐的用法。
+
+## WP Super Cache
+
+Apache下，WP Super Cache可以自己生成rewrite规则并写入.htaccess文件中，而Nginx没有.htaccess这样的机制，因此rewrite规则需要自己配置。这个规则可以直接放入`server {}`块中。
+
+```shell
+# WP Super Cache rules.
+#
+set $cache_uri $request_uri;
+
+# POST requests and urls with a query string should always go to PHP
+if ($request_method = POST) {
+    set $cache_uri 'null cache';
+}
+
+if ($query_string != "") {
+    set $cache_uri 'null cache';
+}
+
+# Don't cache uris containing the following segments
+if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
+    set $cache_uri 'null cache';
+}
+
+# Don't use the cache for logged in users or recent commenters
+if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
+    set $cache_uri 'null cache';
+}
+
+# 这一部分用于支持WP Super Cache的“移动设备支持”功能。由于现在一般主题都是响应式的，这个功能很少会用到，所以这一块默认被注释。
+# START MOBILE
+# Mobile browsers section to server them non-cached version. COMMENTED by default as most modern wordpress themes including twenty-eleven are responsive. Uncomment config lines in this section if you want to use a plugin like WP-Touch
+#if ($http_x_wap_profile) {
+#    set $cache_uri 'null cache';
+#}
+
+#if ($http_profile) {
+#    set $cache_uri 'null cache';
+#}
+
+#if ($http_user_agent ~* (2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800)) {
+#    set $cache_uri 'null cache';
+#}
+
+#if ($http_user_agent ~* (w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-)) {
+#    set $cache_uri 'null cache';
+#}
+# END MOBILE
+```
+
+此时你的`location / {}`块中`try_files $uri $uri/ /index.php?$args?`应加上WP Super Cache的路径，即：
+
+```shell
+location / {
+    try_files /wp-content/cache/supercache/$http_host/$cache_uri/index-https.html $uri $uri/ /index.php?$args?;
+}
+```
+
+当然如果你的不是https站点，应稍作修改：
+
+```shell
+location / {
+    try_files /wp-content/cache/supercache/$http_host/$cache_uri/index-http.html $uri $uri/ /index.php?$args?;
+}
+```
+
+把WP Super Cache设置为Mod_rewrite模式，这样的话，借助WP Super Cache生成静态html文件，当条件符合时，Nginx可以直接把这些静态文件发送给用户，完全绕过php，实现全站伪静态。
+
+另外，WordPress上还有一个很有名的缓存插件叫W3 Total Cache，它的Nginx规则在WordPress文档里也能找到：https://codex.wordpress.org/Nginx#W3_Total_Cache_Rules
+
+## 一些其他问题
+
+我们知道WordPress能上传文件的最大体积是由php.ini的配置决定的。除此之外，Nginx对文件的上传大小也有限制（默认好像是2MB），超过这个大小WordPress会报http错误。因此nginx.conf的`http {}`块中需加一句`client_max_body_size  64m;`（改成你想要的大小）。另外，别忘了开启gzip压缩，`gzip on;`。
+
+使用`nginx -t`命令可以测试nginx.conf的语法是否正确。
+
+暂时就说这么多吧，有什么其他东西以后再慢慢添加。并非专业人士，有问题欢迎指出。
+
+个人感觉Nginx的配置文件比Apache的简洁多了，写Nginx的配置文件就跟写作文一样，每一行的意思都很清楚，非常接近英文语句，可读性高。还记得我刚换Nginx时的各种不适应，感觉现在已经离不开了。Nginx的一些特性真的是让人不得不爱。
+
+---
+
+我的Nginx配置参考自这些页面，英语好的强烈建议打开看看：
+
+* https://codex.wordpress.org/Nginx
+* https://www.nginx.com/resources/wiki/start/topics/recipes/wordpress/
+* 关于Nginx的配置常见错误，官方吐槽：《[Pitfalls and Common Mistakes](https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/)》

content/posts/2018/hello-hugo.md

@@ -0,0 +1,18 @@
+---
+title: "Hello Hugo"
+date: 2018-05-07T22:24:24+08:00
+draft: false
+tags: 
+  - Hugo
+  - 折腾
+---
+
+新站终于做好了。
+
+几天前我在《[关于本站的未来](https://www.xxxlbox.com/posts/2018/whats-next-about-this-site/)》一文中详细阐述了我从WordPress换到静态博客系统Hugo的原因，这里也不再赘述。就说说目前博客迁移各方面的情况吧。
+
+* 文章只保留了一部分，一些没有很大意义的就没有搬过来，保留了共11篇文章；
+* 评论全部丢失；
+* “友链”与“关于”页面的重写还在进行中。
+
+关于新站的架构、工作原理、技术细节等话题我们以后会详细讨论。这周有两个考试，等有时间了，我再更新这篇文章……

content/posts/2018/lets-encrypt-wildcard-cert.md

@@ -0,0 +1,57 @@
+---
+title: "Let's Encrypt终于支持泛域名证书了"
+date: 2018-03-14T23:51:28+08:00
+draft: false
+tags:
+  - 折腾
+---
+
+经历两个多月的测试以及两个多星期的延期，Let's Encrypt的ACME v2 API终于正式开放了。我也在第一时间换上了Wildcard野卡证书。
+
+这里简单记录一下用[acme.sh](https://github.com/Neilpang/acme.sh)获取Wildcard证书的方法。
+
+## 安装
+
+我的腾讯云机器用curl下载不下来，因此我直接`git clone`整个库：
+
+```sh
+git clone https://github.com/Neilpang/acme.sh.git
+cd ./acme.sh
+./acme.sh --install
+```
+
+## 生成证书
+
+ACME v2只支持DNS模式颁发证书，即通过在域名上添加一条txt解析记录来验证域名所有权。acme.sh强大的地方在于支持40多种域名解析商的api，像国内常用的腾讯云dnspod、阿里云dns、cloudxns等都支持，这里是完整列表：https://github.com/Neilpang/acme.sh#currently-acmesh-supports。
+
+如果你的DNS服务商在支持之列，就不用手动添加txt记录了。这里以dnspod为例, 首先先登录到[dnspod](https://www.dnspod.cn/)（dnspod已被腾讯收购，账号体系也并入了腾讯云），生成你的api id和api key。然后用`export`命令导入：
+
+```shell
+export DP_Id="your_id"
+export DP_Key="your_key"
+```
+
+然后就可以愉快地获取证书了：
+
+```shell
+./acme.sh  --issue  -d example.com  -d *.example.com  --dns dns_dp
+```
+
+不出意外的话，获取成功，证书会被放在`~/.acme.sh/`目录下。
+
+## 安装证书
+
+证书放在`~/.acme.sh/`目录下了，最好不要直接让Nginx/Apache读取这些证书文件，正确的方法是使用`--install-cert`命令将证书文件复制到Web Server对应目录下，一般是配置文件目录。我这里用的是Nginx：
+
+```shell
+./acme.sh --install-cert -d example.com \
+--key-file       /etc/nginx/key.pem  \
+--fullchain-file /etc/nginx/cert.pem \
+--reloadcmd      "service nginx force-reload"
+```
+
+然后你需要手动修改Nginx的配置文件来安装证书以及key。
+
+值得一提的是，acme.sh支持自动更新证书。在你执行`./acme.sh --install`的时候就已经自动建立了cron job,，每天0:00点会自动检测所有证书。获取并安装证书的命令会被记录下来，证书在60天以后会自动更新，Nginx配置文件目录下的证书也会同步更新，Nginx会重启——你无需任何操作。
+
+可以看到acme.sh获取Wildcard证书还是比较方便的。当然，acme.sh功能远不止如此，很多高级操作请看[acme.sh wiki](https://github.com/Neilpang/acme.sh/wiki/)。

content/posts/2018/my-wp-theme-alchemist.md

@@ -0,0 +1,74 @@
+---
+title: 本人首个原创主题——Alchemist
+date: 2018-02-27T19:56:25+08:00
+draft: false
+excerpt: 用WordPress有一年多了，我一直都用的是别人的主题。考虑了很长时间，终于下定决心要写一款主题。
+tags:
+  - WordPress
+  - 折腾
+---
+
+刚接触圈子时，我是个不折不扣的小白，能把一台服务器装上LAMP环境、跑起WordPress，我都觉得很满足。当时连HTML都不会，自己写一个主题真的是想都不敢想。士别三日，当刮目相看，这一年多的时间，说起来真的很神奇，我对HTML、CSS、JavaScript以及PHP竟然都已略懂一二。
+
+大概是去年10月底的时候，我就着手准备这个主题了，之后的几个月，考试，实习，还有课程设计，忙得不可开交。更可怕的是，越忙，人就越懒。与此同时，我对于页面的设计布局一直是摇摆不定，再加上自己是新手，各种原因导致主题开发进度缓慢。放假后，我终于可以从玩游戏里挤出时间好好写写主题了……
+
+闲话不多说，下面回到主题本身上来吧。
+
+## 名字、灵感及设计思路
+
+按照惯例，先说说名字。
+
+在放假回家的火车上，我终于决定看一下自己在Kindle上买了许久的小说——巴西作家保罗·戈埃罗的《炼金术士》（又名《牧羊少年的奇幻之旅》）。相信很多人都知道这个，人教版语文有节选的课文的。象征性很强的一部寓言，平淡简洁的语言中蕴含着深刻的人生哲理。当年语文课上我就很喜欢这部小说，现在看了完整的可以说更是被深深地震撼到了，于是我就把这个主题命名为“炼金术士”——"Alchemist"。
+
+关于页面的设计与风格上，“极简”是一开始就定下了的方向。多年前的iOS 7官方宣传片至今仍让我记忆犹新。视频前面Jony Ive说的那几句话感觉真是太有道理了：
+
+> I think there is a profound and enduring beauty in simplicity, in clarity, in efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation, it's about bring order to complicity.
+
+复杂有了秩序就是简洁。在设计主题的时候，我在页面该显示那些内容以及页面布局逻辑层级等方面上都非常小心。来自Anders Norén的两个主题：[Hamilton](http://www.andersnoren.se/teman/hamilton-wordpress-theme/)与[McLuhan](http://www.andersnoren.se/teman/mcluhan-wordpress-theme/)，以及我当时在用的主题：[Cover](http://eichefam.net/projects/cover/)都给了我很大的启发。
+
+首页的文章列表参考自McLuhan，文章模板以及页面模板参考Hamilton。第一次看到McLuhan的日期归档首页时，我就深深爱上了这种显示形式。进入首页就是个归档列表，干净整洁，一目了然，不会显示摘要，也不会显示属个分类啊有几条评论啊什么的，只能从标题揣测文章内容，给人一种神秘感，让人有点击进去的理由（标题党的福音）。当点击链接进入文章后，大标题与文章摘要映入眼帘，下面用字号较小、颜色较浅的一串文字显示的是文章所属分类以及评论数量。所属标签和文章发布日期被放到了正文的下面。特色图片也是支持的，而且会以更大的宽度显示（仅较大屏幕上）。可以说文章模板基本上完全照搬Hamilton的布局——好的设计就要虚心学习嘛，毕竟代码是自己的，没有照抄……
+
+Archive以及Search模板的设计参考Cover。所谓Archive模板就是按分类、标签或日期查询文章时显示的页面模板。我觉得在这个页面上如果把文章像首页那样按日期列表显示并不合理，所以用不同的设计还是有必要的。Cover主题这样就很好。
+
+小工具区域可控制隐藏的概念也来自Cover主题。对于WordPress的小工具，我是又爱又恨，它们很有用，但是我始终认为，作为一个注重内容至上的博客，它们很容易让读者分心，而且会失去单栏布局的优雅。这一点我是很认同Cover主题作者的观点的。小工具不应该一刀切砍掉，而是应该把它们隐藏起来，在需要的时候它们可以被呼出来。最终我决定做一个可隐藏的侧边栏。
+
+Alchemist主题的大致布局就是这样了，要说设计风格和排版，我的想法就是：去掉所有纯装饰用的图片，力求实现文字与线条最直接的美感。主色调就是黑白灰，再加上一点点个性的主题色。到时候也许会做一个自定义颜色的选项。
+
+## 实现与现实
+
+即使我已经会了一点PHP，很显然我也还没到能独立写一个WP主题的水平。主题能够做出来很大程度上要感谢Automattic的一个项目：[Underscores(_s)](https://underscores.me)。这是一个有着完整PHP代码以及一点点CSS的起始主题。有了这个起始主题，PHP不好的萌新们也可以更容易地制作出符合WordPress编码规范的主题。
+
+就算有了这个起始主题，作为新手，开发也是很艰难的。刚开始时，我基本都是把PHP源代码和最终HTML输出对着一行一行地看，外加查文档和百度，终于是把主题的每一个文件都差不多弄清楚了，之后基本上就是按着自己想法DIY了。
+
+当主题开发还没有动手的时候，我就告诉我自己：我要一个加载很快的主题。所以我一开始就是拒绝各种CSS框架的。另外，我是直接放弃较老浏览器的兼容性的。我在页面定位布局中使用了大量的Flexbox。`justify-content: space-between`这个属性真的太好用了！我几乎在所有的需要把两行放到同一行中，并且一个居左一个居右的地方用了这个。想到以前用`float + clearfix`都觉得害怕。
+
+Alchemist主题的侧边栏是花费时间最多的一块。js什么的倒是很简单，就是按钮点击事件触发，为侧边栏及主体添加对应的class就行了，CSS样式才是最麻烦的。我的想法是侧边栏可以滚动但是不能出现滚动条，因为页面还有一个滚动条，那样会有两个滚动条。在CodePen上找了很多例子，也在很多有侧边栏的网站上学了学，最终找到了一个让子元素比父元素宽度大16个像素，导致滚动条显示不出来的偏方。为了能让侧栏在小屏幕上以100%宽度显示，而且内容要居中，我真的是使尽了浑身解数。反正最终我摞了三层div。这个侧边栏真的已经到我的能力极限了，说实话，我尽力了。
+
+一直在纠结要不要用Font Awesome。Font Awesome用起来真的很方便，但是对于一个如此精简的主题而言有些臃肿了。我就只要十几个社交网站的图标和几个简单的图标按钮，却要加载一个包含近700个图标的webfonts！可是，我找不到合适的替代方案，只好妥协了。
+
+主题的排版、文字显示很大程度上是[typo.css](https://typo.sofi.sh/)的功劳。Underscores的style.css里已经自带了normalize.css，但是我个人认为normalize.css对中文显示并不友好。主题虽然用英语开发（为了实现translation ready），但是主要目标用户面向国内。于是，我就直接给换了，而且还DIY了一下，毕竟没有经过多个平台的测试，不知道会不会有什么Bug。反正最终的显示效果我个人还是比较满意的。
+
+就在前天，我把自己的生产站点换成了Alchemist主题，本来只是想换上试一下，看看效果就撤下来，没想到效果出乎我的意料。我的主题在Surface Pro 3的高分屏下的显示效果甩开我这段时间一直做开发用的台式机好几条街，文字渲染得太漂亮了！我当即决定不换回来了。然后，我突然发现主题的完成度已经有好高了，我想要的效果基本上已经达到了，同时为了方便后续开发，决定现在就把源代码放到Github上。主题采用GPL-2.0协议开源。
+
+https://github.com/Track3/alchemist
+
+此主题带有很严重的个人偏好，而且自定义的东西非常少，所以很难保证大家都可以接受。而且目前Alchemist主题处在开发初期，还是个半成品，代码相当不成熟，如果你不爱折腾，请避免在生产站点上使用！
+
+## 接下来怎么办
+
+优化，优化，还是优化。
+
+* 页面细节要优化：昨天在各种设备上看了下显示效果，发现有很多地方需要调整，内容的宽度、顶部的高度与页边距、缩进等等。准备为多种大小的屏幕调整一下页面布局，加一波媒体查询。
+* 代码要优化：CSS类名优化，PHP代码再规范一下，毕竟萌新，这方面肯定会犯不少错误。
+
+除了基本的优化以外，还有一些东西要加上。
+
+* 呼出侧边栏后可以点击任何空白处关闭侧栏。（必加）
+* 即时搜索建议，用WordPress REST API实现。在搜索框中输入时下面会给出搜索建议。（必加）
+* 简单的灯箱效果（看情况）
+* Editor Style（看情况）
+* 暂时只想到这些，慢慢添加……
+
+将来如果可行的话，我会把主题发布到wordpress.org上，到时候下载更新就都会很方便了。
+
+最后我想说，如果你喜欢这个主题，欢迎参与进来，提意见，反馈问题，发PR。现在这个阶段我不求Star，因为它还没准备好。

content/posts/2018/whats-next-about-this-site.md

@@ -0,0 +1,74 @@
+---
+title: 关于本站的未来
+date: 2018-05-01T16:55:29+08:00
+draft: false
+tags:
+  - Hugo
+  - JAMstack
+  - WordPress
+---
+
+我想是时候放弃WordPress了。
+
+你可能想问，这两个月到底发生了什么，让一个之前还绞尽脑汁地写WordPress主题，用WordPress用得美滋滋的博主突然就要换博客系统？
+
+首先我想说，我对WordPress没有任何抱怨。很多人嫌它慢，我是不认同的，WordPress做一些基本的优化，速度就不慢，最起码像个人博客这种低流量站是不慢的。我目前的WordPress站禁用浏览器缓存的话基本可以在1s内完成Load，Finish的时间一般都在2s以内，有缓存的话会更快，站内页面跳转常常会有“秒开”的感觉。可以说做了伪静态之后，网络因素影响更大，由动态程序造成的延迟并不明显。你也许会说WordPress后台慢，这个我承认，后台肯定不如Typecho快，但是也不慢了。最近把MySQL升级到8.0，后台编辑文章等操作都明显快了很多，以前要等个一两秒才出现框架，现在也一闪就出来了，真的没什么好吐槽的。可能WordPress最受人诟病的就是它过于复杂臃肿了。WP早就不仅仅是一个博客系统，全球有30%的网站是用WP构建的，这其中有很多是各种CMS、商城甚至是论坛。WP的复杂，或者说强大，我在写一个简单的WP主题时就体会到了，它提供的函数非常多，REST API也很强大。然而，我还是不禁问自己，这些强大的功能，我真的都需要吗？
+
+我就想写个博客。
+
+不是说WP不好，是它功能太全面了，我用不上。WordPress曾今很适合我，现在却不是了。
+
+在刚开始做这个网站的时候，我也不清楚我要做什么样的站，可以说这一年半我都是在摸索。我为什么隔三差五地换主题？除了喜新厌旧之外，更重要的原因就是我也不清楚我想要什么样的主题。折腾了这么多次，我明白了很多道理，更加明确了写博客的意义。
+
+这一年半的时间，我怎么变了这么多？现在看以前的文章，都觉得low得不行，忍不住把它们设成私密。曾经沉迷于折腾各种主题插件，如今都不再热衷；曾经到处留言换友链在各大论坛发帖，现在也渐渐少了；曾经有事没事各种大杂烩都往上发，如今发文章最起码都能带一点自己的思考；曾经对代码什么的不识一丁，如今也会一点Web开发和基本的服务器运维；曾经看到别人网站好酷炫，我都会问，woc，这什么主题啊，我也想换！如今，我会问，这怎么实现的？F12一下……
+
+这一年半的时间，我从刚上大学的Freshman萌新，变成了一只老油条。这期间我一直坚持写博客，虽然文章不多，质量也不高，但仍感觉自己文笔提高了不少，思想也成熟了不少。我越来越感觉到这个记录了我成长的网站该有一些新的动作了（说白了就是逼格不够了）。
+
+过年的时候第一次尝试了Markdown，真是有种相见恨晚的感觉。MD语法简单好学，码字时可以减少手在键盘与鼠标之间切换的频率，让人更加专注于内容本身。这是我想换博客系统的一个重要原因。早就听说过各种静态博客系统，也看见不少友站纷纷跳坑Hexo，我还是耐不住寂寞，自己尝试了一下。其实我一直都对静态博客持保守态度，感觉内容管理应该挺麻烦的，自己用过了以后虽感觉还不错，但是这远远不足以说服我换博客系统。随着对静态博客程序的了解加深，我认识了[Hugo](https://gohugo.io)这个静态页面生成器。
+
+目前最火的静态页面生成器无非就是Jekyll、Hugo以及Hexo。看看[StaticGen](https://www.staticgen.com/)这个网站，上面列出了常见的静态页面生成程序。Jekyll历史最悠久，算是鼻祖，是GitHub Pages的默认引擎，主题什么的也是挺多的。然而问题是Jekyll真的有点老了，页面生成速度较慢。在本地使用时还要装ruby，略麻烦。Hexo的页面生成速度快多了，但是安装还是麻烦，npm安装几千个文件，想想就很烦。其实说Jekyll和Hexo安装麻烦，都是跟Hugo对比才这么说的。Hugo是用GO写的，可以编译成一个二进制文件，在Windows上，下载一个hugo.exe就可以用了，完全不用装GO环境。而且，Hugo的页面生成速度可以说是所有静态页面生成器里最快的，几十篇文章一般也就几百毫秒。真如官网上所说：“Install in seconds, build in milliseconds.”
+
+说静态博客管理不方便是有原因的。设想，你用着某个静态博客程序写博客，现在你离开了你日常操作博客源码的电脑，想发文章，怎么办？你指着别人的电脑，问道：“可不可以借我写篇文章？我可不可以装个git？我可不可以装个Node.js环境?”多不好意思啊，就算别人同意借给你了，搞好这些，也没什么兴致写文章了。当然，git的问题好解决，可以用带git环境cmder，绿色便携，可以装进U盘或塞进OneDrive。其实你甚至可以把整个博客源码放在OneDrive上同步，完全不用Git。不过Jekyll和Hexo还是要解决运行环境的问题，这时Hugo的优势就显现出来了。
+
+可是不管怎么说，这还是没有WordPress方便。事实上，出门在外的时候，想发文章更多的还是得靠手机，这该如何操作？可以说这是我不想换各种静态博客的主因。除此之外，博客评论问题怎么解决？
+
+随着了解的深入，我发现我对静态网页的认识还停留在上个世纪。我以为静态网页就是传统意义上的那种写成什么样就是什么样的，不存在各种数据交互——我完全忽视了Ajax技术的强大。渐渐接触到了“[JAMstack](https://jamstack.org)”这个概念，就是“客户端的JavaScript”、“可复用的API”以及“预构建的Markup”。JAMstack是一个很新的名词，网上能找到的资料也非常少，我已经在写一篇关于JAMstack的文章，谈谈我的理解与思考，目前进度很慢，写了快一个月还没写完，这里就不过多探讨了。JAMstack的网站大概是这样的：将尽可能多的数据预先构建成静态HTML文件，比较动态的、交互性很强的数据（例如评论）做成后端API，用JS来调取。
+
+从JAMstack身上，我仿佛看见了Web的未来。Web是以操作资源（获取、增删）为目的的，是面向数据的。访问一个网页，就是获取数据，或者说资源，不管用什么方式，只要能达到数据传送到目的就行了啊，为什么一定要用动态程序从数据库里拉数据，然后实时生成HTML文件再传送过来呢？做个REST API，浏览器端就可以直接获取数据、处理并插入到页面中。你一定听说过前后端分离、微服务架构这些概念，将各个模块分开部署，独立维护，前端和后端通过REST API来交互，安全高效，而且跨平台。
+
+随后我又认识了[Netlify](https://www.netlify.com)这个公司，事实上JAMstack的概念就是Netlify的CEO，Matt Biilmann提出的。Netlify专注于为JAMstack网站提供提供托管服务，算是一个GitHub Pages的替代品。把你的源码放到Git托管（GitHub、GitLab、Bitbucket等）上，Netlify检测到Commit之后会自动构建并部署，完全不需要手动操作。
+
+听了Matt的很多演讲，发现它经常提到[Smashing Magzine](https://www.smashingmagazine.com/)这个案例，Smashing Magzine是一个关于Web设计与开发的媒体，他们的网站最近就完成了JAMstack的改造。以前用是WordPress做CMS、Shopify做商城、Rails做Job Board、Kirby做活动安排，在各种平台维护一套设计风格差不多的网页。换了全新架构之后，文章用Hugo生成，各种类型的页面可以共用一套API，由于是静态页面，全站CDN就很爽了。可以说Smashing Magzine的案例充分证明了JAM架构做复杂的网站是可行的。Netlify在协助Smashing Magzine完成改造的过程中写了很多开源API，都是做JAMstack网站很好的解决方案。
+
+回到前面的内容管理问题以及评论问题，到这里，我心里已经有数了。
+
+慢慢了解到“Headless CMS”这个东西。不知道大家还是否记得我以前写的那个《[Foxhound主题轻度体验](https://www.xxxlbox.com/posts/2017/try-wp-theme-foxhound/)》，那个主题就是利用了WordPress提供的REST API，页面并不是完全是由PHP生成，如果我没有记错的话应该是用了React。其实这样就是把WordPress当一个Headless CMS来用了。Headless CMS字面上理解就是“无头”的内容管理系统，CMS不再仅仅是对网页内容进行管理，更多的是提供一个通用的接口使各种平台可以获取数据。Headless CMS一般有两种：API Driven和Git-based，大家可以看看[headlesscms.org](https://headlesscms.org)，上面有很详细的介绍。Git-based这种不是以提供API为目的，它能做的是让你可以在浏览器里编辑文章，然后把更改提交到你的Git托管中。Git-based Headless CMS目前我试用过的有开源的[Netlify CMS](https://www.netlifycms.org/)和商业（但是免费）的[Forestry.io](https://forestry.io/)。效果都很好，手机上写博客也不是问题了。
+
+{{< figure src="https://ojirvqiyr.qnssl.com/images/2018/img21.png" alt="Headless CMS" caption="Headless CMS" width="1281" height="718">}}
+
+评论系统目前考虑过这些方案：
+
+* 第三方评论系统。Disqus被墙，畅言、来必力似乎都不错，但还是怕Vendor lock-in，万一哪天他们倒了，数据迁移就麻烦了。暂时不考虑第三方评论系统。
+* GitHub Powered：这种评论系统要么就是像Gitment或Gitalk那样用GitHub Issue来评论，评论者需要一个GitHub账号，要么就是像[Staticman](https://staticman.net/)这种，把评论以json格式提交到repo中，你只需要把repo授权给Staticman，评论者不需要GitHub账号。Staticman我是肯定会考虑的。
+* 第三方后端服务：[Valine](https://valine.js.org/)就是一个不错的解决方案，用[LeanCloud](https://leancloud.cn/)做后端，完成度比较高，用起来很方便。
+* 自建：听说过ISSO，感觉不适合我。我试着用Firebase做后端，自己写了个，评论提交成功了，才发现Firebase已被墙。后来又发现了CouchDB，现在还在折腾中。
+
+综合来看，Staticman或者Valine都还不错。以后自己写个评论系统，也不是不可能，CouchDB还是很好用的。自己写的评论系统名字我都想好了，就叫Couchat，哈哈。
+
+我的Hugo站还在准备中。目前有一个测试站，hugo.xxxlbox.com，托管于Netlify，源码托管在GitLab上。用的这个主题并不是自己写的，很多地方我都不喜欢，怎么改都改不好，遂决定重新撸一个。Hugo是一个我从来都没有接触过的博客系统，它跟WordPress真的很不同，我踩了不少坑。写一个Hugo主题并不容易，Go Template那一套跟PHP很不一样，还得从零开始学。真的很喜欢那个主题，所以新主题会“借鉴”很多，估计最终差不多就是测试站这种效果了……
+
+原先打算等毕业再换Hugo，因为那时腾讯云学生机就要到期了，换静态博客可以以较低的成本来运营，可是，现在我就忍不住了。前面提到的升级MySQL 8.0，性能翻一番的代价是内存占用也翻了一番。可以说，跑上一个WordPress站，Minecraft服务器都开不起了……是时候换了，真的该换了。
+
+![ssh top命令显示mysql内存占用](https://ojirvqiyr.qnssl.com/images/2018/img22.png)
+
+细心的同学们应该发现本站的固定连接格式改了，从数字变成了文章名，就是为了提前适应博客系统的更换。新博客应该要不了多长时间了，敬请期待。
+
+等等，[Alchemist](https://github.com/Track3/alchemist)主题怎么办？这可是你人生中第一个GitHub项目啊！事实上，我把它放到GitHub上，原因主要有二：其一，我要遵循GPL开源协议，其二，我想学习Git以及GitHub的基本操作。原本是想好好打磨，搞个大事情的，可是计划永远都赶不上变化。主题并没有任何宣传，比较偏个人喜好，算是自用主题了，可是不管怎么说，一旦有人表示喜欢并且想用这个主题，我肯定尽力完善它，做到善始善终——喜欢请Star。
+
+一不小心写了这么长，其实这篇文章原本一句话就完了：
+
+我要换Hugo了。
+
+## 尾巴
+
+WordPress会逐渐被淘汰吗？我觉得会，没有什么技术会是永恒的。在合适的时候，会出现合适的技术，解决合适的问题。并不是说WordPress一文不值了，它依然是目前建站最方便、最好的方案之一。就像jQuery，即使Modern JavaScript已经有很多强大的API，jQuery不再是必须，但是谁也不会忘记在那个浏览器标准混乱、JS还不是很强大、移动端还没有崛起的年代，jQuery给Web开发带来的巨大便利。

layouts/404.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+	<div id="spotlight" class="error-404">
+		<p class="catguard">
+			<img src="{{ "img/404.png" | absURL }}" alt="Nothing Found">
+		</p>
+		<div class="banner-404">
+			<h1 id="404-title">404</h1>
+			<p>This page has gone off the grid!</p>
+			<p class="btn-404">
+				<a href="{{.Site.BaseURL}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg> Home</a>
+				<a href="/posts"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg> Posts list</a>
+			</p>
+		</div>
+	</div>
+{{ end }}

layouts/_default/baseof.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="{{.Site.LanguageCode}}">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta name="theme-color" content="#494f5c">
+	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+	<meta name="msapplication-TileColor" content="#2b5797">
+	<meta name="theme-color" content="#00b2ff">
+	<title>{{.Title}}</title>
+	<link rel="dns-prefetch" href="https://ojirvqiyr.qnssl.com/">
+	<link rel="dns-prefetch" href="//cdn1.lncld.net">
+	<link rel="dns-prefetch" href="//unpkg.com">
+	<link rel="stylesheet" href="{{ "css/style.css" | absURL }}">
+</head>
+
+<body id="page">
+	{{ block "header" . }}{{ end }}
+	{{ block "main" . }}{{ end }}
+	{{ block "footer" . }}{{ end }}
+	<script src="{{ "js/main.min.js" | absURL }}"></script>
+	<script>
+		var _hmt = _hmt || [];
+		(function() {
+			var hm = document.createElement("script");
+			hm.src = "https://hm.baidu.com/hm.js?83b1fef86d1ca01ca826379c55b02762";
+			var s = document.getElementsByTagName("script")[0]; 
+			s.parentNode.insertBefore(hm, s);
+		})();
+	</script>		
+</body>
+
+</html>

layouts/_default/list.html

@@ -0,0 +1,22 @@
+{{ define "header" }}{{ partial "header.html" . }}{{ end }}
+
+{{ define "main" }}
+	<main class="site-main section-inner thin">
+		<h1>{{ .Title }}</h1>
+		<div class="content">
+			{{ .Content }}
+		</div>
+		{{- range .Data.Pages.GroupByDate "2006" }}
+		<div class="posts-group">
+			<p class="post-year">{{ .Key }}</p>
+			<ul class="posts-list">
+				{{- range .Pages }}
+				<li class="post-item"><a href="{{.Permalink}}" class="post-title">{{.Title}}</a><span class="post-day">{{ .Date.Format .Site.Params.dateformList }}</span></li>
+				{{- end }}
+			</ul>
+		</div>
+		{{- end }}
+	</main>
+{{ end }}
+
+{{ define "footer" }}{{ partial "footer.html" . }}{{ end }}

layouts/_default/single.html

@@ -0,0 +1,15 @@
+{{ define "header" }}{{ partial "header.html" . }}{{ end }}
+
+{{ define "main" }}
+	<main class="site-main section-inner thin">
+		<h1>{{ .Title }}</h1>
+		<div class="content">
+			{{ .Content }}
+		</div>
+		{{- with .Params.comments }}
+		{{ partial "comments.html" . }}
+		{{- end }}
+	</main>
+{{ end }}
+
+{{ define "footer" }}{{ partial "footer.html" . }}{{ end }}

layouts/index.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+	<div id="spotlight">
+		<div id="me" class="animated bounceIn">Track3's Blog</div>
+		<div id="home-social" class="social-icons animated bounceIn">
+			<a href="https://twitter.com/mytrack03" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
+			<a href="http://t.me/mytrack3" target="_blank"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="feather"><path d="m 22.05,1.577 c -0.393,-0.016 -0.784,0.08 -1.117,0.235 -0.484,0.186 -4.92,1.902 -9.41,3.64 C 9.263,6.325 7.005,7.198 5.267,7.867 3.53,8.537 2.222,9.035 2.153,9.059 c -0.46,0.16 -1.082,0.362 -1.61,0.984 -0.79581202,1.058365 0.21077405,1.964825 1.004,2.499 1.76,0.564 3.58,1.102 5.087,1.608 0.556,1.96 1.09,3.927 1.618,5.89 0.174,0.394 0.553,0.54 0.944,0.544 l -0.002,0.02 c 0,0 0.307,0.03 0.606,-0.042 0.3,-0.07 0.677,-0.244 1.02,-0.565 0.377,-0.354 1.4,-1.36 1.98,-1.928 l 4.37,3.226 0.035,0.02 c 0,0 0.484,0.34 1.192,0.388 0.354,0.024 0.82,-0.044 1.22,-0.337 0.403,-0.294 0.67,-0.767 0.795,-1.307 0.374,-1.63 2.853,-13.427 3.276,-15.38 L 23.676,4.725 C 23.972,3.625 23.863,2.617 23.18,2.02 22.838,1.723 22.444,1.593 22.05,1.576 Z"></path></svg></a>
+			<a href="https://github.com/Track3" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
+		</div>
+		<nav id="home-nav" class="site-nav animated bounceIn">
+			{{- range .Site.Params.mainMenu }}
+			<a href="{{ .link }}">{{ .text }}</a>
+			{{- end }}
+		</nav>
+	</div>
+{{ end }}

layouts/partials/comments.html

@@ -0,0 +1,4 @@
+<div id="comments-loader" class="thin" style="display: none;">
+			<div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle animated infinite bounce"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></div>
+		</div>
+		<div id="comments" class="thin"></div>

layouts/partials/footer.html

@@ -0,0 +1,6 @@
+<footer id="site-footer">
+		<div id="copyright">
+			<p>&copy; 2018 {{ .Site.Params.author }}</p>
+			<p>Powered by Hugo</p>
+		</div>
+	</footer>

layouts/partials/header.html

@@ -0,0 +1,31 @@
+<header id="site-header" class="animated slideInUp">
+		<div class="hdr-wrapper section-inner">
+			<div class="hdr-left">
+				<div class="site-branding">
+					<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a>
+				</div>
+				<nav class="site-nav mobile">
+					{{- range .Site.Params.mainMenu }}
+					<a href="{{ .link }}">{{ .text }}</a>
+					{{- end }}
+				</nav>
+			</div>
+			<div class="hdr-right">
+				<div class="hdr-icons">
+					<a href="https://twitter.com/mytrack03" target="_blank" class="mobile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
+					<a href="http://t.me/mytrack3" target="_blank" class="mobile"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="feather"><path d="m 22.05,1.577 c -0.393,-0.016 -0.784,0.08 -1.117,0.235 -0.484,0.186 -4.92,1.902 -9.41,3.64 C 9.263,6.325 7.005,7.198 5.267,7.867 3.53,8.537 2.222,9.035 2.153,9.059 c -0.46,0.16 -1.082,0.362 -1.61,0.984 -0.79581202,1.058365 0.21077405,1.964825 1.004,2.499 1.76,0.564 3.58,1.102 5.087,1.608 0.556,1.96 1.09,3.927 1.618,5.89 0.174,0.394 0.553,0.54 0.944,0.544 l -0.002,0.02 c 0,0 0.307,0.03 0.606,-0.042 0.3,-0.07 0.677,-0.244 1.02,-0.565 0.377,-0.354 1.4,-1.36 1.98,-1.928 l 4.37,3.226 0.035,0.02 c 0,0 0.484,0.34 1.192,0.388 0.354,0.024 0.82,-0.044 1.22,-0.337 0.403,-0.294 0.67,-0.767 0.795,-1.307 0.374,-1.63 2.853,-13.427 3.276,-15.38 L 23.676,4.725 C 23.972,3.625 23.863,2.617 23.18,2.02 22.838,1.723 22.444,1.593 22.05,1.576 Z"></path></svg></a>
+					<a href="https://github.com/Track3" target="_blank" class="mobile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
+					<!-- <button id="search-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button> -->
+					<!-- <button id="toc-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button> -->
+					<button id="menu-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
+				</div>
+			</div>
+		</div>
+	</header>
+	<div id="mobile-menu" class="animated bounceInRight" style="display: none;">
+		<ul >
+			{{- range .Site.Params.mainMenu }}
+			<li><a href="{{ .link }}">{{ .text }}</a></li>
+			{{- end }}
+		</ul>
+	</div>

layouts/posts/single.html

@@ -0,0 +1,31 @@
+{{ define "header" }}{{ partial "header.html" . }}{{ end }}
+
+{{ define "main" }}
+	<main class="site-main section-inner">
+		<article class="thin">
+			<header class="post-header">
+				<h1>{{ .Title }}</h1>
+				<p class="post-meta">{{- .Date.Format .Site.Params.dateformSingle }} &#183; {{ .ReadingTime }} min read</p>
+			</header>
+			<div class="content">
+				{{ .Content }}
+			</div>
+			<hr class="post-end">
+			<footer class="post-info">
+				{{- with .Params.tags }}
+				<p>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+					{{- range . }}
+					<span class="tag"><a href="{{ "tags/" | absURL }}{{ . | urlize }}">{{.}}</a></span>
+					{{- end }}
+				</p>
+				{{- end }}
+				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> {{ .WordCount }} Words</p>
+				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> {{ dateFormat .Site.Params.dateformFull .Date.Local }}</p>
+			</footer>
+		</article>
+		{{ partial "comments.html" . }}
+	</main>
+{{ end }}
+
+{{ define "footer" }}{{ partial "footer.html" . }}{{ end }}

static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/js/main.js

@@ -0,0 +1,111 @@
+// Auto Hide Header
+//
+let lastScrollPosition = window.pageYOffset;
+let header = document.getElementById('site-header');
+
+const autoHideHeader = () => {
+  let currentScrollPosition = window.pageYOffset;
+  if (currentScrollPosition > lastScrollPosition) {
+    header.classList.remove('slideInUp');
+    header.classList.add('slideOutDown');
+  }
+  else {
+    header.classList.remove('slideOutDown');
+    header.classList.add('slideInUp');
+  }
+  lastScrollPosition = currentScrollPosition;
+}
+
+// Mobile Menu Toggle
+//
+let mobileMenu = document.getElementById('mobile-menu');
+
+document.getElementById('menu-btn').addEventListener('click', () => {
+  if (mobileMenu.style.display == 'none') {
+    mobileMenu.style.display = 'block';
+  } else {
+    mobileMenu.classList.remove('bounceInRight');
+    mobileMenu.classList.add('bounceOutRight');
+    setTimeout(() => {
+      mobileMenu.style.display = 'none';
+      mobileMenu.classList.remove('bounceOutRight');
+      mobileMenu.classList.add('bounceInRight');
+    }, 750);
+  }
+});
+
+//Load Comments
+//
+let commentsLoaded = false;
+let commentsOffsetTop = document.getElementById('comments').offsetTop;
+let commentsLoader = document.getElementById('comments-loader');
+
+const avJsUrl = '//cdn1.lncld.net/static/js/3.0.4/av-min.js';
+const valineJsUrl = '//unpkg.com/valine/dist/Valine.min.js';
+
+const loadScript = (source, beforeEl, async = true, defer = true) => {
+  return new Promise((resolve, reject) => {
+    let script = document.createElement('script');
+    const prior = beforeEl || document.getElementsByTagName('script')[0];
+
+    script.async = async;
+    script.defer = defer;
+
+    function onloadHander(_, isAbort) {
+      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
+        script.onload = null;
+        script.onreadystatechange = null;
+        script = undefined;
+
+        if (isAbort) { reject(); } else { resolve(); }
+      }
+    }
+
+    script.onload = onloadHander;
+    script.onreadystatechange = onloadHander;
+
+    script.src = source;
+    prior.parentNode.insertBefore(script, prior);
+  });
+}
+const loadComments = () => {
+  loadScript(avJsUrl).then(() => {
+    console.log('av-min.js Loaded');
+    loadScript(valineJsUrl).then(() => {
+      console.log('Valine.min.js Loaded');
+      new Valine({
+        el: '#comments',
+        appId: 'QfBLso0johYg7AXtV9ODU6FC-gzGzoHsz',
+        appKey: 'J1tpEEsENa48aLVsPdvwMP14'
+      });
+      console.log('Comments Loaded');
+      commentsLoader.style.display = 'none';
+    }, () => {
+      console.log('Fail to Load Valine.min.js');
+    });
+  }, () => {
+    console.log('Fail to Load av-min.js');
+  });
+}
+
+// Load comments if the window is not scrollable
+if (commentsOffsetTop < window.innerHeight) {
+  console.log('Ready to Load Comments');
+  commentsLoader.style.display = 'block';
+  loadComments();
+  commentsLoaded = true;
+}
+
+window.addEventListener('scroll', () => {
+  autoHideHeader();
+  mobileMenu.style.display = 'none'; //Hide Mobile Menu When Scroll
+
+  if (commentsLoaded == false) {
+    if (window.pageYOffset + window.innerHeight > commentsOffsetTop) {
+      console.log('Ready to Load Comments');
+      commentsLoader.style.display = 'block';
+      loadComments();
+      commentsLoaded = true;
+    }
+  }
+});

static/safari-pinned-tab.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
+-2560z m2631 1698 c18 -6 135 -70 259 -141 215 -124 687 -395 965 -554 155
+-89 158 -92 190 -156 l25 -51 0 -775 c0 -482 -4 -790 -10 -812 -19 -67 -70
+-112 -248 -213 -92 -53 -177 -96 -188 -96 -52 0 -52 -4 -57 545 -2 281 -8 520
+-12 533 -6 19 -13 22 -33 17 -44 -11 -364 -199 -411 -241 l-46 -42 -3 -537
+c-3 -575 -1 -552 -53 -626 -18 -25 -293 -191 -371 -224 -44 -18 -102 -19 -148
+-4 -18 7 -146 77 -284 157 -138 79 -420 241 -626 359 -479 274 -471 269 -504
+334 l-26 53 0 774 c0 559 3 785 12 813 23 78 65 113 288 239 110 62 746 427
+918 527 90 52 182 103 205 113 48 22 109 25 158 8z"/>
+<path d="M2485 4097 c-33 -18 -229 -131 -435 -252 -206 -120 -415 -241 -464
+-269 -49 -28 -112 -72 -140 -99 l-51 -47 40 -35 c22 -19 76 -55 120 -81 506
+-296 881 -511 943 -543 l62 -31 43 21 c23 12 141 79 262 149 854 496 844 490
+845 522 0 10 -21 35 -48 55 -56 45 -65 50 -592 356 -392 227 -501 287 -517
+287 -4 0 -35 -15 -68 -33z"/>
+</g>
+</svg>

static/scss/_normalize.scss

@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

static/scss/_predefined.scss

@@ -0,0 +1,32 @@
+// Colors
+//
+$theme: rgba(26, 188, 156, .5);
+$text: #c6cddb;
+$light-grey: #494f5c;
+$dark-grey: #3B3E48;
+$highlight-grey: #7d828a;
+$midnightblue: #2c3e50;
+
+// Fonts
+//
+$fonts: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+$code-fonts: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
+
+// Mixins
+//
+@mixin dimmed {
+  opacity: .6;
+}
+
+@mixin aTag {
+  a {
+    border-bottom: 2px solid $theme;
+    padding: 1px 2px;
+    transition-property: background-color;
+    word-break: break-all;
+
+    &:hover {
+      background-color: $theme;
+    }
+  }
+}

static/scss/_syntax.scss

@@ -0,0 +1,59 @@
+/* Background */ .chroma { color: #eee; background-color: $midnightblue }
+/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* Keyword */ .chroma .k { color: #66d9ef }
+/* KeywordConstant */ .chroma .kc { color: #66d9ef }
+/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
+/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
+/* KeywordReserved */ .chroma .kr { color: #66d9ef }
+/* KeywordType */ .chroma .kt { color: #66d9ef }
+/* NameAttribute */ .chroma .na { color: #a6e22e }
+/* NameClass */ .chroma .nc { color: #a6e22e }
+/* NameConstant */ .chroma .no { color: #66d9ef }
+/* NameDecorator */ .chroma .nd { color: #a6e22e }
+/* NameException */ .chroma .ne { color: #a6e22e }
+/* NameFunction */ .chroma .nf { color: #a6e22e }
+/* NameOther */ .chroma .nx { color: #a6e22e }
+/* NameTag */ .chroma .nt { color: #f92672 }
+/* Literal */ .chroma .l { color: #ae81ff }
+/* LiteralDate */ .chroma .ld { color: #e6db74 }
+/* LiteralString */ .chroma .s { color: #e6db74 }
+/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
+/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
+/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
+/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
+/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
+/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
+/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
+/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
+/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
+/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
+/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
+/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+/* Operator */ .chroma .o { color: #f92672 }
+/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Comment */ .chroma .c { color: #75715e }
+/* CommentHashbang */ .chroma .ch { color: #75715e }
+/* CommentMultiline */ .chroma .cm { color: #75715e }
+/* CommentSingle */ .chroma .c1 { color: #75715e }
+/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* CommentPreproc */ .chroma .cp { color: #75715e }
+/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+/* GenericDeleted */ .chroma .gd { color: #f92672 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericInserted */ .chroma .gi { color: #a6e22e }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #75715e }

static/scss/style.scss

@@ -0,0 +1,455 @@
+@import "predefined.scss";
+@import "normalize.scss";
+@import "syntax.scss";
+@import "animate.scss";
+
+/* Webkit Scrollbar Customize */
+::-webkit-scrollbar {
+  width: .5em;
+}
+::-webkit-scrollbar-track {
+  background: $midnightblue;
+}
+::-webkit-scrollbar-thumb {
+  background: #888;
+  &:hover{
+    background: $text;
+  }
+}
+
+html {
+  background: $light-grey;
+  line-height: 1.6;
+  letter-spacing: .1em;
+
+}
+
+body, button, input, select, textarea {
+  color: $text;
+  font-family: $fonts;
+}
+
+pre, code, pre tt {
+  font-family: $code-fonts;
+}
+
+pre {
+  color: #eee;
+  background: $midnightblue;
+  padding: 1em 1.5em;
+  border-radius: 5px;
+  display: block;
+  overflow: auto;
+  // -webkit-overflow-scrolling: touch;
+
+  code {
+    background: $midnightblue;
+  }
+}
+
+code {
+  color: #eee;
+  background: $highlight-grey;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin: auto 4px;
+  display: inline-block;
+}
+
+a {
+  color: $text;
+  text-decoration: none;
+  border-bottom: 1px solid $text;
+  transition-property: color, border-color;
+  transition-duration: .5s;
+  transition-timing-function: ease-out;
+
+  &:hover {
+    color: #fff;
+    border-bottom: 1px solid #fff;
+  }
+}
+
+hr {
+  opacity: .2;
+  border-width: 0 0 5px 0;
+  border-style: dashed;
+  background: transparent;
+  width: 80%;
+  margin: auto;
+}
+
+.section-inner {
+  margin: 0 auto;
+  max-width: 1200px;
+  width: 93%;
+}
+
+.thin {
+  max-width: 720px;
+  margin: auto;
+}
+
+.social-icons a {
+  border: none;
+}
+
+.feather {
+  display: inline-block;
+  vertical-align: -.125em;
+  width: 1em;
+  height: 1em;
+}
+
+// Header & Footer
+//
+#site-header {
+  position: fixed;
+  z-index: 1;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: -1px -2px 3px rgba(0,0,0,0.45);
+  background-color: $dark-grey;
+}
+
+.hdr-wrapper {
+  display: flex;
+  justify-content: space-between;
+  padding: .5em 0;
+  font-size: 1.2rem;
+
+  a {
+    border: none;
+  }
+
+  .site-branding {
+    display: inline-block;
+    font-size: 1.2em;
+  }
+  .site-nav {
+    display: inline-block;
+    font-size: 1.1em;
+    opacity: .8;
+    a {
+      margin-left: .8em;
+    }
+  }
+}
+
+.hdr-icons {
+  display: inline-block;
+  font-size: 1.2em;
+}
+
+.hdr-btn {
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+#menu-btn, #search-btn {
+  display: none;
+}
+
+#mobile-menu {
+  position: fixed;
+  bottom: 4.5em;
+  right: 1.5em;
+  padding: .6em 1.8em;
+  z-index: 1;
+  box-sizing: border-box;
+  box-shadow: -1px -2px 3px 0px rgba(0,0,0,0.45);
+  background-color: $dark-grey;
+
+  a {
+    border: none;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    line-height: 2;
+    font-size: 1.2em;
+  }
+}
+
+#site-footer {
+  text-align: center;
+  margin-bottom: 96px;
+  margin-top: 64px;
+  
+  p {
+    margin: 0;
+  }
+}
+
+// Spotlight
+//
+#spotlight {
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+
+  &.error-404 {
+    flex-direction: row;
+  }
+}
+
+.catguard img {
+  max-width: 250px;
+  height: auto;
+}
+
+.banner-404 {
+  margin-left: 2em;
+
+  h1 {
+    font-size: 3em;
+    margin: 0;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: .5em;
+  }
+
+  .btn-404 {
+    font-size: 1em;
+
+    a {
+      display: inline-block;
+      border-bottom: 2px solid $theme;
+      padding: 1px 2px;
+      transition-property: background-color;
+      word-break: break-all;
+
+      &:first-child {
+        margin-right: 1em;
+      }
+  
+      &:hover {
+        background-color: $theme;
+      }
+    }
+  }
+}
+
+#me {
+  font-size: 2em;
+}
+
+#home-social {
+  margin-top: .2em;
+  font-size: 1.4em;
+}
+
+#home-nav {
+  margin-top: .5em;
+
+  a {
+    display: block;
+    border: none;
+    text-align: center;
+    margin-top: .5em;
+  }
+}
+
+// list.html
+//
+.posts-group {
+  display: flex;
+
+  .post-year{
+    font-size: 1.6em;
+    margin: 0.4em 2em 1em 0;
+    @include dimmed;
+  }
+
+  .posts-list {
+    flex-grow: 1;
+    margin: 16px 0;
+    padding: 0;
+    list-style: none;
+
+  }
+
+  .post-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 8px;
+    padding: 2px 4px;
+    border-radius: 3px;
+    transition-property: background-color;
+    transition-duration: .5s;
+    transition-timing-function: ease-out;
+
+    a {
+      border: none;
+    }
+
+    &:hover {
+      background-color: $highlight-grey;
+    }
+  }
+
+  .post-day {
+    flex-shrink: 0;
+    margin-left: 1em;
+    @include dimmed;
+  }
+}
+
+// single.html
+//
+.post-header {
+  border-bottom: 2px solid;
+  margin-bottom: 1.5em;
+  
+  .post-meta {
+  margin-top: -1em;
+  margin-bottom: .6em;
+  @include dimmed;
+  }
+}
+
+hr.post-end {
+  width: 50%;
+  margin-top: 1.6em;
+  margin-bottom: .8em;
+  margin-left: 0;
+  border-style: dotted;
+  border-bottom-width: 4px;
+}
+
+.content {
+  text-align: justify;
+  text-justify: inter-ideograph; //For IE/Edge
+
+  @include aTag;
+
+  figure {
+    max-width: 100;
+    height: auto;
+    margin: 0;
+    text-align: center;
+
+    p {
+      margin-top: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+}
+
+figure.left {
+  float: left;
+  margin-right: 1em;
+}   
+
+figure.right {
+  float: right;
+  margin-left: 1em;
+}
+
+.post-info {
+  font-size: .8rem;
+  @include dimmed;
+  
+  .tag {
+    margin-right: .1em;
+
+    &::before {
+      content: "#"
+    }
+  }
+}
+
+// Comments
+//
+#comments-loader {
+  text-align: center;
+  font-size: 2.5em;
+  margin-top: 2.5em;
+  svg {
+    animation-duration: 1.2s;
+  }
+}
+
+#comments {
+  margin-top: 3em;
+
+  * {
+    color: $text; 
+  }
+
+  @include aTag;
+
+  .vbtn {
+    background-color: #7d828a;
+  }
+
+  .vsys {
+    background-color: $highlight-grey;
+  }
+
+  .vat {
+    color: $theme;
+  }
+}
+
+@media (min-width: 860px) {
+  .site-main {
+    margin-top: 4em;
+  }
+}
+
+@media (min-width: 1300px) {
+  .site-main {
+    margin-top: 6em;
+  }
+}
+
+@media (max-width: 760px) {
+  .mobile, .site-nav.mobile {
+    display: none;
+  }
+  #menu-btn, #search-btn {
+    display: inline-block;
+  }
+
+  .posts-group {
+    display: block;
+    margin-bottom: 2.5em;
+
+    .post-year {
+      margin-right: 0;
+      margin-bottom: 8px;
+      border-bottom: 1px dashed;
+    }
+  }
+  #spotlight.error-404 {
+    flex-direction: column;
+    text-align: center;
+    
+    .banner-404 {
+      margin: 0;
+    }
+  }
+}
+
+@media (max-width: 520px) {
+  figure.left, figure.right {
+    float: unset;
+    margin: 0;
+  }   
+}

static/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#00b2ff",
+    "background_color": "#00b2ff",
+    "display": "standalone"
+}