目录
刚接触圈子时，我是个不折不扣的小白，能把一台服务器装上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 complexity.
复杂有了秩序就是简洁。在设计主题的时候，我在页面该显示那些内容以及页面布局逻辑层级等方面上都非常小心。来自Anders Norén的两个主题：Hamilton与McLuhan，以及我当时在用的主题：Cover都给了我很大的启发。
首页的文章列表参考自McLuhan，文章模板以及页面模板参考Hamilton。第一次看到McLuhan的日期归档首页时，我就深深爱上了这种显示形式。进入首页就是个归档列表，干净整洁，一目了然，不会显示摘要，也不会显示属个分类啊有几条评论啊什么的，只能从标题揣测文章内容，给人一种神秘感，让人有点击进去的理由（标题党的福音）。当点击链接进入文章后，大标题与文章摘要映入眼帘，下面用字号较小、颜色较浅的一串文字显示的是文章所属分类以及评论数量。所属标签和文章发布日期被放到了正文的下面。特色图片也是支持的，而且会以更大的宽度显示（仅较大屏幕上）。可以说文章模板基本上完全照搬Hamilton的布局——好的设计就要虚心学习嘛，毕竟代码是自己的，没有照抄……
Archive以及Search模板的设计参考Cover。所谓Archive模板就是按分类、标签或日期查询文章时显示的页面模板。我觉得在这个页面上如果把文章像首页那样按日期列表显示并不合理，所以用不同的设计还是有必要的。Cover主题这样就很好。
小工具区域可控制隐藏的概念也来自Cover主题。对于WordPress的小工具，我是又爱又恨，它们很有用，但是我始终认为，作为一个注重内容至上的博客，它们很容易让读者分心，而且会失去单栏布局的优雅。这一点我是很认同Cover主题作者的观点的。小工具不应该一刀切砍掉，而是应该把它们隐藏起来，在需要的时候它们可以被呼出来。最终我决定做一个可隐藏的侧边栏。
Alchemist主题的大致布局就是这样了，要说设计风格和排版，我的想法就是：去掉所有纯装饰用的图片，力求实现文字与线条最直接的美感。主色调就是黑白灰，再加上一点点个性的主题色。到时候也许会做一个自定义颜色的选项。
实现与现实 #
即使我已经会了一点PHP，很显然我也还没到能独立写一个WP主题的水平。主题能够做出来很大程度上要感谢Automattic的一个项目：Underscores(_s)。这是一个有着完整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的功劳。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，因为它还没准备好。