879° 20171,770字评论

Bitcron主题制作系列教程

这是一个面向初学者的从零开始系列——《Bitcron主题制作系列教程》。写这个教程的目的有三:

  1. 理理思路,做个记录;
  2. 给需要的人一些帮助;
  3. 过个写原创教程的瘾。

作为一个非常喜欢自定义却技术渣的非专业人士,从进入独立博客圈玩WordPress开始到今天终于能在Bitcron写主题,一路上得到很多大神的帮助。今天便是我回馈社会的闪光时刻!不过我毕竟不是专业的,所写内容也只是个人理解,所以如果有什么错误或者表意不明的地方,敬请体谅、指正和补充。另外想对初来乍到Bitcron的孩纸们说一句,我也是走着野路子过来的,所以这个教程会尽量写得平易近人,让你们在魔改的路上少绕点弯。

前端和后端

在写主题之前先了解一下网站的运行逻辑会有很大帮助。一个网站可以顺利工作离不开两个部分——前端(front-end)和后端(back-end)。顾名思义,前端就是在你面前你可以看见的部分,主要负责跟网站使用者的交流;而后端则是在你看不见的背后努力分析数据做着运算,为整个网站提供最核心的技术支撑。你可以简单粗暴地理解为前台和后勤:如果没有前台,你可能很难跟后勤沟通;但如果没有后勤,即使前台明白你的所有需求也没法给到实质性的帮助。所以前端和后端是相辅相成、缺一不可的(好教科书式的总结)

网站有很多类型,比如企业网站、博客、论坛等。每种网站的功能各不相同,但介于大部分想要魔改主题的朋友们的网站都是博客,所以这里只讨论博客。(以后有机会再开脑洞拓展一下Bitcron的其他用法。)而在博客类型的网站中,可以简单理解后端为博客系统、前端为博客主题。所以想要制作主题,需要对系统有一定的认识,同时熟悉主题写法。

主题

主题(Theme)就像一件「衣服」。好比文章集结成书需要编辑人员排版印刷,网络上的文字要得到传播,很大程度上依靠的是这个网站的外观和交互。微信公众号的文章因为在手机上的易读性被更大程度地转载,而那样的排版、字号选择、文字颜色等都归主题掌管。

给网站「做衣服」一般需要有HTML、CSS和一部分JS知识。简单说来HTML就是「这件衣服」的版式,它决定了结构;而CSS则是各种不同材质或者颜色的布料,它决定了显示样式;JS便是富有动感的设计,比如裙摆,它为整个网站开了挂,使之更加生动。其实这些并不难,我就是在W3Schools上自学的HTML和CSS,而JS主要靠搜索引擎。

Bitcron

Bitcron是一个聪明的系统,它采用的是改良过的Jade语法,融合了前后端的写法。如果对Jade语法不熟悉也没关系,网上很多在线转换工具,比如我最常用的是HTML2Jade。另外,懂得Jinja语法可以延伸出更多技能,看Bitcron官方文档也更有收获。总而言之,制作Bitcron主题需要一定的HTML、CSS和一些JS知识(前端),并且熟悉Bitcron的API(后端)。但我前面也说过,这个系列教程是面向初学者的,所以接下来的文章里我会列举实例进行讲解,让大家从「看懂」到「修改」再到「创作」,一步步实现主题制作。多亏了Bitcron的简洁,核心代码片段就那些,很容易掌握,反正难得我也不会[捂脸],所以不用过分担心。

Bitcron的主题模板文件主要有以下几个,其中后缀为.jade的文件控制的是页面结构,而后缀为.scss的文件则是CSS文件,控制页面风格。这些文件必须放置于根目录下的template文件夹里才会生效。

有些可以合并,有些不需要的可以不用,有些特殊的可以自己添加。而「网站所有的URL都是通过模板的文件路径决定的」(URL匹配规则),所以放置于template文件夹内的archive文件夹内的2017.jade所对应的网址则是网站域名/archive/2017。反过来说,如果想要自定义一个网站域名/search页面,在template文件夹中放入search.jade便可。也因此上面列举的模板文件名称并不是强制的,只是在博客界大家约定俗称的,比如分类页面对应网站域名/categories,如果你想要独树一帜,使用网站域名/cats也并无不可。另外简单的页面不需要这么复杂的自定义,像写文章一样写一篇.md文档,自定义URL为比如about或者message,那么关于页面网站域名/about或留言簿网站域名/message就诞生了。

终于写完背景介绍了,接下来就进入各个专题吧——将在日后逐一更新。

教程系列文章

特别鸣谢

EOF
241°
Jade文档的基本写法
点击加载Disqus