logo of Shuibaco

Bitcron主题制作系列教程

2017. / 1,770字 / 1,722阅 / 0评

这是一个面向初学者的从零开始系列——《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就诞生了。

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

教程系列文章

特别鸣谢

1,060°
Jade文档的基本写法
Comments
Write a Comment
点击加载Disqus
↾